Bring back legacy components-tab-button class and its styles

WordPress · Dec 6, 2019 · a282f31 · a282f31
1 parent 71d69af
commit a282f31
Showing 1 changed file with 44 additions and 0 deletions.
diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss
@@ -9,3 +9,47 @@
 
 	flex-shrink: 0;
 }
+
+// We should extract this to a separate component.
+.components-tab-button {
+	padding: 3px;
+	color: $dark-gray-500;
+	height: $icon-button-size;
+	font-weight: 500;
+
+	&.is-pressed,
+	&.is-pressed:hover {
+		color: $white;
+	}
+
+	&:disabled {
+		cursor: default;
+	}
+
+	& > span {
+		border: $border-width solid transparent;
+		padding: 0 6px;
+		box-sizing: content-box;
+		height: 28px;
+		line-height: 28px;
+	}
+
+	&:hover > span,
+	&:focus > span {
+		color: $dark-gray-500;
+	}
+
+	&:not(:disabled) {
+		&.is-pressed > span,
+		&:hover > span,
+		&:focus > span {
+			border: $border-width solid $dark-gray-500;
+		}
+	}
+
+	&.is-pressed > span,
+	&.is-pressed:hover > span {
+		background-color: $dark-gray-500;
+		color: $white;
+	}
+}