Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Price Slider: use currentColor for the slider #7527

Merged
merged 12 commits into from
Oct 28, 2022
Merged

Price Slider: use currentColor for the slider #7527

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
2b479d6
Fixed Price Slider Issue
EmptySet-Exe Oct 3, 2022
211a3ad
Merge branch 'trunk' into fix/price-slider
EmptySet-Exe Oct 4, 2022
6c67373
Merge branch 'trunk' into fix/price-slider
nielslange Oct 5, 2022
42c61a8
Merge branch 'trunk' into fix/price-slider
EmptySet-Exe Oct 8, 2022
a30e19a
Merge branch 'trunk' into fix/price-slider
gigitux Oct 10, 2022
143b3b7
Merge branch 'trunk' into fix/price-slider
gigitux Oct 26, 2022
1201856
fix CSS lint
gigitux Oct 28, 2022
7da8a56
use currentColor instead of hard-coded color for the slider of the Fi…
gigitux Oct 28, 2022
fe483eb
use currentColor instead of hard-coded color for the slider of the Fi…
gigitux Oct 28, 2022
7a732ab
remove background-color
gigitux Oct 28, 2022
ef6b960
Merge branch 'fix/price-slider-linter' of https://github.com/woocomme…
gigitux Oct 28, 2022
d8b83a6
Merge branch 'trunk' into fix/price-slider-linter
gigitux Oct 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 10 additions & 58 deletions assets/js/base/components/price-slider/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* stylelint-disable */

@mixin thumb {
background-color: transparent;
background: $white;
background-position: 0 0;
box-sizing: content-box;
width: 12px;
Expand All @@ -13,25 +13,25 @@
cursor: pointer;
z-index: 20;
pointer-events: auto;
background: $white;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was removing this line intentional? It's giving me issues:

Copy link
Contributor Author

@gigitux gigitux Oct 28, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just moved it on top because the linter complains. Now, I'm noticing that there is background-color:transparent;, but this overrides the background rule. I removed it.

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;
Expand All @@ -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,
Expand All @@ -86,7 +83,6 @@
height: 4px;
margin: 15px 0;
position: relative;

&.is-loading {
@include placeholder();
height: em(9px);
Expand All @@ -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);
}
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
}
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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();
}
Expand All @@ -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;
Expand Down