Make WordPress Core

Ticket #34904: 34904.11.diff

File 34904.11.diff, 12.2 KB (added by kjellr, 5 years ago)
  • src/wp-admin/css/colors/_admin.scss

     
    4343        color: $link-focus;
    4444}
    4545
     46input[type="text"]:focus,
     47input[type="password"]:focus,
     48input[type="color"]:focus,
     49input[type="date"]:focus,
     50input[type="datetime"]:focus,
     51input[type="datetime-local"]:focus,
     52input[type="email"]:focus,
     53input[type="month"]:focus,
     54input[type="number"]:focus,
     55input[type="search"]:focus,
     56input[type="tel"]:focus,
     57input[type="text"]:focus,
     58input[type="time"]:focus,
     59input[type="url"]:focus,
     60input[type="week"]:focus,
     61input[type="checkbox"]:focus,
     62input[type="radio"]:focus,
     63select:focus,
     64textarea:focus {
     65        border-color: $highlight-color;
     66        box-shadow: 0 0 0 1px $highlight-color;
     67}
    4668
     69
    4770/* Core UI */
    4871
    4972.wp-core-ui {
     73        .button.focus,
     74        .button:focus,
     75        .button-secondary:focus {
     76                border-color: $button-color;
     77                color: darken( $button-color, 5% );
     78                box-shadow: 0 0 0 1px $button-color;
     79        }
     80
    5081        .button-primary {
    5182                @include button( $button-color );
    5283        }
  • src/wp-admin/css/colors/_mixins.scss

     
    11/*
    2  * Button mixin- creates 3d-ish button effect with correct
     2 * Button mixin- creates a button effect with correct
    33 * highlights/shadows, based on a base color.
    44 */
    55@mixin button( $button-color, $text-color: #fff ) {
    66        background: $button-color;
    7         border-color: darken( $button-color, 10% ) darken( $button-color, 15% ) darken( $button-color, 15% );
     7        border-color: $button-color;
    88        color: $text-color;
    9         box-shadow: 0 1px 0 darken( $button-color, 15% );
    10         text-shadow: 0 -1px 1px darken( $button-color, 15% ),
    11                 1px 0 1px darken( $button-color, 15% ),
    12                 0 1px 1px darken( $button-color, 15% ),
    13                 -1px 0 1px darken( $button-color, 15% );
    149
    1510        &:hover,
    1611        &:focus {
    1712                background: lighten( $button-color, 3% );
    18                 border-color: darken( $button-color, 15% );
     13                border-color: darken( $button-color, 3% );
    1914                color: $text-color;
    20                 box-shadow: 0 1px 0 darken( $button-color, 15% );
    2115        }
    2216
    2317        &:focus {
    24                 box-shadow: inset 0 1px 0 darken( $button-color, 10% ),
    25                                         0 0 2px 1px #33b3db;
     18                box-shadow: 0 0 0 1px #fff, 0 0 0 3px $button-color;
    2619        }
    2720
    2821        &:active,
     
    2922        &.active,
    3023        &.active:focus,
    3124        &.active:hover {
    32                 background: darken( $button-color, 10% );
    33                 border-color: darken( $button-color, 15% );
    34                 box-shadow: inset 0 2px 0 darken( $button-color, 15% );
     25                background: darken( $button-color, 5% );
     26                border-color: darken( $button-color, 5% );
    3527        }
    3628
    3729        &[disabled],
     
    3931        &.button-primary-disabled,
    4032        &.disabled {
    4133                color: hsl( hue( $button-color ), 10%, 80% ) !important;
    42                 background: darken( $button-color, 8% ) !important;
    43                 border-color: darken( $button-color, 15% ) !important;
     34                background: lighten( $button-color, 15% ) !important;
     35                border-color: lighten( $button-color, 15% ) !important;
    4436                text-shadow: none !important;
    4537        }
    46 
    47         &.button-hero {
    48                 box-shadow: 0 2px 0 darken( $button-color, 15% ) !important;
    49                 &:active {
    50                         box-shadow: inset 0 3px 0 darken( $button-color, 15% ) !important;
    51                 }
    52         }
    53 
    5438}
  • src/wp-admin/css/common.css

     
    272272a:focus .media-icon img,
    273273.wp-person a:focus .gravatar {
    274274        color: #124964;
    275         box-shadow:
    276                 0 0 0 1px #5b9dd9,
    277                 0 0 2px 1px rgba(30, 140, 190, 0.8);
    278         /* Only visible in Windows High Contrast mode */
    279         outline: 1px solid transparent;
     275        outline: 1px dotted #555d66;
    280276}
    281277
    282278.ie8 a:focus {
     
    284280}
    285281
    286282#adminmenu a:focus {
    287         box-shadow: none;
    288         /* Only visible in Windows High Contrast mode */
    289         outline: 1px solid transparent;
     283        outline: 1px dotted #555d66;
    290284        outline-offset: -1px;
    291285}
    292286
     
    623617        position: relative;
    624618        top: -3px;
    625619        text-decoration: none;
    626         border: none;
    627         border: 1px solid #ccc;
     620        border: 1px solid #7e8993;
    628621        border-radius: 2px;
    629         background: #f7f7f7;
    630622        text-shadow: none;
    631623        font-weight: 600;
    632624        font-size: 13px;
    633625        line-height: normal; /* IE8-IE11 need this for buttons */
    634         color: #0073aa; /* some of these controls are button elements and don't inherit from links */
     626        color: #555; /* use the standard color used for buttons */
    635627        cursor: pointer;
    636628}
    637629
     
    641633
    642634.wrap .add-new-h2:hover, /* deprecated */
    643635.wrap .page-title-action:hover {
    644         border-color: #008EC2;
    645         background: #00a0d2;
    646         color: #fff;
     636        background: #f3f5f6;
     637        border-color: #7e8993;
     638        color: #007cba;
    647639}
    648640
    649641/* lower specificity: color needs to be overridden by :hover and :active */
    650642.page-title-action:focus {
    651         color: #124964;
     643        color: #016087;
    652644}
    653645
    654646/* Dashicon for language options on General Settings and Profile screens */
     
    658650}
    659651
    660652.wrap .page-title-action:focus {
    661         border-color: #5b9dd9;
    662         box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
     653        border-color: #007cba;
     654        box-shadow: 0 0 0 1px #007cba;
    663655        /* Only visible in Windows High Contrast mode */
    664656        outline: 2px solid transparent;
    665657}
     
    841833}
    842834
    843835.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
    844         box-shadow:
    845                 0 0 0 1px #5b9dd9,
    846                 0 0 2px 1px rgba(30, 140, 190, 0.8);
     836        outline: 1px dotted #555d66;
    847837}
    848838
    849839.key-labels label {
     
    14411431}
    14421432
    14431433.notice-dismiss:focus {
    1444         outline: none;
    1445         box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
     1434        outline: 1px dotted #555d66;
    14461435}
    14471436
    14481437.ie8 .notice-dismiss:focus {
     
    30703059}
    30713060
    30723061.js .postbox .handlediv:focus .toggle-indicator:before {
    3073         box-shadow:
    3074                 0 0 0 1px #5b9dd9,
    3075                 0 0 2px 1px rgba(30, 140, 190, 0.8);
     3062        outline: 1px dotted #555d66;
    30763063}
    30773064
    30783065/* @todo: appears to be Press This only and overridden */
     
    31663153}
    31673154[role="treeitem"] .folder-label.focus {
    31683155        color: #124964;
    3169         box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
     3156        outline: 1px dotted #555d66;
    31703157}
    31713158[role="treeitem"].hover,
    31723159[role="treeitem"] .folder-label.hover {
     
    33933380}
    33943381
    33953382.widget-top .widget-action:focus .toggle-indicator:before {
    3396         box-shadow:
    3397                 0 0 0 1px #5b9dd9,
    3398                 0 0 2px 1px rgba(30, 140, 190, 0.8);
     3383        outline: 1px dotted #555d66;
    33993384}
    34003385
    34013386.control-section .accordion-section-title:after,
  • src/wp-admin/css/forms.css

     
    5050input[type="radio"]:focus,
    5151select:focus,
    5252textarea:focus {
    53         border-color: #5b9dd9;
    54         box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
     53        border-color: #007cba;
     54        box-shadow: 0 0 0 1px #007cba;
    5555        /* Only visible in Windows High Contrast mode */
    5656        outline: 2px solid transparent;
    5757}
  • src/wp-admin/css/themes.css

     
    178178}
    179179
    180180.theme-browser .theme:focus {
    181         border-color: #5b9dd9;
    182         box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
     181        outline: 1px dotted #555d66;
    183182}
    184183
    185184.theme-browser .theme:focus .more-details {
  • src/wp-includes/css/buttons.css

     
    124124.wp-core-ui .button,
    125125.wp-core-ui .button-secondary {
    126126        color: #555;
    127         border-color: #cccccc;
    128         background: #f7f7f7;
    129         box-shadow: 0 1px 0 #cccccc;
     127        border-color: #7e8993;
     128        background: #f1f1f1;
    130129        vertical-align: top;
    131130}
    132131
     
    140139.wp-core-ui .button.focus,
    141140.wp-core-ui .button:focus,
    142141.wp-core-ui .button-secondary:focus {
    143         background: #fafafa;
    144         border-color: #999;
    145         color: #23282d;
     142        background: #f3f5f6;
     143        border-color: #7e8993;
     144        color: #007cba;
    146145}
    147146
    148147.wp-core-ui .button.focus,
    149148.wp-core-ui .button:focus,
    150149.wp-core-ui .button-secondary:focus {
    151         border-color: #5b9dd9;
    152         box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
     150        background: #f3f5f6;
     151        border-color: #007cba;
     152        color: #016087;
     153        box-shadow: 0 0 0 1px #007cba;
    153154}
    154155
    155156.wp-core-ui .button.active,
     
    158159.wp-core-ui .button-secondary:active {
    159160        background: #eee;
    160161        border-color: #999;
    161         box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
    162162        transform: translateY(1px);
     163        box-shadow: none;
    163164}
    164165
    165166.wp-core-ui .button.active:focus {
    166         border-color: #5b9dd9;
    167         box-shadow:
    168                 inset 0 2px 5px -3px rgba(0, 0, 0, 0.5),
    169                 0 0 3px rgba(0, 115, 170, 0.8);
     167        border-color: #999;
     168        box-shadow: 0 0 0 1px #999;
    170169}
    171170
    172171.wp-core-ui .button[disabled],
     
    210209
    211210.wp-core-ui .button-link:focus {
    212211        color: #124964;
    213         box-shadow:
    214                 0 0 0 1px #5b9dd9,
    215                 0 0 2px 1px rgba(30, 140, 190, 0.8);
    216         /* Only visible in Windows High Contrast mode */
    217         outline: 1px solid transparent;
     212        outline: 1px dotted #555d66;
    218213}
    219214
    220215.wp-core-ui .button-link-delete {
     
    241236---------------------------------------------------------------------------- */
    242237
    243238.wp-core-ui .button-primary {
    244         background: #0085ba;
    245         border-color: #0073aa #006799 #006799;
    246         box-shadow: 0 1px 0 #006799;
     239        background: #007cba;
     240        border-color: #007cba;
    247241        color: #fff;
    248242        text-decoration: none;
    249         text-shadow: 0 -1px 1px #006799,
    250                 1px 0 1px #006799,
    251                 0 1px 1px #006799,
    252                 -1px 0 1px #006799;
     243        text-shadow: none;
    253244}
    254245
    255246.wp-core-ui .button-primary.hover,
     
    256247.wp-core-ui .button-primary:hover,
    257248.wp-core-ui .button-primary.focus,
    258249.wp-core-ui .button-primary:focus {
    259         background: #008ec2;
    260         border-color: #006799;
     250        background: #0071a1;
     251        border-color: #0071a1;
    261252        color: #fff;
    262253}
    263254
    264255.wp-core-ui .button-primary.focus,
    265256.wp-core-ui .button-primary:focus {
    266         box-shadow: 0 1px 0 #0073aa,
    267                 0 0 2px 1px #33b3db;
     257        box-shadow: 0 0 0 1px #fff, 0 0 0 3px #007cba;
    268258}
    269259
    270260.wp-core-ui .button-primary.active,
     
    271261.wp-core-ui .button-primary.active:hover,
    272262.wp-core-ui .button-primary.active:focus,
    273263.wp-core-ui .button-primary:active {
    274         background: #0073aa;
    275         border-color: #006799;
    276         box-shadow: inset 0 2px 0 #006799;
     264        background: #00669b;
     265        border-color: #00669b;
     266        transform: translateY(1px);
     267        box-shadow: none;
    277268}
    278269
    279270.wp-core-ui .button-primary[disabled],
     
    282273.wp-core-ui .button-primary.disabled {
    283274        color: #66c6e4 !important;
    284275        background: #008ec2 !important;
    285         border-color: #007cb2 !important;
     276        border-color: #008ec2 !important;
    286277        box-shadow: none !important;
    287         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
     278        text-shadow: none !important;
    288279        cursor: default;
    289280}
    290281
    291 .wp-core-ui .button.button-primary.button-hero {
    292         box-shadow: 0 2px 0 #006799;
    293 }
    294 
    295 .wp-core-ui .button.button-primary.button-hero:focus {
    296         box-shadow:
    297                 0 2px 0 #006799,
    298                 0 1px 0 #0073aa,
    299                 0 0 2px 1px #33b3db;
    300 }
    301 
    302 .wp-core-ui .button.button-primary.button-hero.active,
    303 .wp-core-ui .button.button-primary.button-hero.active:hover,
    304 .wp-core-ui .button.button-primary.button-hero.active:focus,
    305 .wp-core-ui .button.button-primary.button-hero:active {
    306         box-shadow: inset 0 3px 0 #006799;
    307 }
    308 
    309282/* ----------------------------------------------------------------------------
    310283  4.0 - Button Groups
    311284---------------------------------------------------------------------------- */
     
    324297        margin-right: -1px;
    325298}
    326299
    327 .wp-core-ui .button-group > .button-primary {
    328         z-index: 100;
    329 }
    330 
    331 .wp-core-ui .button-group > .button:hover {
    332         z-index: 20;
    333 }
    334 
    335300.wp-core-ui .button-group > .button:first-child {
    336301        border-radius: 3px 0 0 3px;
    337302}
     
    340305        border-radius: 0 3px 3px 0;
    341306}
    342307
     308.wp-core-ui .button-group > .button-primary + .button {
     309        border-left: 0;
     310}
     311
    343312.wp-core-ui .button-group > .button:focus {
    344313        position: relative;
    345314        z-index: 1;
    346315}
    347316
     317.wp-core-ui .button-group > .button.active {
     318        background-color: #e2e4e7;
     319        box-shadow: inset 0 1px 0 0 #999;
     320}
     321
     322.wp-core-ui .button-group > .button:active,
     323.wp-core-ui .button-group > .button.active {
     324        transform: translateY(0);
     325}
     326
    348327/* ----------------------------------------------------------------------------
    349328  5.0 - Responsive Button Styles
    350329---------------------------------------------------------------------------- */
     
    406385                padding: 0 12px 2px;
    407386        }
    408387
    409 }
     388}
     389 No newline at end of file