WordPress.org
Get WordPress

Make WordPress Core

Changeset 29616


Ignore:
Timestamp:
08/26/2014 05:16:14 AM (10 years ago)
Author:
helen
Message:

Focus styling: bring the blue glow to more places.

Handles color picker, theme browser, help/screen options, TinyMCE dialog buttons, jQuery UI dialog buttons, and buttons in color schemes.

props avryl, celloexpressions. fixes #28267.

Location:
trunk/src
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/color-picker.css

    r27174 r29616  
    4848}
    4949
    50 .wp-color-result:hover {
     50.wp-color-result:hover,
     51.wp-color-result:focus {
    5152    background: #fafafa;
    5253    border-color: #999;
    … …  
    5455}
    5556
    56 .wp-color-result:hover:after {
     57.wp-color-result:hover:after,
     58.wp-color-result:focus:after {
    5759    color: #222;
    5860    border-color: #aaa;
    … …  
    7476
    7577.wp-color-result:focus {
    76     border-color: #888;
    77     -webkit-box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 );
    78     box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 );
    79 }
    80 
    81 .wp-color-result:focus:after {
    82     border-color: #888;
     78    -webkit-box-shadow:
     79        0 0 0 1px #5b9dd9,
     80        0 0 2px 1px rgba( 30, 140, 190, 0.8 );
     81    box-shadow:
     82        0 0 0 1px #5b9dd9,
     83        0 0 2px 1px rgba( 30, 140, 190, 0.8 );
    8384}
    8485

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

    r28079 r29616  
    1414        border-color: darken( $button-color, 15% );
    1515        color: $text-color;
    16         box-shadow: inset 0 1px 0 lighten( $button-color, 10% ), 0 1px 0 rgba(0,0,0,.15);
     16        box-shadow: inset 0 1px 0 lighten( $button-color, 10% ),
     17    }
     18
     19    &:focus {
     20        box-shadow: inset 0 1px 0 lighten( $button-color, 10% ),
     21                    0 0 0 1px #5b9dd9,
     22                    0 0 2px 1px rgba( 30, 140, 190, .8 );
    1723    }
    1824
    … …  
    2127        border-color: darken( $button-color, 15% );
    2228        color: $text-color;
    23         box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
     29        box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
     30                    0 0 0 1px #5b9dd9,
     31                    0 0 2px 1px rgba( 30, 140, 190, .8 );
    2432    }
    2533

  • trunk/src/wp-admin/css/common.css

    r29605 r29616  
    13811381#screen-meta-links a:focus {
    13821382    color: #333;
    1383 }
    1384 
    1385 #screen-meta-links a:focus {
    1386     border-color: #aaa;
    1387     -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.15);
    1388     box-shadow: 0 2px 3px rgba(0,0,0,0.15);
    13891383}
    13901384

  • trunk/src/wp-admin/css/themes.css

    r29608 r29616  
    189189    transition: opacity 0.1s ease-in-out;
    190190}
     191
    191192.theme-browser .theme:focus {
    192     outline: 1px dotted #222;
     193    border-color: #5b9dd9;
     194    -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
     195    box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
    193196}
    194197
    … …  
    196199    opacity: 1;
    197200}
     201
    198202/* Current theme needs to have its action always on view */
    199203.theme-browser .theme.active:focus .theme-actions {

  • trunk/src/wp-admin/js/color-picker.js

    r28239 r29616  
    121121        },
    122122        open: function() {
    123             this.element.show().iris( 'toggle' );
     123            this.element.show().iris( 'toggle' ).focus();
    124124            this.button.removeClass( 'hidden' );
    125125            this.toggler.addClass( 'wp-picker-open' );

  • trunk/src/wp-includes/css/editor.css

    r29579 r29616  
    415415    border-radius: 3px;
    416416    white-space: nowrap;
    417     -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08);
    418     box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08);
     417    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
     418    box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
    419419    background-image: none;
    420420}
    … …  
    428428}
    429429
    430 .mce-window .mce-btn:hover {
     430.mce-window .mce-btn:hover,
     431.mce-window .mce-btn:focus {
    431432    background: #fafafa;
    432433    border-color: #999;
    … …  
    435436
    436437.mce-window .mce-btn:focus {
    437     -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
    438     box-shadow: 1px 1px 1px rgba(0,0,0,.2);
     438    -webkit-box-shadow:
     439        0 0 0 1px #5b9dd9,
     440        0 0 2px 1px rgba( 30, 140, 190, 0.8 );
     441    box-shadow:
     442        0 0 0 1px #5b9dd9,
     443        0 0 2px 1px rgba( 30, 140, 190, 0.8 );
    439444}
    440445
    … …  
    443448    border-color: #999;
    444449    color: #333;
    445     -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
    446     box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
     450    -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
     451    box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
    447452}
    448453
    … …  
    450455    color: #aaa;
    451456    border-color: #ddd;
     457    background: #f7f7f7;
    452458    -webkit-box-shadow: none;
    453459    box-shadow: none;
    … …  
    459465    background: #2ea2cc;
    460466    border-color: #0074a2;
    461     -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5), 0 1px 0 rgba(0,0,0,.15);
    462     box-shadow: inset 0 1px 0 rgba(120,200,230,0.5), 0 1px 0 rgba(0,0,0,.15);
     467    -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5), 0 1px 0 rgba( 0, 0, 0, 0.15 );
     468    box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 );
    463469    color: #fff;
    464470    text-decoration: none;
    465471}
    466472
    467 .mce-window .mce-btn.mce-primary:hover {
     473.mce-window .mce-btn.mce-primary:hover,
     474.mce-window .mce-btn.mce-primary:focus {
    468475    background: #1e8cbe;
    469476    border-color: #0074a2;
    470     -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
    471     box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
     477    -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
     478    box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
    472479    color: #fff;
    473480}
    … …  
    475482.mce-window .mce-btn.mce-primary:focus {
    476483    border-color: #0e3950;
    477     -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
    478     box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
     484    -webkit-box-shadow:
     485        inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
     486        0 0 0 1px #5b9dd9,
     487        0 0 2px 1px rgba( 30, 140, 190, 0.8 );
     488    box-shadow:
     489        inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
     490        0 0 0 1px #5b9dd9,
     491        0 0 2px 1px rgba( 30, 140, 190, 0.8 );
    479492}
    480493
    … …  
    482495    background: #1b7aa6;
    483496    border-color: #005684;
    484     color: rgba(255,255,255,0.95);
    485     -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
    486     box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
     497    color: rgba( 255, 255, 255, 0.95 );
     498    -webkit-box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
     499    box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
     500    vertical-align: top;
    487501}
    488502
    … …  
    491505    background: #298cba;
    492506    border-color: #1b607f;
    493     text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
     507    -webkit-box-shadow: none;
     508    box-shadow: none;
     509    text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 );
     510    cursor: default;
    494511}
    495512

  • trunk/src/wp-includes/css/jquery-ui-dialog.css

    r27532 r29616  
    182182    border-color: #cccccc;
    183183    background: #f7f7f7;
    184     -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08);
    185     box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08);
     184    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
     185    box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
    186186    vertical-align: top;
     187}
     188
     189.ui-button:active,
     190.ui-button:focus {
     191    outline: none;
    187192}
    188193
    … …  
    195200}
    196201
    197 .ui-button:hover {
     202.ui-button:hover,
     203.ui-button:focus {
    198204    background: #fafafa;
    199205    border-color: #999;
    … …  
    202208
    203209.ui-button:focus {
    204     -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
    205     box-shadow: 1px 1px 1px rgba(0,0,0,.2);
     210    -webkit-box-shadow:
     211        0 0 0 1px #5b9dd9,
     212        0 0 2px 1px rgba( 30, 140, 190, 0.8 );
     213    box-shadow:
     214        0 0 0 1px #5b9dd9,
     215        0 0 2px 1px rgba( 30, 140, 190, 0.8 );
    206216}
    207217
    … …  
    210220    border-color: #999;
    211221    color: #333;
    212     -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
    213     box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
    214     outline: none;
     222    -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
     223    box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
    215224}
    216225
Note: See TracChangeset for help on using the changeset viewer.