Make WordPress Core

Changeset 26993


Ignore:
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:
2 edited

Legend:

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

    r26139 r26993  
    1212    &:hover,
    1313    &:focus {
    14         background: darken( $button-color, 8% );
     14        background: darken( $button-color, 5% );
    1515        border-color: darken( $button-color, 15% );
    1616        color: $text-color;
     
    2020
    2121    &:active {
    22         background: darken( $button-color, 8% );
     22        background: darken( $button-color, 10% );
    2323        border-color: darken( $button-color, 15% );
    2424        color: $text-color;
  • trunk/src/wp-includes/css/buttons.css

    r26683 r26993  
    164164}
    165165
    166 /* this creates an inset effect on the text */
    167 .wp-core-ui .button:active {
    168     padding-top: 1px;
    169 }
    170 
    171166.wp-core-ui .button[disabled],
    172167.wp-core-ui .button:disabled,
     
    217212.wp-core-ui .button-primary.active:focus,
    218213.wp-core-ui .button-primary:active {
    219     background: #1e8cbe;
     214    background: #1b7aa6;
    220215    border-color: #005684;
    221216    color: rgba(255,255,255,0.95);
     
    223218    box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
    224219    vertical-align: top;
    225 }
    226 
    227 /* this creates an inset effect on the text */
    228 .wp-core-ui .button-primary:active {
    229     padding-top: 1px;
    230220}
    231221
     
    297287    }
    298288   
    299     /* Adjust the padding that makes active button text looks inset to account for larger responsive buttons */
    300     .wp-core-ui .button:active,
    301     .wp-core-ui .button-large:active,
    302     .wp-core-ui .button-small:active,
    303     input#publish:active,
    304     input#save-post:active,
    305     a.preview:active {
    306         padding-top: 11px;
    307         padding-bottom: 9px;
    308     }
    309    
    310289    #media-upload.wp-core-ui .button {
    311290        padding: 0 10px 1px;
     
    344323    }
    345324   
    346     .interim-login .button.button-large:active {
    347         padding-top: 1px;
    348     }
    349 }
     325}
Note: See TracChangeset for help on using the changeset viewer.