From 275d589503649108e88de4682db16cec438dd7b4 Mon Sep 17 00:00:00 2001 From: Matt Thomas Date: Tue, 21 Jan 2014 21:26:31 +0000 Subject: [PATCH] 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 --- src/wp-admin/css/colors/_mixins.scss | 4 ++-- src/wp-includes/css/buttons.css | 26 +------------------------- 2 files changed, 3 insertions(+), 27 deletions(-) diff --git a/src/wp-admin/css/colors/_mixins.scss b/src/wp-admin/css/colors/_mixins.scss index 2792fa120d..3e64f8c517 100644 --- a/src/wp-admin/css/colors/_mixins.scss +++ b/src/wp-admin/css/colors/_mixins.scss @@ -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 ); diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css index 54ebd44623..c941133d53 100644 --- a/src/wp-includes/css/buttons.css +++ b/src/wp-includes/css/buttons.css @@ -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; - } }