WordPress.org

Make WordPress Core

Changeset 29466


Ignore:
Timestamp:
08/11/2014 06:20:18 PM (6 years ago)
Author:
helen
Message:

Better focus styling for buttons and button groups. props mattheu, avryl, celloexpressions. fixes #27826. see #28267.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/css/buttons.css

    r29366 r29466  
    9696}
    9797
    98 .wp-core-ui .button:active {
     98.wp-core-ui .button:active,
     99.wp-core-ui .button:focus {
    99100    outline: none;
    100101}
     
    127128    border-color: #cccccc;
    128129    background: #f7f7f7;
    129     -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08);
    130     box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08);
     130    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
     131    box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
    131132    vertical-align: top;
    132133}
     
    150151.wp-core-ui .button:focus,
    151152.wp-core-ui .button-secondary:focus {
    152     -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
    153     box-shadow: 1px 1px 1px rgba(0,0,0,.2);
     153    -webkit-box-shadow:
     154        0 0 0 1px #5b9dd9,
     155        0 0 2px 1px rgba(30, 140, 190, .8);
     156    box-shadow:
     157        0 0 0 1px #5b9dd9,
     158        0 0 2px 1px rgba(30, 140, 190, .8);
    154159}
    155160
    156161.wp-core-ui .button.active,
    157162.wp-core-ui .button.active:hover,
    158 .wp-core-ui .button.active:focus,
    159163.wp-core-ui .button:active,
    160164.wp-core-ui .button-secondary:active {
     
    164168    -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
    165169    box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
     170}
     171
     172.wp-core-ui .button.active:focus {
     173    -webkit-box-shadow:
     174        inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
     175        0 0 0 1px #5b9dd9,
     176        0 0 2px 1px rgba(30, 140, 190, .8);
     177    box-shadow:
     178        inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
     179        0 0 0 1px #5b9dd9,
     180        0 0 2px 1px rgba(30, 140, 190, .8);
    166181}
    167182
     
    189204    background: #2ea2cc;
    190205    border-color: #0074a2;
    191     -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5), 0 1px 0 rgba(0,0,0,.15);
    192     box-shadow: inset 0 1px 0 rgba(120,200,230,0.5), 0 1px 0 rgba(0,0,0,.15);
     206    -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5), 0 1px 0 rgba( 0, 0, 0, 0.15 );
     207    box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 );
    193208    color: #fff;
    194209    text-decoration: none;
     
    201216    background: #1e8cbe;
    202217    border-color: #0074a2;
    203     -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
    204     box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
     218    -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
     219    box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
    205220    color: #fff;
    206221}
     
    209224.wp-core-ui .button-primary:focus {
    210225    border-color: #0e3950;
    211     -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
    212     box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
     226    -webkit-box-shadow:
     227        inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
     228        0 0 0 1px #5b9dd9,
     229        0 0 2px 1px rgba(30, 140, 190, .8);
     230    box-shadow:
     231        inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
     232        0 0 0 1px #5b9dd9,
     233        0 0 2px 1px rgba(30, 140, 190, .8);
    213234}
    214235
     
    219240    background: #1b7aa6;
    220241    border-color: #005684;
    221     color: rgba(255,255,255,0.95);
    222     -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
    223     box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
     242    color: rgba( 255, 255, 255, 0.95 );
     243    -webkit-box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
     244    box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
    224245    vertical-align: top;
    225246}
     
    234255    -webkit-box-shadow: none !important;
    235256    box-shadow: none !important;
    236     text-shadow: 0 -1px 0 rgba(0,0,0,0.1) !important;
     257    text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 ) !important;
    237258    cursor: default;
    238259}
     
    274295    -webkit-border-radius: 0 3px 3px 0;
    275296    border-radius: 0 3px 3px 0;
     297}
     298
     299.wp-core-ui .button-group > .button:focus {
     300    position: relative;
     301    z-index: 1;
    276302}
    277303
Note: See TracChangeset for help on using the changeset viewer.