From ccfcff608e9dae07eff046e2a87f2791eb94c4a8 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Mon, 3 Apr 2017 11:16:05 +0800
Subject: Add Filters code

---
 src/filters.less | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/filters.less

(limited to 'src/filters.less')

diff --git a/src/filters.less b/src/filters.less
new file mode 100644
index 0000000..f1c263f
--- /dev/null
+++ b/src/filters.less
@@ -0,0 +1,40 @@
+// Filters
+.filter {
+  .filter-nav {
+    margin: 1rem 0;
+  }
+
+  .filter-body {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .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;
+    }
+
+    &#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;
+      opacity: 0;
+      transition: all .25s ease-in-out;
+    }
+  }
+}
+
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    width: 0;
+  }
+}
-- 
cgit v1.3.1-23-gd82d