_alert.scss in active_frontend-17.0.0

- old
+ new

@@ -1,21 +1,22 @@
 // Table of Contents
 // ==================================================
 // Alert
 // Colors
 // Styles
+// Media Queries
 
 // Alert
 // ==================================================
 .alert {
   background: color(light-haze);
   border: 0;
   border-bottom-width: 1px;
   border-style: solid;
-  border-color: color(haze);
+  border-color: color(light-haze);
   box-sizing: border-box;
-  color: color(slate);
+  color: color(black);
   display: block;
   padding: 13px 20px;
   width: 100%;
 
   .alert-close {
@@ -27,24 +28,29 @@
   &.fixed { z-index: 2060; }
   &.absolute {
     position: absolute;
     width: inherit;
   }
+  &.fixed,
+  &.floating { position: fixed; }
   &.fixed {
     left: 0;
-    position: fixed;
-    right: 0;
     top: 0;
   }
+  &.floating {
+    left: 160px;
+    top: 49px;
+    width: calc(100% - 320px);
+  }
 }
 
 // Colors
 // ==================================================
 @each $name, $color in $colors {
   .alert-color-#{$name} {
     background: color($name);
-    border-color: darker-color($name);
+    border-color: color($name);
     color: text-color-on($name);
 
     &.alert-outline {
       border-color: color($name);
       color: color($name);
@@ -57,5 +63,17 @@
 .alert-border {
   border-radius: border-radius(b);
   border-width: 1px;
 }
 .alert-outline { background: color(transparent); }
+
+// Media Queries
+// ==================================================
+@media only screen and (max-width: breakpoint-max-width(s)) {
+  .alert {
+    &.floating {
+      left: 10px;
+      top: 26px;
+      width: calc(100% - 20px);
+    }
+  }
+}