Tweak button sizing & border in edit mode

WordPress · Apr 14, 2023 · fe62190 · fe62190
1 parent acb4287
commit fe62190
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
@@ -15,7 +15,7 @@
 	z-index: z-index(".edit-site-layout__hub");
 
 	.edit-site-layout.is-full-canvas.is-edit-mode & {
-		width: $grid-unit-80;
+		width: $header-height;
 		padding-right: 0;
 	}
 
@@ -157,6 +157,12 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	border-bottom: 1px solid transparent;
+
+	.edit-site-layout.is-full-canvas.is-edit-mode & {
+		border-bottom-color: $gray-200;
+		transition: border-bottom-color 0.15s 0.4s ease-out;
+	}
 
 	&:hover,
 	&:active {

diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss
@@ -10,7 +10,7 @@
 }
 
 .edit-site-site-hub__view-mode-toggle-container {
-	height: calc(#{$header-height} - 2px);
+	height: $header-height;
 	width: $header-height;
 	flex-shrink: 0;
 	background: $gray-900;