Dodano filtry do widoku historii rozkładów jazdy

src/components/StationsView/FilterOption.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="filter-option option">
-    <label class="option-label">
+    <label>
       <input
-        class="option-input"
         type="checkbox"
         :name="option.name"
         :defaultValue="option.defaultValue"
@@ -10,9 +9,7 @@
         v-model="option.value"
         @change="handleChange"
       />
-      <span
-        class="option-content"
-        :class="option.section + (option.value ? ' checked' : '')"
+      <span :class="option.section + (option.value ? ' checked' : '')"
         >{{ $t(`filters.${option.id}`) }}
       </span>
     </label>
@@ -20,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent } from 'vue';
 
 interface FilterOption {
   id: string;
@@ -37,10 +34,10 @@ export default defineComponent({
       required: true,
     },
   },
-  emits: ["optionChange"],
+  emits: ['optionChange'],
   methods: {
     handleChange() {
-      this.$emit("optionChange", {
+      this.$emit('optionChange', {
         name: this.option.name,
         value: this.option.value,
       });
@@ -53,6 +50,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import "../../styles/option.scss";
+
 $accessCol: #e03b07;
 $controlCol: #0085ff;
 $signalCol: #bf7c00;
@@ -60,106 +59,74 @@ $statusCol: #349b32;
 $saveCol: #28a826;
 $routesCol: #9049c0;
 
-.option {
-  input {
-    display: none;
-  }
-
-  span {
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-
-    width: 100%;
-    text-align: center;
-
-    cursor: pointer;
-
-    padding: 0.5em 0.55em;
-
-    display: inline-block;
-    position: relative;
-
-    transition: all 0.2s;
-
-    border-radius: 0.5em;
-
-    &:not(.checked) {
-      background-color: #585858;
+.option span {
+  &.checked {
+    &.access {
+      background-color: $accessCol;
 
       &::before {
-        box-shadow: none;
+        box-shadow: 0 0 6px 1px $accessCol;
       }
     }
 
-    &.checked {
-      &.access {
-        background-color: $accessCol;
-
-        &::before {
-          box-shadow: 0 0 6px 1px $accessCol;
-        }
-      }
-
-      &.control {
-        background-color: $controlCol;
-
-        &::before {
-          box-shadow: 0 0 6px 1px $controlCol;
-        }
-      }
-
-      &.signals {
-        background-color: $signalCol;
-
-        &::before {
-          box-shadow: 0 0 6px 1px $signalCol;
-        }
-      }
-
-      &.routes {
-        background-color: $routesCol;
-
-        &::before {
-          box-shadow: 0 0 6px 1px $routesCol;
-        }
-      }
-
-      &.status {
-        background-color: $statusCol;
-
-        &::before {
-          box-shadow: 0 0 6px 1px $statusCol;
-        }
-      }
-
-      &.save {
-        background-color: $saveCol;
-
-        &::before {
-          box-shadow: 0 0 6px 1px $saveCol;
-        }
-      }
-
-      &.mode {
-        background-color: lightgreen;
-        color: black;
-
-        font-weight: 500;
-      }
+    &.control {
+      background-color: $controlCol;
 
       &::before {
-        position: absolute;
-        content: "";
-        top: 0;
-        left: 0;
-
-        width: 100%;
-        height: 100%;
-
-        border-radius: 0.5em;
+        box-shadow: 0 0 6px 1px $controlCol;
       }
     }
+
+    &.signals {
+      background-color: $signalCol;
+
+      &::before {
+        box-shadow: 0 0 6px 1px $signalCol;
+      }
+    }
+
+    &.routes {
+      background-color: $routesCol;
+
+      &::before {
+        box-shadow: 0 0 6px 1px $routesCol;
+      }
+    }
+
+    &.status {
+      background-color: $statusCol;
+
+      &::before {
+        box-shadow: 0 0 6px 1px $statusCol;
+      }
+    }
+
+    &.save {
+      background-color: $saveCol;
+
+      &::before {
+        box-shadow: 0 0 6px 1px $saveCol;
+      }
+    }
+
+    &.mode {
+      background-color: lightgreen;
+      color: black;
+
+      font-weight: 500;
+    }
+
+    &::before {
+      position: absolute;
+      content: '';
+      top: 0;
+      left: 0;
+
+      width: 100%;
+      height: 100%;
+
+      border-radius: 0.5em;
+    }
   }
 }
-</style>
+</style>