sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
This commit is contained in:
Helen Hou-Sandi 2014-08-26 05:16:14 +00:00
parent c88c4d4f21
commit 16e9426675
7 changed files with 78 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/wp-admin/css/color-picker.css
View File

@ -47,13 +47,15 @@
box-shadow: inset 0 1px 0 #fff; box-shadow: inset 0 1px 0 #fff;
} }
.wp-color-result:hover { .wp-color-result:hover,
.wp-color-result:focus {
background: #fafafa; background: #fafafa;
border-color: #999; border-color: #999;
color: #222; color: #222;
} }
.wp-color-result:hover:after { .wp-color-result:hover:after,
.wp-color-result:focus:after {
color: #222; color: #222;
border-color: #aaa; border-color: #aaa;
border-left: 1px solid #999; border-left: 1px solid #999;
@ -73,13 +75,12 @@
} }
.wp-color-result:focus { .wp-color-result:focus {
border-color: #888; -webkit-box-shadow:
-webkit-box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 ); 0 0 0 1px #5b9dd9,
box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 ); 0 0 2px 1px rgba( 30, 140, 190, 0.8 );
} box-shadow:
0 0 0 1px #5b9dd9,
.wp-color-result:focus:after { 0 0 2px 1px rgba( 30, 140, 190, 0.8 );
border-color: #888;
} }
.wp-picker-open + .wp-picker-input-wrap { .wp-picker-open + .wp-picker-input-wrap {

12
src/wp-admin/css/colors/_mixins.scss
View File

@ -13,14 +13,22 @@
background: darken( $button-color, 5% ); background: darken( $button-color, 5% );
border-color: darken( $button-color, 15% ); border-color: darken( $button-color, 15% );
color: $text-color; 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 { &:active {
background: darken( $button-color, 10% ); background: darken( $button-color, 10% );
border-color: darken( $button-color, 15% ); border-color: darken( $button-color, 15% );
color: $text-color; 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], &[disabled],

6
src/wp-admin/css/common.css
View File

@ -1382,12 +1382,6 @@ form.upgrade .hint {
color: #333; 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 { #screen-meta-links a.show-settings {
display: block; display: block;
font-size: 13px; font-size: 13px;

6
src/wp-admin/css/themes.css
View File

@ -188,13 +188,17 @@
-webkit-transition: opacity 0.1s ease-in-out; -webkit-transition: opacity 0.1s ease-in-out;
transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out;
} }
.theme-browser .theme:focus { .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 { .theme-browser .theme:focus .more-details {
opacity: 1; opacity: 1;
} }
/* Current theme needs to have its action always on view */ /* Current theme needs to have its action always on view */
.theme-browser .theme.active:focus .theme-actions { .theme-browser .theme.active:focus .theme-actions {
display: block; display: block;

2
src/wp-admin/js/color-picker.js
View File

@ -120,7 +120,7 @@
}); });
}, },
open: function() { open: function() {
this.element.show().iris( 'toggle' ); this.element.show().iris( 'toggle' ).focus();
this.button.removeClass( 'hidden' ); this.button.removeClass( 'hidden' );
this.toggler.addClass( 'wp-picker-open' ); this.toggler.addClass( 'wp-picker-open' );
$( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close ); $( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close );

49
src/wp-includes/css/editor.css
View File

@ -414,8 +414,8 @@ div.mce-menu .mce-menu-item-sep,
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
white-space: nowrap; white-space: nowrap;
-webkit-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,.08); box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
background-image: none; background-image: none;
} }
@ -427,15 +427,20 @@ div.mce-menu .mce-menu-item-sep,
padding: 0; padding: 0;
} }
.mce-window .mce-btn:hover { .mce-window .mce-btn:hover,
.mce-window .mce-btn:focus {
background: #fafafa; background: #fafafa;
border-color: #999; border-color: #999;
color: #222; color: #222;
} }
.mce-window .mce-btn:focus { .mce-window .mce-btn:focus {
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2); -webkit-box-shadow:
box-shadow: 1px 1px 1px rgba(0,0,0,.2); 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 { .mce-window .mce-btn:active {
@ -449,6 +454,7 @@ div.mce-menu .mce-menu-item-sep,
.mce-window .mce-btn.mce-disabled { .mce-window .mce-btn.mce-disabled {
color: #aaa; color: #aaa;
border-color: #ddd; border-color: #ddd;
background: #f7f7f7;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
@ -458,39 +464,50 @@ div.mce-menu .mce-menu-item-sep,
.mce-window .mce-btn.mce-primary { .mce-window .mce-btn.mce-primary {
background: #2ea2cc; background: #2ea2cc;
border-color: #0074a2; border-color: #0074a2;
-webkit-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,.15); box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 );
color: #fff; color: #fff;
text-decoration: none; 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; background: #1e8cbe;
border-color: #0074a2; border-color: #0074a2;
-webkit-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); box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
color: #fff; color: #fff;
} }
.mce-window .mce-btn.mce-primary:focus { .mce-window .mce-btn.mce-primary:focus {
border-color: #0e3950; 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); -webkit-box-shadow:
box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4); 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 { .mce-window .mce-btn.mce-primary:active {
background: #1b7aa6; background: #1b7aa6;
border-color: #005684; border-color: #005684;
color: rgba(255,255,255,0.95); color: rgba( 255, 255, 255, 0.95 );
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); -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); box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
vertical-align: top;
} }
.mce-window .mce-btn.mce-primary.mce-disabled { .mce-window .mce-btn.mce-primary.mce-disabled {
color: #94cde7; color: #94cde7;
background: #298cba; background: #298cba;
border-color: #1b607f; 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 { .mce-menubtn.mce-fixed-width button span {

21
src/wp-includes/css/jquery-ui-dialog.css
View File

@ -181,11 +181,16 @@
color: #555; color: #555;
border-color: #cccccc; border-color: #cccccc;
background: #f7f7f7; background: #f7f7f7;
-webkit-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,.08); box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
vertical-align: top; vertical-align: top;
} }
.ui-button:active,
.ui-button:focus {
outline: none;
}
/* Remove the dotted border on :focus and the extra padding in Firefox */ /* Remove the dotted border on :focus and the extra padding in Firefox */
.ui-button::-moz-focus-inner { .ui-button::-moz-focus-inner {
border-width: 1px 0; border-width: 1px 0;
@ -194,15 +199,20 @@
padding: 0; padding: 0;
} }
.ui-button:hover { .ui-button:hover,
.ui-button:focus {
background: #fafafa; background: #fafafa;
border-color: #999; border-color: #999;
color: #222; color: #222;
} }
.ui-button:focus { .ui-button:focus {
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2); -webkit-box-shadow:
box-shadow: 1px 1px 1px rgba(0,0,0,.2); 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 { .ui-button:active {
@ -211,7 +221,6 @@
color: #333; color: #333;
-webkit-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 ); box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
outline: none;
} }
.ui-button[disabled], .ui-button[disabled],