Fix HTML block tab buttons.

WordPress · Jan 21, 2020 · 52b0371 · 52b0371
1 parent 4fa985b
commit 52b0371
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 19 deletions.
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -59,6 +59,36 @@
 				margin-right: auto;
 			}
 		}
+
+		// @todo: We should extract the tabs styles to the tabs component itself
+		.components-button.components-tab-button {
+			padding-left: 0;
+			padding-right: 0;
+			font-weight: 500;
+
+			span {
+				display: inline-block;
+				padding-left: $grid-unit-20;
+				padding-right: $grid-unit-20;
+				position: relative;
+			}
+		}
+
+		.components-button.components-tab-button:first-child {
+			padding-left: $grid-unit-05;
+			span {
+				padding-left: $grid-unit-15;
+				padding-right: $grid-unit-20;
+			}
+		}
+
+		.components-button.components-tab-button:last-child {
+			padding-right: $grid-unit-05;
+			span {
+				padding-left: $grid-unit-20;
+				padding-right: $grid-unit-15;
+			}
+		}
 	}
 
 	// Remove the left-border on the last item in the toolbar.

diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss
@@ -9,22 +9,3 @@
 
 	flex-shrink: 0;
 }
-
-// @todo: We should extract this to a separate component, and refactor it.
-.block-editor-block-toolbar .components-tab-button {
-	padding: $grid-unit-10 $grid-unit-15;
-	color: $border-color;
-	height: $icon-button-size;
-	font-weight: 500;
-
-	span {
-		position: relative;
-		display: block;
-		text-align: center;
-		padding: 0 $grid-unit-10;
-	}
-
-	&.components-button::before {
-		width: calc(100% - #{$grid-unit-30});
-	}
-}