Skip to content
Permalink
Browse files

Accessibility: Improve and modernize user interface controls: Improve…

… the buttons active CSS class.

- improves the buttons `.active` CSS class for buttons that need to be styled as "pressed"
- update the alternate color schemes `.active` CSS class accordingly
- improves a few icons colors in the alternate color schemes

See #34904.


git-svn-id: https://develop.svn.wordpress.org/trunk@46423 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information...
afercia committed Oct 7, 2019
1 parent 4848b1e commit ae8bef64190db1d1275c2c373ca6293936addfa6
Showing with 49 additions and 9 deletions.
  1. +14 −1 src/wp-admin/css/colors/_admin.scss
  2. +10 −3 src/wp-admin/css/colors/_mixins.scss
  3. +25 −5 src/wp-includes/css/buttons.css
@@ -28,7 +28,7 @@ a {
.curtime #timestamp:before,
#post-body .misc-pub-revisions:before,
span.wp-media-buttons-icon:before {
color: $link-focus;
color: currentColor;
}


@@ -99,6 +99,19 @@ textarea:focus {
box-shadow: 0 0 0 1px $button-color;
}

.button:active {
background: darken( $button-color, 5% );
border-color: darken( $button-color, 5% );
}

.button.active,
.button.active:focus,
.button.active:hover {
border-color: darken( $button-color, 5% );
color: darken( $button-color, 5% );
box-shadow: inset 0 2px 5px -3px darken( $button-color, 5% );
}

.button-primary {
@include button( $button-color );
}
@@ -20,12 +20,19 @@
0 0 0 3px $button-color;
}

&:active,
&:active {
background: darken( $button-color, 5% );
border-color: darken( $button-color, 5% );
color: $text-color;
}

&.active,
&.active:focus,
&.active:hover {
background: darken( $button-color, 5% );
border-color: darken( $button-color, 5% );
background: $button-color;
color: $text-color;
border-color: darken( $button-color, 15% );
box-shadow: inset 0 2px 5px -3px darken( $button-color, 50% );
}

&[disabled],
@@ -146,18 +146,28 @@ TABLE OF CONTENTS:
outline-offset: 0;
}

.wp-core-ui .button.active,
.wp-core-ui .button.active:hover,
/* :active state */
.wp-core-ui .button:active,
.wp-core-ui .button-secondary:active {
background: #f3f5f6;
border-color: #7e8993;
box-shadow: none;
}

/* pressed state e.g. a selected setting */
.wp-core-ui .button.active,
.wp-core-ui .button.active:hover {
background-color: #e2e4e7;
color: #00669b;
border-color: #016087;
box-shadow: inset 0 2px 5px -3px #016087;
}

.wp-core-ui .button.active:focus {
border-color: #7e8993;
box-shadow: 0 0 0 1px #7e8993;
border-color: #007cba;
box-shadow:
inset 0 2px 5px -3px #016087,
0 0 0 1px #007cba;
}

.wp-core-ui .button[disabled],
@@ -258,6 +268,7 @@ TABLE OF CONTENTS:
background: #00669b;
border-color: #00669b;
box-shadow: none;
color: #fff;
}

.wp-core-ui .button-primary[disabled],
@@ -307,10 +318,19 @@ TABLE OF CONTENTS:
z-index: 1;
}

/* pressed state e.g. a selected setting */
.wp-core-ui .button-group > .button.active {
background-color: #e2e4e7;
box-shadow: inset 0 1px 0 0 #999;
color: #00669b;
border-color: #016087;
box-shadow: inset 0 2px 5px -3px #016087;
}

.wp-core-ui .button-group > .button.active:focus {
border-color: #007cba;
box-shadow:
inset 0 2px 5px -3px #016087,
0 0 0 1px #007cba;
}

/* ----------------------------------------------------------------------------

0 comments on commit ae8bef6

Please sign in to comment.
You can’t perform that action at this time.