restruct: updated sass version and rules

src/components/Global/ActionButton.vue

@@ -13,8 +13,7 @@ export default defineComponent({});
 </script>
 
 <style lang="scss">
-@import '../../styles/variables';
-@import '../../styles/responsive';
+@use '../../styles/responsive';
 
 .button_content {
   display: flex;

src/components/Global/AddDataButton.vue

@@ -38,5 +38,3 @@ export default defineComponent({
   }
 });
 </script>
-
-<style scoped></style>

src/components/Global/Card.vue

@@ -43,7 +43,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
 
 .card {
   position: fixed;
@@ -85,7 +85,7 @@ export default defineComponent({
   overflow: auto;
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .card {
     align-items: flex-start;
   }

src/components/Global/DonationCard.vue

@@ -150,8 +150,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-
 .body {
   display: grid;
   grid-template-rows: 1fr auto;

src/components/Global/RegionDropdown.vue

@@ -120,8 +120,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/variables.scss';
-
 .region-dropdown {
   display: flex;
   align-items: center;
@@ -182,7 +180,7 @@ li.option {
     background: none;
 
     &:focus + span {
-      color: $accentCol;
+      color: var(--clr-primary);
       font-weight: 800;
     }
   }

src/components/Global/SearchBox.vue

@@ -7,7 +7,12 @@
       @keypress="updateValue"
     />
 
-    <img class="search-exit" src="/images/icon-exit.svg" alt="exit-icon" @click="clearSearchValue" />
+    <img
+      class="search-exit"
+      src="/images/icon-exit.svg"
+      alt="exit-icon"
+      @click="clearSearchValue"
+    />
   </div>
 </template>
 
@@ -17,21 +22,10 @@ import { defineComponent, ref, watch } from 'vue';
 export default defineComponent({
   emits: ['update:searchedValue', 'clearValue'],
   props: {
-    searchedValue: {
-      type: String,
-      required: true
-    },
-    updateOnInput: {
-      type: Boolean,
-      default: true
-    },
-    titleToTranslate: {
-      type: String,
-      required: true
-    },
-    clearValue: {
-      type: Function
-    }
+    searchedValue: { type: String, required: true },
+    updateOnInput: { type: Boolean, default: true },
+    titleToTranslate: { type: String, required: true },
+    clearValue: { type: Function }
   },
 
   setup(props, { emit }) {
@@ -56,17 +50,13 @@ export default defineComponent({
         emit('update:searchedValue', compSearchedValue.value);
     };
 
-    return {
-      compSearchedValue,
-      updateValue,
-      clearSearchValue
-    };
+    return { compSearchedValue, updateValue, clearSearchValue };
   }
 });
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive';
+@use '../../styles/responsive';
 
 .search {
   &-box {
@@ -78,7 +68,7 @@ export default defineComponent({
 
     margin: 0.5em 0 0.5em 0.5em;
 
-    @include smallScreen() {
+    @include responsive.smallScreen{
       width: 85%;
     }
   }

src/components/Global/StationStatusBadge.vue

@@ -20,15 +20,9 @@ import { Status } from '../../typings/common';
 
 export default defineComponent({
   props: {
-    dispatcherStatus: {
-      type: Number as PropType<Status.ActiveDispatcher | number>
-    },
-    dispatcherTimestamp: {
-      type: Number as PropType<number | null>
-    },
-    isOnline: {
-      type: Boolean
-    }
+    dispatcherStatus: { type: Number as PropType<Status.ActiveDispatcher | number> },
+    dispatcherTimestamp: { type: Number as PropType<number | null> },
+    isOnline: { type: Boolean }
   },
   mixins: [dateMixin],
 

src/components/Global/StockList.vue

@@ -22,20 +22,12 @@ export default defineComponent({
   components: { VehicleThumbnail },
 
   props: {
-    trainStockList: {
-      type: Array as PropType<string[]>,
-      required: true
-    },
-    tractionOnly: {
-      type: Boolean,
-      required: false
-    }
+    trainStockList: { type: Array as PropType<string[]>, required: true },
+    tractionOnly: { type: Boolean, required: false }
   },
 
   data() {
-    return {
-      apiStore: useApiStore()
-    };
+    return { apiStore: useApiStore() };
   },
 
   computed: {
@@ -151,7 +143,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-
 .list-wrapper {
   display: flex;
   justify-content: center;

src/components/Global/VehicleThumbnail.vue

@@ -51,7 +51,6 @@ function onImageLoad() {
 
 <style lang="scss" scoped>
 .vehicle-thumbnail {
-  
   position: relative;
   opacity: 0;
   transition: opacity 100ms ease-in-out;