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. git-svn-id: https://develop.svn.wordpress.org/trunk@35636 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Helen Hou-Sandi
parent
0068d161b3
commit
6f1bb2ab67
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
---------------------------------------------------------------------------- */
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 }}" />
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user