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.

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


git-svn-id: http://core.svn.wordpress.org/trunk@39989 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/common-rtl.css

@@ -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,

wp-admin/css/common.css

@@ -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,

wp-admin/css/customize-controls-rtl.css

@@ -762,19 +762,8 @@ p.customize-section-description {
 
 .customize-control-dropdown-pages .add-new-toggle {
 	margin-right: 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 {

wp-admin/css/customize-controls.css

@@ -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 {

wp-admin/css/customize-nav-menus-rtl.css

@@ -25,17 +25,6 @@
 	margin-right: 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;
 }

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

@@ -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;
 }

wp-admin/css/dashboard-rtl.css

@@ -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;
 }
 

wp-admin/css/dashboard.css

@@ -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;
 }
 

wp-admin/css/edit-rtl.css

@@ -100,8 +100,6 @@ input#link_url {
 	margin-left: 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;
 }

wp-admin/css/edit.css

@@ -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;
 }

wp-admin/css/media-rtl.css

@@ -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 {

wp-admin/css/media.css

@@ -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 {

wp-admin/css/nav-menus-rtl.css

@@ -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 {

wp-admin/css/nav-menus.css

@@ -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 {

wp-admin/css/press-this-rtl.css

@@ -393,8 +393,20 @@ strong {
 	padding: 5px 15px;
 	margin: 0;
 	width: 100%;
+	border: 0;
 	text-align: right;
 	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-left: 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 14px 13px 37px;
+	border: 0;
 	border-bottom: 1px solid #e5e5e5;
 	text-decoration: none;
 	text-align: right;
+	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: right;

wp-admin/css/press-this.css

@@ -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;