// Filters // The number of filter options $filter-number: 8 !default;
%filter-checked-nav {
background: $primary-color; color: $light-color;
}
%filter-checked-body {
display: none;
}
.filter {
.filter-nav { margin: $layout-spacing 0; } .filter-body { display: flex; flex-wrap: wrap; } .filter-tag { @for $i from 0 through ($filter-number) { &#tag-#{$i}:checked ~ .filter-nav .chip[for="tag-#{$i}"] { @extend %filter-checked-nav; } } @for $i from 1 through ($filter-number) { &#tag-#{$i}:checked ~ .filter-body .filter-item:not([data-tag~="tag-#{$i}"]) { @extend %filter-checked-body; } } }
}