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;
}
.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 {

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

@ -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],

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

@ -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;

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

@ -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;

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

@ -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 );

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

@ -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 {

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

@ -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],