Fix UI misalignment of Filter by Price in TT1 theme (#10732)

* Fix UI misalignment of Filter by Price in TT1 theme * Fix frontend Firefox styles * Simplify the styles and fix them in Editor (Firefox/Safari) * Align the background color and sizing in Firefox
woocommerce · Aug 25, 2023 · 8a5dab6 · 8a5dab6
1 parent a40395d
commit 8a5dab6
Showing 1 changed file with 15 additions and 5 deletions.
diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
@@ -331,11 +331,10 @@
 	}
 	.wc-block-components-price-slider__range-input-progress {
 		--range-color: currentColor;
-		margin: -$border-width;
 	}
 	.wc-block-price-filter__range-input {
 		background: transparent;
-		margin: -$border-width;
+		height: 0;
 		width: calc(100% + #{$border-width * 2});
 		&:hover,
 		&:focus {
@@ -350,13 +349,24 @@
 			}
 		}
 		&::-webkit-slider-thumb {
-			margin-top: -9px;
+			background: $white;
+			margin-top: -6px;
+			width: 12px;
+			height: 12px;
 		}
 		&.wc-block-components-price-slider__range-input--max::-moz-range-thumb {
-			transform: translate(2px, 1px);
+			background: $white;
+			transform: translate(2px, 2px);
+			width: 12px;
+			height: 12px;
+			box-sizing: content-box;
 		}
 		&.wc-block-components-price-slider__range-input--min::-moz-range-thumb {
-			transform: translate(-2px, 1px);
+			background: $white;
+			transform: translate(-2px, 2px);
+			width: 12px;
+			height: 12px;
+			box-sizing: content-box;
 		}
 		&::-ms-track {
 			border-color: transparent !important;