Changeset 26993

Timestamp:

01/21/2014 09:26:31 PM (11 years ago)

Author:

iammattthomas

Message:

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.

Location:

trunk/src

Files:

• wp-admin/css/colors/_mixins.scss (modified) (2 diffs)
• wp-includes/css/buttons.css (modified) (5 diffs)

trunk/src/wp-admin/css/colors/_mixins.scss

@@ -12 +12 @@
     &:hover,
     &:focus {
-        background: darken( $button-color, 8% );
+        background: darken( $button-color, % );
         border-color: darken( $button-color, 15% );
         color: $text-color;
@@ -20 +20 @@
 
     &:active {
-        background: darken( $button-color, 8% );
+        background: darken( $button-color, % );
         border-color: darken( $button-color, 15% );
         color: $text-color;

trunk/src/wp-includes/css/buttons.css

@@ -164 +164 @@
 }
 
-/* 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,
@@ -217 +212 @@
 .wp-core-ui .button-primary.active:focus,
 .wp-core-ui .button-primary:active {
-    background: #1e8cbe;
+    background: #1;
     border-color: #005684;
     color: rgba(255,255,255,0.95);
@@ -223 +218 @@
     box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
     vertical-align: top;
-}
-
-/* this creates an inset effect on the text */
-.wp-core-ui .button-primary:active {
-    padding-top: 1px;
 }
 
@@ -297 +287 @@
     }
     
-    /* 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;
@@ -344 +323 @@
     }
     
-    .interim-login .button.button-large:active {
-        padding-top: 1px;
-    }
-}
+}