1192 lines
23 KiB
CSS
1192 lines
23 KiB
CSS
.facets-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, auto);
|
|
grid-template-rows: repeat(2, auto);
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.active-facets-mobile {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.mobile-facets__list {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
@media screen and (min-width: 750px) {
|
|
.facets-container > * + * {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.facets__form .product-count {
|
|
grid-column-start: 3;
|
|
align-self: flex-start;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 989px) {
|
|
.facets-container {
|
|
grid-template-columns: auto minmax(0, max-content);
|
|
column-gap: 2rem;
|
|
}
|
|
}
|
|
|
|
.facet-filters {
|
|
align-items: flex-start;
|
|
display: flex;
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
padding-left: 2.5rem;
|
|
}
|
|
|
|
@media screen and (min-width: 990px) {
|
|
.facet-filters {
|
|
padding-left: 3rem;
|
|
}
|
|
}
|
|
|
|
.facet-filters__label {
|
|
display: block;
|
|
color: rgba(var(--color-foreground), 0.85);
|
|
font-size: 1.4rem;
|
|
margin: 0 2rem 0 0;
|
|
}
|
|
|
|
.facet-filters__summary {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 1.4rem;
|
|
cursor: pointer;
|
|
height: 4.5rem;
|
|
padding: 0 1.5rem;
|
|
min-width: 25rem;
|
|
margin-top: 2.4rem;
|
|
border: 0.1rem solid rgba(var(--color-foreground), 0.55);
|
|
}
|
|
|
|
.facet-filters__summary::after {
|
|
position: static;
|
|
}
|
|
|
|
.facet-filters__field {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-grow: 1;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.facet-filters__field .select {
|
|
width: auto;
|
|
}
|
|
|
|
.facet-filters__field .select:after,
|
|
.facet-filters__field .select:before,
|
|
.mobile-facets__sort .select:after,
|
|
.mobile-facets__sort .select:before {
|
|
content: none;
|
|
}
|
|
|
|
.facet-filters__field .select__select,
|
|
.mobile-facets__sort .select__select {
|
|
border-radius: 0;
|
|
min-width: auto;
|
|
min-height: auto;
|
|
transition: none;
|
|
}
|
|
|
|
.facet-filters button {
|
|
margin-left: 2.5rem;
|
|
}
|
|
|
|
.facet-filters__sort {
|
|
background-color: transparent;
|
|
border: 0;
|
|
border-radius: 0;
|
|
font-size: 1.4rem;
|
|
height: auto;
|
|
line-height: calc(1 + 0.5 / var(--font-body-scale));
|
|
margin: 0;
|
|
padding-left: 0;
|
|
padding-right: 1.75rem;
|
|
}
|
|
|
|
.facet-filters__sort + .icon-caret {
|
|
right: 0;
|
|
}
|
|
|
|
@media screen and (forced-colors: active) {
|
|
.facet-filters__sort {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.facet-filters__sort,
|
|
.facet-filters__sort:hover {
|
|
box-shadow: none;
|
|
filter: none;
|
|
transition: none;
|
|
}
|
|
|
|
.mobile-facets__sort .select__select:focus-visible {
|
|
outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
|
|
outline-offset: 0.3rem;
|
|
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
|
|
}
|
|
|
|
.mobile-facets__sort .select__select.focused,
|
|
.no-js .mobile-facets__sort .select__select:focus {
|
|
outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
|
|
outline-offset: 0.3rem;
|
|
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
|
|
}
|
|
|
|
.facet-filters__sort:focus-visible {
|
|
outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
|
|
outline-offset: 1rem;
|
|
box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
|
|
}
|
|
|
|
.facet-filters__sort.focused,
|
|
.no-js .facet-filters__sort:focus {
|
|
outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
|
|
outline-offset: 1rem;
|
|
box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
|
|
}
|
|
|
|
.no-js .facet-filters__sort:focus:not(:focus-visible),
|
|
.no-js .mobile-facets__sort .select__select:focus:not(:focus-visible) {
|
|
outline: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.facets {
|
|
display: block;
|
|
grid-column-start: span 2;
|
|
}
|
|
|
|
.facets__form {
|
|
display: grid;
|
|
gap: 0 3.5rem;
|
|
grid-template-columns: 1fr max-content max-content;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.facets__wrapper {
|
|
align-items: center;
|
|
align-self: flex-start;
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.facets__heading {
|
|
display: block;
|
|
color: rgba(var(--color-foreground), 0.85);
|
|
font-size: 1.4rem;
|
|
margin: -1.5rem 2rem 0 0;
|
|
}
|
|
|
|
.facets__reset {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.facets__disclosure {
|
|
margin-right: 3.5rem;
|
|
}
|
|
|
|
.facets__summary {
|
|
color: rgba(var(--color-foreground), 0.75);
|
|
font-size: 1.4rem;
|
|
padding: 0 1.75rem 0 0;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.facets__disclosure fieldset {
|
|
padding: 0;
|
|
margin: 0;
|
|
border: 0;
|
|
}
|
|
|
|
.facets__disclosure[open] .facets__summary,
|
|
.facets__summary:hover {
|
|
color: rgb(var(--color-foreground));
|
|
}
|
|
|
|
.facets__disclosure[open] .facets__display,
|
|
.facets__disclosure-vertical[open] .facets__display-vertical {
|
|
animation: animateMenuOpen var(--duration-default) ease;
|
|
}
|
|
|
|
.facets__summary span {
|
|
transition: text-decoration var(--duration-short) ease;
|
|
}
|
|
|
|
.facets__summary:hover .facets__summary-label {
|
|
text-decoration: underline;
|
|
text-underline-offset: 0.3rem;
|
|
}
|
|
|
|
.facets__and-helptext {
|
|
color: rgba(var(--color-foreground), 0.5);
|
|
font-size: calc(var(--font-heading-scale) * 1.2rem);
|
|
line-height: calc(var(--font-heading-scale) * 1.2rem);
|
|
}
|
|
|
|
@media only screen and (min-width: 750px) {
|
|
.facets__and-helptext {
|
|
font-size: calc(var(--font-heading-scale) * 1.3rem);
|
|
line-height: calc(var(--font-heading-scale) * 1.3rem);
|
|
}
|
|
}
|
|
|
|
.facets__disclosure .facets__and-helptext,
|
|
.facets__disclosure-vertical .facets__and-helptext {
|
|
display: none;
|
|
}
|
|
|
|
.facets__disclosure[open] .facets__and-helptext,
|
|
.facets__disclosure-vertical[open] .facets__and-helptext {
|
|
display: block;
|
|
}
|
|
|
|
.disclosure-has-popup[open] > .facets__summary::before {
|
|
z-index: 2;
|
|
}
|
|
|
|
.facets__summary > span {
|
|
line-height: calc(1 + 0.3 / var(--font-body-scale));
|
|
}
|
|
|
|
.facets__summary .icon-caret {
|
|
right: 0;
|
|
}
|
|
|
|
.facets__display {
|
|
border-width: var(--popup-border-width);
|
|
border-style: solid;
|
|
border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
|
|
border-radius: var(--popup-corner-radius);
|
|
box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
|
|
rgba(var(--color-shadow), var(--popup-shadow-opacity));
|
|
background-color: rgb(var(--color-background));
|
|
position: absolute;
|
|
top: calc(100% + 0.5rem);
|
|
left: -1.2rem;
|
|
width: 35rem;
|
|
max-height: 55rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.facets__header {
|
|
border-bottom: 1px solid rgba(var(--color-foreground), 0.2);
|
|
padding: 1.5rem 2rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 1.4rem;
|
|
position: sticky;
|
|
top: 0;
|
|
background-color: rgb(var(--color-background));
|
|
z-index: 1;
|
|
}
|
|
|
|
.facets__header facet-remove {
|
|
align-self: center;
|
|
}
|
|
|
|
.facets__list {
|
|
padding: 0.5rem 2rem;
|
|
}
|
|
|
|
.facets-layout-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
text-align: center;
|
|
padding: 2rem 2.4rem;
|
|
gap: 3rem 1rem;
|
|
}
|
|
|
|
.facets-layout-grid.facets__list--vertical {
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.facets__item {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Hover/focus state */
|
|
.facets-layout-list .facets__label:hover .facet-checkbox__text,
|
|
.facets-layout-list input:focus ~ .facet-checkbox__text {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.facets-layout-grid > * {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.facets-layout-grid .visual-display-parent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.8rem;
|
|
padding: 0;
|
|
height: 100%;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.facets__item label,
|
|
.facets__item input[type='checkbox'] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.facet-checkbox {
|
|
padding: 1rem 2rem 1rem 0;
|
|
flex-grow: 1;
|
|
position: relative;
|
|
font-size: 1.4rem;
|
|
display: flex;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* Hover, active, and focus states */
|
|
:is(.facets__label:hover, .facets__label.active, .facets__label:has(:focus-visible)) {
|
|
color: rgba(var(--color-foreground), 1);
|
|
}
|
|
|
|
/* Focus states for older browsers */
|
|
@supports not selector(:has(a, b)) {
|
|
.facets__label:focus-within {
|
|
color: rgba(var(--color-foreground), 1);
|
|
}
|
|
}
|
|
|
|
.facet-checkbox input[type='checkbox'] {
|
|
position: absolute;
|
|
opacity: 1;
|
|
width: 1.6rem;
|
|
height: 1.6rem;
|
|
top: 0.7rem;
|
|
left: -0.4rem;
|
|
z-index: -1;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.facets-layout-grid input[type='checkbox'] {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
}
|
|
|
|
.facets__visual-display-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.no-js .facet-checkbox input[type='checkbox'] {
|
|
z-index: 0;
|
|
}
|
|
|
|
.facet-checkbox > svg {
|
|
background-color: rgb(var(--color-background));
|
|
margin-right: 1.2rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.facet-checkbox .icon-checkmark {
|
|
visibility: hidden;
|
|
position: absolute;
|
|
left: 0.3rem;
|
|
z-index: 5;
|
|
top: 1.4rem;
|
|
}
|
|
|
|
.facet-checkbox > input[type='checkbox']:checked ~ .icon-checkmark {
|
|
visibility: visible;
|
|
}
|
|
|
|
@media screen and (forced-colors: active) {
|
|
.facet-checkbox > svg {
|
|
background-color: inherit;
|
|
border: 0.1rem solid rgb(var(--color-background));
|
|
}
|
|
|
|
.facet-checkbox > input[type='checkbox']:checked ~ .icon-checkmark {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.facet-checkbox--disabled,
|
|
.mobile-facets__label--disabled {
|
|
opacity: 0.4;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.facets__price {
|
|
display: flex;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.facets__price .field + .field-currency {
|
|
margin-left: 2rem;
|
|
}
|
|
|
|
.facets__price .field {
|
|
align-items: center;
|
|
}
|
|
|
|
.facets__price .field-currency {
|
|
align-self: center;
|
|
margin-right: 0.6rem;
|
|
}
|
|
|
|
.facets__price .field__label {
|
|
left: 1.5rem;
|
|
}
|
|
|
|
button.facets__button {
|
|
min-height: 0;
|
|
margin: 0 0 0 0.5rem;
|
|
box-shadow: none;
|
|
padding-top: 1.4rem;
|
|
padding-bottom: 1.4rem;
|
|
}
|
|
|
|
.facets__button-no-js {
|
|
transform: translateY(-0.6rem);
|
|
}
|
|
|
|
.active-facets {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
grid-column: 1 / -1;
|
|
grid-row: 2;
|
|
margin-top: -0.5rem;
|
|
}
|
|
|
|
.active-facets__button {
|
|
display: block;
|
|
margin-right: 1.5rem;
|
|
margin-top: 1.5rem;
|
|
padding-left: 0.2rem;
|
|
padding-right: 0.2rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
span.active-facets__button-inner {
|
|
color: rgb(var(--color-foreground));
|
|
box-shadow: 0 0 0 0.1rem rgb(var(--color-foreground));
|
|
border-radius: 2.6rem;
|
|
font-size: 1rem;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
padding: 0.5rem 1rem;
|
|
display: flex;
|
|
align-items: stretch;
|
|
}
|
|
|
|
span.active-facets__button-inner:before,
|
|
span.active-facets__button-inner:after {
|
|
display: none;
|
|
}
|
|
|
|
.active-facets__button-wrapper {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: 1.5rem;
|
|
}
|
|
|
|
.active-facets__button-wrapper * {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
@media screen and (min-width: 990px) {
|
|
.active-facets__button {
|
|
margin-right: 1.5rem;
|
|
}
|
|
|
|
.active-facets__button-wrapper *,
|
|
span.active-facets__button-inner {
|
|
font-size: 1.4rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 989px) {
|
|
.active-facets {
|
|
margin: 0 -1.2rem -1.2rem;
|
|
}
|
|
|
|
.active-facets__button,
|
|
.active-facets__button-remove {
|
|
margin: 0;
|
|
padding: 1.2rem;
|
|
}
|
|
|
|
span.active-facets__button-inner {
|
|
padding-bottom: 0.3rem;
|
|
padding-top: 0.3rem;
|
|
}
|
|
|
|
.active-facets__button-wrapper {
|
|
padding-top: 0;
|
|
margin-left: 1.2rem;
|
|
}
|
|
}
|
|
|
|
.active-facets__button:hover .active-facets__button-inner {
|
|
box-shadow: 0 0 0 0.2rem rgb(var(--color-foreground));
|
|
}
|
|
|
|
.active-facets__button--light .active-facets__button-inner {
|
|
box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2);
|
|
}
|
|
|
|
.active-facets__button--light:hover .active-facets__button-inner {
|
|
box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.4);
|
|
}
|
|
|
|
a.active-facets__button:focus-visible {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* outline styling for Windows High Contrast Mode */
|
|
@media (forced-colors: active) {
|
|
a.active-facets__button:focus-visible {
|
|
outline: transparent solid 1px;
|
|
}
|
|
}
|
|
a.active-facets__button.focused,
|
|
.no-js a.active-facets__button:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
a.active-facets__button:focus-visible .active-facets__button-inner {
|
|
box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2), 0 0 0 0.2rem rgb(var(--color-background)),
|
|
0 0 0 0.4rem rgb(var(--color-foreground));
|
|
outline: none;
|
|
}
|
|
|
|
a.active-facets__button.focused .active-facets__button-inner,
|
|
.no-js a.active-facets__button:focus .active-facets__button-inner {
|
|
box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2), 0 0 0 0.2rem rgb(var(--color-background)),
|
|
0 0 0 0.4rem rgb(var(--color-foreground));
|
|
outline: none;
|
|
}
|
|
|
|
.active-facets__button svg {
|
|
align-self: center;
|
|
flex-shrink: 0;
|
|
margin-left: 0.6rem;
|
|
margin-right: -0.2rem;
|
|
pointer-events: none;
|
|
width: 1.2rem;
|
|
}
|
|
|
|
@media all and (min-width: 990px) {
|
|
.active-facets__button svg {
|
|
margin-right: -0.4rem;
|
|
margin-top: 0.1rem;
|
|
width: 1.4rem;
|
|
}
|
|
}
|
|
|
|
.active-facets facet-remove:only-child {
|
|
display: none;
|
|
}
|
|
|
|
.facets-vertical .active-facets .active-facets-vertical-filter:only-child > facet-remove {
|
|
display: none;
|
|
}
|
|
|
|
.facets-vertical .active-facets-vertical-filter {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.facets-vertical .active-facets-vertical-filter .active-facets__button-wrapper {
|
|
padding-top: 0;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.facets-vertical .active-facets__button {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.active-facets__button.disabled,
|
|
.mobile-facets__clear.disabled {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.mobile-facets__clear-wrapper {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.mobile-facets {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
background-color: rgba(var(--color-foreground), 0.5);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.mobile-facets__disclosure {
|
|
display: flex;
|
|
}
|
|
|
|
.mobile-facets__wrapper {
|
|
margin-left: 0;
|
|
display: flex;
|
|
}
|
|
|
|
.mobile-facets__wrapper .disclosure-has-popup[open] > summary::before {
|
|
height: 100vh;
|
|
z-index: 3;
|
|
}
|
|
|
|
.mobile-facets__inner {
|
|
background-color: rgb(var(--color-background));
|
|
width: calc(100% - 5rem);
|
|
margin-left: auto;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
pointer-events: all;
|
|
transition: transform var(--duration-default) ease;
|
|
max-width: 37.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-color: rgba(var(--color-foreground), var(--drawer-border-opacity));
|
|
border-style: solid;
|
|
border-width: 0 0 0 var(--drawer-border-width);
|
|
filter: drop-shadow(
|
|
var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius)
|
|
rgba(var(--color-shadow), var(--drawer-shadow-opacity))
|
|
);
|
|
}
|
|
|
|
.menu-opening .mobile-facets__inner {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.js .disclosure-has-popup:not(.menu-opening) .mobile-facets__inner {
|
|
transform: translateX(105vw);
|
|
}
|
|
|
|
.mobile-facets__header {
|
|
border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
|
|
padding: 1rem 2.5rem;
|
|
text-align: center;
|
|
display: flex;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
.mobile-facets__header-inner {
|
|
flex-grow: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.mobile-facets__info {
|
|
padding: 0 2.6rem;
|
|
}
|
|
|
|
.mobile-facets__heading {
|
|
font-size: calc(var(--font-heading-scale) * 1.4rem);
|
|
margin: 0;
|
|
}
|
|
|
|
.mobile-facets__count {
|
|
color: rgba(var(--color-foreground), 0.7);
|
|
font-size: 1.3rem;
|
|
margin: 0;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.mobile-facets__open-wrapper {
|
|
display: inline-block;
|
|
}
|
|
|
|
.mobile-facets__open {
|
|
text-align: left;
|
|
width: 100%;
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
color: rgba(var(--color-link), var(--alpha-link));
|
|
}
|
|
|
|
.mobile-facets__open:hover {
|
|
color: rgb(var(--color-link));
|
|
}
|
|
|
|
.mobile-facets__open:hover line,
|
|
.mobile-facets__open:hover circle {
|
|
stroke: rgb(var(--color-link));
|
|
}
|
|
|
|
.mobile-facets__open-label {
|
|
transition: text-decoration var(--duration-short) ease;
|
|
}
|
|
|
|
.mobile-facets__open:hover .mobile-facets__open-label {
|
|
text-decoration: underline;
|
|
text-underline-offset: 0.3rem;
|
|
}
|
|
|
|
.mobile-facets__open > * + * {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.mobile-facets__open svg {
|
|
width: 2rem;
|
|
}
|
|
|
|
.mobile-facets__open line,
|
|
.mobile-facets__open circle {
|
|
stroke: rgba(var(--color-link), var(--alpha-link));
|
|
}
|
|
|
|
.mobile-facets__close {
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: fixed;
|
|
top: 0.7rem;
|
|
right: 1rem;
|
|
width: 4.4rem;
|
|
height: 4.4rem;
|
|
z-index: 101;
|
|
opacity: 0;
|
|
transition: opacity var(--duration-short) ease;
|
|
}
|
|
|
|
.mobile-facets__close svg {
|
|
width: 2.2rem;
|
|
}
|
|
|
|
details.menu-opening .mobile-facets__close {
|
|
display: flex;
|
|
opacity: 1;
|
|
}
|
|
|
|
details.menu-opening .mobile-facets__close svg {
|
|
margin: 0;
|
|
}
|
|
|
|
.mobile-facets__close-button {
|
|
align-items: center;
|
|
background-color: transparent;
|
|
font-size: 1.4rem;
|
|
font: inherit;
|
|
letter-spacing: inherit;
|
|
margin-top: 1.5rem;
|
|
padding: 1.2rem 2.6rem;
|
|
text-decoration: none;
|
|
|
|
display: grid;
|
|
grid-template-columns: min-content 1fr;
|
|
text-align: start;
|
|
}
|
|
|
|
.mobile-facets__close-button > .facets__and-helptext {
|
|
grid-column-start: 2;
|
|
}
|
|
|
|
.no-js .mobile-facets__close-button {
|
|
display: none;
|
|
}
|
|
|
|
.mobile-facets__close-button .icon-arrow {
|
|
transform: rotate(180deg);
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.mobile-facets__main {
|
|
padding: 2.7rem 0 0;
|
|
position: relative;
|
|
z-index: 1;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.mobile-facets__details[open] .icon-caret {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.no-js .mobile-facets__details {
|
|
border-bottom: 1px solid rgba(var(--color-foreground), 0.04);
|
|
}
|
|
|
|
.mobile-facets__highlight {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
display: block;
|
|
background-color: rgba(var(--color-foreground), 0.04);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.mobile-facets__checkbox:checked + .mobile-facets__highlight {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.mobile-facets__summary {
|
|
padding: 1.3rem 2.5rem;
|
|
}
|
|
|
|
.mobile-facets__summary svg {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.mobile-facets__summary > div {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.js .mobile-facets__submenu {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 3;
|
|
transform: translateX(100%);
|
|
visibility: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.js details[open] > .mobile-facets__submenu {
|
|
transition: transform 0.4s cubic-bezier(0.29, 0.63, 0.44, 1), visibility 0.4s cubic-bezier(0.29, 0.63, 0.44, 1);
|
|
}
|
|
|
|
.js details[open].menu-opening > .mobile-facets__submenu {
|
|
transform: translateX(0);
|
|
visibility: visible;
|
|
}
|
|
|
|
.js .menu-drawer__submenu .mobile-facets__submenu {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.js .mobile-facets .submenu-open {
|
|
visibility: hidden; /* hide menus from screen readers when hidden by submenu */
|
|
}
|
|
|
|
.mobile-facets__item {
|
|
position: relative;
|
|
}
|
|
|
|
input.mobile-facets__checkbox {
|
|
border: 0;
|
|
position: absolute;
|
|
width: 1.6rem;
|
|
height: 1.6rem;
|
|
position: absolute;
|
|
left: 2.1rem;
|
|
top: 1.2rem;
|
|
z-index: 0;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.mobile-facets__label {
|
|
padding: 1.5rem 2rem 1.5rem 2.5rem;
|
|
width: 100%;
|
|
transition: background-color 0.2s ease;
|
|
word-break: break-word;
|
|
display: flex;
|
|
}
|
|
|
|
.mobile-facets__label > svg {
|
|
background-color: rgb(var(--color-background));
|
|
position: relative;
|
|
z-index: 2;
|
|
margin-right: 1.2rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.mobile-facets__label .icon-checkmark {
|
|
position: absolute;
|
|
top: 1.9rem;
|
|
left: 2.8rem;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.mobile-facets__label > input[type='checkbox']:checked ~ .icon-checkmark {
|
|
visibility: visible;
|
|
}
|
|
|
|
.mobile-facets__arrow,
|
|
.mobile-facets__summary .icon-caret {
|
|
margin-left: auto;
|
|
display: block;
|
|
}
|
|
|
|
.mobile-facets__footer {
|
|
border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
|
|
padding: 2rem;
|
|
bottom: 0;
|
|
position: sticky;
|
|
display: flex;
|
|
z-index: 2;
|
|
margin-top: auto;
|
|
background-color: rgb(var(--color-background));
|
|
background: var(--gradient-background);
|
|
}
|
|
|
|
.mobile-facets__footer > * + * {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.mobile-facets__footer > * {
|
|
width: 50%;
|
|
}
|
|
|
|
.mobile-facets__footer noscript .button {
|
|
width: 100%;
|
|
}
|
|
|
|
.mobile-facets__sort {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.mobile-facets__sort label {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.mobile-facets__sort .select {
|
|
width: auto;
|
|
}
|
|
|
|
.no-js .mobile-facets__sort .select {
|
|
position: relative;
|
|
right: -1rem;
|
|
}
|
|
|
|
.mobile-facets__sort .select .icon-caret {
|
|
right: 0;
|
|
}
|
|
|
|
.mobile-facets__sort .select__select {
|
|
background-color: transparent;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
filter: none;
|
|
margin-left: 0.5rem;
|
|
margin-right: 0.5rem;
|
|
padding-left: 0.5rem;
|
|
padding-right: 1.5rem;
|
|
}
|
|
|
|
.product-count {
|
|
align-self: center;
|
|
position: relative;
|
|
text-align: right;
|
|
}
|
|
|
|
.product-count__text {
|
|
font-size: 1.4rem;
|
|
line-height: calc(1 + 0.5 / var(--font-body-scale));
|
|
margin: 0;
|
|
}
|
|
|
|
#ProductCountDesktop.loading,
|
|
#ProductCount.loading {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.product-count .loading__spinner,
|
|
.product-count-vertical .loading__spinner {
|
|
position: absolute;
|
|
padding-top: 0.6rem;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 1.8rem;
|
|
}
|
|
|
|
@media screen and (min-width: 750px) {
|
|
.facets-vertical {
|
|
display: flex;
|
|
}
|
|
|
|
.facets-wrap-vertical {
|
|
border: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.facets__form-vertical {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 26rem;
|
|
}
|
|
|
|
.facets__disclosure-vertical {
|
|
border-top: 0.1rem solid rgba(var(--color-foreground), 0.1);
|
|
margin-right: 0;
|
|
}
|
|
|
|
.facets-vertical .facets__summary {
|
|
padding-top: 1.5rem;
|
|
margin-bottom: 0;
|
|
padding-bottom: 1.5rem;
|
|
}
|
|
|
|
.facets__heading--vertical {
|
|
margin: 0 0 1.5rem 0;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.facets__header-vertical {
|
|
padding: 1.5rem 2rem 1.5rem 0;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.facets__display-vertical {
|
|
padding-bottom: 1.5rem;
|
|
}
|
|
|
|
.facets-vertical .facets-wrapper {
|
|
padding-right: 3rem;
|
|
}
|
|
|
|
.facets-vertical .facets-wrapper--no-filters {
|
|
display: none;
|
|
}
|
|
|
|
.no-js .facets-vertical .facets-wrapper--no-filters {
|
|
display: block;
|
|
}
|
|
|
|
.facets-vertical .product-grid-container {
|
|
width: 100%;
|
|
}
|
|
|
|
.facets-vertical-form {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.product-count-vertical {
|
|
margin-left: 3.5rem;
|
|
position: relative;
|
|
}
|
|
|
|
.facets-vertical .active-facets__button-wrapper {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.facets-vertical .no-js .facets__button-no-js {
|
|
transform: none;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.facets-vertical .no-js .facet-filters__field {
|
|
justify-content: flex-start;
|
|
padding-bottom: 1rem;
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
.facets-vertical .facets__price {
|
|
padding: 0.5rem 0.5rem 0.5rem 0;
|
|
}
|
|
|
|
.facets-vertical .facets__price .field:last-of-type {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.facets-vertical .active-facets__button {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.no-js .facets-vertical .facet-filters.sorting {
|
|
padding-left: 0;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.facets-vertical .facet-checkbox input[type='checkbox'] {
|
|
z-index: 0;
|
|
}
|
|
|
|
.no-js .facets-vertical .facets-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.facets-vertical .active-facets facet-remove:last-of-type {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.facets-vertical .active-facets {
|
|
margin: 0;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.facets__disclosure-vertical[open] .facets__summary .icon-caret {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.facets-container-drawer {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
align-items: center;
|
|
column-gap: 0;
|
|
}
|
|
|
|
.facets-container-drawer .mobile-facets__wrapper {
|
|
margin-right: 2rem;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.facets-container-drawer .product-count {
|
|
margin: 0 0 0.5rem 3.5rem;
|
|
}
|
|
|
|
.facets-container-drawer .facets-pill {
|
|
width: 100%;
|
|
}
|
|
|
|
.facets-container-drawer .facets__form {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 750px) and (max-width: 989px) {
|
|
.facets-vertical .active-facets__button {
|
|
padding: 1rem;
|
|
margin-bottom: 0;
|
|
margin-left: -0.5rem;
|
|
}
|
|
|
|
.facets-vertical .active-facets__button-remove {
|
|
padding: 0 1rem 1rem;
|
|
}
|
|
}
|