12345678910111213141516171819202122232425262728293031323334353637 |
- // 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;
- }
- }
- }
- }
|