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

Eliminate the 1px padding adjustment on active buttons because it creates an un-clickable dead zone 1px high and spanning the entire width of the button. Modify the background color of active buttons for better contrast to make the active state more obvious. 

See #26700, props johnbillion.



git-svn-id: https://develop.svn.wordpress.org/trunk@26993 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Matt Thomas 2014-01-21 21:26:31 +00:00
parent 2f60bcab82
commit 275d589503
2 changed files with 3 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,7 @@
&:hover, &:hover,
&:focus { &:focus {
background: darken( $button-color, 8% ); background: darken( $button-color, 5% );
border-color: darken( $button-color, 15% ); border-color: darken( $button-color, 15% );
color: $text-color; color: $text-color;
-webkit-box-shadow: inset 0 1px 0 lighten( $button-color, 10% ), 0 1px 0 rgba(0,0,0,.15); -webkit-box-shadow: inset 0 1px 0 lighten( $button-color, 10% ), 0 1px 0 rgba(0,0,0,.15);
@ -19,7 +19,7 @@
} }
&:active { &:active {
background: darken( $button-color, 8% ); background: darken( $button-color, 10% );
border-color: darken( $button-color, 15% ); border-color: darken( $button-color, 15% );
color: $text-color; color: $text-color;
-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 );

26
src/wp-includes/css/buttons.css
View File

@ -163,11 +163,6 @@ 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 );
} }
/* this creates an inset effect on the text */
.wp-core-ui .button:active {
padding-top: 1px;
}
.wp-core-ui .button[disabled], .wp-core-ui .button[disabled],
.wp-core-ui .button:disabled, .wp-core-ui .button:disabled,
.wp-core-ui .button-secondary[disabled], .wp-core-ui .button-secondary[disabled],
@ -216,7 +211,7 @@ TABLE OF CONTENTS:
.wp-core-ui .button-primary.active:hover, .wp-core-ui .button-primary.active:hover,
.wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:focus,
.wp-core-ui .button-primary:active { .wp-core-ui .button-primary:active {
background: #1e8cbe; 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);
@ -224,11 +219,6 @@ TABLE OF CONTENTS:
vertical-align: top; vertical-align: top;
} }
/* this creates an inset effect on the text */
.wp-core-ui .button-primary:active {
padding-top: 1px;
}
.wp-core-ui .button-primary[disabled], .wp-core-ui .button-primary[disabled],
.wp-core-ui .button-primary:disabled, .wp-core-ui .button-primary:disabled,
.wp-core-ui .button-primary-disabled { .wp-core-ui .button-primary-disabled {
@ -296,17 +286,6 @@ TABLE OF CONTENTS:
margin-bottom: 4px; margin-bottom: 4px;
} }
/* Adjust the padding that makes active button text looks inset to account for larger responsive buttons */
.wp-core-ui .button:active,
.wp-core-ui .button-large:active,
.wp-core-ui .button-small:active,
input#publish:active,
input#save-post:active,
a.preview:active {
padding-top: 11px;
padding-bottom: 9px;
}
#media-upload.wp-core-ui .button { #media-upload.wp-core-ui .button {
padding: 0 10px 1px; padding: 0 10px 1px;
height: 24px; height: 24px;
@ -343,7 +322,4 @@ TABLE OF CONTENTS:
padding: 0 12px 2px; padding: 0 12px 2px;
} }
.interim-login .button.button-large:active {
padding-top: 1px;
}
} }