167 lines
2.6 KiB
SCSS
167 lines
2.6 KiB
SCSS
// COLORS used throughout the web app
|
|
$translucent: rgba(0, 0, 0, 0.2);
|
|
$translucent2: rgba(0, 0, 0, 0.6);
|
|
$white: #fff;
|
|
$off_white: #f4f4f4;
|
|
$lighter_gray: #eee;
|
|
$light_gray: #ddd;
|
|
$gray: #ccc;
|
|
$medium_light_gray: #bcbcbc;
|
|
$medium_gray: #666;
|
|
$placeholder_gray: #999;
|
|
$dark_gray: #434343;
|
|
$darker_gray: #182026;
|
|
$black: #000;
|
|
$light_blue: #cdf;
|
|
$blue: #a4c2f4;
|
|
$dark_blue: #37d;
|
|
$light_cyan: #d0e0e3;
|
|
$cyan: #45818e;
|
|
$light_green: #d9ead3;
|
|
$green: #6a4;
|
|
$dark_green: #371;
|
|
$light_yellow: #ffc;
|
|
$yellow: #fd6;
|
|
$gold: #b90;
|
|
$beige: #fec;
|
|
$light_brown: #e9d5c3;
|
|
$brown: #ca8;
|
|
$dark_brown: #783f04;
|
|
$light_orange: #fc9;
|
|
$orange: #fa0;
|
|
$dark_orange: #e93;
|
|
$light_purple: #bad;
|
|
$purple: #c68ed2;
|
|
$light_magenta: #ead1dc;
|
|
$magenta: #a64d79;
|
|
$pink: #ebb;
|
|
$light_red: #e99;
|
|
$red: #e66;
|
|
$dark_red: #f00;
|
|
$medium_dark_red: #c00;
|
|
$darkest_red: #900;
|
|
$panel_green: #35761b;
|
|
$panel_light_green: #f3f9f1;
|
|
$panel_yellow: #e99d18;
|
|
$panel_light_yellow: #fffaf0;
|
|
$panel_gray: #92a7b3;
|
|
$panel_medium_light_gray: #e6e6e6;
|
|
$panel_light_gray: #f9fbfc;
|
|
$panel_blue: #026365;
|
|
$panel_light_blue: #f0f8f8;
|
|
$panel_navy: #334970;
|
|
$panel_light_navy: #f3f5f9;
|
|
$panel_brown: #9e630a;
|
|
$panel_light_brown: #fbf7f0;
|
|
$panel_teal: #1eb287;
|
|
$panel_light_teal: #f1fcf9;
|
|
$panel_red: #ff4f37;
|
|
$panel_light_red: #fff7f6;
|
|
.dark-gray {
|
|
background-color: $dark_gray !important;
|
|
}
|
|
|
|
.medium-gray {
|
|
background-color: $medium_gray !important;
|
|
}
|
|
|
|
.light-gray {
|
|
background-color: $gray !important;
|
|
}
|
|
|
|
.orange {
|
|
background-color: $orange !important;
|
|
}
|
|
|
|
.gray {
|
|
background-color: $medium_light_gray !important;
|
|
}
|
|
|
|
.purple {
|
|
background-color: $purple !important;
|
|
}
|
|
|
|
.pink {
|
|
background-color: $pink !important;
|
|
}
|
|
|
|
.black {
|
|
background-color: $black !important;
|
|
}
|
|
|
|
.brown {
|
|
background-color: $brown !important;
|
|
}
|
|
|
|
.magenta {
|
|
background-color: $magenta !important;
|
|
}
|
|
|
|
.green,
|
|
.success,
|
|
.saucer-success {
|
|
background: $green !important;
|
|
}
|
|
|
|
.red {
|
|
background: $red !important;
|
|
}
|
|
|
|
.dark-red,
|
|
.error,
|
|
.saucer-error {
|
|
background: $dark_red !important;
|
|
}
|
|
|
|
.dark-orange,
|
|
.warn,
|
|
.saucer-warn {
|
|
background: $dark_orange !important;
|
|
}
|
|
|
|
.yellow,
|
|
.busy,
|
|
.saucer-busy {
|
|
background: $yellow !important;
|
|
}
|
|
|
|
.blue,
|
|
.info,
|
|
.saucer-info {
|
|
background: $blue !important;
|
|
}
|
|
|
|
.dark-blue,
|
|
.fun,
|
|
.saucer-fun {
|
|
background: $dark_blue !important;
|
|
}
|
|
|
|
.icon-saucer {
|
|
background: none !important;
|
|
&.blue {
|
|
color: $blue;
|
|
}
|
|
&.green {
|
|
color: $green;
|
|
}
|
|
&.yellow {
|
|
color: $yellow;
|
|
}
|
|
&.orange {
|
|
color: $orange;
|
|
}
|
|
&.purple {
|
|
color: $purple;
|
|
}
|
|
&.pink {
|
|
color: $pink;
|
|
}
|
|
&.gray {
|
|
color: $gray;
|
|
}
|
|
&.red {
|
|
color: $red;
|
|
}
|
|
}
|