Move hover style up one level and remove gap

WordPress · May 24, 2023 · 82a7024 · 82a7024
1 parent aacac08
commit 82a7024
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 20 deletions.
diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js
@@ -92,7 +92,11 @@ const SiteHub = forwardRef( ( props, ref ) => {
 				ease: 'easeOut',
 			} }
 		>
-			<HStack justify="space-between" alignment="center">
+			<HStack
+				justify="space-between"
+				alignment="center"
+				className="edit-site-site-hub__container"
+			>
 				<HStack
 					justify="flex-start"
 					className="edit-site-site-hub__text-content"

diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss
@@ -3,22 +3,11 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: $grid-unit-10;
-}
-
-.edit-site-site-hub__post-type {
-	opacity: 0.6;
-}
 
-.edit-site-site-hub__view-mode-toggle-container {
-	height: $header-height;
-	width: $header-height;
-	flex-shrink: 0;
-	background: $gray-900;
-}
+	.edit-site-site-hub__container {
+		gap: 0;
+	}
 
-.edit-site-site-hub__text-content {
-	// Necessary for the ellipsis to work.
-	overflow: hidden;
 	.edit-site-site-hub__site-view-link {
 		flex-grow: 0;
 		@include break-mobile() {
@@ -28,6 +17,7 @@
 		&:focus {
 			outline: none;
 			box-shadow: none;
+			opacity: 1;
 		}
 		svg {
 			fill: $white;
@@ -38,11 +28,22 @@
 			opacity: 1;
 		}
 	}
-	&:focus {
-		.edit-site-site-hub__site-view-link {
-			opacity: 1;
-		}
-	}
+}
+
+.edit-site-site-hub__post-type {
+	opacity: 0.6;
+}
+
+.edit-site-site-hub__view-mode-toggle-container {
+	height: $header-height;
+	width: $header-height;
+	flex-shrink: 0;
+	background: $gray-900;
+}
+
+.edit-site-site-hub__text-content {
+	// Necessary for the ellipsis to work.
+	overflow: hidden;
 }
 
 .edit-site-site-hub__title {