Notification Message Success

app/partials/includes/components/notification-message.jade

@@ -10,7 +10,6 @@
 //-See coffe/modules/base/confirm.coffee
 
 div.notification-message.notification-message-success
-   div.icon.icon-notification-success
    div.text
        h4.warning(translate="NOTIFICATION.OK")
        p(translate="NOTIFICAION.SAVED")

app/styles/components/notification-message.scss

@@ -1,21 +1,72 @@
-.notification-message {
+.notification-message-success {
-    background: rgba($gray-light, .95);
+    background: rgba($fresh-taiga, .95);
-    color: $white;
+    box-shadow: 0 25px 10px -15px rgba(0, 0, 0, .05);
     opacity: 0;
-    padding: 1rem;
+    right: 1%;
-    position: fixed;
+    top: 1%;
+    transition: opacity .2s ease-in;
+    &.active {
+        animation: animSlide 1000ms linear both;
+        opacity: 1;
+    }
+    p {
+        margin: 0;
+    }
+    .warning {
+        @extend %large;
+        @extend %bold;
+        color: $white;
+        line-height: 1.2;
+    }
+}
+
+// Generated with Bounce.js. Edit at http://goo.gl/02G9MY \
+
+@keyframes animSlide {
+    0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, 0, 0, 1); }
+    0.52% { transform: matrix3d(3.905, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -274.136, 0, 0, 1); }
+    1.02% { transform: matrix3d(4.554, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -250.084, 0, 0, 1); }
+    2.28% { transform: matrix3d(3.039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -193.907, 0, 0, 1); }
+    3.52% { transform: matrix3d(1.581, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -145.805, 0, 0, 1); }
+    4.1% { transform: matrix3d(1.238, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -125.912, 0, 0, 1); }
+    4.78% { transform: matrix3d(1.034, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -104.714, 0, 0, 1); }
+    6.03% { transform: matrix3d(.947, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -71.786, 0, 0, 1); }
+    8.11% { transform: matrix3d(.986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -31.647, 0, 0, 1); }
+    11.03% { transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.532, 0, 0, 1); }
+    12.11% { transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.53, 0, 0, 1); }
+    16.04% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 13.008, 0, 0, 1); }
+    16.12% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 13.007, 0, 0, 1); }
+    20% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 9.911, 0, 0, 1); }
+    27.23% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.352, 0, 0, 1); }
+    38.34% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.311, 0, 0, 1); }
+    82.78% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+    100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+}
+
+.notification-message-error {
+    background: rgba($red, .9);
     top: 0;
     transform: translateY(-100%);
     width: 100%;
-    z-index: 99920;
-    &.inactive {
-        transition: all .6s ease-in-out;
-    }
     &.active {
         opacity: 1;
         transform: translateY(0);
         transition: all .6s ease-in-out;
     }
+    &.inactive {
+        transition: all .6s ease-in-out;
+    }
+    .icon-notification-error {
+        @extend %xxlarge;
+        display: inline;
+        vertical-align: sub;
+    }
+    .warning {
+        @extend %xlarge;
+        @extend %bold;
+        color: $white;
+        line-height: 2.4rem;
+    }
     .text {
         display: inline-block;
         margin-left: .5rem;
@@ -24,12 +75,6 @@
             margin: 0;
         }
     }
-    .warning {
-        @extend %xlarge;
-        @extend %bold;
-        color: $white;
-        line-height: 2.4rem;
-    }
     .icon-delete {
         color: $white;
         position: absolute;
@@ -38,22 +83,12 @@
     }
 }
 
-.notification-message-success {
+.notification-message {
-    background: rgba($fresh-taiga, .9);
+    color: $white;
-    .icon-notification-success {
+    opacity: 0;
-        @extend %xxlarge;
+    padding: 1rem;
-        display: inline;
+    position: fixed;
-        vertical-align: sub;
+    z-index: 99920;
-    }
-}
-
-.notification-message-error {
-    background: rgba($red, .9);
-    .icon-notification-error {
-        @extend %xxlarge;
-        display: inline;
-        vertical-align: sub;
-    }
 }
 
 .notification-light {