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

src/wp-includes/css/buttons.css

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

src/wp-includes/css/media-views.css

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

src/wp-includes/css/wp-auth-check.css

@@ -92,6 +92,7 @@
 	height: 22px;
 	width: 22px;
 	color: #72777c;
+	text-decoration: none;
 }
 
 #wp-auth-check-wrap .wp-auth-check-close:before {

src/wp-includes/customize/class-wp-customize-nav-menu-control.php

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

src/wp-includes/customize/class-wp-customize-nav-menu-item-control.php

@@ -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 }}" />

src/wp-includes/js/mediaelement/wp-mediaelement.css

@@ -110,6 +110,7 @@
 	color: #a00;
 	font-size: 10px;
 	text-transform: uppercase;
+	text-decoration: none;
 }
 
 .media-embed-details .setting .remove-setting {

src/wp-includes/media-template.php

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