WordPress.org

Make WordPress Core

Changeset 34948


Ignore:
Timestamp:
10/08/2015 05:30:57 PM (5 years ago)
Author:
helen
Message:

Buttons: Update styles and colors.

props hugobaeta, afercia, melchoyce, michael-arestad.
fixes #31459.

Location:
trunk/src
Files:
3 edited

Legend:

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

    r31471 r34948  
    55@mixin button( $button-color, $text-color: white ) {
    66    background: $button-color;
    7     border-color: darken( $button-color, 10% );
     7    border-color: darken( $button-color, 10% ) darken( $button-color, 15% ) darken( $button-color, 15% );
    88    color: $text-color;
    9     box-shadow: inset 0 1px 0 lighten( $button-color, 15% ), 0 1px 0 rgba(0,0,0,.15);
     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% );
    1014
    1115    &:hover,
    1216    &:focus {
    13         background: darken( $button-color, 5% );
     17        background: lighten( $button-color, 3% );
    1418        border-color: darken( $button-color, 15% );
    1519        color: $text-color;
    16         box-shadow: inset 0 1px 0 lighten( $button-color, 10% );
     20        box-shadow: 0 1px 0 darken( $button-color, 15% );
    1721    }
    1822
    1923    &: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 );
     24        box-shadow: inset 0 1px 0 darken( $button-color, 10% ),
     25                    0 0 2px 1px #33b3db;
    2326    }
    2427
     
    2629        background: darken( $button-color, 10% );
    2730        border-color: darken( $button-color, 15% );
    28         color: $text-color;
    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 );
     31        box-shadow: inset 0 2px 0 darken( $button-color, 15% );
    3232    }
    3333
     
    4141        text-shadow: none !important;
    4242    }
     43
     44    &.button-hero {
     45        box-shadow: 0 2px 0 darken( $button-color, 15% ) !important;
     46        &:active {
     47            box-shadow: inset 0 3px 0 darken( $button-color, 15% ) !important;
     48        }
     49    }
     50
    4351}
  • trunk/src/wp-admin/css/press-this.css

    r34011 r34948  
    463463    line-height: 2;
    464464    padding: 0 10px 1px;
    465     background: #00a0d2;
    466     border-color: #0073aa;
     465    background: #0085ba;
     466    border-color: #0073aa #006799 #006799;
    467467    border-width: 1px;
    468468    border-style: solid;
    469     -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5), 0 1px 0 rgba( 0, 0, 0, 0.15 );
    470     box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 );
     469    -webkit-box-shadow: 0 1px 0 #006799;
     470    box-shadow: 0 1px 0 #006799;
    471471    color: #fff;
     472    text-shadow: 0 -1px 1px #006799,
     473        1px 0 1px #006799,
     474        0 1px 1px #006799,
     475        -1px 0 1px #006799;
    472476}
    473477
     
    487491    -webkit-border-bottom-right-radius: 3px;
    488492    border-bottom-right-radius: 3px;
    489     border-left: 0 none;
     493    border-left: 1px solid #006799;
    490494    float: right;
    491495}
     
    494498    margin: 4px 20px 3px 0;
    495499    padding: 0 10px;
    496     border-left: 1px solid #fff;
    497500}
    498501
     
    500503.split-button-toggle:hover {
    501504    outline: none;
    502     background: #0091cd;
    503     border-color: #0073aa;
     505    background: #008ec2;
     506    border-color: #006799;
    504507}
    505508
     
    507510.split-button-toggle:focus {
    508511    outline: none;
    509     border-color: #0e3950;
    510     -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
    511         0 0 0 1px #5b9dd9,
    512         0 0 2px 1px rgba(30, 140, 190, .8);
    513     box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
    514         0 0 0 1px #5b9dd9,
    515         0 0 2px 1px rgba(30, 140, 190, .8);
     512    -webkit-box-shadow: 0 1px 0 #0073aa,
     513        0 0 2px 1px #33b3db;
     514    box-shadow: 0 1px 0 #0073aa,
     515        0 0 2px 1px #33b3db;
    516516}
    517517
     
    519519.split-button-toggle:active {
    520520    background: #0073aa;
    521     border-color: #005082;
    522     color: rgba( 255, 255, 255, 0.95 );
    523     -webkit-box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
    524     box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
     521    border-color: #006799;
     522    -webkit-box-shadow: inset 0 2px 10px #006799, 0 1px 0 #0073aa;
     523    box-shadow: inset 0 2px 10px #006799, 0 1px 0 #0073aa;
    525524}
    526525
     
    14391438.scan-submit:hover,
    14401439.scan-submit:focus {
    1441     background: #2991b7;
    1442     border-color: #20708e;
     1440    background: #008ec2;
     1441    border-color: #006799;
    14431442    color: #fff;
    14441443    outline: 0;
     
    14461445
    14471446.scan-submit:active {
    1448     background: #2581a2;
    1449     border-color: #20708e;
     1447    background: #0073aa;
     1448    border-color: #006799;
    14501449    color: #fff;
    14511450}
  • trunk/src/wp-includes/css/buttons.css

    r32952 r34948  
    132132    border-color: #cccccc;
    133133    background: #f7f7f7;
    134     -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
    135     box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
     134    -webkit-box-shadow: 0 1px 0 #cccccc;
     135    box-shadow: 0 1px 0 #cccccc;
    136136    vertical-align: top;
    137137}
     
    165165    -webkit-box-shadow:
    166166        0 0 0 1px #5b9dd9,
    167         0 0 2px 1px rgba(30, 140, 190, .8);
     167        0 0 2px 1px rgba(0, 115, 170, .8);
    168168    box-shadow:
    169169        0 0 0 1px #5b9dd9,
    170         0 0 2px 1px rgba(30, 140, 190, .8);
     170        0 0 2px 1px rgba(0, 115, 170, .8);
    171171}
    172172
     
    177177    background: #eee;
    178178    border-color: #999;
    179     color: #32373c;
    180179    -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
    181180    box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
     181    -webkit-transform: translateY(1px);
     182    -ms-transform: translateY(1px);
     183    transform: translateY(1px);
    182184}
    183185
     
    186188        inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
    187189        0 0 0 1px #5b9dd9,
    188         0 0 2px 1px rgba(30, 140, 190, .8);
     190        0 0 2px 1px rgba(0, 115, 170, .8);
    189191    box-shadow:
    190192        inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
    191193        0 0 0 1px #5b9dd9,
    192         0 0 2px 1px rgba(30, 140, 190, .8);
     194        0 0 2px 1px rgba(0, 115, 170, .8);
    193195}
    194196
     
    214216
    215217.wp-core-ui .button-primary {
    216     background: #00a0d2;
    217     border-color: #0073aa;
    218     -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5), 0 1px 0 rgba( 0, 0, 0, 0.15 );
    219     box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 );
     218    background: #0085ba;
     219    border-color: #0073aa #006799 #006799;
     220    -webkit-box-shadow: 0 1px 0 #006799;
     221    box-shadow: 0 1px 0 #006799;
    220222    color: #fff;
    221223    text-decoration: none;
     224    text-shadow: 0 -1px 1px #006799,
     225        1px 0 1px #006799,
     226        0 1px 1px #006799,
     227        -1px 0 1px #006799;
    222228}
    223229
     
    226232.wp-core-ui .button-primary.focus,
    227233.wp-core-ui .button-primary:focus {
    228     background: #0091cd;
    229     border-color: #0073aa;
    230     -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
    231     box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
     234    background: #008ec2;
     235    border-color: #006799;
    232236    color: #fff;
    233237}
     
    235239.wp-core-ui .button-primary.focus,
    236240.wp-core-ui .button-primary:focus {
    237     border-color: #0e3950;
    238     -webkit-box-shadow:
    239         inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
    240         0 0 0 1px #5b9dd9,
    241         0 0 2px 1px rgba(30, 140, 190, .8);
    242     box-shadow:
    243         inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
    244         0 0 0 1px #5b9dd9,
    245         0 0 2px 1px rgba(30, 140, 190, .8);
     241    -webkit-box-shadow: 0 1px 0 #0073aa,
     242        0 0 2px 1px #33b3db;
     243    box-shadow: 0 1px 0 #0073aa,
     244        0 0 2px 1px #33b3db;
    246245}
    247246
     
    251250.wp-core-ui .button-primary:active {
    252251    background: #0073aa;
    253     border-color: #005082;
    254     color: rgba( 255, 255, 255, 0.95 );
    255     -webkit-box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
    256     box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
     252    border-color: #006799;
     253    -webkit-box-shadow: inset 0 2px 0 #006799;
     254    box-shadow: inset 0 2px 0 #006799;
    257255    vertical-align: top;
    258256}
     
    269267    text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 ) !important;
    270268    cursor: default;
     269}
     270
     271.wp-core-ui .button.button-primary.button-hero {
     272    -webkit-box-shadow: 0 2px 0 #006799;
     273    box-shadow: 0 2px 0 #006799;
     274}
     275
     276.wp-core-ui .button.button-primary.button-hero.active,
     277.wp-core-ui .button.button-primary.button-hero.active:hover,
     278.wp-core-ui .button.button-primary.button-hero.active:focus,
     279.wp-core-ui .button.button-primary.button-hero:active {
     280    -webkit-box-shadow: inset 0 3px 0 #006799;
     281    box-shadow: inset 0 3px 0 #006799;
    271282}
    272283
Note: See TracChangeset for help on using the changeset viewer.