X-Git-Url: https://gerrit.onap.org/r/gitweb?p=aai%2Fsparky-fe.git;a=blobdiff_plain;f=resources%2Fscss%2Fcommon%2F_variables.scss;fp=resources%2Fscss%2Fcommon%2F_variables.scss;h=e3ba93afbda52ee8db185da1b6a45d0a314371cf;hp=43f75bd17a51f2a1247279b602a7b938a75fc8a8;hb=bca1bdc7d52b01ede5c0e85f06cd6c64e5aaab57;hpb=d4fd54113808e9efa637719719b2831e0597996e 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";