Update Filters code

1 files changed, 21 insertions, 13 deletions

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;
+      }
     }
   }
 }