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. git-svn-id: https://develop.svn.wordpress.org/trunk@40052 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
parent
87364b0586
commit
7487559dfd
@ -244,6 +244,7 @@ td {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/* Any change to the default link style must be applied to button-link too. */
|
||||
a {
|
||||
color: #0073aa;
|
||||
-webkit-transition-property: border, background, color;
|
||||
@ -464,7 +465,8 @@ code {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.widefat a {
|
||||
.widefat a,
|
||||
.widefat button.button-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -1242,20 +1244,10 @@ th.action-links {
|
||||
}
|
||||
|
||||
.wp-filter .button-link.edit-filters {
|
||||
color: #0073aa;
|
||||
text-decoration: underline;
|
||||
padding: 0 5px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.wp-filter .button-link.edit-filters:hover {
|
||||
color: #00a0d2;
|
||||
}
|
||||
|
||||
.wp-filter .button-link.edit-filters:focus {
|
||||
color: #124964;
|
||||
}
|
||||
|
||||
.filtered-by {
|
||||
display: none;
|
||||
margin: 0;
|
||||
@ -1607,8 +1599,7 @@ form.upgrade .hint {
|
||||
color: #66c6e4;
|
||||
}
|
||||
|
||||
.button.updated-message,
|
||||
.notice .button-link {
|
||||
.button.updated-message {
|
||||
-webkit-transition-property: border, background, color;
|
||||
transition-property: border, background, color;
|
||||
-webkit-transition-duration: .05s;
|
||||
@ -1617,15 +1608,6 @@ form.upgrade .hint {
|
||||
transition-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
.notice .button-link {
|
||||
color: #0073aa;
|
||||
}
|
||||
|
||||
.notice .button-link:hover,
|
||||
.notice .button-link:active {
|
||||
color: #00a0d2;
|
||||
}
|
||||
|
||||
@media aural {
|
||||
.wrap .notice p:before,
|
||||
.button.installing:before,
|
||||
@ -3278,6 +3260,7 @@ img {
|
||||
}
|
||||
|
||||
.handlediv,
|
||||
.postbox .handlediv.button-link,
|
||||
.item-edit,
|
||||
.sidebar-name-arrow,
|
||||
.accordion-section-title:after {
|
||||
@ -3292,6 +3275,8 @@ img {
|
||||
.widget-action:focus,
|
||||
.handlediv:hover,
|
||||
.handlediv:focus,
|
||||
.postbox .handlediv.button-link:hover,
|
||||
.postbox .handlediv.button-link:focus,
|
||||
.item-edit:hover,
|
||||
.item-edit:focus,
|
||||
.sidebar-name:hover .sidebar-name-arrow,
|
||||
|
||||
@ -762,19 +762,8 @@ p.customize-section-description {
|
||||
|
||||
.customize-control-dropdown-pages .add-new-toggle {
|
||||
margin-left: 1px;
|
||||
color: #0073aa;
|
||||
font-weight: 600;
|
||||
line-height: 28px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.customize-control-dropdown-pages .add-new-toggle:hover,
|
||||
.customize-control-dropdown-pages .add-new-toggle:active {
|
||||
color: #00a0d2;
|
||||
}
|
||||
|
||||
.customize-control-dropdown-pages .add-new-toggle:focus {
|
||||
color: #124964;
|
||||
}
|
||||
|
||||
#customize-preview iframe {
|
||||
|
||||
@ -25,17 +25,6 @@
|
||||
margin-left: 6px;
|
||||
vertical-align: middle;
|
||||
line-height: 28px;
|
||||
color: #0073aa;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.customize-control-nav_menu_location .edit-menu:hover,
|
||||
.customize-control-nav_menu_location .edit-menu:active {
|
||||
color: #00a0d2;
|
||||
}
|
||||
|
||||
.customize-control-nav_menu_location .edit-menu:focus {
|
||||
color: #124964;
|
||||
}
|
||||
|
||||
.wp-customizer .menu-item-bar .menu-item-handle,
|
||||
@ -806,17 +795,6 @@ li.assigned-to-menu-location .add-new-menu-item {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.menu-delete {
|
||||
color: #a00;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.menu-delete:hover,
|
||||
.menu-delete:focus {
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.menu-item-handle {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
@ -771,7 +771,8 @@ form.initial-form.quickpress-open input#title {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#dashboard-widgets a {
|
||||
#dashboard-widgets a,
|
||||
#dashboard-widgets .button-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
@ -100,8 +100,6 @@ input#link_url {
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
font-size: 11px;
|
||||
text-decoration: underline;
|
||||
color: #0073aa;
|
||||
}
|
||||
|
||||
#comment-link-box {
|
||||
@ -1035,25 +1033,6 @@ span.description,
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.tagcloud-link.button-link {
|
||||
color: #0073aa;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.tagcloud-link.button-link:hover {
|
||||
color: #00a0d2;
|
||||
}
|
||||
|
||||
.tagcloud-link.button-link:focus {
|
||||
color: #124964;
|
||||
-webkit-box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
}
|
||||
|
||||
#post-body-content .tagsdiv .the-tags {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
@ -1066,9 +1066,9 @@ border color while dragging a file over the uploader drop area */
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
|
||||
.imgedit-group-top h2 a {
|
||||
#poststuff .imgedit-group-top .button-link {
|
||||
text-decoration: none;
|
||||
color: #23282d;
|
||||
}
|
||||
|
||||
.imgedit-applyto .imgedit-label {
|
||||
|
||||
@ -664,24 +664,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
|
||||
.menu-item-settings .field-move .button-link {
|
||||
display: none;
|
||||
margin: 0 2px;
|
||||
color: #0073aa;
|
||||
font-style: italic;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.menu-item-settings .field-move .button-link:hover,
|
||||
.menu-item-settings .field-move .button-link:active {
|
||||
color: #00a0d2;
|
||||
}
|
||||
|
||||
.menu-item-settings .field-move .button-link:focus {
|
||||
color: #124964;
|
||||
-webkit-box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
}
|
||||
|
||||
.menu-item-edit-active .menu-item-settings {
|
||||
|
||||
@ -393,8 +393,20 @@ strong {
|
||||
padding: 5px 15px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
text-align: left;
|
||||
line-height: 2;
|
||||
background: none;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.split-button-body .split-button-option:hover,
|
||||
.split-button-body .split-button-option:active {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.is-open .split-button-body {
|
||||
@ -860,6 +872,12 @@ dd {
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.press-this .tagcloud-link:hover,
|
||||
.press-this .tagcloud-link:active {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.tagcloud-link:focus {
|
||||
@ -930,10 +948,12 @@ input[type="search"].categories-search,
|
||||
line-height: 20px;
|
||||
padding: 12px 10px 8px;
|
||||
color: #0073aa;
|
||||
text-decoration: none;
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.press-this .add-cat-toggle:focus {
|
||||
text-decoration: none;
|
||||
color: #00a0d2;
|
||||
}
|
||||
|
||||
@ -1202,6 +1222,9 @@ html {
|
||||
margin-top: -13px;
|
||||
padding: 0 10px 1px;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
@media (max-width: 320px) {
|
||||
@ -1764,7 +1787,6 @@ html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
-webkit-border-radius: 0;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
@ -1776,9 +1798,6 @@ html {
|
||||
.insert-media:hover,
|
||||
.insert-media:focus,
|
||||
.insert-media:active {
|
||||
margin: 0;
|
||||
background: none;
|
||||
border-color: #e5e5e5;
|
||||
color: #23282d;
|
||||
}
|
||||
|
||||
@ -1786,7 +1805,12 @@ html {
|
||||
.insert-media:active {
|
||||
outline: 0;
|
||||
color: #00a0d2;
|
||||
text-decoration: none;
|
||||
-webkit-box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
}
|
||||
|
||||
.insert-media .dashicons {
|
||||
@ -2012,10 +2036,13 @@ html {
|
||||
.post-options .post-option {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 13px 37px 13px 14px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
text-decoration: none;
|
||||
text-align: left;
|
||||
background: none;
|
||||
color: #9ea7af;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@ -2091,7 +2118,9 @@ html {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 13px 14px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
background: none;
|
||||
color: #00a0d2;
|
||||
text-decoration: none;
|
||||
text-align: left;
|
||||
|
||||
@ -1445,7 +1445,7 @@ class WP_Press_This {
|
||||
<div class="post-options">
|
||||
|
||||
<?php if ( $supports_formats ) : ?>
|
||||
<button type="button" class="button-link post-option">
|
||||
<button type="button" class="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>
|
||||
@ -1454,7 +1454,7 @@ class WP_Press_This {
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( $show_categories ) : ?>
|
||||
<button type="button" class="button-link post-option">
|
||||
<button type="button" class="post-option">
|
||||
<span class="dashicons dashicons-category"></span>
|
||||
<span class="post-option-title"><?php _e( 'Categories' ); ?></span>
|
||||
<span class="dashicons post-option-forward"></span>
|
||||
@ -1462,7 +1462,7 @@ class WP_Press_This {
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( $show_tags ) : ?>
|
||||
<button type="button" class="button-link post-option">
|
||||
<button type="button" class="post-option">
|
||||
<span class="dashicons dashicons-tag"></span>
|
||||
<span class="post-option-title"><?php _e( 'Tags' ); ?></span>
|
||||
<span class="dashicons post-option-forward"></span>
|
||||
@ -1472,7 +1472,7 @@ class WP_Press_This {
|
||||
|
||||
<?php if ( $supports_formats ) : ?>
|
||||
<div class="setting-modal is-off-screen is-hidden">
|
||||
<button type="button" class="button-link modal-close">
|
||||
<button type="button" class="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>
|
||||
@ -1483,7 +1483,7 @@ class WP_Press_This {
|
||||
|
||||
<?php if ( $show_categories ) : ?>
|
||||
<div class="setting-modal is-off-screen is-hidden">
|
||||
<button type="button" class="button-link modal-close">
|
||||
<button type="button" class="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>
|
||||
@ -1494,7 +1494,7 @@ class WP_Press_This {
|
||||
|
||||
<?php if ( $show_tags ) : ?>
|
||||
<div class="setting-modal tags is-off-screen is-hidden">
|
||||
<button type="button" class="button-link modal-close">
|
||||
<button type="button" class="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>
|
||||
@ -1507,7 +1507,7 @@ class WP_Press_This {
|
||||
|
||||
<div class="press-this-actions">
|
||||
<div class="pressthis-media-buttons">
|
||||
<button type="button" class="insert-media button-link" data-editor="pressthis">
|
||||
<button type="button" class="insert-media" data-editor="pressthis">
|
||||
<span class="dashicons dashicons-admin-media"></span>
|
||||
<span class="screen-reader-text"><?php _e( 'Add Media' ); ?></span>
|
||||
</button>
|
||||
|
||||
@ -149,8 +149,7 @@ TABLE OF CONTENTS:
|
||||
|
||||
.wp-core-ui .button.focus,
|
||||
.wp-core-ui .button:focus,
|
||||
.wp-core-ui .button-secondary:focus,
|
||||
.wp-core-ui .button-link:focus {
|
||||
.wp-core-ui .button-secondary:focus {
|
||||
border-color: #5b9dd9;
|
||||
-webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
|
||||
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
|
||||
@ -210,9 +209,42 @@ TABLE OF CONTENTS:
|
||||
background: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
/* Mimics the default link style in common.css */
|
||||
color: #0073aa;
|
||||
text-decoration: underline;
|
||||
-webkit-transition-property: border, background, color;
|
||||
transition-property: border, background, color;
|
||||
-webkit-transition-duration: .05s;
|
||||
transition-duration: .05s;
|
||||
-webkit-transition-timing-function: ease-in-out;
|
||||
transition-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
.wp-core-ui .button-link:hover,
|
||||
.wp-core-ui .button-link:active {
|
||||
color: #00a0d2;
|
||||
}
|
||||
|
||||
.wp-core-ui .button-link:focus {
|
||||
color: #124964;
|
||||
-webkit-box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
}
|
||||
|
||||
.wp-core-ui .button-link-delete {
|
||||
color: #a00;
|
||||
}
|
||||
|
||||
.wp-core-ui .button-link-delete:hover,
|
||||
.wp-core-ui .button-link-delete:focus {
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.ie8 .wp-core-ui .button-link:focus {
|
||||
outline: #5b9dd9 solid 1px;
|
||||
}
|
||||
|
||||
|
||||
@ -189,6 +189,10 @@
|
||||
transition: color .1s ease-in-out, background .1s ease-in-out;
|
||||
}
|
||||
|
||||
.media-modal-close.button-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.media-modal-close:active {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
@ -995,6 +999,8 @@
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
|
||||
box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.wp-core-ui .attachment-close:hover,
|
||||
@ -1007,12 +1013,14 @@
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
right: 0;
|
||||
outline: none;
|
||||
background: #eee;
|
||||
cursor: pointer;
|
||||
-webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
|
||||
box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
|
||||
}
|
||||
@ -1250,6 +1258,8 @@
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.upload-errors .upload-error {
|
||||
@ -1442,6 +1452,7 @@
|
||||
line-height: 16px;
|
||||
border-right: 1px solid #ddd;
|
||||
color: #0073aa;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.media-selection .button-link:hover,
|
||||
@ -1978,6 +1989,12 @@
|
||||
padding: 0;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.image-details .advanced-toggle:hover,
|
||||
.image-details .advanced-toggle:active {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.image-details .advanced-toggle:after {
|
||||
|
||||
@ -92,6 +92,7 @@
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
color: #72777c;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#wp-auth-check-wrap .wp-auth-check-close:before {
|
||||
|
||||
@ -57,7 +57,7 @@ class WP_Customize_Nav_Menu_Control extends WP_Customize_Control {
|
||||
</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="button-link menu-delete">
|
||||
<button type="button" class="button-link button-link-delete">
|
||||
<?php _e( 'Delete Menu' ); ?>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
@ -141,7 +141,7 @@ class WP_Customize_Nav_Menu_Item_Control extends WP_Customize_Control {
|
||||
</p>
|
||||
<# } #>
|
||||
|
||||
<button type="button" class="button-link item-delete submitdelete deletion"><?php _e( 'Remove' ); ?></button>
|
||||
<button type="button" class="button-link button-link-delete 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 }}" />
|
||||
|
||||
@ -110,6 +110,7 @@
|
||||
color: #a00;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.media-embed-details .setting .remove-setting {
|
||||
|
||||
@ -472,7 +472,7 @@ function wp_print_media_templates() {
|
||||
<# } #>
|
||||
</div>
|
||||
<# if ( data.buttons.check ) { #>
|
||||
<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>
|
||||
<button type="button" class="check" tabindex="-1"><span class="media-modal-icon"></span><span class="screen-reader-text"><?php _e( 'Deselect' ); ?></span></button>
|
||||
<# } #>
|
||||
<#
|
||||
var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user