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.

Built from https://develop.svn.wordpress.org/trunk@35636


git-svn-id: http://core.svn.wordpress.org/trunk@35600 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Helen Hou-Sandí 2015-11-13 15:47:27 +00:00
parent 268626d061
commit ae9e173082
22 changed files with 117 additions and 231 deletions

View File

@ -3,18 +3,6 @@ body {
-webkit-text-size-adjust: 100%;
}
button.not-a-button {
background: transparent;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 0;
border-radius: 0;
outline: 0;
padding: 0;
margin: 0;
}
#customize-controls a {
text-decoration: none;
}

File diff suppressed because one or more lines are too long

View File

@ -3,18 +3,6 @@ body {
-webkit-text-size-adjust: 100%;
}
button.not-a-button {
background: transparent;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 0;
border-radius: 0;
outline: 0;
padding: 0;
margin: 0;
}
#customize-controls a {
text-decoration: none;
}

File diff suppressed because one or more lines are too long

View File

@ -199,6 +199,8 @@
width: 30px;
height: 38px;
margin-left: 0 !important;
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
overflow: hidden;
cursor: pointer;
@ -529,6 +531,9 @@
.menu-item-bar .item-delete:hover,
.menu-item-bar .item-delete:focus {
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
color: #f00;
}
@ -618,6 +623,9 @@
position: absolute;
top: 5px;
left: 5px;
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
cursor: pointer;
}
@ -724,6 +732,9 @@
color: #82878c;
width: 30px;
height: 38px;
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
cursor: pointer;
}

File diff suppressed because one or more lines are too long

View File

@ -199,6 +199,8 @@
width: 30px;
height: 38px;
margin-right: 0 !important;
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
overflow: hidden;
cursor: pointer;
@ -529,6 +531,9 @@
.menu-item-bar .item-delete:hover,
.menu-item-bar .item-delete:focus {
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
color: #f00;
}
@ -618,6 +623,9 @@
position: absolute;
top: 5px;
right: 5px;
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
cursor: pointer;
}
@ -724,6 +732,9 @@
color: #82878c;
width: 30px;
height: 38px;
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
cursor: pointer;
}

File diff suppressed because one or more lines are too long

View File

@ -312,7 +312,6 @@ strong {
* Pushing buttons is what I do.
*/
.button-subtle,
.scan-submit {
display: inline-block;
margin: 0;
@ -329,67 +328,6 @@ strong {
-webkit-appearance: none;
}
.button-subtle {
background: none;
border: 0;
color: #0073aa;
}
.button-subtle:visited {
color: #0073aa;
}
.button-subtle:focus,
.button-subtle:hover,
.button-subtle:active,
.edit-post-link:focus,
.edit-post-link:hover,
.edit-post-link:active {
color: #00a0d2;
}
.button-subtle:focus,
.button-subtle:active,
.edit-post-link:focus,
.edit-post-link:active {
outline: 0;
text-decoration: underline;
}
.preview-button {
margin-left: 5px;
}
.button-reset {
margin: 0;
padding: 0;
border: 0;
background: none;
cursor: pointer;
-webkit-appearance: none;
}
.button-reset:focus {
outline: 0;
}
.button-link {
margin: 0;
padding: 0;
border: 0;
background: none;
color: #0073aa;
cursor: pointer;
-webkit-appearance: none;
}
.button-link:hover,
.button-link:active,
.button-link:focus {
color: #00a0d2;
text-decoration: underline;
}
.split-button {
position: relative;
display: inline-block;
@ -443,6 +381,7 @@ strong {
margin: 0;
width: 100%;
text-align: right;
line-height: 2;
}
.is-open .split-button-body {
@ -921,7 +860,7 @@ dd {
margin: 0;
}
.tagcloud-link {
.press-this .tagcloud-link {
display: block;
margin: 0 16px 5px;
padding: 0;
@ -991,23 +930,24 @@ input[type="search"].categories-search,
}
}
.add-cat-toggle {
.press-this .add-cat-toggle {
float: left;
margin-top: -45px;
line-height: 20px;
padding: 12px 10px 8px;
color: #0073aa;
}
.add-cat-toggle:focus {
.press-this .add-cat-toggle:focus {
text-decoration: none;
color: #00a0d2;
}
.add-cat-toggle.is-toggled {
.press-this .add-cat-toggle.is-toggled {
padding: 10px;
}
.add-cat-toggle.is-toggled .dashicons:before {
.press-this .add-cat-toggle.is-toggled .dashicons:before {
content: "\f179";
}
@ -1261,11 +1201,13 @@ html {
color: #999;
}
.adminbar button {
.press-this .adminbar button {
position: absolute;
top: 50%;
left: 6px;
margin-top: -13px;
padding: 0 10px 1px;
font-size: 13px;
}
@media (max-width: 320px) {
@ -1881,13 +1823,6 @@ html {
}
}
.edit-post-link {
font-size: 13px;
display: inline-block;
text-decoration: none;
padding: 0 10px;
}
.publish-button .saving-draft,
.publish-button.is-saving .publish {
display: none;
@ -2101,6 +2036,7 @@ html {
outline: 0;
-webkit-box-shadow: inset -5px 0 0 #00a0d2;
box-shadow: inset -5px 0 0 #00a0d2;
border-color: #e5e5e5;
}
.is-off-screen > .post-option {
@ -2157,7 +2093,7 @@ html {
}
}
.modal-close {
.press-this .modal-close {
display: block;
width: 100%;
padding: 13px 14px;
@ -2167,10 +2103,11 @@ html {
text-align: right;
}
.modal-close:focus {
.press-this .modal-close:focus {
outline: 0;
-webkit-box-shadow: inset -5px 0 0 #00a0d2;
box-shadow: inset -5px 0 0 #00a0d2;
border-color: #e5e5e5;
}
.setting-title {

File diff suppressed because one or more lines are too long

View File

@ -312,7 +312,6 @@ strong {
* Pushing buttons is what I do.
*/
.button-subtle,
.scan-submit {
display: inline-block;
margin: 0;
@ -329,67 +328,6 @@ strong {
-webkit-appearance: none;
}
.button-subtle {
background: none;
border: 0;
color: #0073aa;
}
.button-subtle:visited {
color: #0073aa;
}
.button-subtle:focus,
.button-subtle:hover,
.button-subtle:active,
.edit-post-link:focus,
.edit-post-link:hover,
.edit-post-link:active {
color: #00a0d2;
}
.button-subtle:focus,
.button-subtle:active,
.edit-post-link:focus,
.edit-post-link:active {
outline: 0;
text-decoration: underline;
}
.preview-button {
margin-right: 5px;
}
.button-reset {
margin: 0;
padding: 0;
border: 0;
background: none;
cursor: pointer;
-webkit-appearance: none;
}
.button-reset:focus {
outline: 0;
}
.button-link {
margin: 0;
padding: 0;
border: 0;
background: none;
color: #0073aa;
cursor: pointer;
-webkit-appearance: none;
}
.button-link:hover,
.button-link:active,
.button-link:focus {
color: #00a0d2;
text-decoration: underline;
}
.split-button {
position: relative;
display: inline-block;
@ -443,6 +381,7 @@ strong {
margin: 0;
width: 100%;
text-align: left;
line-height: 2;
}
.is-open .split-button-body {
@ -921,7 +860,7 @@ dd {
margin: 0;
}
.tagcloud-link {
.press-this .tagcloud-link {
display: block;
margin: 0 16px 5px;
padding: 0;
@ -991,23 +930,24 @@ input[type="search"].categories-search,
}
}
.add-cat-toggle {
.press-this .add-cat-toggle {
float: right;
margin-top: -45px;
line-height: 20px;
padding: 12px 10px 8px;
color: #0073aa;
}
.add-cat-toggle:focus {
.press-this .add-cat-toggle:focus {
text-decoration: none;
color: #00a0d2;
}
.add-cat-toggle.is-toggled {
.press-this .add-cat-toggle.is-toggled {
padding: 10px;
}
.add-cat-toggle.is-toggled .dashicons:before {
.press-this .add-cat-toggle.is-toggled .dashicons:before {
content: "\f179";
}
@ -1261,11 +1201,13 @@ html {
color: #999;
}
.adminbar button {
.press-this .adminbar button {
position: absolute;
top: 50%;
right: 6px;
margin-top: -13px;
padding: 0 10px 1px;
font-size: 13px;
}
@media (max-width: 320px) {
@ -1881,13 +1823,6 @@ html {
}
}
.edit-post-link {
font-size: 13px;
display: inline-block;
text-decoration: none;
padding: 0 10px;
}
.publish-button .saving-draft,
.publish-button.is-saving .publish {
display: none;
@ -2101,6 +2036,7 @@ html {
outline: 0;
-webkit-box-shadow: inset 5px 0 0 #00a0d2;
box-shadow: inset 5px 0 0 #00a0d2;
border-color: #e5e5e5;
}
.is-off-screen > .post-option {
@ -2157,7 +2093,7 @@ html {
}
}
.modal-close {
.press-this .modal-close {
display: block;
width: 100%;
padding: 13px 14px;
@ -2167,10 +2103,11 @@ html {
text-align: left;
}
.modal-close:focus {
.press-this .modal-close:focus {
outline: 0;
-webkit-box-shadow: inset 5px 0 0 #00a0d2;
box-shadow: inset 5px 0 0 #00a0d2;
border-color: #e5e5e5;
}
.setting-title {

File diff suppressed because one or more lines are too long

View File

@ -876,7 +876,7 @@ class WP_Press_This {
if ( current_user_can( $taxonomy->cap->edit_terms ) ) {
?>
<button type="button" class="add-cat-toggle button-subtle" aria-expanded="false">
<button type="button" class="add-cat-toggle button-link" aria-expanded="false">
<span class="dashicons dashicons-plus"></span><span class="screen-reader-text"><?php _e( 'Toggle add category' ); ?></span>
</button>
<div class="add-category is-hidden">
@ -961,7 +961,7 @@ class WP_Press_This {
if ( $user_can_assign_terms ) {
?>
<button type="button" class="button-reset button-link tagcloud-link" id="link-post_tag"><?php echo $taxonomy->labels->choose_from_most_used; ?></button>
<button type="button" class="button-link tagcloud-link" id="link-post_tag"><?php echo $taxonomy->labels->choose_from_most_used; ?></button>
<?php
}
}
@ -1341,7 +1341,7 @@ class WP_Press_This {
<span class="current-site-name"><?php bloginfo( 'name' ); ?></span>
</a>
</h1>
<button type="button" class="options button-subtle closed">
<button type="button" class="options button-link closed">
<span class="dashicons dashicons-tag on-closed"></span>
<span class="screen-reader-text on-closed"><?php _e( 'Show post options' ); ?></span>
<span aria-hidden="true" class="on-open"><?php _e( 'Done' ); ?></span>
@ -1430,7 +1430,7 @@ class WP_Press_This {
<div class="post-options">
<?php if ( $supports_formats ) : ?>
<button type="button" class="button-reset post-option">
<button type="button" class="button-link post-option">
<span class="dashicons dashicons-admin-post"></span>
<span class="post-option-title"><?php _ex( 'Format', 'post format' ); ?></span>
<span class="post-option-contents" id="post-option-post-format"><?php echo esc_html( get_post_format_string( $post_format ) ); ?></span>
@ -1438,13 +1438,13 @@ class WP_Press_This {
</button>
<?php endif; ?>
<button type="button" class="button-reset post-option">
<button type="button" class="button-link post-option">
<span class="dashicons dashicons-category"></span>
<span class="post-option-title"><?php _e( 'Categories' ); ?></span>
<span class="dashicons post-option-forward"></span>
</button>
<button type="button" class="button-reset post-option">
<button type="button" class="button-link post-option">
<span class="dashicons dashicons-tag"></span>
<span class="post-option-title"><?php _e( 'Tags' ); ?></span>
<span class="dashicons post-option-forward"></span>
@ -1453,7 +1453,7 @@ class WP_Press_This {
<?php if ( $supports_formats ) : ?>
<div class="setting-modal is-off-screen is-hidden">
<button type="button" class="button-reset modal-close">
<button type="button" class="button-link modal-close">
<span class="dashicons post-option-back"></span>
<span class="setting-title" aria-hidden="true"><?php _ex( 'Format', 'post format' ); ?></span>
<span class="screen-reader-text"><?php _e( 'Back to post options' ) ?></span>
@ -1463,7 +1463,7 @@ class WP_Press_This {
<?php endif; ?>
<div class="setting-modal is-off-screen is-hidden">
<button type="button" class="button-reset modal-close">
<button type="button" class="button-link modal-close">
<span class="dashicons post-option-back"></span>
<span class="setting-title" aria-hidden="true"><?php _e( 'Categories' ); ?></span>
<span class="screen-reader-text"><?php _e( 'Back to post options' ) ?></span>
@ -1472,7 +1472,7 @@ class WP_Press_This {
</div>
<div class="setting-modal tags is-off-screen is-hidden">
<button type="button" class="button-reset modal-close">
<button type="button" class="button-link modal-close">
<span class="dashicons post-option-back"></span>
<span class="setting-title" aria-hidden="true"><?php _e( 'Tags' ); ?></span>
<span class="screen-reader-text"><?php _e( 'Back to post options' ) ?></span>
@ -1484,7 +1484,7 @@ class WP_Press_This {
<div class="press-this-actions">
<div class="pressthis-media-buttons">
<button type="button" class="insert-media button-subtle" data-editor="pressthis">
<button type="button" class="insert-media button-link" data-editor="pressthis">
<span class="dashicons dashicons-admin-media"></span>
<span class="screen-reader-text"><?php _e( 'Add Media' ); ?></span>
</button>
@ -1502,9 +1502,9 @@ class WP_Press_This {
</button>
</div>
<ul class="split-button-body">
<li><button type="button" class="button-subtle draft-button split-button-option"><?php _e( 'Save Draft' ); ?></button></li>
<li><button type="button" class="button-subtle standard-editor-button split-button-option"><?php _e( 'Standard Editor' ); ?></button></li>
<li><button type="button" class="button-subtle preview-button split-button-option"><?php _e( 'Preview' ); ?></button></li>
<li><button type="button" class="button-link draft-button split-button-option"><?php _e( 'Save Draft' ); ?></button></li>
<li><button type="button" class="button-link standard-editor-button split-button-option"><?php _e( 'Standard Editor' ); ?></button></li>
<li><button type="button" class="button-link preview-button split-button-option"><?php _e( 'Preview' ); ?></button></li>
</ul>
</div>
</div>

View File

@ -677,7 +677,7 @@ final class WP_Customize_Nav_Menus {
<span class="item-title" aria-hidden="true">
<span class="menu-item-title<# if ( ! data.title ) { #> no-title<# } #>">{{ data.title || wp.customize.Menus.data.l10n.untitled }}</span>
</span>
<button type="button" class="not-a-button item-add">
<button type="button" class="button-link item-add">
<span class="screen-reader-text"><?php
/* translators: 1: Title of a menu item, 2: Type of a menu item */
printf( __( 'Add to menu: %1$s (%2$s)' ), '{{ data.title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.type_label }}' );
@ -740,7 +740,7 @@ final class WP_Customize_Nav_Menus {
<div id="new-custom-menu-item" class="accordion-section">
<h4 class="accordion-section-title" role="presentation">
<?php _e( 'Custom Links' ); ?>
<button type="button" class="not-a-button" aria-expanded="false">
<button type="button" class="button-link" aria-expanded="false">
<span class="screen-reader-text"><?php _e( 'Toggle section: Custom Links' ); ?></span>
<span class="toggle-indicator" aria-hidden="true"></span>
</button>
@ -777,7 +777,7 @@ final class WP_Customize_Nav_Menus {
<?php echo esc_html( $available_item_type['title'] ); ?>
<span class="spinner"></span>
<span class="no-items"><?php _e( 'No items' ); ?></span>
<button type="button" class="not-a-button" aria-expanded="false">
<button type="button" class="button-link" aria-expanded="false">
<span class="screen-reader-text"><?php
/* translators: %s: Title of a section with menu items */
printf( __( 'Toggle section: %s' ), esc_html( $available_item_type['title'] ) ); ?></span>

View File

@ -100,10 +100,6 @@ TABLE OF CONTENTS:
outline: none;
}
.ie8 .wp-core-ui .button-link:focus {
outline: #5b9dd9 solid 1px;
}
.wp-core-ui .button.hidden {
display: none;
}
@ -140,13 +136,6 @@ TABLE OF CONTENTS:
vertical-align: baseline;
}
.wp-core-ui .button-link {
border: 0;
background: none;
outline: none;
cursor: pointer;
}
.wp-core-ui .button.hover,
.wp-core-ui .button:hover,
.wp-core-ui .button-secondary:hover,
@ -206,6 +195,24 @@ TABLE OF CONTENTS:
cursor: default;
}
/* Buttons that look like links, for a cross of good semantics with the visual */
.wp-core-ui .button-link {
margin: 0;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
border: 0;
-webkit-border-radius: 0;
border-radius: 0;
background: none;
outline: none;
cursor: pointer;
}
.wp-core-ui .button-link:focus {
outline: #5b9dd9 solid 1px;
}
/* ----------------------------------------------------------------------------
3.0 - Primary Button Style
---------------------------------------------------------------------------- */

File diff suppressed because one or more lines are too long

View File

@ -100,10 +100,6 @@ TABLE OF CONTENTS:
outline: none;
}
.ie8 .wp-core-ui .button-link:focus {
outline: #5b9dd9 solid 1px;
}
.wp-core-ui .button.hidden {
display: none;
}
@ -140,13 +136,6 @@ TABLE OF CONTENTS:
vertical-align: baseline;
}
.wp-core-ui .button-link {
border: 0;
background: none;
outline: none;
cursor: pointer;
}
.wp-core-ui .button.hover,
.wp-core-ui .button:hover,
.wp-core-ui .button-secondary:hover,
@ -206,6 +195,24 @@ TABLE OF CONTENTS:
cursor: default;
}
/* Buttons that look like links, for a cross of good semantics with the visual */
.wp-core-ui .button-link {
margin: 0;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
border: 0;
-webkit-border-radius: 0;
border-radius: 0;
background: none;
outline: none;
cursor: pointer;
}
.wp-core-ui .button-link:focus {
outline: #5b9dd9 solid 1px;
}
/* ----------------------------------------------------------------------------
3.0 - Primary Button Style
---------------------------------------------------------------------------- */

File diff suppressed because one or more lines are too long

View File

@ -51,13 +51,13 @@ class WP_Customize_Nav_Menu_Control extends WP_Customize_Control {
<button type="button" class="button-secondary add-new-menu-item" aria-label="<?php esc_attr_e( 'Add or remove menu items' ); ?>" aria-expanded="false" aria-controls="available-menu-items">
<?php _e( 'Add Items' ); ?>
</button>
<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 }}">
<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 }}">
<span class="reorder"><?php _ex( 'Reorder', 'Reorder menu items in Customizer' ); ?></span>
<span class="reorder-done"><?php _ex( 'Done', 'Cancel reordering menu items in Customizer' ); ?></span>
</button>
<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>
<span class="menu-delete-item">
<button type="button" class="not-a-button menu-delete">
<button type="button" class="button-link menu-delete">
<?php _e( 'Delete menu' ); ?> <span class="screen-reader-text">{{ data.menu_name }}</span>
</button>
</span>

View File

@ -72,11 +72,11 @@ class WP_Customize_Nav_Menu_Item_Control extends WP_Customize_Control {
<span class="menu-item-title<# if ( ! data.title ) { #> no-title<# } #>">{{ data.title || wp.customize.Menus.data.l10n.untitled }}</span>
</span>
<span class="item-controls">
<button type="button" class="not-a-button item-edit" aria-expanded="false"><span class="screen-reader-text"><?php
<button type="button" class="button-link item-edit" aria-expanded="false"><span class="screen-reader-text"><?php
/* translators: 1: Title of a menu item, 2: Type of a menu item */
printf( __( 'Edit menu item: %1$s (%2$s)' ), '{{ data.title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}' );
?></span><span class="toggle-indicator" aria-hidden="true"></span></button>
<button type="button" class="not-a-button item-delete submitdelete deletion"><span class="screen-reader-text"><?php
<button type="button" class="button-link item-delete submitdelete deletion"><span class="screen-reader-text"><?php
/* translators: 1: Title of a menu item, 2: Type of a menu item */
printf( __( 'Remove Menu Item: %1$s (%2$s)' ), '{{ data.title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}' );
?></span></button>
@ -138,7 +138,7 @@ class WP_Customize_Nav_Menu_Item_Control extends WP_Customize_Control {
</p>
<# } #>
<button type="button" class="not-a-button item-delete submitdelete deletion"><?php _e( 'Remove' ); ?></button>
<button type="button" class="button-link item-delete submitdelete deletion"><?php _e( 'Remove' ); ?></button>
<span class="spinner"></span>
</div>
<input type="hidden" name="menu-item-db-id[{{ data.menu_item_id }}]" class="menu-item-data-db-id" value="{{ data.menu_item_id }}" />

View File

@ -60,7 +60,7 @@ class WP_Widget_Area_Customize_Control extends WP_Customize_Control {
<button type="button" class="button-secondary add-new-widget" aria-expanded="false" aria-controls="available-widgets">
<?php _e( 'Add a Widget' ); ?>
</button>
<button type="button" class="not-a-button reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder widgets' ); ?>" aria-describedby="<?php echo esc_attr( $id ); ?>">
<button type="button" class="button-link reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder widgets' ); ?>" aria-describedby="<?php echo esc_attr( $id ); ?>">
<span class="reorder"><?php _ex( 'Reorder', 'Reorder widgets in Customizer' ); ?></span>
<span class="reorder-done"><?php _ex( 'Done', 'Cancel reordering widgets in Customizer' ); ?></span>
</button>

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.4-beta4-35635';
$wp_version = '4.4-beta4-35636';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.