Animation for alerts.

frontend/app/framework/angular/modals/dialog-renderer.component.html

@@ -18,10 +18,12 @@
 </ng-container>
 
 <div class="notification-container notification-container-bottom-right">
-    <div class="alert alert-dismissible alert-{{notification.messageType}}" *ngFor="let notification of snapshot.notifications" (click)="close(notification)" @fade>
+    <div class="alert alert-dismissible alert-{{notification.messageType}} overlayed" *ngFor="let notification of snapshot.notifications" (click)="close(notification)" @fade>
         <button type="button" class="close" data-dismiss="alert" (close)="close(notification)">&times;</button>
 
         <span [innerHTML]="notification.message | sqxMarkdown"></span>
+
+        <div class="overlay"></div>
     </div>
 </div>
 

frontend/app/framework/angular/modals/dialog-renderer.component.scss

@@ -38,6 +38,26 @@
     &-bottom-left {
         @include fixed(auto, auto, 0, 0);
     }
+
+    .overlayed {
+        position: relative;
+    }
+
+    .overlay {
+        @include absolute(0, auto, 0, 0);
+        animation: width 10s 1 linear;
+        background: $color-white;
+        border: 0;
+        opacity: .1;
+        overflow: hidden;
+        width: 100%;
+    }
+}
+
+@keyframes width {
+    100% {
+        width: 0;
+    }
 }
 
 $caret-size: 6px;

frontend/app/theme/_forms.scss

@@ -125,17 +125,13 @@
         max-width: 600px;
         min-width: 200px;
         padding: 1rem;
+        padding-right: 2.5rem;
         text-align: left;
         z-index: 2000;
 
         &::after {
             @include absolute(-.75rem, .625rem, auto, auto);
-            border-color: transparent transparent $color-theme-error;
-            border-style: solid;
-            border-width: .4rem;
-            content: '';
-            height: 0;
-            width: 0;
+            @include caret-top($color-theme-error, .4rem);
         }
     }
 }

frontend/app/theme/_vars.scss

@@ -35,6 +35,8 @@ $color-theme-orange-dark:   #a65b00;
 $color-theme-error:         #eb3142;
 $color-theme-error-dark:    #c00;
 
+$color-white:   #fff;
+
 $color-theme-info:          #5bc0de;
 
 $color-asset-bg:            #f7f8fa;