Polish site button focus/hover styles in post and site editor (#29888)

* Bring the focus styles to the site editor. * Add hover style.
WordPress · Mar 18, 2021 · c84a064 · c84a064
1 parent cd50b38
commit c84a064
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 9 deletions.
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
@@ -1,3 +1,6 @@
+// Developer notes: these rules are duplicated for the site editor.
+// They need to be updated in both places.
+
 .edit-post-fullscreen-mode-close.has-icon {
 	// Do not show the toolbar icon on small screens,
 	// when Fullscreen Mode is not an option in the "More" menu.
@@ -23,7 +26,9 @@
 			box-shadow: none;
 		}
 
-		&:focus::before {
+		&::before {
+			transition: box-shadow 0.1s ease;
+			@include reduce-motion("transition");
 			content: "";
 			display: block;
 			position: absolute;
@@ -32,8 +37,16 @@
 			bottom: 9px;
 			left: 9px;
 			border-radius: $radius-block-ui + $border-width + $border-width;
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #23282e;
+		}
 
-			// Lightened spot color focus.
+		// Hover color.
+		&:hover::before {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700;
+		}
+
+		// Lightened spot color focus.
+		&:focus::before {
 			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 	}

diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss
@@ -62,7 +62,6 @@
 }
 
 .edit-site-navigation-panel__back-to-dashboard.components-button.is-tertiary {
-	border-radius: 0;
 	height: $button-size;
 	margin-top: $grid-unit-30;
 	padding: $grid-unit $grid-unit-20 $grid-unit $grid-unit;

diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
@@ -1,3 +1,6 @@
+// Developer notes: these rules are duplicated for the post editor.
+// They need to be updated in both places.
+
 .edit-site-navigation-toggle {
 	align-items: center;
 	background: $gray-900;
@@ -21,19 +24,42 @@
 	&.has-icon {
 		min-width: $header-height;
 
-		&:hover {
-			background: #32373d; // WP-admin light-gray.
-			color: $white;
-		}
+		&:hover,
 		&:active {
 			color: $white;
 		}
+
 		&:focus {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px $white;
+			box-shadow: none;
+		}
+
+		&::before {
+			transition: box-shadow 0.1s ease;
+			@include reduce-motion("transition");
+			content: "";
+			display: block;
+			position: absolute;
+			top: 9px;
+			right: 9px;
+			bottom: 9px;
+			left: 9px;
+			border-radius: $radius-block-ui + $border-width + $border-width;
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #23282e;
+		}
+
+		// Hover color.
+		&:hover::before {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700;
+		}
+
+		// Lightened spot color focus.
+		&:focus::before {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 	}
 }
 
 .edit-site-navigation-toggle__site-icon {
-	width: 36px;
+	width: $button-size;
+	border-radius: $radius-block-ui;
 }