resources/scss/common/_variables.scss

   1 /**
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
   6  * Copyright © 2017 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  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  22  */
  23
  24 $minimum-application-width: 1000px;
  25 $primary-header-height: 47px;
  26 $secondary-header-height: 42px;
  27 $total-header-height: $primary-header-height + $secondary-header-height;
  28
  29 // primary colors: DO NOT USE these out side of this file
  30 $turquoise-blue: #01afd1;
  31 $dark-turquoise: #12798e;
  32 $dark-blue: #004b68;
  33 $darkest: #323b3f;
  34 $white: #fff;
  35 $very-light-gray: #eff2f3;
  36 $pacific-blue: #009fdb;
  37 $acadia-brown: #5a5a5a;
  38
  39 // Secondary Colors: DO NOT USE these out side of this file
  40 $light-gray: #cfd6d9;
  41 $light-gray-2: #d2d2d2;
  42 $neutral-gray: #b7bfc3;
  43 $dark-gray: #7c8388;
  44 $t-blue: #0396b4;
  45 $light-green: #d1de42;
  46 $amber: #fab32b;
  47 $red: #d03d3c;
  48 $lime-green: #aadc1f;
  49 $redish-orange: #fe7550;
  50 $light-bluish-gray: #dbeaed;
  51 $bluish-gray: #72848c;
  52 $dark-bluish-gray: #404f5a;
  53 $very-light-bluish-gray: #f3f6f6;
  54 $nero-gray: #191919;
  55 $derby-yellow: #faebcc;
  56 $mckenzie-orange: #8a6d3b;
  57 $fern-green: #3c763d;
  58 $hint-of-green: #dff0d8;
  59 $astral-blue: #31708f;
  60 $lavender-violet: #d9edf7;
  61 $roof-terracotta-red: #a94442;
  62 $pale-rode-red: #f2dede;
  63
  64
  65 // Variables:
  66 // still investigate $background-gray: $very-light-gray;
  67 $background-color1: $very-light-gray;
  68 $background-header-color1: $pacific-blue;
  69 $background-header-color2: $very-light-gray;
  70 $search-background-color3: $very-light-gray;
  71
  72 $text-color1: $acadia-brown;
  73 $text-color2: $acadia-brown;
  74 $text-color3: $acadia-brown;
  75 $text-color4: $pacific-blue;
  76 $text-color11: $white;
  77 $border-color1: $acadia-brown;
  78
  79 $scroll-bar-color: $dark-gray;
  80 $border-color2: $dark-gray;
  81 $shadow-color1: $dark-gray;
  82 $background-color2: $dark-gray;
  83 $graph-border-color1: $dark-gray;
  84 $graph-background-color1: $dark-gray;
  85 $search-background-color2: $dark-gray;
  86
  87 //$t-blue-link: $t-blue;
  88 $background-color3: $t-blue;
  89 $border-color11: $t-blue;
  90
  91 $background-color4: $very-light-bluish-gray;
  92
  93 //$turquoise-blue
  94 $background-color5: $pacific-blue;
  95 $border-color3: $pacific-blue;
  96 $graph-border-color2: $pacific-blue;
  97 $graph-background-color2: $pacific-blue;
  98 $search-background-color1: $pacific-blue;
  99 $search-text-color1: $pacific-blue;
 100 $selected-node-details-color1: $pacific-blue;
 101
 102 // $dark-turquoise: #12798e;
 103 $text-color5: $dark-turquoise;
 104 $background-color6: $dark-turquoise;
 105
 106 // $dark-blue
 107 $text-color6: $dark-blue;
 108 $background-color7: $dark-blue;
 109 $border-color4: $dark-blue;
 110
 111
 112 // $white: #fff;
 113 $primary-background-color: $white;
 114 $graph-background-color3: $white;
 115 $graph-border-color3: $white;
 116
 117
 118 //light-gray
 119 $text-color7: $light-gray-2;
 120 $background-color8: $light-gray-2;
 121 $border-color5: $light-gray-2;
 122 $graph-background-color4: $light-gray-2;
 123
 124 //light-green
 125 $text-color8: $light-green;
 126
 127 // $neutral-gray
 128
 129 $border-color6: $neutral-gray;
 130 $search-border-color1: $neutral-gray;
 131 $graph-border-color4: $neutral-gray;
 132
 133 // $amber: #fab32b;
 134 $border-color7: $amber;
 135 $background-color9: $amber;
 136 $text-color9: $amber;
 137
 138
 139 // $red:
 140 $background-color10: $red;
 141 $text-color10: $red;
 142 $border-color10: $red;
 143
 144
 145 // $lime-green: #aadc1f;
 146 $graph-background-color5: $lime-green;
 147 $background-color11: $lime-green;
 148
 149 // $redish-orange
 150 $border-color12: $redish-orange;
 151
 152
 153 //$light-bluish-gray: #dbeaed;
 154 $background-color12: $light-bluish-gray;
 155
 156 // $bluish-gray;
 157 $background-color13: $bluish-gray;
 158
 159 //responsive @media params
 160 $tablet-max-width: 1024px;
 161 $laptop-min-width: 1224px;
 162 $desktop-min-width: 1824px;
 163
 164 // light-gray-2
 165 $search-button-background-color: $light-gray-2;
 166
 167 /* Textures */
 168 $images-folder-name: "../images";
 169 $plus-circle-icon: $images-folder-name + "/plus-circle-icon.svg";
 170 $interface-icon: $images-folder-name + "/interface.svg";
 171 $sdc-logo: $images-folder-name + "/logo.svg";
 172 $warning-icon: $images-folder-name + "/warning.svg";
 173 $icons-folder-path: $images-folder-name + "/icons";