csr-116 css file and code organization.

Renamed files and moved code for clarity.

src/assets/scss/_GlobalStyles.scss

@@ -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;
-}

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;

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;
+  }
+}

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;
+}

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";