WordPress.org

Make WordPress Core

Ticket #27826: 27826.2.diff

File 27826.2.diff, 4.2 KB (added by celloexpressions, 6 years ago)

Merge previous patches, add our own focus styling for buttons.

  • src/wp-includes/css/buttons.css

     
    6767.wp-core-ui input[type="reset"]::-moz-focus-inner,
    6868.wp-core-ui input[type="button"]::-moz-focus-inner,
    6969.wp-core-ui input[type="submit"]::-moz-focus-inner {
    70         border-width: 1px 0;
    71         border-style: solid none;
    72         border-color: transparent;
     70        border: none;
    7371        padding: 0;
    7472}
    7573
     
    9694        padding: 0 36px;
    9795}
    9896
    99 .wp-core-ui .button:active {
     97.wp-core-ui .button:active,
     98.wp-core-ui .button:focus {
    10099        outline: none;
    101100}
    102101
     
    127126        color: #555;
    128127        border-color: #cccccc;
    129128        background: #f7f7f7;
    130         -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08);
    131         box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08);
     129        -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
     130        box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
    132131        vertical-align: top;
    133132}
    134133
     
    150149.wp-core-ui .button.focus,
    151150.wp-core-ui .button:focus,
    152151.wp-core-ui .button-secondary:focus {
    153         -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
    154         box-shadow: 1px 1px 1px rgba(0,0,0,.2);
     152        -webkit-box-shadow: 0 0 0 1px #5b9dd9,
     153                            0 0 2px 1px rgba(30, 140, 190, .8);
     154        box-shadow: 0 0 0 1px #5b9dd9,
     155                    0 0 2px 1px rgba(30, 140, 190, .8);
    155156}
    156157
    157158.wp-core-ui .button.active,
     
    189190.wp-core-ui .button-primary {
    190191        background: #2ea2cc;
    191192        border-color: #0074a2;
    192         -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5), 0 1px 0 rgba(0,0,0,.15);
    193         box-shadow: inset 0 1px 0 rgba(120,200,230,0.5), 0 1px 0 rgba(0,0,0,.15);
     193        -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5), 0 1px 0 rgba( 0, 0, 0, 0.15 );
     194        box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 );
    194195        color: #fff;
    195196        text-decoration: none;
    196197}
     
    201202.wp-core-ui .button-primary:focus {
    202203        background: #1e8cbe;
    203204        border-color: #0074a2;
    204         -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
    205         box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
     205        -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
     206        box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
    206207        color: #fff;
    207208}
    208209
     
    209210.wp-core-ui .button-primary.focus,
    210211.wp-core-ui .button-primary:focus {
    211212        border-color: #0e3950;
    212         -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
    213         box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
     213        -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
     214                            0 0 0 1px #5b9dd9,
     215                            0 0 2px 1px rgba(30, 140, 190, .8);
     216        box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
     217                    0 0 0 1px #5b9dd9,
     218                    0 0 2px 1px rgba(30, 140, 190, .8);
    214219}
    215220
    216221.wp-core-ui .button-primary.active,
     
    219224.wp-core-ui .button-primary:active {
    220225        background: #1b7aa6;
    221226        border-color: #005684;
    222         color: rgba(255,255,255,0.95);
    223         -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
    224         box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
     227        color: rgba( 255, 255, 255, 0.95 );
     228        -webkit-box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
     229        box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
    225230        vertical-align: top;
    226231}
    227232
     
    234239        border-color: #1b607f !important;
    235240        -webkit-box-shadow: none !important;
    236241        box-shadow: none !important;
    237         text-shadow: 0 -1px 0 rgba(0,0,0,0.1) !important;
     242        text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 ) !important;
    238243        cursor: default;
    239244}
    240245
    (this hunk was shorter than expected) 
    276281        border-radius: 0 3px 3px 0;
    277282}
    278283
     284.wp-core-ui .button-group > .button:focus {
     285        position: relative;
     286        z-index: 1;
     287}
     288
    279289/* ----------------------------------------------------------------------------
    280290  5.0 - Responsive Button Styles
    281291---------------------------------------------------------------------------- */
     
    310321        }
    311322
    312323        /* Reset responsive styles in Press This, Customizer */
    313 
    314324        .wp-core-ui.wp-customizer .button,
    315325        .press-this.wp-core-ui .button,
    316326        .press-this input#publish,
     
    325335        }
    326336
    327337        /* Reset responsive styles on Log in button on iframed login form */
    328 
    329338        .interim-login .button.button-large {
    330339                height: 30px;
    331340                line-height: 28px;