stripe colors for successive alert-warning blocks

1 files changed, 27 insertions, 0 deletions

diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index bef24162924..59fae61a44f 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -38,6 +38,33 @@ body {
   .alert {
     margin-bottom: 0;
   }
+
+  /* Stripe the background colors so that adjacent alert-warnings are distinct from one another */
+  .alert-warning {
+    transition: background-color 0.15s, border-color 0.15s;
+    background-color: lighten($gl-warning, 4%);
+    border-color: lighten($gl-warning, 4%);
+  }
+
+  .alert-warning + .alert-warning {
+    background-color: $gl-warning;
+    border-color: $gl-warning;
+  }
+
+  .alert-warning + .alert-warning + .alert-warning {
+    background-color: darken($gl-warning, 4%);
+    border-color: darken($gl-warning, 4%);
+  }
+
+  .alert-warning + .alert-warning + .alert-warning + .alert-warning {
+    background-color: darken($gl-warning, 8%);
+    border-color: darken($gl-warning, 8%);
+  }
+
+  .alert-warning:only-of-type {
+    background-color: $gl-warning;
+    border-color: $gl-warning;
+  }
 }