refactor(styles): separated fonts and responsiveness to scss files; made global reference only once

src/components/tabs/stock-list/StockList.vue

@@ -20,13 +20,7 @@
           @keydown.backspace="stockListUtils.removeStock(i)"
           ref="itemRefs"
         >
-          <div
-            class="stock-info"
-            @dragstart="onDragStart(i)"
-            @drop="onDrop($event, i)"
-            @dragover="allowDrop"
-            draggable="true"
-          >
+          <div class="stock-info" @dragstart="onDragStart(i)" @drop="onDrop($event, i)" @dragover="allowDrop" draggable="true">
             <span class="stock-info-no" :data-selected="i == store.chosenStockListIndex">
               <span v-if="i == store.chosenStockListIndex">&bull;&nbsp;</span>
               {{ i + 1 }}.
@@ -34,17 +28,10 @@
 
             <span
               class="stock-info-type"
-              :data-sponsor-only="
-                stock.vehicleRef.sponsorOnlyTimestamp &&
-                stock.vehicleRef.sponsorOnlyTimestamp > Date.now()
-              "
+              :data-sponsor-only="stock.vehicleRef.sponsorOnlyTimestamp && stock.vehicleRef.sponsorOnlyTimestamp > Date.now()"
               :data-team-only="stock.vehicleRef.teamOnly"
             >
-              {{
-                isTractionUnit(stock.vehicleRef)
-                  ? stock.vehicleRef.type
-                  : getCarSpecFromType(stock.vehicleRef.type)
-              }}
+              {{ isTractionUnit(stock.vehicleRef) ? stock.vehicleRef.type : getCarSpecFromType(stock.vehicleRef.type) }}
             </span>
 
             <span class="stock-info-cargo" v-if="stock.cargo">
@@ -53,9 +40,7 @@
 
             <span class="stock-info-length">{{ stock.vehicleRef.length }}m</span>
 
-            <span class="stock-info-mass">
-              {{ ((stock.vehicleRef.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t
-            </span>
+            <span class="stock-info-mass"> {{ ((stock.vehicleRef.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t </span>
             <span class="stock-info-speed">{{ stock.vehicleRef.maxSpeed }}km/h</span>
           </div>
         </li>
@@ -123,10 +108,7 @@ export default defineComponent({
       const stock = this.store.stockList[stockID];
 
       this.store.chosenStockListIndex =
-        this.store.chosenStockListIndex == stockID &&
-        this.store.chosenVehicle?.type == stock.vehicleRef.type
-          ? -1
-          : stockID;
+        this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.vehicleRef.type ? -1 : stockID;
 
       if (this.store.chosenStockListIndex == -1) {
         this.store.chosenVehicle = null;
@@ -154,12 +136,14 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '@/styles/responsive';
+
 .list-wrapper {
   position: relative;
 }
 
 .list-empty {
-  background-color: global.$secondaryColor;
+  background-color: var(--secondaryColor);
   border-radius: 0.5em;
   padding: 0.75em;
   font-weight: bold;
@@ -202,14 +186,14 @@ li > .stock-info {
 
 .stock-info-no,
 .stock-info-type {
-  background-color: global.$secondaryColor;
+  background-color: var(--secondaryColor);
 
   &[data-team-only='true'] {
-    color: global.$teamColor;
+    color: var(--teamColor);
   }
 
   &[data-sponsor-only='true'] {
-    color: global.$sponsorColor;
+    color: var(--accentColor);
   }
 }
 
@@ -218,7 +202,7 @@ li > .stock-info {
   text-align: right;
 
   &[data-selected='true'] {
-    color: global.$accentColor;
+    color: var(--accentColor);
   }
 }
 
@@ -253,7 +237,7 @@ li > .stock-info {
   }
 }
 
-@media screen and (max-width: global.$breakpointMd) {
+@include responsive.midScreen {
   ul {
     min-height: auto;
   }

src/components/tabs/stock-list/StockThumbnails.vue

@@ -199,11 +199,11 @@ ul {
   }
 
   &[data-sponsor-only='true'] > b {
-    color: global.$sponsorColor;
+    color: var(--accentColor);
   }
 
   &[data-team-only='true'] > b {
-    color: global.$teamColor;
+    color: var(--teamColor);
   }
 
   img {

src/components/tabs/stock-list/StockWarnings.vue

@@ -91,7 +91,7 @@ export default defineComponent({
 .warning {
   padding: 0.25em;
   margin: 0.25em 0;
-  background: global.$accentColor;
+  background: var(--accentColor);
   color: black;
 
   font-weight: bold;