FarmBot/Farmbot-Web-App

// COLORS used throughout the web app
$transparent: #00000000;
$translucent: rgba(0, 0, 0, 0.2);
$translucent1: rgba(0, 0, 0, 0.1);
$translucent15: rgba(0, 0, 0, 0.15);
$translucent2: rgba(0, 0, 0, 0.2);
$translucent3: rgba(0, 0, 0, 0.3);
$translucent4: rgba(0, 0, 0, 0.4);
$translucent5: rgba(0, 0, 0, 0.5);
$translucent1_white: rgba(255, 255, 255, 0.1);
$translucent3_white: rgba(255, 255, 255, 0.3);
$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_pink: #ebdddd;
$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;
  }
}