Get WordPress

Make WordPress Core

Changeset 40052

Timestamp:
02/09/2017 04:46:58 PM (7 years ago)
Author:
afercia
Message:

Buttons: Improve the .button-link CSS class for link-like buttons.

Updates .button-link adding color and underline to make link-like buttons look
like links by default. Introduces .button-link-delete as a modifier, stackable
CSS class for red button-links.

Props Cheffheid, afercia.

See #34242.
Fixes #35126.

Location:
trunk/src
Files:
16 edited

Legend:

Unmodified
Added
Removed

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

    r39897 r40052  
    245245}
    246246
     247
    247248a {
    248249    color: #0073aa;
    … …  
    465466}
    466467
    467 .widefat a {
     468.widefat a,
     469.widefat button.button-link {
    468470    text-decoration: none;
    469471}
    … …  
    12431245
    12441246.wp-filter .button-link.edit-filters {
    1245     color: #0073aa;
    1246     text-decoration: underline;
    12471247    padding: 0 5px;
    12481248    line-height: 28px;
    1249 }
    1250 
    1251 .wp-filter .button-link.edit-filters:hover {
    1252     color: #00a0d2;
    1253 }
    1254 
    1255 .wp-filter .button-link.edit-filters:focus {
    1256     color: #124964;
    12571249}
    12581250
    … …  
    16081600}
    16091601
    1610 .button.updated-message,
    1611 .notice .button-link {
     1602.button.updated-message {
    16121603    -webkit-transition-property: border, background, color;
    16131604    transition-property: border, background, color;
    … …  
    16161607    -webkit-transition-timing-function: ease-in-out;
    16171608    transition-timing-function: ease-in-out;
    1618 }
    1619 
    1620 .notice .button-link {
    1621     color: #0073aa;
    1622 }
    1623 
    1624 .notice .button-link:hover,
    1625 .notice .button-link:active {
    1626     color: #00a0d2;
    16271609}
    16281610
    … …  
    32793261
    32803262.handlediv,
     3263
    32813264.item-edit,
    32823265.sidebar-name-arrow,
    … …  
    32933276.handlediv:hover,
    32943277.handlediv:focus,
     3278
     3279
    32953280.item-edit:hover,
    32963281.item-edit:focus,

  • trunk/src/wp-admin/css/customize-controls.css

    r39301 r40052  
    763763.customize-control-dropdown-pages .add-new-toggle {
    764764    margin-left: 1px;
    765     color: #0073aa;
    766765    font-weight: 600;
    767766    line-height: 28px;
    768     text-decoration: underline;
    769 }
    770 
    771 .customize-control-dropdown-pages .add-new-toggle:hover,
    772 .customize-control-dropdown-pages .add-new-toggle:active {
    773     color: #00a0d2;
    774 }
    775 
    776 .customize-control-dropdown-pages .add-new-toggle:focus {
    777     color: #124964;
    778767}
    779768

  • trunk/src/wp-admin/css/customize-nav-menus.css

    r39677 r40052  
    2626    vertical-align: middle;
    2727    line-height: 28px;
    28     color: #0073aa;
    29     text-decoration: underline;
    30 }
    31 
    32 .customize-control-nav_menu_location .edit-menu:hover,
    33 .customize-control-nav_menu_location .edit-menu:active {
    34     color: #00a0d2;
    35 }
    36 
    37 .customize-control-nav_menu_location .edit-menu:focus {
    38     color: #124964;
    3928}
    4029
    … …  
    807796}
    808797
    809 .menu-delete {
    810     color: #a00;
    811     cursor: pointer;
    812     text-decoration: underline;
    813 }
    814 
    815 .menu-delete:hover,
    816 .menu-delete:focus {
    817     color: #f00;
    818 }
    819 
    820798.menu-item-handle {
    821799    margin-top: -1px;

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

    r37740 r40052  
    772772}
    773773
    774 #dashboard-widgets a {
     774#dashboard-widgets a,
     775#dashboard-widgets .button-link {
    775776    text-decoration: none;
    776777}

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

    r39905 r40052  
    101101    padding: 0;
    102102    font-size: 11px;
    103     text-decoration: underline;
    104     color: #0073aa;
    105103}
    106104
    … …  
    10341032    overflow: auto;
    10351033    width: 260px;
    1036 }
    1037 
    1038 .tagcloud-link.button-link {
    1039     color: #0073aa;
    1040     text-decoration: underline;
    1041 }
    1042 
    1043 .tagcloud-link.button-link:hover {
    1044     color: #00a0d2;
    1045 }
    1046 
    1047 .tagcloud-link.button-link:focus {
    1048     color: #124964;
    1049     -webkit-box-shadow:
    1050         0 0 0 1px #5b9dd9,
    1051         0 0 2px 1px rgba(30, 140, 190, .8);
    1052     box-shadow:
    1053         0 0 0 1px #5b9dd9,
    1054         0 0 2px 1px rgba(30, 140, 190, .8);
    10551034}
    10561035

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

    r39213 r40052  
    10671067}
    10681068
    1069 .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
    1070 .imgedit-group-top h2 a {
     1069#poststuff .imgedit-group-top .button-link {
    10711070    text-decoration: none;
     1071
    10721072}
    10731073

  • trunk/src/wp-admin/css/nav-menus.css

    r38981 r40052  
    665665    display: none;
    666666    margin: 0 2px;
    667     color: #0073aa;
    668667    font-style: italic;
    669     text-decoration: underline;
    670 }
    671 
    672 .menu-item-settings .field-move .button-link:hover,
    673 .menu-item-settings .field-move .button-link:active {
    674     color: #00a0d2;
    675 }
    676 
    677 .menu-item-settings .field-move .button-link:focus {
    678     color: #124964;
    679     -webkit-box-shadow:
    680         0 0 0 1px #5b9dd9,
    681         0 0 2px 1px rgba(30, 140, 190, .8);
    682     box-shadow:
    683         0 0 0 1px #5b9dd9,
    684         0 0 2px 1px rgba(30, 140, 190, .8);
    685668}
    686669

  • trunk/src/wp-admin/css/press-this.css

    r38880 r40052  
    394394    margin: 0;
    395395    width: 100%;
     396
    396397    text-align: left;
    397398    line-height: 2;
     399
     400
     401
     402
     403
     404
     405
     406
     407
     408
     409
    398410}
    399411
    … …  
    861873    text-decoration: none;
    862874    outline: 0;
     875
     876
     877
     878
     879
     880
    863881}
    864882
    … …  
    931949    padding: 12px 10px 8px;
    932950    color: #0073aa;
     951
     952
     953
    933954}
    934955
    935956.press-this .add-cat-toggle:focus {
    936     text-decoration: none;
    937957    color: #00a0d2;
    938958}
    … …  
    12031223    padding: 0 10px 1px;
    12041224    font-size: 13px;
     1225
     1226
     1227
    12051228}
    12061229
    … …  
    17651788    padding: 0;
    17661789    border: 0;
    1767     border-right: 1px solid #e5e5e5;
    17681790    -webkit-border-radius: 0;
    17691791    border-radius: 0;
    … …  
    17771799.insert-media:focus,
    17781800.insert-media:active {
    1779     margin: 0;
    1780     background: none;
    1781     border-color: #e5e5e5;
    17821801    color: #23282d;
    17831802}
    … …  
    17871806    outline: 0;
    17881807    color: #00a0d2;
    1789     text-decoration: none;
     1808    -webkit-box-shadow:
     1809        0 0 0 1px #5b9dd9,
     1810        0 0 2px 1px rgba(30, 140, 190, .8);
     1811    box-shadow:
     1812        0 0 0 1px #5b9dd9,
     1813        0 0 2px 1px rgba(30, 140, 190, .8);
    17901814}
    17911815
    … …  
    20132037    display: block;
    20142038    width: 100%;
     2039
    20152040    padding: 13px 37px 13px 14px;
     2041
    20162042    border-bottom: 1px solid #e5e5e5;
    20172043    text-decoration: none;
    20182044    text-align: left;
     2045
    20192046    color: #9ea7af;
    20202047    text-overflow: ellipsis;
    … …  
    20922119    width: 100%;
    20932120    padding: 13px 14px;
     2121
    20942122    border-bottom: 1px solid #e5e5e5;
     2123
    20952124    color: #00a0d2;
    20962125    text-decoration: none;

  • trunk/src/wp-admin/includes/class-wp-press-this.php

    r39968 r40052  
    14461446
    14471447                <?php if ( $supports_formats ) : ?>
    1448                     <button type="button" class="button-link post-option">
     1448                    <button type="button" class="post-option">
    14491449                        <span class="dashicons dashicons-admin-post"></span>
    14501450                        <span class="post-option-title"><?php _ex( 'Format', 'post format' ); ?></span>
    … …  
    14551455
    14561456                <?php if ( $show_categories ) : ?>
    1457                     <button type="button" class="button-link post-option">
     1457                    <button type="button" class="post-option">
    14581458                        <span class="dashicons dashicons-category"></span>
    14591459                        <span class="post-option-title"><?php _e( 'Categories' ); ?></span>
    … …  
    14631463
    14641464                <?php if ( $show_tags ) : ?>
    1465                     <button type="button" class="button-link post-option">
     1465                    <button type="button" class="post-option">
    14661466                        <span class="dashicons dashicons-tag"></span>
    14671467                        <span class="post-option-title"><?php _e( 'Tags' ); ?></span>
    … …  
    14731473            <?php if ( $supports_formats ) : ?>
    14741474                <div class="setting-modal is-off-screen is-hidden">
    1475                     <button type="button" class="button-link modal-close">
     1475                    <button type="button" class="modal-close">
    14761476                        <span class="dashicons post-option-back"></span>
    14771477                        <span class="setting-title" aria-hidden="true"><?php _ex( 'Format', 'post format' ); ?></span>
    … …  
    14841484            <?php if ( $show_categories ) : ?>
    14851485                <div class="setting-modal is-off-screen is-hidden">
    1486                     <button type="button" class="button-link modal-close">
     1486                    <button type="button" class="modal-close">
    14871487                        <span class="dashicons post-option-back"></span>
    14881488                        <span class="setting-title" aria-hidden="true"><?php _e( 'Categories' ); ?></span>
    … …  
    14951495            <?php if ( $show_tags ) : ?>
    14961496                <div class="setting-modal tags is-off-screen is-hidden">
    1497                     <button type="button" class="button-link modal-close">
     1497                    <button type="button" class="modal-close">
    14981498                        <span class="dashicons post-option-back"></span>
    14991499                        <span class="setting-title" aria-hidden="true"><?php _e( 'Tags' ); ?></span>
    … …  
    15081508    <div class="press-this-actions">
    15091509        <div class="pressthis-media-buttons">
    1510             <button type="button" class="insert-media button-link" data-editor="pressthis">
     1510            <button type="button" class="insert-media" data-editor="pressthis">
    15111511                <span class="dashicons dashicons-admin-media"></span>
    15121512                <span class="screen-reader-text"><?php _e( 'Add Media' ); ?></span>

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

    r37431 r40052  
    150150.wp-core-ui .button.focus,
    151151.wp-core-ui .button:focus,
    152 .wp-core-ui .button-secondary:focus,
    153 .wp-core-ui .button-link:focus {
     152.wp-core-ui .button-secondary:focus {
    154153    border-color: #5b9dd9;
    155154    -webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
    … …  
    211210    outline: none;
    212211    cursor: pointer;
     212
     213
     214
     215
     216
     217
     218
     219
     220
     221
     222
     223
     224
     225
    213226}
    214227
    215228.wp-core-ui .button-link:focus {
     229
     230
     231
     232
     233
     234
     235
     236
     237
     238
     239
     240
     241
     242
     243
     244
     245
     246
     247
    216248    outline: #5b9dd9 solid 1px;
    217249}

  • trunk/src/wp-includes/css/media-views.css

    r39529 r40052  
    188188    -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
    189189    transition: color .1s ease-in-out, background .1s ease-in-out;
     190
     191
     192
     193
    190194}
    191195
    … …  
    9961000    -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
    9971001    box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
     1002
     1003
    9981004}
    9991005
    … …  
    10081014    width: 24px;
    10091015    padding: 0;
     1016
    10101017    position: absolute;
    10111018    z-index: 10;
    … …  
    10141021    outline: none;
    10151022    background: #eee;
     1023
    10161024    -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
    10171025    box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
    … …  
    12511259    top: 0;
    12521260    right: 0;
     1261
     1262
    12531263}
    12541264
    … …  
    14431453    border-right: 1px solid #ddd;
    14441454    color: #0073aa;
     1455
    14451456}
    14461457
    … …  
    19791990    color: #666;
    19801991    text-transform: uppercase;
     1992
     1993
     1994
     1995
     1996
     1997
    19811998}
    19821999

  • trunk/src/wp-includes/css/wp-auth-check.css

    r36014 r40052  
    9393    width: 22px;
    9494    color: #72777c;
     95
    9596}
    9697

  • trunk/src/wp-includes/customize/class-wp-customize-nav-menu-control.php

    r39927 r40052  
    5858        <p class="screen-reader-text" id="reorder-items-desc-{{ data.menu_id }}"><?php _e( 'When in reorder mode, additional controls to reorder menu items will be available in the items list above.' ); ?></p>
    5959        <span class="menu-delete-item">
    60             <button type="button" class="button-link menu-delete">
     60            <button type="button" class="button-link -delete">
    6161                <?php _e( 'Delete Menu' ); ?>
    6262            </button>

  • trunk/src/wp-includes/customize/class-wp-customize-nav-menu-item-control.php

    r39326 r40052  
    142142                <# } #>
    143143
    144                 <button type="button" class="button-link item-delete submitdelete deletion"><?php _e( 'Remove' ); ?></button>
     144                <button type="button" class="button-link item-delete submitdelete deletion"><?php _e( 'Remove' ); ?></button>
    145145                <span class="spinner"></span>
    146146            </div>

  • trunk/src/wp-includes/js/mediaelement/wp-mediaelement.css

    r36904 r40052  
    111111    font-size: 10px;
    112112    text-transform: uppercase;
     113
    113114}
    114115

  • trunk/src/wp-includes/media-template.php

    r39639 r40052  
    473473        </div>
    474474        <# if ( data.buttons.check ) { #>
    475             <button type="button" class="button-link check" tabindex="-1"><span class="media-modal-icon"></span><span class="screen-reader-text"><?php _e( 'Deselect' ); ?></span></button>
     475            <button type="button" class="check" tabindex="-1"><span class="media-modal-icon"></span><span class="screen-reader-text"><?php _e( 'Deselect' ); ?></span></button>
    476476        <# } #>
    477477        <#
Note: See TracChangeset for help on using the changeset viewer.