Make price slider 'inactive' range half transparent so it looks bette…

…r in dark themes (woocommerce#7525)
senadir · Nov 12, 2022 · 3d5f017 · 3d5f017
1 parent 2c73edb
commit 3d5f017
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
@@ -76,13 +76,25 @@
 
 .wc-block-components-price-slider__range-input-wrapper {
 	@include reset;
-	background: $gray-300;
+	background: transparent;
 	border-radius: 4px;
 	clear: both;
 	flex-grow: 1;
 	height: 4px;
 	margin: 15px 0;
 	position: relative;
+
+	&::before {
+		content: "";
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		bottom: 0;
+		background: currentColor;
+		opacity: 0.2;
+	}
+
 	&.is-loading {
 		@include placeholder();
 		height: em(9px);