­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ /* Filters inside Grid ---------------------------------------------------------------------------*/ .g-filters { display: flex; flex-wrap: wrap; position: relative; z-index: 11; /* needed to overlay grid layouts */ } .g-filters.align_center { justify-content: center; } .rtl .g-filters.align_left, body:not(.rtl) .g-filters.align_right { justify-content: flex-end; } .g-filters-item { flex-shrink: 0; position: relative; white-space: nowrap; text-overflow: ellipsis; line-height: 2.8rem; padding: 0 1.2rem; transition-duration: 0.2s; } .g-filters-item.active { cursor: default; pointer-events: none; } .g-filters-item-amount { display: none; margin-left: 0.5rem; } /* STYLE: 1 */ .g-filters.style_1 { background: var(--color-content-bg-alt-grad); } .l-section.color_primary .g-filters.style_1, .l-section.color_secondary .g-filters.style_1 { background: none; } .g-filters.style_1 .g-filters-item { line-height: 3.5rem; color: inherit; } .g-filters.style_1 .g-filters-item.active { background: var(--color-content-bg-grad); color: var(--color-content-primary); } .no-touch .g-filters.style_1 .g-filters-item:hover { background: var(--color-content-primary-grad); color: #fff; } /* STYLE: 2 */ .w-grid.no_gap .g-filters.style_2 { margin-bottom: 1.5rem; } .g-filters.style_2 .g-filters-item { border-radius: 0.2rem; } .g-filters.style_2 .g-filters-item.active { background: var(--color-content-bg-alt-grad); color: inherit; } .no-touch .g-filters.style_2 .g-filters-item:hover { background: var(--color-content-primary-grad); color: #fff; } .l-section.color_primary .g-filters.style_2 .g-filters-item.active, .l-section.color_secondary .g-filters.style_2 .g-filters-item.active { background: rgba(255,255,255,0.15); } /* STYLE: 3 */ .g-filters.style_3 .g-filters-item { line-height: 3.2rem; border-bottom: 3px solid; opacity: 0.66; color: inherit; } .g-filters.style_3 .g-filters-item:not(.active) { border-color: transparent; } .g-filters.style_3 .g-filters-item.active { color: var(--color-content-primary); opacity: 1; } .no-touch .g-filters.style_3 .g-filters-item:hover { opacity: 1; color: inherit; } .l-section.color_primary .g-filters.style_3 .g-filters-item.active, .l-section.color_secondary .g-filters.style_3 .g-filters-item.active { color: #fff; } /* Grid Filter ---------------------------------------------------------------------------*/ .w-filter-message { display: inline-block; padding: 0.5em 1em; margin-bottom: 1em; background: var(--color-content-primary-faded); } .w-filter-opener { display: none; vertical-align: top; position: relative; z-index: 11; /* fix to overlay grid layouts */ font-weight: bold; color: inherit; } .w-filter-opener span:not(.ripple-container):after { display: inline-block; vertical-align: top; height: 0.6em; width: 0.6em; margin-left: 0.3em; border-radius: 50%; background: currentColor; } .w-filter-opener:not(.w-btn) span:after { background: var(--color-content-primary-grad); } .w-filter.active .w-filter-opener span:not(.ripple-container):after { content: ''; } .w-filter-opener.icon_atleft i { margin-right: 0.3em; } .w-filter-opener.icon_atright i { margin-left: 0.3em; } .w-filter-list-title { display: none; font-family: var(--font-h5); font-size: 1.4rem; padding-right: 3rem; margin-bottom: 1.5rem; } .w-filter-item { flex-shrink: 0; position: relative; } .w-filter-item.disabled { opacity: .5; pointer-events: none; } .w-filter-item-title { display: block; } .w-filter-item-reset { display: none; } .w-filter-item.has_value .w-filter-item-reset { display: inline-block; } .w-filter-item[data-ui_type="checkbox"] .w-filter-item-values, .w-filter-item[data-ui_type="radio"] .w-filter-item-values { overflow-y: auto; } .w-filter-item-value { display: block; font-size: 0.9em; line-height: 1.5; margin-bottom: 0.4em; } .w-filter-item-value.depth_2 { margin-left: 1em; } .w-filter-item-value.depth_3 { margin-left: 2em; } .w-filter-item-value.depth_4 { margin-left: 3em; } .w-filter-item-value.depth_4 { margin-left: 4em; } .w-filter-item-value label { display: flex; } .w-filter-item-value .w-form-radio, .w-filter-item-value .w-form-checkbox { font-size: inherit !important; } input:checked ~ .w-filter-item-value-label { font-weight: 600; } .w-filter-item-value-amount { opacity: 0.5; margin-left: 0.5em; } .w-filter-item-value.disabled .w-filter-item-value-amount { visibility: hidden; } /* Disabled values */ .w-filter-item-value.disabled { opacity: .5; } .w-filter-item-value.disabled label { cursor: default; } .w-filter.hide_disabled_values .w-filter-item-value.disabled { height: 0; margin: 0; overflow: hidden; } .w-filter.hide_disabled_values option.disabled { display: none; } /* Dropdown */ .w-filter-item[data-ui_type="dropdown"] .w-filter-item-values { position: relative; } .w-filter-item[data-ui_type="dropdown"] .w-filter-item-values > select { -webkit-appearance: none; } /* Range */ .w-filter input.w-filter-item-value-input { width: 48%; } .w-filter input.w-filter-item-value-input.type_max { margin-left: 4%; } /* LAYOUT: VER */ .w-filter.layout_ver .w-filter-item, .w-filter.state_mobile.layout_hor .w-filter-item { margin-bottom: 1.5em; } .w-filter.layout_ver .w-filter-item-title, .w-filter.state_mobile.layout_hor .w-filter-item-title { display: inline-block; vertical-align: top; margin: 0 0.8em 0.5em 0; font-weight: bold; color: inherit; } .w-filter.layout_ver .w-filter-item-reset, .w-filter.state_mobile.layout_hor .w-filter-item-reset { font-size: 0.8em; } .w-filter.layout_ver .w-filter-item-value { color: inherit; } /* LAYOUT: HOR */ .w-filter.layout_hor .w-filter-list { display: flex; flex-wrap: wrap; } .w-filter.state_desktop.layout_hor .w-filter-item-reset { position: absolute; top: 0; right: 0; } .w-filter.state_desktop.layout_hor .w-filter-item-reset:before { vertical-align: top; content: '\f00d'; font-family: fontawesome; font-weight: 900; } .w-filter.state_desktop.layout_hor .w-filter-item-reset span { display: none; } .w-filter.state_desktop.layout_hor .w-filter-item[data-ui_type="dropdown"] .w-filter-item-values:after { right: 1em; } /* Alignment */ .w-filter.align_center .w-filter-list { justify-content: center; } .rtl .w-filter.align_left .w-filter-list, body:not(.rtl) .w-filter.align_right .w-filter-list { justify-content: flex-end; } .w-filter.align_right .w-filter-item-values { right: 0; } /* STYLE: Dropdown Default */ .w-filter.state_desktop.style_drop_default.align_justify .w-filter-item { flex: 1 0 50px; } .w-filter.state_desktop.style_drop_default .w-filter-list { margin: -0.5em; } .w-filter.state_desktop.style_drop_default .w-filter-item { margin: 0.5em; } .w-filter.state_desktop.style_drop_default .w-filter-item-title { width: 100%; border: 0px solid transparent; /* default "solid" style is needed */ background: none; } body:not(.rtl) .w-filter-item[data-ui_type="dropdown"] .w-filter-item-values > select, body:not(.rtl) .w-filter.state_desktop.style_drop_default .w-filter-item-title { padding-right: 2.8em; } .w-filter-item[data-ui_type="dropdown"] .w-filter-item-values:after, .w-filter.state_desktop.style_drop_default .w-filter-item:not(.has_value) .w-filter-item-title:after { content: ''; position: absolute; top: 56%; transform: translateY(-50%); right: 0; pointer-events: none; border: 0.4em solid; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-radius: 2px; } .w-filter.state_desktop.style_drop_default .w-filter-item-reset { top: 50%; right: 0.5em; transform: translateY(-50%); text-align: center; width: 1.8em; } .w-filter.state_desktop[class*="style_drop_"] .w-filter-item-values { display: none; position: absolute; z-index: 99; min-width: 15em; width: 100%; padding: 1em; box-shadow: var(--box-shadow); background: var(--color-content-bg-grad); color: var(--color-content-text); } .w-filter.state_desktop.show_on_hover[class*="style_drop_"] .w-filter-item:hover .w-filter-item-values, .w-filter.state_desktop.show_on_click[class*="style_drop_"] .w-filter-item.show .w-filter-item-values { display: block; } .w-filter.state_desktop[class*="style_drop_"] .w-filter-item-value { color: inherit; } /* STYLE: Dropdown Minimal */ .w-filter.state_desktop.style_drop_trendy.align_justify .w-filter-list { justify-content: space-between; } .w-filter.state_desktop.style_drop_trendy .w-filter-list { margin: 0 -1.25em; } .w-filter.state_desktop.style_drop_trendy .w-filter-item { margin: 0 1.25em; } .w-filter.state_desktop.style_drop_trendy .w-filter-item-title { font-weight: bold; color: inherit; line-height: 2.5em; } .w-filter.state_desktop.style_drop_trendy .w-filter-item-reset { line-height: 2.5em; } .w-filter.state_desktop.style_drop_trendy .has_value .w-filter-item-title { box-shadow: 0 -2px 0 currentColor inset; } .w-filter.state_desktop.style_drop_trendy .w-filter-item-title:after { vertical-align: top; content: '\f107'; font-family: fontawesome; font-weight: 900; margin-left: 0.5em; font-size: 1.2em; } .w-filter.state_desktop.style_drop_trendy .has_value .w-filter-item-title:after { visibility: hidden; } .w-filter.state_desktop.style_drop_trendy .w-form-radio, .w-filter.state_desktop.style_drop_trendy .w-form-checkbox { margin-top: 0.2em; font-size: 0.8em !important; box-shadow: none !important; background: none !important; border: none !important; color: inherit !important; } /* STYLE: Switch */ .w-filter.state_desktop[class*="style_switch_"] .w-form-radio, .w-filter.state_desktop[class*="style_switch_"] .w-form-checkbox, .w-filter.state_desktop[class*="style_switch_"] .w-filter-item-reset, .w-filter.state_desktop[class*="style_switch_"] .w-filter-item-title > span, .w-filter.state_desktop[class*="style_switch_"].hide_item_title .w-filter-item-title { display: none; } .w-filter.state_desktop[class*="style_switch_"] .w-filter-list { flex-direction: column; } .w-filter.state_desktop[class*="style_switch_"] .w-filter-item { display: flex; justify-content: inherit; } .w-filter.state_desktop[class*="style_switch_"]:not(.items_1) .w-filter-item { margin: 0 1.5em 0.5em 0; } .w-filter.state_desktop[class*="style_switch_"] .w-filter-item-title { flex-shrink: 0; font-weight: bold; line-height: 2.8; color: inherit; margin-right: 1em; } .w-filter.state_desktop[class*="style_switch_"] .w-filter-item-values { display: flex; flex-wrap: wrap; } .w-filter.state_desktop[class*="style_switch_"].align_center .w-filter-item-values { justify-content: center; } .rtl .w-filter.state_desktop[class*="style_switch_"].align_left .w-filter-item-values, body:not(.rtl) .w-filter.state_desktop[class*="style_switch_"].align_right .w-filter-item-values { justify-content: flex-end; } .w-filter.state_desktop[class*="style_switch_"].align_justify .w-filter-item-values { justify-content: space-between; } .w-filter.state_desktop[class*="style_switch_"] .w-filter-item-value { flex-shrink: 0; position: relative; white-space: nowrap; font-size: inherit; line-height: 2.8; margin: 0; } .w-filter.state_desktop[class*="style_switch_"] .w-filter-item-value > label { padding: 0 1.2em; } .w-filter.state_desktop[class*="style_switch_"] [data-ui_type="checkbox"] .w-filter-item-value { margin-right: 4px; } .w-filter.state_desktop[class*="style_switch_"] [data-ui_type="radio"] .w-filter-item-value.selected { cursor: default; pointer-events: none; } .w-filter.state_desktop[class*="style_switch_"] .selected .w-filter-item-value-label { font-weight: inherit; } .w-filter.state_desktop.style_switch_default .w-filter-item-value { border-radius: 0.2em; } .w-filter.state_desktop.style_switch_default .w-filter-item-value.selected { background: var(--color-content-bg-alt-grad); color: inherit; } .no-touch .w-filter.state_desktop.style_switch_default .w-filter-item-value:hover { background: var(--color-content-primary-grad); color: #fff; } .l-section.color_primary .w-filter.state_desktop.style_switch_default .selected, .l-section.color_secondary .w-filter.state_desktop.style_switch_default .selected { background: rgba(255,255,255,0.15); } .w-filter.state_desktop.style_switch_trendy .w-filter-item-title { line-height: 3.2; } .w-filter.state_desktop.style_switch_trendy .w-filter-item-value { line-height: 3.2; border-bottom: 2px solid transparent; color: inherit; } .w-filter.state_desktop.style_switch_trendy .w-filter-item-value.selected { color: var(--color-content-primary); border-color: currentColor; } /* STATE: mobile */ body.us_filter_open { overflow: hidden !important; } .w-filter.state_mobile .w-filter-list { display: none; position: fixed; z-index: 1111; top: 0; left: 0; right: 0; bottom: 4rem; /* equals the height of w-filter-list-panel */ overflow: auto; font-size: 1.2rem; /* increase size for better UX on mobiles */ padding: 1rem 1.5rem; text-align: initial; background: var(--color-content-bg-grad); color: var(--color-content-text); } .w-filter-list-closer { display: none; position: fixed; z-index: 1; top: 0; right: 0; line-height: 3.6rem; width: 3.6rem; font-size: 2rem; text-align: center; background: inherit; color: inherit; } .w-filter-list-closer:before { content: '\f00d'; font-family: fontawesome; font-weight: 400; vertical-align: top; } .w-filter-list-panel { display: none; position: fixed; z-index: 1112; bottom: 0; left: 0; right: 0; padding: 0.75rem; box-shadow: var(--box-shadow-up); background: var(--color-content-bg-grad); } .w-filter-list-panel > .w-btn { font-size: 1rem; line-height: 2.5rem !important; padding-top: 0; padding-bottom: 0; width: 100%; } .w-filter.state_mobile .w-filter-list-title, .w-filter.state_mobile .w-filter-list-closer, .w-filter.state_mobile.open .w-filter-list, .w-filter.state_mobile.open .w-filter-list-panel { display: block; } .w-filter.state_mobile .w-filter-item-values { max-height: none !important; overflow: visible !important; } .w-filter.state_mobile .w-filter-item-value { color: inherit; } /* Colors ========================================================================== */ .color_alternate .g-filters.style_1 .g-filters-item.active { background: var(--color-alt-content-bg-grad); } .color_alternate .g-filters.style_1, .color_alternate .g-filters.style_2 .g-filters-item.active, .color_alternate .w-filter.state_desktop.style_switch_default .w-filter-item-value.selected { background: var(--color-alt-content-bg-alt-grad); } .color_alternate .g-filters.style_1 .g-filters-item.active, .color_alternate .g-filters.style_3 .g-filters-item.active, .color_alternate .w-filter.state_desktop.style_switch_trendy .w-filter-item-value.selected { color: var(--color-alt-content-primary); } .no-touch .color_alternate .g-filters.style_1 .g-filters-item:hover, .no-touch .color_alternate .g-filters.style_2 .g-filters-item:hover, .no-touch .color_alternate .w-filter.state_desktop.style_switch_default .w-filter-item-value:hover { background: var(--color-alt-content-primary-grad); } /* Rounded Corners ========================================================================== */ .rounded_none .w-filter-item-value, .rounded_none .g-filters-item { border-radius: 0 !important; } /* Responsive ========================================================================== */ @media screen and (max-width: 480px) { .g-filters-list, .w-filter.state_desktop[class*="style_switch_"] .w-filter-item-values { justify-content: flex-start !important; } .g-filters-item, .w-filter.state_desktop[class*="style_switch_"] .w-filter-item-value { font-size: 0.9rem !important; text-align: center; margin: 0 !important; padding-left: 0.6rem !important; padding-right: 0.6rem !important; text-overflow: ellipsis; overflow: hidden; width: 50%; } }