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

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

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

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

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

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

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

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

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