vendor/assets/stylesheets/dvl/flashes.scss in dvl-flashes-0.0.1 vs vendor/assets/stylesheets/dvl/flashes.scss in dvl-flashes-0.0.2

@@ -1,73 +1,85 @@
-$dvlFlashBackground: #efefef !default;
-$dvlFlashCloseDarkColor: #aaa !default;
-$dvlFlashCloseDarkHoverColor: #777 !default;
-$dvlFlashCloseLightColor: #e5e5e5 !default;
-$dvlFlashCloseLightHoverColor: #fff !default;
-$dvlFlashErrorColor: #c12f2e !default;
-$dvlFlashSuccessColor: #2aa828 !default;
-$dvlFlashZIndex: 1031 !default; // above modal backdrop..
+$dvlFlashZIndex: 1031 !default; // above modal
 
+// Remove when we add `based` as a package
+$radius: 3px;
+$black: #222;
+$white: #fff;
+$lighterGray: #efefef;
+$lightGray: #e5e5e5;
+$darkGray: #aaa;
+$darkerGray: #777;
+$errorColor: #c12f2e;
+$successColor: #2aa828;
+
 .flash {
   position: fixed;
-  top: -100px;
-  transition: top 0.3s linear;
+  left: 0;
+  top: 0;
+  transform: translateY(-8rem);
+  opacity: 0;
+  transition: transform 0.3s ease-out, opacity 0.15s ease-out;
   width: 95%;
-  left: 2.5%;
+  margin: 1rem 2.5% 0;
   z-index: $dvlFlashZIndex;
-  background: $dvlFlashBackground;
-  padding: 0.5rem 1.5rem 0.5rem 1rem;
+  background: $lighterGray;
+  border-radius: $radius;
+  padding: 0.75rem 1rem;
   font-size: 0.9rem;
   color: #333;
-  box-shadow: 1px 1px 1px 0 #333;
-
+  box-shadow: 0 1px 0 rgba(#000,0.2);
+  line-height: 1rem;
+  span {
+    display: inline-block;
+    max-width: 95%;
+  }
   a {
-    color: #222;
     text-decoration: underline;
+  }
+  &.is_visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  .flash_close {
+    position: absolute;
+    line-height: 2.5rem;
+    text-decoration: none;
+    right: 1rem;
+    top: 0;
     font-weight: bold;
+    color: $darkGray;
     &:hover {
+      color: $darkerGray;
       text-decoration: none;
     }
   }
+}
 
-  .close {
-    position: absolute;
-    top: 1px;
-    right: 8px;
-    color: $dvlFlashCloseDarkColor;
-    font-size: 1.5rem;
-    text-decoration: none;
+// Colors
+.flash_error, .flash_success {
+  color: $white;
+  a {
+    color: $white;
+  }
+  .flash_close {
+    color: $lightGray;
     &:hover {
-      color: $dvlFlashCloseDarkHoverColor;
+      color: $white;
     }
   }
-  &.flash_error, &.flash_success {
-    color: #fff;
-    a {
-      color: #fff;
-    }
-    .close {
-      color: $dvlFlashCloseLightColor;
-      &:hover {
-        color: $dvlFlashCloseLightHoverColor;
-      }
-    }
-  }
-  &.flash_error {
-    background: $dvlFlashErrorColor;
-  }
+}
 
-  &.flash_success{
-    background: $dvlFlashSuccessColor;
-  }
-  &.in {
-    top: 14px;
-  }
+.flash_error {
+  background: $errorColor;
 }
 
+.flash_success {
+  background: $successColor;
+}
+
 @media only screen and (min-width: 768px) {
   .flash {
-    width: 700px;
-    margin-left: -350px;
+    width: 50rem;
+    margin-left: -25rem;
     left: 50%;
   }
 }