Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-09-26 06:13:07 +02:00
Code Issues Projects 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.

Browse Source 
See #26700, props johnbillion.


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


git-svn-id: http://core.svn.wordpress.org/trunk@26870 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Matt Thomas 2014-01-21 21:27:12 +00:00
parent 18b8c717f2
commit 9f4f560258
33 changed files with 48 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

4
wp-admin/css/colors/blue/colors-rtl.css
View File

@ -33,13 +33,13 @@ input[type=radio]:checked:before {
-webkit-box-shadow: inset 0 1px 0 #ecc88a, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #ecc88a, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
background: #db9825;
background: #dd9f32;
border-color: #bd831f;
color: white;
-webkit-box-shadow: inset 0 1px 0 #e8be74, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #e8be74, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:active {
background: #db9825;
background: #d39323;
border-color: #bd831f;
color: white;
-webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);

2
wp-admin/css/colors/blue/colors-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
wp-admin/css/colors/blue/colors.css
View File

@ -33,13 +33,13 @@ input[type=radio]:checked:before {
-webkit-box-shadow: inset 0 1px 0 #ecc88a, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #ecc88a, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
background: #db9825;
background: #dd9f32;
border-color: #bd831f;
color: white;
-webkit-box-shadow: inset 0 1px 0 #e8be74, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #e8be74, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:active {
background: #db9825;
background: #d39323;
border-color: #bd831f;
color: white;
-webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);

2
wp-admin/css/colors/blue/colors.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
wp-admin/css/colors/coffee/colors-rtl.css
View File

@ -33,13 +33,13 @@ input[type=radio]:checked:before {
-webkit-box-shadow: inset 0 1px 0 #e0cdbd, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #e0cdbd, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
background: #ba906d;
background: #bf9878;
border-color: #ae7d55;
color: white;
-webkit-box-shadow: inset 0 1px 0 #d7bfac, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #d7bfac, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:active {
background: #ba906d;
background: #b78a66;
border-color: #ae7d55;
color: white;
-webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);

2
wp-admin/css/colors/coffee/colors-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
wp-admin/css/colors/coffee/colors.css
View File

@ -33,13 +33,13 @@ input[type=radio]:checked:before {
-webkit-box-shadow: inset 0 1px 0 #e0cdbd, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #e0cdbd, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
background: #ba906d;
background: #bf9878;
border-color: #ae7d55;
color: white;
-webkit-box-shadow: inset 0 1px 0 #d7bfac, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #d7bfac, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:active {
background: #ba906d;
background: #b78a66;
border-color: #ae7d55;
color: white;
-webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);

2
wp-admin/css/colors/coffee/colors.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
wp-admin/css/colors/ectoplasm/colors-rtl.css
View File

@ -33,13 +33,13 @@ input[type=radio]:checked:before {
-webkit-box-shadow: inset 0 1px 0 #c0cd7b, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #c0cd7b, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
background: #89993a;
background: #93a43e;
border-color: #727f30;
color: white;
-webkit-box-shadow: inset 0 1px 0 #b7c669, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #b7c669, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:active {
background: #89993a;
background: #839237;
border-color: #727f30;
color: white;
-webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);

2
wp-admin/css/colors/ectoplasm/colors-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
wp-admin/css/colors/ectoplasm/colors.css
View File

@ -33,13 +33,13 @@ input[type=radio]:checked:before {
-webkit-box-shadow: inset 0 1px 0 #c0cd7b, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #c0cd7b, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
background: #89993a;
background: #93a43e;
border-color: #727f30;
color: white;
-webkit-box-shadow: inset 0 1px 0 #b7c669, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #b7c669, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:active {
background: #89993a;
background: #839237;
border-color: #727f30;
color: white;
-webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);

2
wp-admin/css/colors/ectoplasm/colors.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
wp-admin/css/colors/light/colors-rtl.css
View File

@ -33,13 +33,13 @@ input[type=radio]:checked:before {
-webkit-box-shadow: inset 0 1px 0 #22cffb, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #22cffb, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
background: #0384a4;
background: #0490b3;
border-color: #036881;
color: white;
-webkit-box-shadow: inset 0 1px 0 #09cafa, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #09cafa, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:active {
background: #0384a4;
background: #037c9a;
border-color: #036881;
color: white;
-webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);

2
wp-admin/css/colors/light/colors-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
wp-admin/css/colors/light/colors.css
View File

@ -33,13 +33,13 @@ input[type=radio]:checked:before {
-webkit-box-shadow: inset 0 1px 0 #22cffb, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #22cffb, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
background: #0384a4;
background: #0490b3;
border-color: #036881;
color: white;
-webkit-box-shadow: inset 0 1px 0 #09cafa, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #09cafa, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:active {
background: #0384a4;
background: #037c9a;
border-color: #036881;
color: white;
-webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);

2
wp-admin/css/colors/light/colors.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
wp-admin/css/colors/midnight/colors-rtl.css
View File

@ -33,13 +33,13 @@ input[type=radio]:checked:before {
-webkit-box-shadow: inset 0 1px 0 #ec8a85, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #ec8a85, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
background: #d92c23;
background: #dd362d;
border-color: #ba251e;
color: white;
-webkit-box-shadow: inset 0 1px 0 #e8756f, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #e8756f, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:active {
background: #d92c23;
background: #d02a21;
border-color: #ba251e;
color: white;
-webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);

2
wp-admin/css/colors/midnight/colors-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
wp-admin/css/colors/midnight/colors.css
View File

@ -33,13 +33,13 @@ input[type=radio]:checked:before {
-webkit-box-shadow: inset 0 1px 0 #ec8a85, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #ec8a85, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
background: #d92c23;
background: #dd362d;
border-color: #ba251e;
color: white;
-webkit-box-shadow: inset 0 1px 0 #e8756f, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #e8756f, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:active {
background: #d92c23;
background: #d02a21;
border-color: #ba251e;
color: white;
-webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);

2
wp-admin/css/colors/midnight/colors.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
wp-admin/css/colors/ocean/colors-rtl.css
View File

@ -33,13 +33,13 @@ input[type=radio]:checked:before {
-webkit-box-shadow: inset 0 1px 0 #cbdacc, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #cbdacc, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
background: #86a988;
background: #8faf91;
border-color: #719a74;
color: white;
-webkit-box-shadow: inset 0 1px 0 #bccfbd, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #bccfbd, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:active {
background: #86a988;
background: #80a583;
border-color: #719a74;
color: white;
-webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);

2
wp-admin/css/colors/ocean/colors-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
wp-admin/css/colors/ocean/colors.css
View File

@ -33,13 +33,13 @@ input[type=radio]:checked:before {
-webkit-box-shadow: inset 0 1px 0 #cbdacc, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #cbdacc, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
background: #86a988;
background: #8faf91;
border-color: #719a74;
color: white;
-webkit-box-shadow: inset 0 1px 0 #bccfbd, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #bccfbd, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:active {
background: #86a988;
background: #80a583;
border-color: #719a74;
color: white;
-webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);

2
wp-admin/css/colors/ocean/colors.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
wp-admin/css/colors/sunrise/colors-rtl.css
View File

@ -33,13 +33,13 @@ input[type=radio]:checked:before {
-webkit-box-shadow: inset 0 1px 0 #e8ab7c, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #e8ab7c, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
background: #cc6c23;
background: #d97326;
border-color: #ad5c1e;
color: white;
-webkit-box-shadow: inset 0 1px 0 #e59d66, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #e59d66, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:active {
background: #cc6c23;
background: #c36822;
border-color: #ad5c1e;
color: white;
-webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);

2
wp-admin/css/colors/sunrise/colors-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
wp-admin/css/colors/sunrise/colors.css
View File

@ -33,13 +33,13 @@ input[type=radio]:checked:before {
-webkit-box-shadow: inset 0 1px 0 #e8ab7c, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #e8ab7c, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
background: #cc6c23;
background: #d97326;
border-color: #ad5c1e;
color: white;
-webkit-box-shadow: inset 0 1px 0 #e59d66, 0 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 0 #e59d66, 0 1px 0 rgba(0, 0, 0, 0.15); }
.wp-core-ui .button-primary:active {
background: #cc6c23;
background: #c36822;
border-color: #ad5c1e;
color: white;
-webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);

2
wp-admin/css/colors/sunrise/colors.min.css vendored
View File

File diff suppressed because one or more lines are too long

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

@ -163,11 +163,6 @@ TABLE OF CONTENTS:
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-secondary[disabled],
@ -216,7 +211,7 @@ TABLE OF CONTENTS:
.wp-core-ui .button-primary.active:hover,
.wp-core-ui .button-primary.active:focus,
.wp-core-ui .button-primary:active {
background: #1e8cbe;
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);
@ -224,11 +219,6 @@ TABLE OF CONTENTS:
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 {
@ -296,17 +286,6 @@ TABLE OF CONTENTS:
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 {
padding: 0 10px 1px;
height: 24px;
@ -343,7 +322,4 @@ TABLE OF CONTENTS:
padding: 0 12px 2px;
}
.interim-login .button.button-large:active {
padding-top: 1px;
}
}

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

File diff suppressed because one or more lines are too long

26
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 );
}
/* 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-secondary[disabled],
@ -216,7 +211,7 @@ TABLE OF CONTENTS:
.wp-core-ui .button-primary.active:hover,
.wp-core-ui .button-primary.active:focus,
.wp-core-ui .button-primary:active {
background: #1e8cbe;
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);
@ -224,11 +219,6 @@ TABLE OF CONTENTS:
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 {
@ -296,17 +286,6 @@ TABLE OF CONTENTS:
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 {
padding: 0 10px 1px;
height: 24px;
@ -343,7 +322,4 @@ TABLE OF CONTENTS:
padding: 0 12px 2px;
}
.interim-login .button.button-large:active {
padding-top: 1px;
}
}

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

File diff suppressed because one or more lines are too long