From 16e9426675519c4a2412b0c2f77500494587e78c Mon Sep 17 00:00:00 2001 From: Helen Hou-Sandi Date: Tue, 26 Aug 2014 05:16:14 +0000 Subject: [PATCH] Focus styling: bring the blue glow to more places. Handles color picker, theme browser, help/screen options, TinyMCE dialog buttons, jQuery UI dialog buttons, and buttons in color schemes. props avryl, celloexpressions. fixes #28267. git-svn-id: https://develop.svn.wordpress.org/trunk@29616 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/color-picker.css | 19 +++++---- src/wp-admin/css/colors/_mixins.scss | 12 +++++- src/wp-admin/css/common.css | 6 --- src/wp-admin/css/themes.css | 6 ++- src/wp-admin/js/color-picker.js | 2 +- src/wp-includes/css/editor.css | 53 ++++++++++++++++-------- src/wp-includes/css/jquery-ui-dialog.css | 25 +++++++---- 7 files changed, 78 insertions(+), 45 deletions(-) diff --git a/src/wp-admin/css/color-picker.css b/src/wp-admin/css/color-picker.css index 1d00d96aa1..4229402a61 100644 --- a/src/wp-admin/css/color-picker.css +++ b/src/wp-admin/css/color-picker.css @@ -47,13 +47,15 @@ box-shadow: inset 0 1px 0 #fff; } -.wp-color-result:hover { +.wp-color-result:hover, +.wp-color-result:focus { background: #fafafa; border-color: #999; color: #222; } -.wp-color-result:hover:after { +.wp-color-result:hover:after, +.wp-color-result:focus:after { color: #222; border-color: #aaa; border-left: 1px solid #999; @@ -73,13 +75,12 @@ } .wp-color-result:focus { - border-color: #888; - -webkit-box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 ); - box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 ); -} - -.wp-color-result:focus:after { - border-color: #888; + -webkit-box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba( 30, 140, 190, 0.8 ); + box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba( 30, 140, 190, 0.8 ); } .wp-picker-open + .wp-picker-input-wrap { diff --git a/src/wp-admin/css/colors/_mixins.scss b/src/wp-admin/css/colors/_mixins.scss index 14db8a5017..cfed94c191 100644 --- a/src/wp-admin/css/colors/_mixins.scss +++ b/src/wp-admin/css/colors/_mixins.scss @@ -13,14 +13,22 @@ background: darken( $button-color, 5% ); border-color: darken( $button-color, 15% ); color: $text-color; - box-shadow: inset 0 1px 0 lighten( $button-color, 10% ), 0 1px 0 rgba(0,0,0,.15); + box-shadow: inset 0 1px 0 lighten( $button-color, 10% ), + } + + &:focus { + box-shadow: inset 0 1px 0 lighten( $button-color, 10% ), + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba( 30, 140, 190, .8 ); } &:active { background: darken( $button-color, 10% ); border-color: darken( $button-color, 15% ); color: $text-color; - box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); + box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ), + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba( 30, 140, 190, .8 ); } &[disabled], diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 39e162a708..0eb22d4860 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -1382,12 +1382,6 @@ form.upgrade .hint { color: #333; } -#screen-meta-links a:focus { - border-color: #aaa; - -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.15); - box-shadow: 0 2px 3px rgba(0,0,0,0.15); -} - #screen-meta-links a.show-settings { display: block; font-size: 13px; diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css index 1ee056ab02..77ab5be359 100644 --- a/src/wp-admin/css/themes.css +++ b/src/wp-admin/css/themes.css @@ -188,13 +188,17 @@ -webkit-transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out; } + .theme-browser .theme:focus { - outline: 1px dotted #222; + border-color: #5b9dd9; + -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 ); + box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 ); } .theme-browser .theme:focus .more-details { opacity: 1; } + /* Current theme needs to have its action always on view */ .theme-browser .theme.active:focus .theme-actions { display: block; diff --git a/src/wp-admin/js/color-picker.js b/src/wp-admin/js/color-picker.js index 876cdc42ca..0991c3e2df 100644 --- a/src/wp-admin/js/color-picker.js +++ b/src/wp-admin/js/color-picker.js @@ -120,7 +120,7 @@ }); }, open: function() { - this.element.show().iris( 'toggle' ); + this.element.show().iris( 'toggle' ).focus(); this.button.removeClass( 'hidden' ); this.toggler.addClass( 'wp-picker-open' ); $( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close ); diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css index 084f606ee6..b05def96fe 100644 --- a/src/wp-includes/css/editor.css +++ b/src/wp-includes/css/editor.css @@ -414,8 +414,8 @@ div.mce-menu .mce-menu-item-sep, -webkit-border-radius: 3px; border-radius: 3px; white-space: nowrap; - -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08); - box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08); + -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 ); + box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 ); background-image: none; } @@ -427,28 +427,34 @@ div.mce-menu .mce-menu-item-sep, padding: 0; } -.mce-window .mce-btn:hover { +.mce-window .mce-btn:hover, +.mce-window .mce-btn:focus { background: #fafafa; border-color: #999; color: #222; } .mce-window .mce-btn:focus { - -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2); - box-shadow: 1px 1px 1px rgba(0,0,0,.2); + -webkit-box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba( 30, 140, 190, 0.8 ); + box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba( 30, 140, 190, 0.8 ); } .mce-window .mce-btn:active { background: #eee; border-color: #999; color: #333; - -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); - box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); + -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); + box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); } .mce-window .mce-btn.mce-disabled { color: #aaa; border-color: #ddd; + background: #f7f7f7; -webkit-box-shadow: none; box-shadow: none; text-shadow: 0 1px 0 #fff; @@ -458,39 +464,50 @@ div.mce-menu .mce-menu-item-sep, .mce-window .mce-btn.mce-primary { background: #2ea2cc; border-color: #0074a2; - -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5), 0 1px 0 rgba(0,0,0,.15); - box-shadow: inset 0 1px 0 rgba(120,200,230,0.5), 0 1px 0 rgba(0,0,0,.15); + -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5), 0 1px 0 rgba( 0, 0, 0, 0.15 ); + box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 ); color: #fff; text-decoration: none; } -.mce-window .mce-btn.mce-primary:hover { +.mce-window .mce-btn.mce-primary:hover, +.mce-window .mce-btn.mce-primary:focus { background: #1e8cbe; border-color: #0074a2; - -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6); - box-shadow: inset 0 1px 0 rgba(120,200,230,0.6); + -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 ); + box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 ); color: #fff; } .mce-window .mce-btn.mce-primary:focus { border-color: #0e3950; - -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4); - box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4); + -webkit-box-shadow: + inset 0 1px 0 rgba( 120, 200, 230, 0.6 ), + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba( 30, 140, 190, 0.8 ); + box-shadow: + inset 0 1px 0 rgba( 120, 200, 230, 0.6 ), + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba( 30, 140, 190, 0.8 ); } .mce-window .mce-btn.mce-primary:active { background: #1b7aa6; border-color: #005684; - color: rgba(255,255,255,0.95); - -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); - box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); + color: rgba( 255, 255, 255, 0.95 ); + -webkit-box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 ); + box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 ); + vertical-align: top; } .mce-window .mce-btn.mce-primary.mce-disabled { color: #94cde7; background: #298cba; border-color: #1b607f; - text-shadow: 0 -1px 0 rgba(0,0,0,0.1); + -webkit-box-shadow: none; + box-shadow: none; + text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 ); + cursor: default; } .mce-menubtn.mce-fixed-width button span { diff --git a/src/wp-includes/css/jquery-ui-dialog.css b/src/wp-includes/css/jquery-ui-dialog.css index 94c655ff32..78e9741652 100644 --- a/src/wp-includes/css/jquery-ui-dialog.css +++ b/src/wp-includes/css/jquery-ui-dialog.css @@ -181,11 +181,16 @@ color: #555; border-color: #cccccc; background: #f7f7f7; - -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08); - box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08); + -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 ); + box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 ); vertical-align: top; } +.ui-button:active, +.ui-button:focus { + outline: none; +} + /* Remove the dotted border on :focus and the extra padding in Firefox */ .ui-button::-moz-focus-inner { border-width: 1px 0; @@ -194,24 +199,28 @@ padding: 0; } -.ui-button:hover { +.ui-button:hover, +.ui-button:focus { background: #fafafa; border-color: #999; color: #222; } .ui-button:focus { - -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2); - box-shadow: 1px 1px 1px rgba(0,0,0,.2); + -webkit-box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba( 30, 140, 190, 0.8 ); + box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba( 30, 140, 190, 0.8 ); } .ui-button:active { background: #eee; border-color: #999; color: #333; - -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); - box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); - outline: none; + -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); + box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); } .ui-button[disabled],