From 45a75e11e2f0ad7a0fce6dd626892e254385a785 Mon Sep 17 00:00:00 2001
From: Bryan <bryan.mauger@safelite.com>
Date: Wed, 3 Nov 2021 09:10:33 -0400
Subject: [PATCH] csr-116 css file and code organization.

Renamed files and moved code for clarity.
---
 src/assets/scss/_GlobalStyles.scss            | 62 -------------------
 ...mVariables.scss => _custom-variables.scss} |  7 +--
 src/assets/scss/_global-styles.scss           | 22 +++++++
 src/assets/scss/components/_typogrophy.scss   | 46 ++++++++++++++
 src/assets/scss/custom.scss                   |  7 ++-
 5 files changed, 73 insertions(+), 71 deletions(-)
 delete mode 100644 src/assets/scss/_GlobalStyles.scss
 rename src/assets/scss/{_CustomVariables.scss => _custom-variables.scss} (96%)
 create mode 100644 src/assets/scss/_global-styles.scss
 create mode 100644 src/assets/scss/components/_typogrophy.scss

diff --git a/src/assets/scss/_GlobalStyles.scss b/src/assets/scss/_GlobalStyles.scss
deleted file mode 100644
index 29f36210c..000000000
--- a/src/assets/scss/_GlobalStyles.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-body {
-  font-size: 16px;
-  background-color: #fff;
-  padding: .5rem;
-    .container-fluid {
-      max-width: 576px;
-      &.container-shadow {
-        box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15);//Use instead of Bootstrap's helper
-      }
-    }
-  a {
-    color: $blue-600;
-    text-decoration: none;
-    border-bottom: 1px solid $blue-600;
-    &:hover {
-      color: $blue-400;
-    }
-  }
-  .pointer {
-    cursor: pointer;
-  }
-}
-
-//Typogrophy
-
-p {
-  line-height: 1.625;
-  font-weight: 400;
-  small,.small {
-    font-size: .875rem;
-  }
-}
-
-//Headings
-//font-size defined in _CustomVariables.scss
-//add helper fw-bold to any element to get bold style (500)
-//add helper fw-light to any element to get light style (300)
-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;
-}
diff --git a/src/assets/scss/_CustomVariables.scss b/src/assets/scss/_custom-variables.scss
similarity index 96%
rename from src/assets/scss/_CustomVariables.scss
rename to src/assets/scss/_custom-variables.scss
index b27b97536..2b2211595 100644
--- a/src/assets/scss/_CustomVariables.scss
+++ b/src/assets/scss/_custom-variables.scss
@@ -1,4 +1,4 @@
-// Color system
+//Colors
 
 // White/black
 $white:    #FFFFFF;
@@ -67,8 +67,6 @@ $orange:     #fd7e14;
 $teal:       #20c997;
 $cyan:       #0dcaf0;
 
-// scss-docs-end color-variables
-
 // scss-docs-start colors-map
 $colors: (
 "blue":       $blue,
@@ -85,7 +83,6 @@ $colors: (
 "gray":       $gray,
 "gray-dark":  $gray-500
 );
-// scss-docs-end colors-map
 
 // scss-docs-start theme-color-variables
 $primary:       $blue;
@@ -96,7 +93,6 @@ $warning:       $yellow;
 $danger:        $red;
 $light:         $gray-100;
 $dark:          $gray-500;
-// scss-docs-end theme-color-variables
 
 // scss-docs-start theme-colors-map
 $theme-colors: (
@@ -109,7 +105,6 @@ $theme-colors: (
 "light":      $light,
 "dark":       $dark
 );
-// scss-docs-end theme-colors-map
 
 //Fonts
 $font-family-sans-serif:      Roboto, Arial, Helvetica, sans-serif;
diff --git a/src/assets/scss/_global-styles.scss b/src/assets/scss/_global-styles.scss
new file mode 100644
index 000000000..9512ddee3
--- /dev/null
+++ b/src/assets/scss/_global-styles.scss
@@ -0,0 +1,22 @@
+body {
+  font-size: 16px;
+  background-color: #fff;
+  padding: .5rem;
+    .container-fluid {
+      max-width: 576px;//Remove once desktop app is complete
+      &.container-shadow {
+        box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15);//Use instead of Bootstrap's helper
+      }
+    }
+  a {
+    color: $blue-600;
+    text-decoration: none;
+    border-bottom: 1px solid $blue-600;
+    &:hover {
+      color: $blue-400;
+    }
+  }
+  .pointer {
+    cursor: pointer;
+  }
+}
diff --git a/src/assets/scss/components/_typogrophy.scss b/src/assets/scss/components/_typogrophy.scss
new file mode 100644
index 000000000..c40fb9e22
--- /dev/null
+++ b/src/assets/scss/components/_typogrophy.scss
@@ -0,0 +1,46 @@
+//Typogrophy
+p {
+  font-size: 16px;
+  line-height: 1.625;
+  font-weight: 400;
+}
+
+//Headings
+//font-size defined in _custom-variables.scss
+//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;
+}
diff --git a/src/assets/scss/custom.scss b/src/assets/scss/custom.scss
index 90689eefd..356cc0538 100644
--- a/src/assets/scss/custom.scss
+++ b/src/assets/scss/custom.scss
@@ -4,7 +4,7 @@
 @import "./node_modules/bootstrap/scss/functions";
 
 //Variable Overrides
-@import "_CustomVariables";
+@import "_custom-variables";
 
 //Bootstrap Default Variables and Mixins
 @import "./node_modules/bootstrap/scss/variables";
@@ -14,11 +14,12 @@
 @import "./node_modules/bootstrap/scss/bootstrap";
 
 //Custom Global CSS
-@import "_GlobalStyles";
+@import "_global-styles";
 
 //Custom Components CSS
+@import "./components/_typogrophy";
 @import "./components/_navbar";
-@import "./components/_SelectCar"; 
+@import "./components/_SelectCar";
 @import "./components/_buttons";
 @import "./components/_vehicle-image";
 @import "./components/_radio-card";