Move styles to the zoom out toolbar CSS

WordPress · Jun 24, 2024 · ea039bb · ea039bb
1 parent 338edda
commit ea039bb
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
@@ -270,3 +270,17 @@
 	top: 50%;
 	left: 50%;
 }
+
+.zoom-out-toolbar {
+	&[aria-orientation="vertical"] {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.components-toolbar,
+	.components-toolbar-group {
+		background: none;
+		border: none;
+	}
+}
diff --git a/packages/components/src/toolbar/toolbar-group/style.scss b/packages/components/src/toolbar/toolbar-group/style.scss
@@ -1,6 +1,7 @@
 .components-toolbar-group {
 	min-height: $block-toolbar-height;
 	border-right: $border-width solid $gray-900;
+	background: $white;
 	display: inline-flex;
 	flex-shrink: 0;
 	flex-wrap: wrap;
@@ -13,10 +14,6 @@
 		margin: 0;
 	}
 
-	.components-accessible-toolbar:not(.zoom-out-toolbar) & {
-		background: $white;
-	}
-
 	line-height: 0;
 
 	// Size multiple sequential buttons to be optically balanced.

diff --git a/packages/components/src/toolbar/toolbar/style.scss b/packages/components/src/toolbar/toolbar/style.scss
@@ -20,12 +20,6 @@
 
 .components-accessible-toolbar,
 .components-toolbar {
-
-	&[aria-orientation="vertical"] {
-		flex-direction: column;
-		align-items: center;
-	}
-
 	.components-button {
 		position: relative;
 		height: $block-toolbar-height;