Breakout sass files for granularity/clarity.

Moved selectCar styles to the component instead of a stand-alone style sheet.

src/layouts/selectYear/selectYear.vue

@@ -58,3 +58,68 @@ export default {
     },
 };
 </script>
+
+<style lang="scss">
+// SelectCar styles
+.select-car {
+    height: 100vh;
+
+    .select-car-form {
+        background: $white;
+        height: 100%;
+
+        form {
+            height: calc(100% - 230px);
+            overflow-y: scroll;
+            overflow-x: hidden;
+        }
+
+        .car_list, .current_car_info-text, .needed_car_info-text {
+            flex-shrink: 0;
+            width: 100%;
+            position: relative;
+            transition: transform .3s;
+        }
+    }
+
+    .current_car_info {
+        position: relative;
+        min-height: 2.5rem;
+
+        .current_car_info-text {
+            position: absolute;
+        }
+    }
+}
+
+.slide-enter-from {
+    opacity: 0;
+    transform: translateX(30vw);
+}
+.slide-enter-active, .slide-leave-active {
+    transition: all .4s;
+}
+.slide-leave-to {
+    opacity: 0;
+    transform: translateX(-30vw);
+}
+
+.slide_reverse-enter-from {
+    opacity: 0;
+    transform: translateX(-30vw);
+}
+.slide_reverse-enter-active, .slide_reverse-leave-active {
+    transition: all .4s;
+}
+.slide_reverse-leave-to {
+    opacity: 0;
+    transform: translateX(30vw);
+}
+
+.fade-enter-from, .fade-leave-to {
+    opacity: 0;
+}
+.fade-enter-active, .fade-leave-active {
+    transition: all .5s ease;
+}
+</style>

src/styles/commonButtonStyles.scss

@@ -0,0 +1,76 @@
+//Custom button styles
+.btn {
+  &.btn-primary {
+    position: relative;
+    background: $blue-700;
+    background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
+    border: none;
+    border-radius: $border-radius-lg;
+    height: 48px;
+    color: $white;
+    transition: all 150ms linear;
+    &:hover {
+      background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%);
+    }
+    &:focus, // Mouse, touch, stylus focus
+    &:focus-visible { // Keyboard focus for accessibility
+      outline: none;
+      box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
+    }
+    &.button-loader {
+      padding: 0 40px 0 12px;
+      &:after {
+        content: url(../../assets/img/icons/button-spinner-white.svg);
+        position: absolute;
+        right: 14px;
+        width: 16px;
+        height: 16px;
+        margin-left: 12px;
+        animation: rotation 1s infinite linear;
+        @keyframes rotation {
+          100% {
+            transform:rotate(360deg);
+          }
+        }
+      }
+    }
+    &:disabled {
+      background: $gray-100 !important;
+      background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%) !important;
+      color: $gray !important;
+      height: 48px;
+      border: none;
+      border-radius: $border-radius-lg;
+    }
+  }
+  &.list-button {
+    position: relative;
+    background: $white;
+    height: 48px;
+    transition: all 150ms linear;
+    border-radius: $border-radius-lg;
+    border: 1px solid rgba($gray-300,.3);
+    width: 100%;
+    &:focus, // Mouse, touch, stylus focus
+    &:focus-visible { // Keyboard focus for accessibility
+      box-shadow: none;
+    }
+    &.button-loader {
+      padding: 0 40px 0 12px;
+      &:after {
+        content: url(../../assets/img/icons/button-spinner-blue.svg);
+        position: absolute;
+        right: 14px;
+        width: 16px;
+        height: 16px;
+        margin-left: 12px;
+        animation: rotation 1s infinite linear;
+        @keyframes rotation {
+          100% {
+            transform:rotate(360deg);
+          }
+        }
+      }
+    }
+  }
+}

src/styles/commonStyles.scss

@@ -1,3 +1,5 @@
+// Common/Global Styles
+// Use this file for global styles that don't or won't have their own stylesheet
 body {
     font-size: 16px;
     background-color: #fff;
@@ -20,189 +22,3 @@ body {
       cursor: pointer;
     }
   }
-
-//Typogrophy
-p {
-  font-size: 16px;
-  line-height: 1.625;
-  font-weight: 400;
-}
-
-//Headings
-//add helper fw-bold to any element to get bold style (500)
-h1,.h1 {
-  line-height: 1.325;
-  font-weight: 300;
-}
-h2,.h2 {
-  line-height: 1.325;
-  font-weight: 300;
-}
-h3,.h3 {
-  line-height: 1.375;
-  font-weight: 300;
-}
-h4,.h4 {
-  line-height: 1.6;
-  font-weight: 300;
-}
-h5,.h5 {
-  line-height: 1.325;
-  font-weight: 400;
-}
-h6,.h6 {
-  line-height: 1.7;
-  letter-spacing: .75px;
-  text-transform: uppercase;
-}
-
-label {
-  line-height: 1.625;
-  font-weight: 400;
-}
-
-caption {
-  font-size: .75rem;
-  line-height: 1.7;
-  font-weight: 400;
-}
-
-//Custom button styles
-.btn {
-  &.btn-primary {
-    position: relative;
-    background: $blue-700;
-    background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
-    border: none;
-    border-radius: $border-radius-lg;
-    height: 48px;
-    color: $white;
-    transition: all 150ms linear;
-    &:hover {
-      background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%);
-    }
-    &:focus, // Mouse, touch, stylus focus
-    &:focus-visible { // Keyboard focus for accessibility
-      outline: none;
-      box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
-    }
-    &.button-loader {
-      padding: 0 40px 0 12px;
-      &:after {
-        content: url(../../assets/img/icons/button-spinner-white.svg);
-        position: absolute;
-        right: 14px;
-        width: 16px;
-        height: 16px;
-        margin-left: 12px;
-        animation: rotation 1s infinite linear;
-        @keyframes rotation {
-          100% {
-            transform:rotate(360deg);
-          }
-        }
-      }
-    }
-    &:disabled {
-      background: $gray-100 !important;
-      background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%) !important;
-      color: $gray !important;
-      height: 48px;
-      border: none;
-      border-radius: $border-radius-lg;
-    }
-  }
-  &.list-button {
-    position: relative;
-    background: $white;
-    height: 48px;
-    transition: all 150ms linear;
-    border-radius: $border-radius-lg;
-    border: 1px solid rgba($gray-300,.3);
-    width: 100%;
-    &:focus, // Mouse, touch, stylus focus
-    &:focus-visible { // Keyboard focus for accessibility
-      box-shadow: none;
-    }
-    &.button-loader {
-      padding: 0 40px 0 12px;
-      &:after {
-        content: url(../../assets/img/icons/button-spinner-blue.svg);
-        position: absolute;
-        right: 14px;
-        width: 16px;
-        height: 16px;
-        margin-left: 12px;
-        animation: rotation 1s infinite linear;
-        @keyframes rotation {
-          100% {
-            transform:rotate(360deg);
-          }
-        }
-      }
-    }
-  }
-}
-
-// SelectCar styles
-.select-car {
-    height: 100vh;
-
-    .select-car-form {
-        background: $white;
-        height: 100%;
-
-        form {
-            height: calc(100% - 230px);
-            overflow-y: scroll;
-            overflow-x: hidden;
-        }
-
-        .car_list, .current_car_info-text, .needed_car_info-text {
-            flex-shrink: 0;
-            width: 100%;
-            position: relative;
-            transition: transform .3s;
-        }
-    }
-
-    .current_car_info {
-        position: relative;
-        min-height: 2.5rem;
-
-        .current_car_info-text {
-            position: absolute;
-        }
-    }
-}
-
-.slide-enter-from {
-    opacity: 0;
-    transform: translateX(30vw);
-}
-.slide-enter-active, .slide-leave-active {
-    transition: all .4s;
-}
-.slide-leave-to {
-    opacity: 0;
-    transform: translateX(-30vw);
-}
-
-.slide_reverse-enter-from {
-    opacity: 0;
-    transform: translateX(-30vw);
-}
-.slide_reverse-enter-active, .slide_reverse-leave-active {
-    transition: all .4s;
-}
-.slide_reverse-leave-to {
-    opacity: 0;
-    transform: translateX(30vw);
-}
-
-.fade-enter-from, .fade-leave-to {
-    opacity: 0;
-}
-.fade-enter-active, .fade-leave-active {
-    transition: all .5s ease;
-}

src/styles/commonTypogrophyStyles.scss

@@ -0,0 +1,45 @@
+//Typogrophy
+p {
+  font-size: 16px;
+  line-height: 1.625;
+  font-weight: 400;
+}
+
+//Headings
+//add helper fw-bold to any element to get bold style (500)
+h1,.h1 {
+  line-height: 1.325;
+  font-weight: 300;
+}
+h2,.h2 {
+  line-height: 1.325;
+  font-weight: 300;
+}
+h3,.h3 {
+  line-height: 1.375;
+  font-weight: 300;
+}
+h4,.h4 {
+  line-height: 1.6;
+  font-weight: 300;
+}
+h5,.h5 {
+  line-height: 1.325;
+  font-weight: 400;
+}
+h6,.h6 {
+  line-height: 1.7;
+  letter-spacing: .75px;
+  text-transform: uppercase;
+}
+
+label {
+  line-height: 1.625;
+  font-weight: 400;
+}
+
+caption {
+  font-size: .75rem;
+  line-height: 1.7;
+  font-weight: 400;
+}

vue.config.js

@@ -22,7 +22,8 @@ module.exports = {
         @import "./node_modules/bootstrap/scss/variables";
         @import "./node_modules/bootstrap/scss/mixins";
         @import "./node_modules/bootstrap/scss/bootstrap";
-        @import "@/styles/commonStyles.scss";
+        @import "@/styles/commonButtonStyles.scss";
+        @import "@/styles/commonTypogrophyStyles.scss";
         `
       }
     }

vue.release.config.js

@@ -12,7 +12,8 @@ module.exports = {
         @import "./node_modules/bootstrap/scss/variables";
         @import "./node_modules/bootstrap/scss/mixins";
         @import "./node_modules/bootstrap/scss/bootstrap";
-        @import "@/styles/commonStyles.scss";
+        @import "@/styles/commonButtonStyles.scss";
+        @import "@/styles/commonTypogrophyStyles.scss";
         `
       }
     }