5 files changed, 156 insertions, 50 deletions
diff --git a/resources/scss/common/_base.scss b/resources/scss/common/_base.scss
index ab3756d..f7e3274 100644
--- a/resources/scss/common/_base.scss
+++ b/resources/scss/common/_base.scss
@@ -20,8 +20,7 @@
  *
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
-
-
+ 
 html {
   font-size: 100%;
   height: 100%;
@@ -31,10 +30,8 @@ body {
   /* scrollbar styling for Internet Explorer */
   scrollbar-face-color: $scroll-bar-color;
   scrollbar-track-color: $scroll-bar-color;
-  height: 100%;
-  min-width: 1280px;
-  overflow-y: auto;
-  //@extend %noselect;
+  height: 100vh;
+  min-width: $minimum-application-width;
 }
 
 /* scrollbar styling for Google Chrome | Safari | Opera */
diff --git a/resources/scss/common/_layout.scss b/resources/scss/common/_layout.scss
index 5f8d459..1c3bf66 100644
--- a/resources/scss/common/_layout.scss
+++ b/resources/scss/common/_layout.scss
@@ -20,8 +20,16 @@
  *
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
-
-
+ 
 .hidden {
 	display: none;
 }
+
+.main-app-container {
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+}
+
+.view-container {
+}
diff --git a/resources/scss/common/_typography.scss b/resources/scss/common/_typography.scss
index 3552f92..020fd7d 100644
--- a/resources/scss/common/_typography.scss
+++ b/resources/scss/common/_typography.scss
@@ -21,22 +21,20 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
+$base-font-regular: "Arial";
+$base-font-light: "Arial";
+$base-font-medium: "Arial";
+$base-font-bold: "Arial";
 
-/* Fonts */
-
-$base-font-regular: Arial;
-$base-font-light: Arial;
-$base-font-medium: Arial;
-$base-font-bold: Arial;
-
-$heading-font-1: 36px;
-$heading-font-2: 24px;
+$heading-font-1: 24px;
+$heading-font-2: 20px;
 $heading-font-3: 18px;
 $heading-font-4: 16px;
 
-$body-font-1: 14px;
-$body-font-2: 13px;
-$body-font-3: 12px;
+$body-font-1: 16px;
+$body-font-2: 14px;
+$body-font-3: 13px;
+$body-font-4: 12px;
 
 $focus-font-1: 55px;
 $focus-font-2: 50px;
diff --git a/resources/scss/common/_utils.scss b/resources/scss/common/_utils.scss
index 5f93c36..f50cea8 100644
--- a/resources/scss/common/_utils.scss
+++ b/resources/scss/common/_utils.scss
@@ -21,7 +21,6 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 /* Prefix */
 
 $box-sizing-prefix: webkit moz spec;
diff --git a/resources/scss/common/_variables.scss b/resources/scss/common/_variables.scss
index 43f75bd..e3ba93a 100644
--- a/resources/scss/common/_variables.scss
+++ b/resources/scss/common/_variables.scss
@@ -21,45 +21,149 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
+$minimum-application-width: 1000px;
+$primary-header-height: 47px;
+$secondary-header-height: 42px;
+$total-header-height: $primary-header-height + $secondary-header-height;
 
-// primary colors
-$blue: #009fdb;
-$dark-blue: #0568ae;
-$light-blue: #71c5e8;
-$green: #4ca90c;
-$dark-green: #007a3e;
-$light-green: #b5bd00;
-$orange: #ea7400;
-$yellow: #ffb81c;
-$dark-purple: #702f8a;
-$purple: #9063cd;
-$light-purple: #caa2dd;
-$black: #000000;
-$dark-gray: #5a5a5a;
-$gray: #959595;
-$light-gray: #d2d2d2;
-$white: #ffffff;
-
-// Secondary Colors
-$red: #cf2a2a;
-$background-gray: #f2f2f2;
-$text-black: #191919;
-$link-blue: #056bae;
-$functional-green: #007a3e;
-$functional-yellow: #ffb81c;
-$tlv-gray: #f8f8f8;
-$tlv-light-gray: #eaeaea;
-$di-light-grey: #91a2ae;
-$tlv-hover: #e6f6fb;
+// primary colors: DO NOT USE these out side of this file
+$turquoise-blue: #01afd1;
+$dark-turquoise: #12798e;
+$dark-blue: #004b68;
+$darkest: #323b3f;
+$white: #fff;
+$very-light-gray: #eff2f3;
+$pacific-blue: #009fdb;
+$acadia-brown: #5a5a5a;
 
+// Secondary Colors: DO NOT USE these out side of this file
+$light-gray: #cfd6d9;
+$light-gray-2: #d2d2d2;
+$neutral-gray: #b7bfc3;
+$dark-gray: #7c8388;
+$t-blue: #0396b4;
+$light-green: #d1de42;
+$amber: #fab32b;
+$red: #d03d3c;
+$lime-green: #aadc1f;
+$redish-orange: #fe7550;
+$light-bluish-gray: #dbeaed;
+$bluish-gray: #72848c;
+$dark-bluish-gray: #404f5a;
+$very-light-bluish-gray: #f3f6f6;
+$nero-gray: #191919;
+$derby-yellow: #faebcc;
+$mckenzie-orange: #8a6d3b;
+$fern-green: #3c763d;
+$hint-of-green: #dff0d8;
+$astral-blue: #31708f;
+$lavender-violet: #d9edf7;
+$roof-terracotta-red: #a94442;
+$pale-rode-red: #f2dede;
+
+
+// Variables:
+// still investigate $background-gray: $very-light-gray;
+$background-color1: $very-light-gray;
+$background-header-color1: $pacific-blue;
+$background-header-color2: $very-light-gray;
+$search-background-color3: $very-light-gray;
+
+$text-color1: $acadia-brown;
+$text-color2: $acadia-brown;
+$text-color3: $acadia-brown;
+$text-color4: $pacific-blue;
+$text-color11: $white;
+$border-color1: $acadia-brown;
 
 $scroll-bar-color: $dark-gray;
+$border-color2: $dark-gray;
+$shadow-color1: $dark-gray;
+$background-color2: $dark-gray;
+$graph-border-color1: $dark-gray;
+$graph-background-color1: $dark-gray;
+$search-background-color2: $dark-gray;
+
+//$t-blue-link: $t-blue;
+$background-color3: $t-blue;
+$border-color11: $t-blue;
+
+$background-color4: $very-light-bluish-gray;
+
+//$turquoise-blue
+$background-color5: $pacific-blue;
+$border-color3: $pacific-blue;
+$graph-border-color2: $pacific-blue;
+$graph-background-color2: $pacific-blue;
+$search-background-color1: $pacific-blue;
+$search-text-color1: $pacific-blue;
+$selected-node-details-color1: $pacific-blue;
+
+// $dark-turquoise: #12798e;
+$text-color5: $dark-turquoise;
+$background-color6: $dark-turquoise;
+
+// $dark-blue
+$text-color6: $dark-blue;
+$background-color7: $dark-blue;
+$border-color4: $dark-blue;
+
+
+// $white: #fff;
+$primary-background-color: $white;
+$graph-background-color3: $white;
+$graph-border-color3: $white;
+
+
+//light-gray
+$text-color7: $light-gray-2;
+$background-color8: $light-gray-2;
+$border-color5: $light-gray-2;
+$graph-background-color4: $light-gray-2;
+
+//light-green
+$text-color8: $light-green;
+
+// $neutral-gray
+
+$border-color6: $neutral-gray;
+$search-border-color1: $neutral-gray;
+$graph-border-color4: $neutral-gray;
+
+// $amber: #fab32b;
+$border-color7: $amber;
+$background-color9: $amber;
+$text-color9: $amber;
+
+
+// $red:
+$background-color10: $red;
+$text-color10: $red;
+$border-color10: $red;
+
+
+// $lime-green: #aadc1f;
+$graph-background-color5: $lime-green;
+$background-color11: $lime-green;
+
+// $redish-orange
+$border-color12: $redish-orange;
+
+
+//$light-bluish-gray: #dbeaed;
+$background-color12: $light-bluish-gray;
+
+// $bluish-gray;
+$background-color13: $bluish-gray;
 
 //responsive @media params
 $tablet-max-width: 1024px;
 $laptop-min-width: 1224px;
 $desktop-min-width: 1824px;
 
+// light-gray-2
+$search-button-background-color: $light-gray-2;
+
 /* Textures */
 $images-folder-name: "../images";
 $plus-circle-icon: $images-folder-name + "/plus-circle-icon.svg";