resources/scss/common/_variables.scss

   1 /**
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
   6  * Copyright © 2017-2018 Amdocs
   7  * ================================================================================
   8  * Licensed under the Apache License, Version 2.0 (the "License");
   9  * you may not use this file except in compliance with the License.
  10  * You may obtain a copy of the License at
  11  *
  12  *       http://www.apache.org/licenses/LICENSE-2.0
  13  *
  14  * Unless required by applicable law or agreed to in writing, software
  15  * distributed under the License is distributed on an "AS IS" BASIS,
  16  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17  * See the License for the specific language governing permissions and
  18  * limitations under the License.
  19  * ============LICENSE_END=========================================================
  20  */
  21 $minimum-application-width: 1000px;
  22 $primary-header-height: 47px;
  23 $secondary-header-height: 42px;
  24 $total-header-height: $primary-header-height + $secondary-header-height;
  25
  26 // primary colors: DO NOT USE these out side of this file
  27 $turquoise-blue: #01afd1;
  28 $dark-turquoise: #12798e;
  29 $dark-blue: #004b68;
  30 $darkest: #323b3f;
  31 $white: #fff;
  32 $very-light-gray: #eff2f3;
  33 $pacific-blue: #009fdb;
  34 $acadia-brown: #5a5a5a;
  35
  36 // Secondary Colors: DO NOT USE these out side of this file
  37 $light-gray: #cfd6d9;
  38 $light-gray-2: #d2d2d2;
  39 $neutral-gray: #b7bfc3;
  40 $dark-gray: #191919;
  41 $t-blue: #0396b4;
  42 $light-green: #d1de42;
  43 $amber: #fab32b;
  44 $red: #d03d3c;
  45 $lime-green: #aadc1f;
  46 $redish-orange: #fe7550;
  47 $light-bluish-gray: #dbeaed;
  48 $bluish-gray: #72848c;
  49 $dark-bluish-gray: #404f5a;
  50 $very-light-bluish-gray: #f3f6f6;
  51 $nero-gray: #191919;
  52 $derby-yellow: #faebcc;
  53 $mckenzie-orange: #8a6d3b;
  54 $fern-green: #3c763d;
  55 $hint-of-green: #dff0d8;
  56 $astral-blue: #31708f;
  57 $lavender-violet: #d9edf7;
  58 $roof-terracotta-red: #a94442;
  59 $pale-rode-red: #f2dede;
  60
  61
  62 // Variables:
  63 // still investigate $background-gray: $very-light-gray;
  64 $background-color1: $very-light-gray;
  65 $background-header-color1: $pacific-blue;
  66 $background-header-color2: $very-light-gray;
  67 $search-background-color3: $very-light-gray;
  68
  69 $text-color1: $acadia-brown;
  70 $text-color2: $acadia-brown;
  71 $text-color3: $acadia-brown;
  72 $text-color4: $pacific-blue;
  73 $text-color11: $white;
  74 $border-color1: $acadia-brown;
  75
  76 $scroll-bar-color: $dark-gray;
  77 $border-color2: $dark-gray;
  78 $shadow-color1: $dark-gray;
  79 $background-color2: $dark-gray;
  80 $graph-border-color1: $dark-gray;
  81 $graph-background-color1: $dark-gray;
  82 $search-background-color2: $dark-gray;
  83
  84 //$t-blue-link: $t-blue;
  85 $background-color3: $t-blue;
  86 $border-color11: $t-blue;
  87
  88 $background-color4: $very-light-bluish-gray;
  89
  90 //$turquoise-blue
  91 $background-color5: $pacific-blue;
  92 $border-color3: $pacific-blue;
  93 $graph-border-color2: $pacific-blue;
  94 $graph-background-color2: $pacific-blue;
  95 $search-background-color1: $pacific-blue;
  96 $search-text-color1: $pacific-blue;
  97 $selected-node-details-color1: $pacific-blue;
  98
  99 // $dark-turquoise: #12798e;
 100 $text-color5: $dark-turquoise;
 101 $background-color6: $dark-turquoise;
 102
 103 // $dark-blue
 104 $text-color6: $dark-blue;
 105 $background-color7: $dark-blue;
 106 $border-color4: $dark-blue;
 107
 108
 109 // $white: #fff;
 110 $primary-background-color: $white;
 111 $graph-background-color3: $white;
 112 $graph-border-color3: $white;
 113
 114
 115 //light-gray
 116 $text-color7: $light-gray-2;
 117 $background-color8: $light-gray-2;
 118 $border-color5: $light-gray-2;
 119 $graph-background-color4: $light-gray-2;
 120
 121 //light-green
 122 $text-color8: $light-green;
 123
 124 // $neutral-gray
 125
 126 $border-color6: $neutral-gray;
 127 $search-border-color1: $neutral-gray;
 128 $graph-border-color4: $neutral-gray;
 129
 130 // $amber: #fab32b;
 131 $border-color7: $amber;
 132 $background-color9: $amber;
 133 $text-color9: $amber;
 134
 135
 136 // $red:
 137 $background-color10: $red;
 138 $text-color10: $red;
 139 $border-color10: $red;
 140
 141
 142 // $lime-green: #aadc1f;
 143 $graph-background-color5: $lime-green;
 144 $background-color11: $lime-green;
 145
 146 // $redish-orange
 147 $border-color12: $redish-orange;
 148
 149
 150 //$light-bluish-gray: #dbeaed;
 151 $background-color12: $light-bluish-gray;
 152
 153 // $bluish-gray;
 154 $background-color13: $bluish-gray;
 155
 156 //responsive @media params
 157 $tablet-max-width: 1024px;
 158 $laptop-min-width: 1224px;
 159 $desktop-min-width: 1824px;
 160
 161 // light-gray-2
 162 $search-button-background-color: $light-gray-2;
 163
 164 /* Textures */
 165 $images-folder-name: "../images";
 166 $plus-circle-icon: $images-folder-name + "/plus-circle-icon.svg";
 167 $interface-icon: $images-folder-name + "/interface.svg";
 168 $sdc-logo: $images-folder-name + "/logo.svg";
 169 $warning-icon: $images-folder-name + "/warning.svg";
 170 $icons-folder-path: $images-folder-name + "/icons";