Filter Options¶
Styles for filter options used in filter_options and filter_options_horitonzal modules.
Structurally filter options styles feature four main elements:
.filters.filters-vertical.filters-horizontal.filter-subcategories
First element - .filters contains following subelements:
.filters__more-filters.filters__expand-btn.filters__collapse-btn.filters__category-link.filters__clear-link
And following modifiers:
.filters__category-link_active
Second element - .filters-vertical contains following subelements:
.filters-vertical__header.filters-vertical__title.filters-vertical__categories.filters-vertical__subcategories.filters-vertical__filters.filters-vertical__filter-group.filters-vertical__back-to-category-link.filters-vertical__in-category.filters-vertical__actions
And following modifiers
.filters-vertical_visible.filters-vertical_on-layer.filters-vertical_not-layer
Third element - .filters-horizontal contains following subelements:
.filters-vertical__content.filters-vertical__dropdown-content.filters-vertical__dropdown-actions.filters-vertical__active-filters.filters-vertical__filter-header
And following modifiers
.filters-horizontal__filter-header_active
Fourth element - .filters-subcategories contains following subelements:
.filters-subcategories__list.filters-subcategories__category-link-counter.filters-subcategories__slider
LESS¶
You can modify any filter options less variable in your User Less section to change filter options styles.
Filter options variables¶
Variables used to style filter options.
@filterOpionsSmallFontSize: 12;
@filterOptionsCategoriesMarginBottom: @globalSpacing;
@filterOptionsGroupMarginBottom: @globalSpacing * 2;
@filterOptionsCategoryLinkColor: @globalFontColor;
@filterOptionsCategoryLinkPadding: @globalSpacing * 0.4 @globalSpacing * 0.4 @globalSpacing * 0.4 0;
@filterOptionsActiveCategoryLinkBgColor: @neutralColors50;
@filterOptionsActiveCategoryLinkFontWeight: @fontWeightSemibold;
@filterOptionsActiveCategoryLinkPadding: @globalSpacing * 0.4;
@filterOptionsBackToCategoryLinkColor: @globalFontColor;
@filterOptionsBackToCategoryLinkMarginBottom: @globalSpacing;
@filterOptionsBackToCategoryLinkColumnGap: @globalSpacing * 0.5;
@filterOptionsCollapseBtnMarginBottom: @globalSpacing;
@clearFiltersColumnGap: @globalSpacing * 0.25;
@filterOptionsBgColor: @globalBodyBackgroundColor;
@filterOptionsActionsBorderTop: 1px solid @neutralColors200;
@filterOptionsActionsPadding: @globalSpacing 0;
@filterOptionsMinWidth: 16.625rem;
@filterOptionsWidth: 300px;
@filterOptionsSpacing: @globalSpacing;
@filterSubcategoriesMarginBottom: @globalSpacing * 0.5;
If you want to change filter options styles, you can just change the variables. To change default font-size of the small elements of filter options just modify @filterOpionsSmallFontSize variable.
Filter options styles¶
Here are standard filter options styles.
filters-aggregator {
display: block;
}
.filters {
&__more-filters {
display: flex;
flex-direction: column;
}
&__expand-btn,
&__collapse-btn {
.link();
order: 1;
text-decoration: none;
}
&__collapse-btn {
margin-top: @filterOptionsCollapseBtnMarginBottom;
}
&__category-link {
display: flex;
justify-content: space-between;
width: 100%;
text-decoration: none;
color: @filterOptionsCategoryLinkColor;
padding: @filterOptionsCategoryLinkPadding;
&_active {
background-color: @filterOptionsActiveCategoryLinkBgColor;
font-weight: @filterOptionsActiveCategoryLinkFontWeight;
padding: @filterOptionsActiveCategoryLinkPadding;
}
}
&__clear-link {
.font-size(@filterOpionsSmallFontSize);
.link();
display: flex;
column-gap: @clearFiltersColumnGap;
align-items: center;
cursor: pointer;
}
}
.filters-vertical {
&__categories {
margin-bottom: @filterOptionsCategoriesMarginBottom;
}
&__title {
display: flex;
align-items: center;
}
&__filter-group {
margin-bottom: @filterOptionsGroupMarginBottom;
}
&__back-to-category-link {
.font-size(@filterOpionsSmallFontSize);
color: @filterOptionsBackToCategoryLinkColor;
text-decoration: underline;
margin-bottom: @filterOptionsBackToCategoryLinkMarginBottom;
display: flex;
column-gap: @filterOptionsBackToCategoryLinkColumnGap;
align-items: center;
}
&__in-category {
.font-size(@filterOpionsSmallFontSize);
}
&__actions {
position: sticky;
bottom: 0;
background-color: @filterOptionsBgColor;
border-top: @filterOptionsActionsBorderTop;
padding: @filterOptionsActionsPadding;
text-align: right;
display: flex;
justify-content: end;
gap: @globalSpacing * 0.25;
}
}
@media (min-width: @breakPointXs) {
.filters-vertical {
&_on-layer {
display: none;
}
}
.filter-subcategories {
display: none;
}
}
@media (max-width: (@breakPointXs - 1)) {
.filters-vertical {
position: fixed;
display: none;
flex-direction: column;
z-index: 5;
min-width: @filterOptionsMinWidth;
height: 100vh;
height: 100dvh;
width: @filterOptionsWidth;
overflow: auto;
background-color: @filterOptionsBgColor;
top: 0;
right: 0;
overflow-x: hidden;
&_visible {
display: block;
}
&__header {
border-bottom: 1px solid @neutralColors100;
padding: @filterOptionsSpacing;
}
&__filters, &__subcategories {
padding: 0 @filterOptionsSpacing 0;
}
&__subcategories {
display: none;
}
&__actions {
.shadow-reverse();
padding: @filterOptionsSpacing;
display: flex;
justify-content: space-between;
}
&_not-layer {
display: none;
}
}
}
.filters-horizontal {
&__content {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
&__dropdown-content {
padding: 1rem 1rem 2rem;
min-width: 280px;
}
&__dropdown-actions {
.shadow-reverse();
display: flex;
align-items: center;
padding: 1rem;
gap: 1rem;
}
&__active-filters {
margin-top: 1rem;
align-items: center;
gap: 0.5rem;
}
&__filter-header {
&_active {
color: @primaryColor;
}
}
}
.filters-subcategories {
&__list {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
&__category-link-counter {
.weight-normal();
}
}
.filter-subcategories {
margin-bottom: @filterSubcategoriesMarginBottom;
&__slider {
.splide__slide {
width: auto !important;
}
}
}
filters-reset {
outline-offset: 0.25rem;
}