WordPress.org

Make WordPress Core

Changeset 46423


Ignore:
Timestamp:
10/07/2019 06:45:45 PM (2 weeks ago)
Author:
afercia
Message:

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.

Location:
trunk/src
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/colors/_admin.scss

    r46344 r46423  
    2929#post-body .misc-pub-revisions:before,
    3030span.wp-media-buttons-icon:before {
    31     color: $link-focus;
     31    color: currentColor;
    3232}
    3333
     
    100100    }
    101101
     102    .button:active {
     103        background: darken( $button-color, 5% );
     104        border-color: darken( $button-color, 5% );
     105    }
     106
     107    .button.active,
     108    .button.active:focus,
     109    .button.active:hover {
     110        border-color: darken( $button-color, 5% );
     111        color: darken( $button-color, 5% );
     112        box-shadow: inset 0 2px 5px -3px darken( $button-color, 5% );
     113    }
     114
    102115    .button-primary {
    103116        @include button( $button-color );
  • trunk/src/wp-admin/css/colors/_mixins.scss

    r46241 r46423  
    2121    }
    2222
    23     &:active,
     23    &:active {
     24        background: darken( $button-color, 5% );
     25        border-color: darken( $button-color, 5% );
     26        color: $text-color;
     27    }
     28
    2429    &.active,
    2530    &.active:focus,
    2631    &.active:hover {
    27         background: darken( $button-color, 5% );
    28         border-color: darken( $button-color, 5% );
     32        background: $button-color;
     33        color: $text-color;
     34        border-color: darken( $button-color, 15% );
     35        box-shadow: inset 0 2px 5px -3px darken( $button-color, 50% );
    2936    }
    3037
  • trunk/src/wp-includes/css/buttons.css

    r46356 r46423  
    147147}
    148148
    149 .wp-core-ui .button.active,
    150 .wp-core-ui .button.active:hover,
     149/* :active state */
    151150.wp-core-ui .button:active,
    152151.wp-core-ui .button-secondary:active {
     
    156155}
    157156
     157/* pressed state e.g. a selected setting */
     158.wp-core-ui .button.active,
     159.wp-core-ui .button.active:hover {
     160    background-color: #e2e4e7;
     161    color: #00669b;
     162    border-color: #016087;
     163    box-shadow: inset 0 2px 5px -3px #016087;
     164}
     165
    158166.wp-core-ui .button.active:focus {
    159     border-color: #7e8993;
    160     box-shadow: 0 0 0 1px #7e8993;
     167    border-color: #007cba;
     168    box-shadow:
     169        inset 0 2px 5px -3px #016087,
     170        0 0 0 1px #007cba;
    161171}
    162172
     
    259269    border-color: #00669b;
    260270    box-shadow: none;
     271    color: #fff;
    261272}
    262273
     
    308319}
    309320
     321/* pressed state e.g. a selected setting */
    310322.wp-core-ui .button-group > .button.active {
    311323    background-color: #e2e4e7;
    312     box-shadow: inset 0 1px 0 0 #999;
     324    color: #00669b;
    313325    border-color: #016087;
     326    box-shadow: inset 0 2px 5px -3px #016087;
     327}
     328
     329.wp-core-ui .button-group > .button.active:focus {
     330    border-color: #007cba;
     331    box-shadow:
     332        inset 0 2px 5px -3px #016087,
     333        0 0 0 1px #007cba;
    314334}
    315335
Note: See TracChangeset for help on using the changeset viewer.