Skip to content

Commit 7487559

Browse files
aferciaafercia
committed
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
1 parent 87364b0 commit 7487559

16 files changed

Lines changed: 109 additions & 114 deletions

‎src/wp-admin/css/common.css‎

Lines changed: 7 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,7 @@ td {
244244
line-height: inherit;
245245
}
246246

247+
/* Any change to the default link style must be applied to button-link too. */
247248
a {
248249
color: #0073aa;
249250
-webkit-transition-property: border, background, color;
@@ -464,7 +465,8 @@ code {
464465
word-wrap: break-word;
465466
}
466467

467-
.widefat a {
468+
.widefat a,
469+
.widefat button.button-link {
468470
text-decoration: none;
469471
}
470472

@@ -1242,20 +1244,10 @@ th.action-links {
12421244
}
12431245

12441246
.wp-filter .button-link.edit-filters {
1245-
color: #0073aa;
1246-
text-decoration: underline;
12471247
padding: 0 5px;
12481248
line-height: 28px;
12491249
}
12501250

1251-
.wp-filter .button-link.edit-filters:hover {
1252-
color: #00a0d2;
1253-
}
1254-
1255-
.wp-filter .button-link.edit-filters:focus {
1256-
color: #124964;
1257-
}
1258-
12591251
.filtered-by {
12601252
display: none;
12611253
margin: 0;
@@ -1607,8 +1599,7 @@ form.upgrade .hint {
16071599
color: #66c6e4;
16081600
}
16091601

1610-
.button.updated-message,
1611-
.notice .button-link {
1602+
.button.updated-message {
16121603
-webkit-transition-property: border, background, color;
16131604
transition-property: border, background, color;
16141605
-webkit-transition-duration: .05s;
@@ -1617,15 +1608,6 @@ form.upgrade .hint {
16171608
transition-timing-function: ease-in-out;
16181609
}
16191610

1620-
.notice .button-link {
1621-
color: #0073aa;
1622-
}
1623-
1624-
.notice .button-link:hover,
1625-
.notice .button-link:active {
1626-
color: #00a0d2;
1627-
}
1628-
16291611
@media aural {
16301612
.wrap .notice p:before,
16311613
.button.installing:before,
@@ -3278,6 +3260,7 @@ img {
32783260
}
32793261

32803262
.handlediv,
3263+
.postbox .handlediv.button-link,
32813264
.item-edit,
32823265
.sidebar-name-arrow,
32833266
.accordion-section-title:after {
@@ -3292,6 +3275,8 @@ img {
32923275
.widget-action:focus,
32933276
.handlediv:hover,
32943277
.handlediv:focus,
3278+
.postbox .handlediv.button-link:hover,
3279+
.postbox .handlediv.button-link:focus,
32953280
.item-edit:hover,
32963281
.item-edit:focus,
32973282
.sidebar-name:hover .sidebar-name-arrow,

‎src/wp-admin/css/customize-controls.css‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -762,19 +762,8 @@ p.customize-section-description {
762762

763763
.customize-control-dropdown-pages .add-new-toggle {
764764
margin-left: 1px;
765-
color: #0073aa;
766765
font-weight: 600;
767766
line-height: 28px;
768-
text-decoration: underline;
769-
}
770-
771-
.customize-control-dropdown-pages .add-new-toggle:hover,
772-
.customize-control-dropdown-pages .add-new-toggle:active {
773-
color: #00a0d2;
774-
}
775-
776-
.customize-control-dropdown-pages .add-new-toggle:focus {
777-
color: #124964;
778767
}
779768

780769
#customize-preview iframe {

‎src/wp-admin/css/customize-nav-menus.css‎

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,6 @@
2525
margin-left: 6px;
2626
vertical-align: middle;
2727
line-height: 28px;
28-
color: #0073aa;
29-
text-decoration: underline;
30-
}
31-
32-
.customize-control-nav_menu_location .edit-menu:hover,
33-
.customize-control-nav_menu_location .edit-menu:active {
34-
color: #00a0d2;
35-
}
36-
37-
.customize-control-nav_menu_location .edit-menu:focus {
38-
color: #124964;
3928
}
4029

4130
.wp-customizer .menu-item-bar .menu-item-handle,
@@ -806,17 +795,6 @@ li.assigned-to-menu-location .add-new-menu-item {
806795
margin-bottom: 1em;
807796
}
808797

809-
.menu-delete {
810-
color: #a00;
811-
cursor: pointer;
812-
text-decoration: underline;
813-
}
814-
815-
.menu-delete:hover,
816-
.menu-delete:focus {
817-
color: #f00;
818-
}
819-
820798
.menu-item-handle {
821799
margin-top: -1px;
822800
}

‎src/wp-admin/css/dashboard.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -771,7 +771,8 @@ form.initial-form.quickpress-open input#title {
771771
min-width: 0;
772772
}
773773

774-
#dashboard-widgets a {
774+
#dashboard-widgets a,
775+
#dashboard-widgets .button-link {
775776
text-decoration: none;
776777
}
777778

‎src/wp-admin/css/edit.css‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,6 @@ input#link_url {
100100
margin-right: 10px;
101101
padding: 0;
102102
font-size: 11px;
103-
text-decoration: underline;
104-
color: #0073aa;
105103
}
106104

107105
#comment-link-box {
@@ -1035,25 +1033,6 @@ span.description,
10351033
width: 260px;
10361034
}
10371035

1038-
.tagcloud-link.button-link {
1039-
color: #0073aa;
1040-
text-decoration: underline;
1041-
}
1042-
1043-
.tagcloud-link.button-link:hover {
1044-
color: #00a0d2;
1045-
}
1046-
1047-
.tagcloud-link.button-link:focus {
1048-
color: #124964;
1049-
-webkit-box-shadow:
1050-
0 0 0 1px #5b9dd9,
1051-
0 0 2px 1px rgba(30, 140, 190, .8);
1052-
box-shadow:
1053-
0 0 0 1px #5b9dd9,
1054-
0 0 2px 1px rgba(30, 140, 190, .8);
1055-
}
1056-
10571036
#post-body-content .tagsdiv .the-tags {
10581037
margin: 0 5px;
10591038
}

‎src/wp-admin/css/media.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1066,9 +1066,9 @@ border color while dragging a file over the uploader drop area */
10661066
line-height: 1.4;
10671067
}
10681068

1069-
.imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
1070-
.imgedit-group-top h2 a {
1069+
#poststuff .imgedit-group-top .button-link {
10711070
text-decoration: none;
1071+
color: #23282d;
10721072
}
10731073

10741074
.imgedit-applyto .imgedit-label {

‎src/wp-admin/css/nav-menus.css‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -664,24 +664,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
664664
.menu-item-settings .field-move .button-link {
665665
display: none;
666666
margin: 0 2px;
667-
color: #0073aa;
668667
font-style: italic;
669-
text-decoration: underline;
670-
}
671-
672-
.menu-item-settings .field-move .button-link:hover,
673-
.menu-item-settings .field-move .button-link:active {
674-
color: #00a0d2;
675-
}
676-
677-
.menu-item-settings .field-move .button-link:focus {
678-
color: #124964;
679-
-webkit-box-shadow:
680-
0 0 0 1px #5b9dd9,
681-
0 0 2px 1px rgba(30, 140, 190, .8);
682-
box-shadow:
683-
0 0 0 1px #5b9dd9,
684-
0 0 2px 1px rgba(30, 140, 190, .8);
685668
}
686669

687670
.menu-item-edit-active .menu-item-settings {

‎src/wp-admin/css/press-this.css‎

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -393,8 +393,20 @@ strong {
393393
padding: 5px 15px;
394394
margin: 0;
395395
width: 100%;
396+
border: 0;
396397
text-align: left;
397398
line-height: 2;
399+
background: none;
400+
color: inherit;
401+
text-decoration: none;
402+
outline: none;
403+
-webkit-transition: none;
404+
transition: none;
405+
}
406+
407+
.split-button-body .split-button-option:hover,
408+
.split-button-body .split-button-option:active {
409+
color: inherit;
398410
}
399411

400412
.is-open .split-button-body {
@@ -860,6 +872,12 @@ dd {
860872
padding: 0;
861873
text-decoration: none;
862874
outline: 0;
875+
color: inherit;
876+
}
877+
878+
.press-this .tagcloud-link:hover,
879+
.press-this .tagcloud-link:active {
880+
color: inherit;
863881
}
864882

865883
.tagcloud-link:focus {
@@ -930,10 +948,12 @@ input[type="search"].categories-search,
930948
line-height: 20px;
931949
padding: 12px 10px 8px;
932950
color: #0073aa;
951+
text-decoration: none;
952+
-webkit-transition: none;
953+
transition: none;
933954
}
934955

935956
.press-this .add-cat-toggle:focus {
936-
text-decoration: none;
937957
color: #00a0d2;
938958
}
939959

@@ -1202,6 +1222,9 @@ html {
12021222
margin-top: -13px;
12031223
padding: 0 10px 1px;
12041224
font-size: 13px;
1225+
text-decoration: none;
1226+
-webkit-transition: none;
1227+
transition: none;
12051228
}
12061229

12071230
@media (max-width: 320px) {
@@ -1764,7 +1787,6 @@ html {
17641787
margin: 0;
17651788
padding: 0;
17661789
border: 0;
1767-
border-right: 1px solid #e5e5e5;
17681790
-webkit-border-radius: 0;
17691791
border-radius: 0;
17701792
background: none;
@@ -1776,17 +1798,19 @@ html {
17761798
.insert-media:hover,
17771799
.insert-media:focus,
17781800
.insert-media:active {
1779-
margin: 0;
1780-
background: none;
1781-
border-color: #e5e5e5;
17821801
color: #23282d;
17831802
}
17841803

17851804
.insert-media:focus,
17861805
.insert-media:active {
17871806
outline: 0;
17881807
color: #00a0d2;
1789-
text-decoration: none;
1808+
-webkit-box-shadow:
1809+
0 0 0 1px #5b9dd9,
1810+
0 0 2px 1px rgba(30, 140, 190, .8);
1811+
box-shadow:
1812+
0 0 0 1px #5b9dd9,
1813+
0 0 2px 1px rgba(30, 140, 190, .8);
17901814
}
17911815

17921816
.insert-media .dashicons {
@@ -2012,10 +2036,13 @@ html {
20122036
.post-options .post-option {
20132037
display: block;
20142038
width: 100%;
2039+
margin: 0;
20152040
padding: 13px 37px 13px 14px;
2041+
border: 0;
20162042
border-bottom: 1px solid #e5e5e5;
20172043
text-decoration: none;
20182044
text-align: left;
2045+
background: none;
20192046
color: #9ea7af;
20202047
text-overflow: ellipsis;
20212048
white-space: nowrap;
@@ -2091,7 +2118,9 @@ html {
20912118
display: block;
20922119
width: 100%;
20932120
padding: 13px 14px;
2121+
border: 0;
20942122
border-bottom: 1px solid #e5e5e5;
2123+
background: none;
20952124
color: #00a0d2;
20962125
text-decoration: none;
20972126
text-align: left;

‎src/wp-admin/includes/class-wp-press-this.php‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1445,7 +1445,7 @@ public function html() {
14451445
<div class="post-options">
14461446

14471447
<?php if ( $supports_formats ) : ?>
1448-
<button type="button" class="button-link post-option">
1448+
<button type="button" class="post-option">
14491449
<span class="dashicons dashicons-admin-post"></span>
14501450
<span class="post-option-title"><?php _ex( 'Format', 'post format' ); ?></span>
14511451
<span class="post-option-contents" id="post-option-post-format"><?php echo esc_html( get_post_format_string( $post_format ) ); ?></span>
@@ -1454,15 +1454,15 @@ public function html() {
14541454
<?php endif; ?>
14551455

14561456
<?php if ( $show_categories ) : ?>
1457-
<button type="button" class="button-link post-option">
1457+
<button type="button" class="post-option">
14581458
<span class="dashicons dashicons-category"></span>
14591459
<span class="post-option-title"><?php _e( 'Categories' ); ?></span>
14601460
<span class="dashicons post-option-forward"></span>
14611461
</button>
14621462
<?php endif; ?>
14631463

14641464
<?php if ( $show_tags ) : ?>
1465-
<button type="button" class="button-link post-option">
1465+
<button type="button" class="post-option">
14661466
<span class="dashicons dashicons-tag"></span>
14671467
<span class="post-option-title"><?php _e( 'Tags' ); ?></span>
14681468
<span class="dashicons post-option-forward"></span>
@@ -1472,7 +1472,7 @@ public function html() {
14721472

14731473
<?php if ( $supports_formats ) : ?>
14741474
<div class="setting-modal is-off-screen is-hidden">
1475-
<button type="button" class="button-link modal-close">
1475+
<button type="button" class="modal-close">
14761476
<span class="dashicons post-option-back"></span>
14771477
<span class="setting-title" aria-hidden="true"><?php _ex( 'Format', 'post format' ); ?></span>
14781478
<span class="screen-reader-text"><?php _e( 'Back to post options' ) ?></span>
@@ -1483,7 +1483,7 @@ public function html() {
14831483

14841484
<?php if ( $show_categories ) : ?>
14851485
<div class="setting-modal is-off-screen is-hidden">
1486-
<button type="button" class="button-link modal-close">
1486+
<button type="button" class="modal-close">
14871487
<span class="dashicons post-option-back"></span>
14881488
<span class="setting-title" aria-hidden="true"><?php _e( 'Categories' ); ?></span>
14891489
<span class="screen-reader-text"><?php _e( 'Back to post options' ) ?></span>
@@ -1494,7 +1494,7 @@ public function html() {
14941494

14951495
<?php if ( $show_tags ) : ?>
14961496
<div class="setting-modal tags is-off-screen is-hidden">
1497-
<button type="button" class="button-link modal-close">
1497+
<button type="button" class="modal-close">
14981498
<span class="dashicons post-option-back"></span>
14991499
<span class="setting-title" aria-hidden="true"><?php _e( 'Tags' ); ?></span>
15001500
<span class="screen-reader-text"><?php _e( 'Back to post options' ) ?></span>
@@ -1507,7 +1507,7 @@ public function html() {
15071507

15081508
<div class="press-this-actions">
15091509
<div class="pressthis-media-buttons">
1510-
<button type="button" class="insert-media button-link" data-editor="pressthis">
1510+
<button type="button" class="insert-media" data-editor="pressthis">
15111511
<span class="dashicons dashicons-admin-media"></span>
15121512
<span class="screen-reader-text"><?php _e( 'Add Media' ); ?></span>
15131513
</button>

0 commit comments

Comments
 (0)