Make WordPress Core

Changeset 35636


Ignore:
Timestamp:
11/13/2015 03:46:12 PM (11 years ago)
Author:
helen
Message:

Buttons: Standardize on .button-link for link-like buttons.

This serves as both a reset and some basic styling. The class name also aligns with parallel components in other popular projects.

props paulwilde for the initial patch.
fixes #34242.

Location:
trunk/src
Files:
9 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/customize-controls.css

    r35608 r35636  
    22        overflow: hidden;
    33        -webkit-text-size-adjust: 100%;
    4 }
    5 
    6 button.not-a-button {
    7         background: transparent;
    8         border: none;
    9         -webkit-box-shadow: none;
    10         box-shadow: none;
    11         -webkit-border-radius: 0;
    12         border-radius: 0;
    13         outline: 0;
    14         padding: 0;
    15         margin: 0;
    164}
    175
  • trunk/src/wp-admin/css/customize-nav-menus.css

    r35563 r35636  
    200200        height: 38px;
    201201        margin-right: 0 !important;
     202        -webkit-box-shadow: none;
     203        box-shadow: none;
    202204        outline: none;
    203205        overflow: hidden;
    … …  
    530532.menu-item-bar .item-delete:hover,
    531533.menu-item-bar .item-delete:focus {
     534        -webkit-box-shadow: none;
     535        box-shadow: none;
     536        outline: none;
    532537        color: #f00;
    533538}
    … …  
    619624        top: 5px;
    620625        right: 5px;
     626        -webkit-box-shadow: none;
     627        box-shadow: none;
     628        outline: none;
    621629        cursor: pointer;
    622630}
    … …  
    725733        width: 30px;
    726734        height: 38px;
     735        -webkit-box-shadow: none;
     736        box-shadow: none;
     737        outline: none;
    727738        cursor: pointer;
    728739}
  • trunk/src/wp-admin/css/press-this.css

    r35563 r35636  
    313313*/
    314314
    315 .button-subtle,
    316315.scan-submit {
    317316        display: inline-block;
    … …  
    330329}
    331330
    332 .button-subtle {
    333         background: none;
    334         border: 0;
    335         color: #0073aa;
    336 }
    337 
    338 .button-subtle:visited {
    339         color: #0073aa;
    340 }
    341 
    342 .button-subtle:focus,
    343 .button-subtle:hover,
    344 .button-subtle:active,
    345 .edit-post-link:focus,
    346 .edit-post-link:hover,
    347 .edit-post-link:active {
    348         color: #00a0d2;
    349 }
    350 
    351 .button-subtle:focus,
    352 .button-subtle:active,
    353 .edit-post-link:focus,
    354 .edit-post-link:active {
    355         outline: 0;
    356         text-decoration: underline;
    357 }
    358 
    359 .preview-button {
    360         margin-right: 5px;
    361 }
    362 
    363 .button-reset {
    364         margin: 0;
    365         padding: 0;
    366         border: 0;
    367         background: none;
    368         cursor: pointer;
    369         -webkit-appearance: none;
    370 }
    371 
    372 .button-reset:focus {
    373         outline: 0;
    374 }
    375 
    376 .button-link {
    377         margin: 0;
    378         padding: 0;
    379         border: 0;
    380         background: none;
    381         color: #0073aa;
    382         cursor: pointer;
    383         -webkit-appearance: none;
    384 }
    385 
    386 .button-link:hover,
    387 .button-link:active,
    388 .button-link:focus {
    389         color: #00a0d2;
    390         text-decoration: underline;
    391 }
    392 
    393331.split-button {
    394332        position: relative;
    … …  
    444382        width: 100%;
    445383        text-align: left;
     384        line-height: 2;
    446385}
    447386
    … …  
    922861}
    923862
    924 .tagcloud-link {
     863.press-this .tagcloud-link {
    925864        display: block;
    926865        margin: 0 16px 5px;
    … …  
    992931}
    993932
    994 .add-cat-toggle {
     933.press-this .add-cat-toggle {
    995934        float: right;
    996935        margin-top: -45px;
    997936        line-height: 20px;
    998937        padding: 12px 10px 8px;
    999 }
    1000 
    1001 .add-cat-toggle:focus {
     938        color: #0073aa;
     939}
     940
     941.press-this .add-cat-toggle:focus {
    1002942        text-decoration: none;
    1003943        color: #00a0d2;
    1004944}
    1005945
    1006 .add-cat-toggle.is-toggled {
     946.press-this .add-cat-toggle.is-toggled {
    1007947        padding: 10px;
    1008948}
    1009949
    1010 .add-cat-toggle.is-toggled .dashicons:before {
     950.press-this .add-cat-toggle.is-toggled .dashicons:before {
    1011951        content: "\f179";
    1012952}
    … …  
    12621202}
    12631203
    1264 .adminbar button {
     1204.press-this .adminbar button {
    12651205        position: absolute;
    12661206        top: 50%;
    12671207        right: 6px;
    12681208        margin-top: -13px;
     1209        padding: 0 10px 1px;
     1210        font-size: 13px;
    12691211}
    12701212
    … …  
    18821824}
    18831825
    1884 .edit-post-link {
    1885         font-size: 13px;
    1886         display: inline-block;
    1887         text-decoration: none;
    1888         padding: 0 10px;
    1889 }
    1890 
    18911826.publish-button .saving-draft,
    18921827.publish-button.is-saving .publish {
    … …  
    21022037        -webkit-box-shadow: inset 5px 0 0 #00a0d2;
    21032038        box-shadow: inset 5px 0 0 #00a0d2;
     2039        border-color: #e5e5e5;
    21042040}
    21052041
    … …  
    21582094}
    21592095
    2160 .modal-close {
     2096.press-this .modal-close {
    21612097        display: block;
    21622098        width: 100%;
    … …  
    21682104}
    21692105
    2170 .modal-close:focus {
     2106.press-this .modal-close:focus {
    21712107        outline: 0;
    21722108        -webkit-box-shadow: inset 5px 0 0 #00a0d2;
    21732109        box-shadow: inset 5px 0 0 #00a0d2;
     2110        border-color: #e5e5e5;
    21742111}
    21752112
  • trunk/src/wp-admin/includes/class-wp-press-this.php

    r34736 r35636  
    877877                if ( current_user_can( $taxonomy->cap->edit_terms ) ) {
    878878                        ?>
    879                         <button type="button" class="add-cat-toggle button-subtle" aria-expanded="false">
     879                        <button type="button" class="add-cat-toggle button-link" aria-expanded="false">
    880880                                <span class="dashicons dashicons-plus"></span><span class="screen-reader-text"><?php _e( 'Toggle add category' ); ?></span>
    881881                        </button>
    … …  
    962962                if ( $user_can_assign_terms ) {
    963963                        ?>
    964                         <button type="button" class="button-reset button-link tagcloud-link" id="link-post_tag"><?php echo $taxonomy->labels->choose_from_most_used; ?></button>
     964                        <button type="button" class="button-link tagcloud-link" id="link-post_tag"><?php echo $taxonomy->labels->choose_from_most_used; ?></button>
    965965                        <?php
    966966                }
    … …  
    13421342                        </a>
    13431343                </h1>
    1344                 <button type="button" class="options button-subtle closed">
     1344                <button type="button" class="options button-link closed">
    13451345                        <span class="dashicons dashicons-tag on-closed"></span>
    13461346                        <span class="screen-reader-text on-closed"><?php _e( 'Show post options' ); ?></span>
    … …  
    14311431
    14321432                                <?php if ( $supports_formats ) : ?>
    1433                                         <button type="button" class="button-reset post-option">
     1433                                        <button type="button" class="button-link post-option">
    14341434                                                <span class="dashicons dashicons-admin-post"></span>
    14351435                                                <span class="post-option-title"><?php _ex( 'Format', 'post format' ); ?></span>
    … …  
    14391439                                <?php endif; ?>
    14401440
    1441                                 <button type="button" class="button-reset post-option">
     1441                                <button type="button" class="button-link post-option">
    14421442                                        <span class="dashicons dashicons-category"></span>
    14431443                                        <span class="post-option-title"><?php _e( 'Categories' ); ?></span>
    … …  
    14451445                                </button>
    14461446
    1447                                 <button type="button" class="button-reset post-option">
     1447                                <button type="button" class="button-link post-option">
    14481448                                        <span class="dashicons dashicons-tag"></span>
    14491449                                        <span class="post-option-title"><?php _e( 'Tags' ); ?></span>
    … …  
    14541454                        <?php if ( $supports_formats ) : ?>
    14551455                                <div class="setting-modal is-off-screen is-hidden">
    1456                                         <button type="button" class="button-reset modal-close">
     1456                                        <button type="button" class="button-link modal-close">
    14571457                                                <span class="dashicons post-option-back"></span>
    14581458                                                <span class="setting-title" aria-hidden="true"><?php _ex( 'Format', 'post format' ); ?></span>
    … …  
    14641464
    14651465                        <div class="setting-modal is-off-screen is-hidden">
    1466                                 <button type="button" class="button-reset modal-close">
     1466                                <button type="button" class="button-link modal-close">
    14671467                                        <span class="dashicons post-option-back"></span>
    14681468                                        <span class="setting-title" aria-hidden="true"><?php _e( 'Categories' ); ?></span>
    … …  
    14731473
    14741474                        <div class="setting-modal tags is-off-screen is-hidden">
    1475                                 <button type="button" class="button-reset modal-close">
     1475                                <button type="button" class="button-link modal-close">
    14761476                                        <span class="dashicons post-option-back"></span>
    14771477                                        <span class="setting-title" aria-hidden="true"><?php _e( 'Tags' ); ?></span>
    … …  
    14851485        <div class="press-this-actions">
    14861486                <div class="pressthis-media-buttons">
    1487                         <button type="button" class="insert-media button-subtle" data-editor="pressthis">
     1487                        <button type="button" class="insert-media button-link" data-editor="pressthis">
    14881488                                <span class="dashicons dashicons-admin-media"></span>
    14891489                                <span class="screen-reader-text"><?php _e( 'Add Media' ); ?></span>
    … …  
    15031503                                </div>
    15041504                                <ul class="split-button-body">
    1505                                         <li><button type="button" class="button-subtle draft-button split-button-option"><?php _e( 'Save Draft' ); ?></button></li>
    1506                                         <li><button type="button" class="button-subtle standard-editor-button split-button-option"><?php _e( 'Standard Editor' ); ?></button></li>
    1507                                         <li><button type="button" class="button-subtle preview-button split-button-option"><?php _e( 'Preview' ); ?></button></li>
     1505                                        <li><button type="button" class="button-link draft-button split-button-option"><?php _e( 'Save Draft' ); ?></button></li>
     1506                                        <li><button type="button" class="button-link standard-editor-button split-button-option"><?php _e( 'Standard Editor' ); ?></button></li>
     1507                                        <li><button type="button" class="button-link preview-button split-button-option"><?php _e( 'Preview' ); ?></button></li>
    15081508                                </ul>
    15091509                        </div>
  • trunk/src/wp-includes/class-wp-customize-nav-menus.php

    r35501 r35636  
    678678                                                        <span class="menu-item-title<# if ( ! data.title ) { #> no-title<# } #>">{{ data.title || wp.customize.Menus.data.l10n.untitled }}</span>
    679679                                                </span>
    680                                                 <button type="button" class="not-a-button item-add">
     680                                                <button type="button" class="button-link item-add">
    681681                                                        <span class="screen-reader-text"><?php
    682682                                                                /* translators: 1: Title of a menu item, 2: Type of a menu item */
    … …  
    741741                                <h4 class="accordion-section-title" role="presentation">
    742742                                        <?php _e( 'Custom Links' ); ?>
    743                                         <button type="button" class="not-a-button" aria-expanded="false">
     743                                        <button type="button" class="button-link" aria-expanded="false">
    744744                                                <span class="screen-reader-text"><?php _e( 'Toggle section: Custom Links' ); ?></span>
    745745                                                <span class="toggle-indicator" aria-hidden="true"></span>
    … …  
    778778                                                <span class="spinner"></span>
    779779                                                <span class="no-items"><?php _e( 'No items' ); ?></span>
    780                                                 <button type="button" class="not-a-button" aria-expanded="false">
     780                                                <button type="button" class="button-link" aria-expanded="false">
    781781                                                        <span class="screen-reader-text"><?php
    782782                                                        /* translators: %s: Title of a section with menu items */
  • trunk/src/wp-includes/css/buttons.css

    r35421 r35636  
    101101}
    102102
    103 .ie8 .wp-core-ui .button-link:focus {
    104         outline: #5b9dd9 solid 1px;
    105 }
    106 
    107103.wp-core-ui .button.hidden {
    108104        display: none;
    … …  
    139135.wp-core-ui p .button {
    140136        vertical-align: baseline;
    141 }
    142 
    143 .wp-core-ui .button-link {
    144         border: 0;
    145         background: none;
    146         outline: none;
    147         cursor: pointer;
    148137}
    149138
    … …  
    207196}
    208197
     198/* Buttons that look like links, for a cross of good semantics with the visual */
     199.wp-core-ui .button-link {
     200        margin: 0;
     201        padding: 0;
     202        -webkit-box-shadow: none;
     203        box-shadow: none;
     204        border: 0;
     205        -webkit-border-radius: 0;
     206        border-radius: 0;
     207        background: none;
     208        outline: none;
     209        cursor: pointer;
     210}
     211
     212.wp-core-ui .button-link:focus {
     213        outline: #5b9dd9 solid 1px;
     214}
     215
    209216/* ----------------------------------------------------------------------------
    210217  3.0 - Primary Button Style
  • trunk/src/wp-includes/customize/class-wp-customize-nav-menu-control.php

    r35396 r35636  
    5252                        <?php _e( 'Add Items' ); ?>
    5353                </button>
    54                 <button type="button" class="not-a-button reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder menu items' ); ?>" aria-describedby="reorder-items-desc-{{ data.menu_id }}">
     54                <button type="button" class="button-link reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder menu items' ); ?>" aria-describedby="reorder-items-desc-{{ data.menu_id }}">
    5555                        <span class="reorder"><?php _ex( 'Reorder', 'Reorder menu items in Customizer' ); ?></span>
    5656                        <span class="reorder-done"><?php _ex( 'Done', 'Cancel reordering menu items in Customizer' ); ?></span>
    … …  
    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="not-a-button menu-delete">
     60                        <button type="button" class="button-link menu-delete">
    6161                                <?php _e( 'Delete menu' ); ?> <span class="screen-reader-text">{{ data.menu_name }}</span>
    6262                        </button>
  • trunk/src/wp-includes/customize/class-wp-customize-nav-menu-item-control.php

    r35389 r35636  
    7373                                </span>
    7474                                <span class="item-controls">
    75                                         <button type="button" class="not-a-button item-edit" aria-expanded="false"><span class="screen-reader-text"><?php
     75                                        <button type="button" class="button-link item-edit" aria-expanded="false"><span class="screen-reader-text"><?php
    7676                                                /* translators: 1: Title of a menu item, 2: Type of a menu item */
    7777                                                printf( __( 'Edit menu item: %1$s (%2$s)' ), '{{ data.title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}' );
    7878                                        ?></span><span class="toggle-indicator" aria-hidden="true"></span></button>
    79                                         <button type="button" class="not-a-button item-delete submitdelete deletion"><span class="screen-reader-text"><?php
     79                                        <button type="button" class="button-link item-delete submitdelete deletion"><span class="screen-reader-text"><?php
    8080                                                /* translators: 1: Title of a menu item, 2: Type of a menu item */
    8181                                                printf( __( 'Remove Menu Item: %1$s (%2$s)' ), '{{ data.title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}' );
    … …  
    139139                                <# } #>
    140140
    141                                 <button type="button" class="not-a-button item-delete submitdelete deletion"><?php _e( 'Remove' ); ?></button>
     141                                <button type="button" class="button-link item-delete submitdelete deletion"><?php _e( 'Remove' ); ?></button>
    142142                                <span class="spinner"></span>
    143143                        </div>
  • trunk/src/wp-includes/customize/class-wp-widget-area-customize-control.php

    r35393 r35636  
    6161                        <?php _e( 'Add a Widget' ); ?>
    6262                </button>
    63                 <button type="button" class="not-a-button reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder widgets' ); ?>" aria-describedby="<?php echo esc_attr( $id ); ?>">
     63                <button type="button" class="button-link reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder widgets' ); ?>" aria-describedby="<?php echo esc_attr( $id ); ?>">
    6464                        <span class="reorder"><?php _ex( 'Reorder', 'Reorder widgets in Customizer' ); ?></span>
    6565                        <span class="reorder-done"><?php _ex( 'Done', 'Cancel reordering widgets in Customizer' ); ?></span>
Note: See TracChangeset for help on using the changeset viewer.