From 9aeb3b0d490c0ee4c5eada9cc56e6a6a52a3a99c Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Fri, 29 Sep 2017 14:31:22 +0800
Subject: Update Filters code

---
 src/_filters.scss | 34 +++++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 13 deletions(-)

(limited to 'src')

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;
+      }
     }
   }
 }
-- 
cgit v1.3.1-23-gd82d