Fix Twenty Twenty One Price filter, Active filters and radio control styling (https://github.com/woocommerce/woocommerce-blocks/pull/3444)
* Fix price slider styling in Twenty Twenty One * Fix price slider styling in Twenty Twenty One * Fix radio control styling in Twenty Twenty One and remove usage of mixin * Force 0 padding on active filters list
This commit is contained in:
Albert Juhé Lluveras
GitHub
parent
a7461de3b3
commit
5a38fca235
|
|
@ -127,6 +127,9 @@
|
|||
position: relative;
|
||||
pointer-events: none;
|
||||
outline: none !important;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
@include track;
|
||||
|
|
@ -223,9 +226,6 @@
|
|||
.wc-block-components-price-slider__range-input {
|
||||
height: 24px;
|
||||
pointer-events: auto;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
&::-ms-track {
|
||||
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
|
||||
|
|
@ -285,3 +285,72 @@
|
|||
@supports (-ms-ime-align:auto) {
|
||||
@include ie;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
.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;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,114 +0,0 @@
|
|||
@mixin radio-control-styles {
|
||||
.wc-block-components-radio-control__option {
|
||||
@include reset-typography();
|
||||
@include with-translucent-border(0 0 1px);
|
||||
display: block;
|
||||
padding: $gap-small $gap-small 0 #{$gap-larger * 2};
|
||||
}
|
||||
|
||||
.wc-block-components-radio-control__option-layout {
|
||||
@include with-translucent-border(0 0 1px);
|
||||
display: table;
|
||||
width: 100%;
|
||||
padding-bottom: $gap-small;
|
||||
}
|
||||
|
||||
.wc-block-components-radio-control__option .wc-block-components-radio-control__option-layout {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-components-radio-control__input {
|
||||
left: $gap-large;
|
||||
position: absolute;
|
||||
top: $gap-small;
|
||||
}
|
||||
|
||||
.wc-block-components-radio-control__label-group,
|
||||
.wc-block-components-radio-control__description-group {
|
||||
display: table-row;
|
||||
|
||||
> span {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.wc-block-components-radio-control__secondary-label,
|
||||
.wc-block-components-radio-control__secondary-description {
|
||||
text-align: right;
|
||||
min-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-components-radio-control__label,
|
||||
.wc-block-components-radio-control__secondary-label {
|
||||
line-height: 20px;
|
||||
// Currently, max() CSS function calls need to be wrapped with unquote.
|
||||
// See: https://github.com/sass/sass/issues/2378#issuecomment-367490840
|
||||
line-height: unquote("max(1rem, 20px)");
|
||||
}
|
||||
|
||||
.wc-block-components-radio-control__description,
|
||||
.wc-block-components-radio-control__secondary-description {
|
||||
@include font-size(small);
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin radio-control-input-styles {
|
||||
// Extra class for specificity.
|
||||
.wc-block-components-radio-control {
|
||||
.wc-block-components-radio-control__input {
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
height: 1.25rem;
|
||||
min-height: 20px;
|
||||
min-width: 20px;
|
||||
width: 1.25rem;
|
||||
|
||||
&:checked::before {
|
||||
background: currentColor;
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 0.625em;
|
||||
left: 50%;
|
||||
margin: 0;
|
||||
min-height: 10px;
|
||||
min-width: 10px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 0.625em;
|
||||
}
|
||||
|
||||
.has-dark-controls & {
|
||||
border-color: $controls-border-dark;
|
||||
|
||||
&:checked::before {
|
||||
background: $input-text-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint( ">782px" ) {
|
||||
.wc-block-components-radio-control__input {
|
||||
height: 1rem;
|
||||
margin-top: 2px;
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
width: 1rem;
|
||||
|
||||
&:checked::before {
|
||||
height: 0.5em;
|
||||
min-height: 8px;
|
||||
min-width: 8px;
|
||||
width: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,119 @@
|
|||
@import "./mixin";
|
||||
.wc-block-components-radio-control__option {
|
||||
@include reset-typography();
|
||||
@include with-translucent-border( 0 0 1px );
|
||||
display: block;
|
||||
padding: $gap-small $gap-small 0 #{$gap-larger * 2};
|
||||
}
|
||||
|
||||
@include radio-control-styles;
|
||||
@include radio-control-input-styles;
|
||||
.wc-block-components-radio-control__option-layout {
|
||||
@include with-translucent-border( 0 0 1px );
|
||||
display: table;
|
||||
width: 100%;
|
||||
padding-bottom: $gap-small;
|
||||
}
|
||||
|
||||
.wc-block-components-radio-control__option .wc-block-components-radio-control__option-layout {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-components-radio-control__label-group,
|
||||
.wc-block-components-radio-control__description-group {
|
||||
display: table-row;
|
||||
|
||||
> span {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.wc-block-components-radio-control__secondary-label,
|
||||
.wc-block-components-radio-control__secondary-description {
|
||||
text-align: right;
|
||||
min-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-components-radio-control__label,
|
||||
.wc-block-components-radio-control__secondary-label {
|
||||
line-height: 20px;
|
||||
// Currently, max() CSS function calls need to be wrapped with unquote.
|
||||
// See: https://github.com/sass/sass/issues/2378#issuecomment-367490840
|
||||
line-height: unquote("max(1rem, 20px)");
|
||||
}
|
||||
|
||||
.wc-block-components-radio-control__description,
|
||||
.wc-block-components-radio-control__secondary-description {
|
||||
@include font-size( small );
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
// Extra class for specificity.
|
||||
.wc-block-components-radio-control {
|
||||
.wc-block-components-radio-control__input {
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
height: 1.25rem;
|
||||
left: $gap-large;
|
||||
min-height: 20px;
|
||||
min-width: 20px;
|
||||
position: absolute;
|
||||
top: $gap-small;
|
||||
width: 1.25rem;
|
||||
|
||||
&:checked::before {
|
||||
background: currentColor;
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 0.625em;
|
||||
left: 50%;
|
||||
margin: 0;
|
||||
min-height: 10px;
|
||||
min-width: 10px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 0.625em;
|
||||
}
|
||||
|
||||
.has-dark-controls & {
|
||||
border-color: $controls-border-dark;
|
||||
|
||||
&:checked::before {
|
||||
background: $input-text-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint( ">782px" ) {
|
||||
.wc-block-components-radio-control__input {
|
||||
height: 1rem;
|
||||
margin-top: 2px;
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
width: 1rem;
|
||||
|
||||
&:checked::before {
|
||||
height: 0.5em;
|
||||
min-height: 8px;
|
||||
min-width: 8px;
|
||||
width: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-twentytwentyone {
|
||||
.wc-block-components-radio-control .wc-block-components-radio-control__input {
|
||||
&:checked {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
|
||||
.wc-block-active-filters__list {
|
||||
margin: 0 0 $gap-smallest;
|
||||
padding: 0;
|
||||
list-style: none outside;
|
||||
clear: both;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue