Skip to content

Commit

Permalink
Better focus styling for buttons and button groups. props mattheu, av…
Browse files Browse the repository at this point in the history 
…ryl, 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
  • Loading branch information
@helen
helen committed Aug 11, 2014
1 parent 134d92b commit 1ef1be8
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 34 deletions.
58 changes: 42 additions & 16 deletions wp-includes/css/buttons-rtl.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,8 @@ TABLE OF CONTENTS:
padding: 0 36px;
}

.wp-core-ui .button:active {
.wp-core-ui .button:active,
.wp-core-ui .button:focus {
outline: none;
}

Expand Down Expand Up @@ -126,8 +127,8 @@ TABLE OF CONTENTS:
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;
}

Expand All @@ -149,13 +150,16 @@ TABLE OF CONTENTS:
.wp-core-ui .button.focus,
.wp-core-ui .button:focus,
.wp-core-ui .button-secondary: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, .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:hover,
.wp-core-ui .button.active:focus,
.wp-core-ui .button:active,
.wp-core-ui .button-secondary:active {
background: #eee;
Expand All @@ -165,6 +169,17 @@ TABLE OF CONTENTS:
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,
Expand All @@ -188,8 +203,8 @@ TABLE OF CONTENTS:
.wp-core-ui .button-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;
}
Expand All @@ -200,16 +215,22 @@ TABLE OF CONTENTS:
.wp-core-ui .button-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;
}

.wp-core-ui .button-primary.focus,
.wp-core-ui .button-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, .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,
Expand All @@ -218,9 +239,9 @@ TABLE OF CONTENTS:
.wp-core-ui .button-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;
}

Expand All @@ -233,7 +254,7 @@ TABLE OF CONTENTS:
border-color: #1b607f !important;
-webkit-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;
}

Expand Down Expand Up @@ -275,6 +296,11 @@ TABLE OF CONTENTS:
border-radius: 3px 0 0 3px;
}

.wp-core-ui .button-group > .button:focus {
position: relative;
z-index: 1;
}

/* ----------------------------------------------------------------------------
5.0 - Responsive Button Styles
---------------------------------------------------------------------------- */
Expand Down
2 changes: 1 addition & 1 deletion wp-includes/css/buttons-rtl.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

58 changes: 42 additions & 16 deletions wp-includes/css/buttons.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,8 @@ TABLE OF CONTENTS:
padding: 0 36px;
}

.wp-core-ui .button:active {
.wp-core-ui .button:active,
.wp-core-ui .button:focus {
outline: none;
}

Expand Down Expand Up @@ -126,8 +127,8 @@ TABLE OF CONTENTS:
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;
}

Expand All @@ -149,13 +150,16 @@ TABLE OF CONTENTS:
.wp-core-ui .button.focus,
.wp-core-ui .button:focus,
.wp-core-ui .button-secondary: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, .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:hover,
.wp-core-ui .button.active:focus,
.wp-core-ui .button:active,
.wp-core-ui .button-secondary:active {
background: #eee;
Expand All @@ -165,6 +169,17 @@ TABLE OF CONTENTS:
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,
Expand All @@ -188,8 +203,8 @@ TABLE OF CONTENTS:
.wp-core-ui .button-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;
}
Expand All @@ -200,16 +215,22 @@ TABLE OF CONTENTS:
.wp-core-ui .button-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;
}

.wp-core-ui .button-primary.focus,
.wp-core-ui .button-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, .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,
Expand All @@ -218,9 +239,9 @@ TABLE OF CONTENTS:
.wp-core-ui .button-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;
}

Expand All @@ -233,7 +254,7 @@ TABLE OF CONTENTS:
border-color: #1b607f !important;
-webkit-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;
}

Expand Down Expand Up @@ -275,6 +296,11 @@ TABLE OF CONTENTS:
border-radius: 0 3px 3px 0;
}

.wp-core-ui .button-group > .button:focus {
position: relative;
z-index: 1;
}

/* ----------------------------------------------------------------------------
5.0 - Responsive Button Styles
---------------------------------------------------------------------------- */
Expand Down
Loading

0 comments on commit 1ef1be8

Please sign in to comment.