Site icon: Simplify focus style. (#29872)

WordPress · Mar 15, 2021 · bf159e6 · bf159e6
1 parent 98577fd
commit bf159e6
Showing 1 changed file with 18 additions and 6 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
@@ -13,21 +13,33 @@
 		border-radius: 0;
 		height: $header-height;
 		width: $header-height;
-
-		&:hover {
-			background: #32373d; // WP-admin light-gray.
-		}
+		position: relative;
 
 		&: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 ($border-width-focus + 1px) $white;
+			box-shadow: none;
+		}
+
+		&:focus::before {
+			content: "";
+			display: block;
+			position: absolute;
+			top: 9px;
+			right: 9px;
+			bottom: 9px;
+			left: 9px;
+			border-radius: $radius-block-ui + $border-width + $border-width;
+
+			// Lightened spot color focus.
+			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-post-fullscreen-mode-close_site-icon {
-	width: 36px;
+	width: $button-size;
+	border-radius: $radius-block-ui;
 }