Fix UI misalignment of Filter by Price in TT1 theme (https://github.com/woocommerce/woocommerce-blocks/pull/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
This commit is contained in:
Karol Manijak 2023-08-25 16:26:18 +02:00 committed by GitHub
parent 95fb51be4d
commit dad3a41caa
1 changed files with 15 additions and 5 deletions

View File

@ -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;