WordPress.org
Get WordPress

Make WordPress Core

Changeset 35636


Ignore:
Timestamp:
11/13/2015 03:46:12 PM (9 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.