Price Slider: use currentColor for the slider (#7527)

* Fixed Price Slider Issue Located where the price slider was hard coded and replaced it. * fix CSS lint * use currentColor instead of hard-coded color for the slider of the Filter By Price block #7130 use currentColor instead of hard-coded color for the slider of the Filte By Price block * use currentColor instead of hard-coded color for the slider of the Filter By Price block #7130 use currentColor instead of hard-coded color for the slider of the Filte By Price block * remove background-color Co-authored-by: EmptySet-Exe <[email protected]> Co-authored-by: Niels Lange <[email protected]>
woocommerce · Oct 28, 2022 · 6d9b043 · 6d9b043
1 parent b531eb9
commit 6d9b043
Showing 1 changed file with 10 additions and 58 deletions.
diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
@@ -1,6 +1,6 @@
-/* stylelint-disable */
+
 @mixin thumb {
-	background-color: transparent;
+	background: $white;
 	background-position: 0 0;
 	box-sizing: content-box;
 	width: 12px;
@@ -13,25 +13,25 @@
 	cursor: pointer;
 	z-index: 20;
 	pointer-events: auto;
-	background: $white;
-	transition: transform .2s ease-in-out;
+	transition: transform 0.2s ease-in-out;
 	-webkit-appearance: none;
 	-moz-appearance: none;
 	appearance: none;
-
 	&:hover {
 		@include thumbFocus;
 	}
 }
 
 @mixin thumbFocus {
 	background: $gray-900;
+	border-color: $white;
 }
 
-/* stylelint-enable */
+
 @mixin track {
 	cursor: default;
-	height: 1px; /* Required for Samsung internet based browsers */
+	height: 1px;
+	/* Required for Samsung internet based browsers */
 	outline: 0;
 	-webkit-appearance: none;
 	-moz-appearance: none;
@@ -54,20 +54,17 @@
 
 .wc-block-components-price-slider {
 	margin-bottom: $gap-large;
-
 	&.is-loading.is-disabled {
 		.wc-block-components-price-slider__range-input-wrapper,
 		.wc-block-components-filter-reset-button,
 		.wc-block-components-filter-submit-button {
 			@include placeholder();
 			box-shadow: none;
 		}
-
 		.wc-block-components-price-slider__amount {
 			display: none;
 		}
 	}
-
 	&.is-disabled:not(.is-loading) {
 		.wc-block-components-price-slider__range-input-wrapper,
 		.wc-block-components-price-slider__amount,
@@ -86,7 +83,6 @@
 	height: 4px;
 	margin: 15px 0;
 	position: relative;
-
 	&.is-loading {
 		@include placeholder();
 		height: em(9px);
@@ -101,7 +97,7 @@
 	top: 0;
 	width: 100%;
 	--track-background: linear-gradient(to right, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0) no-repeat 0 100% / 100% 100%;
-	--range-color: #{$gray-900};
+	--range-color: currentColor;
 	/*rtl:ignore*/
 	background: var(--track-background);
 }
@@ -112,7 +108,6 @@
 	gap: $gap-smaller;
 	justify-content: space-between;
 	margin: $gap 0;
-
 	.wc-block-components-price-slider__amount {
 		margin: 0;
 		border-radius: 4px;
@@ -121,11 +116,9 @@
 		max-width: 80px;
 		min-width: 0;
 		padding: $gap-smaller;
-
 		.wc-block-components-price-slider--is-input-inline & {
 			max-width: 60px;
 		}
-
 		&.is-loading {
 			@include placeholder();
 			border-radius: 0 !important;
@@ -146,7 +139,6 @@
 	display: flex;
 	gap: $gap;
 	justify-content: flex-end;
-
 	// The specificity here is needed to overwrite the margin-top that is inherited on WC block template pages such as Shop.
 	button[type="submit"]:not(.wp-block-search__button).wc-block-components-filter-submit-button {
 		margin-top: 0;
@@ -165,85 +157,66 @@
 	position: absolute;
 	left: 0;
 	top: 0;
-
 	&::-webkit-slider-runnable-track {
 		@include track;
 	}
-
 	&::-webkit-slider-thumb {
 		@include thumb;
 		margin: -5px 0 0 0;
 	}
-
 	&::-webkit-slider-progress {
 		@include reset;
 	}
-
 	&::-moz-focus-outer {
 		border: 0;
 	}
-
 	&::-moz-range-track {
 		@include track;
 	}
-
 	&::-moz-range-progress {
 		@include reset;
 	}
-
 	&::-moz-range-thumb {
 		@include thumb;
 	}
-
 	&::-ms-thumb {
 		@include thumb;
 	}
-
 	&:focus {
 		&::-webkit-slider-thumb {
 			@include thumbFocus;
 		}
-
 		&::-moz-range-thumb {
 			@include thumbFocus;
 		}
-
 		&::-ms-thumb {
 			@include thumbFocus;
 		}
 	}
-
 	&.wc-block-components-price-slider__range-input--min {
 		z-index: 21;
-
 		&::-webkit-slider-thumb {
 			margin-left: -2px;
 			background-position-x: left;
 		}
-
 		&::-moz-range-thumb {
 			background-position-x: left;
 			transform: translate(-2px, 2px);
 		}
-
 		&::-ms-thumb {
 			background-position-x: left;
 		}
 	}
-
 	&.wc-block-components-price-slider__range-input--max {
 		z-index: 20;
-
 		&::-webkit-slider-thumb {
 			background-position-x: right;
 			margin-left: 2px;
 		}
-
 		&::-moz-range-thumb {
 			background-position-x: right;
 			transform: translate(2px, 2px);
 		}
-
 		&::-ms-thumb {
 			background-position-x: right;
 		}
@@ -272,32 +245,25 @@
 	.wc-block-components-price-slider__range-input {
 		height: 24px;
 		pointer-events: auto;
-
 		&::-ms-track {
 			/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
 			background: transparent;
-
 			/*leave room for the larger thumb to overflow with a transparent border */
 			border-color: transparent;
 			border-width: 7px 0;
-
 			/*remove default tick marks*/
 			color: transparent;
 		}
-
 		&::-ms-fill-lower {
 			background: #e1e1e1;
 			box-shadow: 0 0 0 1px inset #b8b8b8;
 		}
-
 		&::-ms-fill-upper {
 			background: transparent;
 		}
-
 		&::-ms-tooltip {
 			display: none;
 		}
-
 		&::-ms-thumb {
 			transform: translate(1px, 0);
 			pointer-events: auto;
@@ -308,20 +274,17 @@
 			background: #e1e1e1;
 			box-shadow: 0 0 0 1px inset #b8b8b8;
 		}
-
 		&::-ms-fill-lower {
 			background: transparent;
 		}
 	}
-
 	.wc-block-components-price-slider {
 		&.is-loading.is-disabled {
 			.wc-block-components-price-slider__range-input-wrapper {
 				@include placeholder();
 				box-shadow: none;
 			}
 		}
-
 		&.is-disabled:not(.is-loading) {
 			.wc-block-components-price-slider__range-input-wrapper {
 				animation: none;
@@ -330,7 +293,9 @@
 	}
 }
 
+
 /* IE 11 will not support multi-range slider due to poor pointer-events support on the thumb. Reverts to 2 sliders. */
+
 @include ie11() {
 	@include ie-fixes();
 }
@@ -342,67 +307,54 @@
 
 .theme-twentytwentyone {
 	$border-width: 3px;
-
 	.wc-block-components-price-slider__range-input-wrapper {
 		background: transparent;
 		border: $border-width solid currentColor;
 		box-sizing: border-box;
 	}
-
 	.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;
 		width: calc(100% + #{$border-width * 2});
-
 		&:hover,
 		&:focus {
 			&::-webkit-slider-thumb {
 				filter: none;
 			}
-
 			&::-moz-range-thumb {
 				filter: none;
 			}
-
 			&::-ms-thumb {
 				filter: none;
 			}
 		}
-
 		&::-webkit-slider-thumb {
 			margin-top: -9px;
 		}
-
 		&.wc-block-components-price-slider__range-input--max::-moz-range-thumb {
 			transform: translate(2px, 1px);
 		}
-
 		&.wc-block-components-price-slider__range-input--min::-moz-range-thumb {
 			transform: translate(-2px, 1px);
 		}
-
 		&::-ms-track {
 			border-color: transparent !important;
 		}
 	}
-
 	@include ie11() {
 		.wc-block-components-price-slider__range-input-wrapper {
 			border: 0;
 			height: auto;
 			position: relative;
 			height: 50px;
 		}
-
 		.wc-block-components-price-slider__range-input-progress {
 			display: none;
 		}
-
 		.wc-block-price-filter__range-input {
 			height: 100%;
 			margin: 0;