From bca1bdc7d52b01ede5c0e85f06cd6c64e5aaab57 Mon Sep 17 00:00:00 2001 From: Shawn Severin Date: Wed, 20 Dec 2017 16:27:35 -0500 Subject: Updating versions of Sparky FE files Updating versions of Sparky FE files as previous ones were out-dated Issue-ID: AAI-543 Change-Id: Idc7d09e0efabaa5ef82db126cf7563fc8370f4f9 Signed-off-by: Shawn Severin --- resources/scss/common/_base.scss | 9 +- resources/scss/common/_layout.scss | 12 ++- resources/scss/common/_typography.scss | 22 ++--- resources/scss/common/_utils.scss | 1 - resources/scss/common/_variables.scss | 162 +++++++++++++++++++++++++++------ 5 files changed, 156 insertions(+), 50 deletions(-) (limited to 'resources/scss/common') 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"; -- cgit 1.2.3-korg