WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Better focus styling for buttons and button groups. props mattheu, avryl, celloexpressions. fixes #27826. see #28267. 

Built from https://develop.svn.wordpress.org/trunk@29466


git-svn-id: http://core.svn.wordpress.org/trunk@29244 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Helen Hou-Sandí 2014-08-11 18:21:16 +00:00
parent 134d92bfea
commit 1ef1be8d30
4 changed files with 86 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
wp-includes/css/buttons-rtl.css
View File

@ -95,7 +95,8 @@ TABLE OF CONTENTS:
padding: 0 36px; padding: 0 36px;
} }
.wp-core-ui .button:active { .wp-core-ui .button:active,
.wp-core-ui .button:focus {
outline: none; outline: none;
} }
@ -126,8 +127,8 @@ TABLE OF CONTENTS:
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;
} }
@ -149,13 +150,16 @@ TABLE OF CONTENTS:
.wp-core-ui .button.focus, .wp-core-ui .button.focus,
.wp-core-ui .button:focus, .wp-core-ui .button:focus,
.wp-core-ui .button-secondary:focus { .wp-core-ui .button-secondary: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, .8);
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
} }
.wp-core-ui .button.active, .wp-core-ui .button.active,
.wp-core-ui .button.active:hover, .wp-core-ui .button.active:hover,
.wp-core-ui .button.active:focus,
.wp-core-ui .button:active, .wp-core-ui .button:active,
.wp-core-ui .button-secondary:active { .wp-core-ui .button-secondary:active {
background: #eee; background: #eee;
@ -165,6 +169,17 @@ TABLE OF CONTENTS:
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 );
} }
.wp-core-ui .button.active:focus {
-webkit-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);
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);
}
.wp-core-ui .button[disabled], .wp-core-ui .button[disabled],
.wp-core-ui .button:disabled, .wp-core-ui .button:disabled,
.wp-core-ui .button.disabled, .wp-core-ui .button.disabled,
@ -188,8 +203,8 @@ TABLE OF CONTENTS:
.wp-core-ui .button-primary { .wp-core-ui .button-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;
} }
@ -200,16 +215,22 @@ TABLE OF CONTENTS:
.wp-core-ui .button-primary:focus { .wp-core-ui .button-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;
} }
.wp-core-ui .button-primary.focus, .wp-core-ui .button-primary.focus,
.wp-core-ui .button-primary:focus { .wp-core-ui .button-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, .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, .8);
} }
.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active,
@ -218,9 +239,9 @@ TABLE OF CONTENTS:
.wp-core-ui .button-primary:active { .wp-core-ui .button-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; vertical-align: top;
} }
@ -233,7 +254,7 @@ TABLE OF CONTENTS:
border-color: #1b607f !important; border-color: #1b607f !important;
-webkit-box-shadow: none !important; -webkit-box-shadow: none !important;
box-shadow: none !important; box-shadow: none !important;
text-shadow: 0 -1px 0 rgba(0,0,0,0.1) !important; text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 ) !important;
cursor: default; cursor: default;
} }
@ -275,6 +296,11 @@ TABLE OF CONTENTS:
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
} }
.wp-core-ui .button-group > .button:focus {
position: relative;
z-index: 1;
}
/* ---------------------------------------------------------------------------- /* ----------------------------------------------------------------------------
5.0 - Responsive Button Styles 5.0 - Responsive Button Styles
---------------------------------------------------------------------------- */ ---------------------------------------------------------------------------- */

2
wp-includes/css/buttons-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

58
wp-includes/css/buttons.css
View File

@ -95,7 +95,8 @@ TABLE OF CONTENTS:
padding: 0 36px; padding: 0 36px;
} }
.wp-core-ui .button:active { .wp-core-ui .button:active,
.wp-core-ui .button:focus {
outline: none; outline: none;
} }
@ -126,8 +127,8 @@ TABLE OF CONTENTS:
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;
} }
@ -149,13 +150,16 @@ TABLE OF CONTENTS:
.wp-core-ui .button.focus, .wp-core-ui .button.focus,
.wp-core-ui .button:focus, .wp-core-ui .button:focus,
.wp-core-ui .button-secondary:focus { .wp-core-ui .button-secondary: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, .8);
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
} }
.wp-core-ui .button.active, .wp-core-ui .button.active,
.wp-core-ui .button.active:hover, .wp-core-ui .button.active:hover,
.wp-core-ui .button.active:focus,
.wp-core-ui .button:active, .wp-core-ui .button:active,
.wp-core-ui .button-secondary:active { .wp-core-ui .button-secondary:active {
background: #eee; background: #eee;
@ -165,6 +169,17 @@ TABLE OF CONTENTS:
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 );
} }
.wp-core-ui .button.active:focus {
-webkit-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);
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);
}
.wp-core-ui .button[disabled], .wp-core-ui .button[disabled],
.wp-core-ui .button:disabled, .wp-core-ui .button:disabled,
.wp-core-ui .button.disabled, .wp-core-ui .button.disabled,
@ -188,8 +203,8 @@ TABLE OF CONTENTS:
.wp-core-ui .button-primary { .wp-core-ui .button-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;
} }
@ -200,16 +215,22 @@ TABLE OF CONTENTS:
.wp-core-ui .button-primary:focus { .wp-core-ui .button-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;
} }
.wp-core-ui .button-primary.focus, .wp-core-ui .button-primary.focus,
.wp-core-ui .button-primary:focus { .wp-core-ui .button-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, .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, .8);
} }
.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active,
@ -218,9 +239,9 @@ TABLE OF CONTENTS:
.wp-core-ui .button-primary:active { .wp-core-ui .button-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; vertical-align: top;
} }
@ -233,7 +254,7 @@ TABLE OF CONTENTS:
border-color: #1b607f !important; border-color: #1b607f !important;
-webkit-box-shadow: none !important; -webkit-box-shadow: none !important;
box-shadow: none !important; box-shadow: none !important;
text-shadow: 0 -1px 0 rgba(0,0,0,0.1) !important; text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 ) !important;
cursor: default; cursor: default;
} }
@ -275,6 +296,11 @@ TABLE OF CONTENTS:
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
} }
.wp-core-ui .button-group > .button:focus {
position: relative;
z-index: 1;
}
/* ---------------------------------------------------------------------------- /* ----------------------------------------------------------------------------
5.0 - Responsive Button Styles 5.0 - Responsive Button Styles
---------------------------------------------------------------------------- */ ---------------------------------------------------------------------------- */

2
wp-includes/css/buttons.min.css vendored
View File

File diff suppressed because one or more lines are too long