Update filter button styles (#6958)

* Update filter button styles * Address feedback: use mixings * Improve the editor selector for stock apply button Co-authored-by: Albert Juhé Lluveras <[email protected]> * Reduce vertical margin and input width Co-authored-by: Albert Juhé Lluveras <[email protected]>
woocommerce · Aug 23, 2022 · 7d97004 · 7d97004
1 parent 89175d2
commit 7d97004
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 6 deletions.
diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
@@ -102,14 +102,14 @@
 	display: flex;
 	gap: $gap-smaller;
 	justify-content: space-between;
-	margin: $gap-large 0;
+	margin: $gap 0;
 
 	.wc-block-components-price-slider__amount {
 		margin: 0;
 		border-radius: 4px;
 		border-width: 1px;
 		width: auto;
-		max-width: 100px;
+		max-width: 80px;
 		min-width: 0;
 		padding: $gap-smaller;
 	}

diff --git a/assets/js/blocks/attribute-filter/style.scss b/assets/js/blocks/attribute-filter/style.scss
@@ -67,3 +67,9 @@
 		}
 	}
 }
+
+.editor-styles-wrapper  .wc-block-attribute-filter__button.wc-block-attribute-filter__button,
+.wc-block-attribute-filter__button.wc-block-attribute-filter__button {
+	padding: em($gap-smaller) em($gap);
+	@include font-size(small);
+}
diff --git a/assets/js/blocks/price-filter/style.scss b/assets/js/blocks/price-filter/style.scss
@@ -26,3 +26,9 @@
 		border-style: solid;
 	}
 }
+
+.editor-styles-wrapper .wc-block-price-filter__button.wc-block-components-price-slider__button,
+.wc-block-price-filter__button.wc-block-components-price-slider__button {
+	padding: em($gap-smaller) em($gap);
+	@include font-size(small);
+}
diff --git a/assets/js/blocks/stock-filter/style.scss b/assets/js/blocks/stock-filter/style.scss
@@ -21,10 +21,6 @@
 		opacity: 0.6;
 	}
 
-	.wc-block-stock-filter__button {
-		margin-top: $gap-smaller;
-	}
-
 	.wc-block-stock-filter__actions {
 		align-items: center;
 		display: flex;
@@ -39,3 +35,10 @@
 		}
 	}
 }
+
+.editor-styles-wrapper .wc-block-stock-filter .wc-block-stock-filter__button,
+.wc-block-stock-filter .wc-block-stock-filter__button {
+	margin-top: em($gap-smaller);
+	padding: em($gap-smaller) em($gap);
+	@include font-size(small);
+}