Changed sort filters to tabs.

assets/components/icon/icon.vue

@@ -1,36 +1,36 @@
 <template>
-    <div
-        :title="title"
-        :class="{ active }"
-        class="icon"
-        v-html="svg"
-    />
+	<div
+		:title="title"
+		:class="{ active }"
+		class="icon"
+		v-html="svg"
+	/>
 </template>
 
 <script>
 export default {
-    props: {
-        icon: {
-            type: String,
-            default: null,
-        },
-        title: {
-            type: String,
-            default: null,
-        },
-        active: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    data() {
-        return {
-            svg: null,
-        };
-    },
-    beforeMount() {
-        this.svg = require(`../../img/icons/${this.icon}.svg`).default;
-    },
+	props: {
+		icon: {
+			type: String,
+			default: null,
+		},
+		title: {
+			type: String,
+			default: null,
+		},
+		active: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			svg: null,
+		};
+	},
+	beforeMount() {
+		this.svg = require(`../../img/icons/${this.icon}.svg`).default;
+	},
 };
 </script>
 
@@ -38,7 +38,7 @@ export default {
 @import '../../css/theme';
 
 .icon {
-    fill: $text;
+    fill: var(--text);
     display: inline-block;
     flex-shrink: 0;
     width: 1rem;
@@ -50,10 +50,10 @@ export default {
     }
 
     &.active {
-        fill: $shadow;
+        fill: var(--shadow);
 
         &:hover {
-            fill: $text;
+            fill: var(--text);
             cursor: pointer;
         }
     }