vendor/assets/stylesheets/_alert.scss in active_frontend-10.2.10 vs vendor/assets/stylesheets/_alert.scss in active_frontend-10.3.0

@@ -1,12 +1,62 @@
 /* Table of Contents
 ==================================================
+# Variables
 # Alert
 # Application
 # Colors
 # Media Queries */
 
+/* # Variables
+================================================== */
+$onblack-colors: (
+  dark-yellow:  $color-dark-yellow,
+  yellow:       $color-yellow,
+  light-yellow: $color-light-yellow
+);
+$ongray-colors: (
+  dark-haze:  $color-dark-haze,
+  haze:       $color-haze,
+  light-haze: $color-light-haze,
+  white:      $color-white
+);
+$onwhite-colors: (
+  dark-black:   $color-dark-black,
+  black:        $color-black,
+  light-black:  $color-light-black,
+  dark-gray:    $color-dark-gray,
+  gray:         $color-gray,
+  light-gray:   $color-light-gray,
+  dark-lime:    $color-dark-lime,
+  lime:         $color-lime,
+  light-lime:   $color-light-lime,
+  dark-green:   $color-dark-green,
+  green:        $color-green,
+  light-green:  $color-light-green,
+  dark-teal:    $color-dark-teal,
+  teal:         $color-teal,
+  light-teal:   $color-light-teal,
+  dark-blue:    $color-dark-blue,
+  blue:         $color-blue,
+  light-blue:   $color-light-blue,
+  dark-indigo:  $color-dark-indigo,
+  indigo:       $color-indigo,
+  light-indigo: $color-light-indigo,
+  dark-purple:  $color-dark-purple,
+  purple:       $color-purple,
+  light-purple: $color-light-purple,
+  dark-pink:    $color-dark-pink,
+  pink:         $color-pink,
+  light-pink:   $color-light-pink,
+  dark-red:     $color-dark-red,
+  red:          $color-red,
+  light-red:    $color-light-red,
+  dark-orange:  $color-dark-orange,
+  orange:       $color-orange,
+  light-orange: $color-light-orange
+);
+
 /* # Alert
 ================================================== */
 .alert-fixed {
   left: 0;
   position: fixed;
@@ -44,38 +94,35 @@
 ================================================== */
 .alert.alert-app { width: calc(100% - 280px); }
 
 /* # Colors
 ================================================== */
-.alert-black { background: $color-black; }
-.alert-black-dark { background: $color-black-dark; }
-.alert-black-light { background: $color-black-light; }
-.alert-blue { background: $color-blue; }
-.alert-gray-dark { background: $color-gray-dark; }
-.alert-gray-light { background: $color-gray-light; }
-.alert-green,
-.alert-success { background: $color-green; }
-.alert-indigo { background: $color-indigo; }
-.alert-lime { background: $color-lime; }
-.alert-orange,
-.alert-warning { background: $color-orange; }
-.alert-purple { background: $color-purple; }
-.alert-pink { background: $color-pink; }
-.alert-red,
-.alert-error,
-.alert-alert { background: $color-red; }
-.alert-teal { background: $color-teal; }
-.alert-yellow { background: $color-yellow; }
-.alert-white {
-  background: $color-white;
-  border-color: $color-haze;
-  color: $color-gray;
+@each $name, $color in $onblack-colors {
+  .alert-#{$name} {
+    background: $color;
+    color: $color-black;
+  }
+  .alert-#{$name} > a {
+    border-bottom-color: $color-black;
+    color: $color-black;
+  }
+  .alert-#{$name} .alert-close { color: $color-black !important; }
 }
-.alert-white > a {
-  border-bottom-color: $color-gray;
-  color: $color-gray;
+@each $name, $color in $ongray-colors {
+  .alert-#{$name} {
+    background: $color;
+    border-color: rgba(0,0,0,0.1);
+    color: $color-gray;
+  }
+  .alert-#{$name} > a {
+    border-bottom-color: $color-black;
+    color: $color-gray;
+  }
+  .alert-#{$name} .alert-close { color: $color-gray !important; }
 }
-.alert-white .alert-close { color: $color-gray !important; }
+@each $name, $color in $onwhite-colors {
+  .alert-#{$name} { background: $color; }
+}
 
 /* # Media Queries
 ================================================== */
 @media only screen and (max-width: 1365px) {
   .alert.alert-app { width: calc(100% - 250px); }
\ No newline at end of file