diff options
1 files changed, 21 insertions, 13 deletions
| -rw-r--r-- | src/_filters.scss | 34 |
diff --git a/src/_filters.scss b/src/_filters.scss index 965dfa3..37ccc89 100644 --- a/src/_filters.scss +++ b/src/_filters.scss @@ -1,4 +1,16 @@ -// Filters +// 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; @@ -10,20 +22,16 @@ } .filter-tag { - &#tag-all:checked ~ .filter-nav .chip[for="tag-all"], - &#tag-action:checked ~ .filter-nav .chip[for="tag-action"], - &#tag-roleplaying:checked ~ .filter-nav .chip[for="tag-roleplaying"], - &#tag-shooter:checked ~ .filter-nav .chip[for="tag-shooter"], - &#tag-sports:checked ~ .filter-nav .chip[for="tag-sports"] { - background: $primary-color; - color: $light-color; + @for $i from 0 through ($filter-number) { + &#tag-#{$i}:checked ~ .filter-nav .chip[for="tag-#{$i}"] { + @extend %filter-checked-nav; + } } - &#tag-action:checked ~ .filter-body .column:not([data-tag~="tag-action"]), - &#tag-roleplaying:checked ~ .filter-body .column:not([data-tag~="tag-roleplaying"]), - &#tag-shooter:checked ~ .filter-body .column:not([data-tag~="tag-shooter"]), - &#tag-sports:checked ~ .filter-body .column:not([data-tag~="tag-sports"]) { - display: none; + @for $i from 1 through ($filter-number) { + &#tag-#{$i}:checked ~ .filter-body .filter-item:not([data-tag~="tag-#{$i}"]) { + @extend %filter-checked-body; + } } } } |