studio - alerts: cleaned up animation standards and made mixins to reference as well as got prompt UI pattern behavior working

cms/static/sass/_alerts.scss

@@ -9,7 +9,7 @@
   width: 100%;
   height: 100%;
   text-align: center;
-  z-index: 100;
+  z-index: 10000;
 
   &:before {
     content: '';
@@ -372,7 +372,8 @@
   &.saving {
 
     .icon-saving {
-      @include animation(rotateClockwise 3.0s forwards linear infinite);
+      @include anim-rotateClockwise(3s, linear, infinite);
+
       width: 22px;
     }
 
@@ -661,13 +662,26 @@
 .js {
 
   .wrapper-prompt {
-    @include transition (opacity 0.25s ease-in-out);
     display: none;
-    opacity: 0;
+
+    .prompt {
+      @include anim-bounceIn(0.5s);
+      opacity: 0.1;
+    }
 
     &.is-shown {
       display: block;
-      opacity: 1.0;
+
+      .prompt {
+        opacity: 1.0;
+      }
+    }
+
+    &.is-hiding {
+
+      .prompt {
+        @include anim-bounceOut(0.5s);
+      }
     }
   }
 
@@ -684,15 +698,15 @@
 
     // varying animations
     &.is-shown {
-      @include animation(notificationsSlideUp 1s forwards ease-in-out 1);
+      @include anim-notificationsSlideUp(1s);
     }
 
     &.is-hiding {
-      @include animation(notificationsSlideDown 1s forwards ease-in-out 1);
+      @include anim-notificationsSlideDown(1s);
     }
 
     &.is-fleeting {
-      @include animation(notificationsSlideUpDown 2s forwards ease-in-out 1);
+      @include anim-notificationsSlideUpDown(2s);
     }
   }
 }

cms/static/sass/_keyframes.scss

@@ -17,6 +17,14 @@
 @-o-keyframes rotateClockwise { @include rotateClockwise(); }
 @keyframes rotateClockwise { @include rotateClockwise();}
 
+@mixin anim-rotateClockwise($duration, $timing: ease-in-out, $count: 1) {
+  @include animation-name(rotateClockwise);
+  @include animation-duration($duration);
+  @include animation-timing-function($timing);
+  @include animation-fill-mode(both);
+  @include animation-iteration-count($count);
+}
+
 // ====================
 
 // notifications slide up
@@ -39,6 +47,14 @@
 @-o-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
 @keyframes notificationsSlideUp { @include notificationsSlideUp();}
 
+@mixin anim-notificationsSlideUp($duration, $timing: ease-in-out, $count: 1) {
+  @include animation-name(notificationsSlideUp);
+  @include animation-duration($duration);
+  @include animation-timing-function($timing);
+  @include animation-fill-mode(both);
+  @include animation-iteration-count($count);
+}
+
 // ====================
 
 // notifications slide down
@@ -61,6 +77,14 @@
 @-o-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
 @keyframes notificationsSlideDown { @include notificationsSlideDown();}
 
+@mixin anim-notificationsSlideDown($duration, $timing: ease-in-out, $count: 1) {
+  @include animation-name(notificationsSlideDown);
+  @include animation-duration($duration);
+  @include animation-timing-function($timing);
+  @include animation-fill-mode(both);
+  @include animation-iteration-count($count);
+}
+
 // ====================
 
 // notifications slide up then down
@@ -83,13 +107,21 @@
 @-o-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); }
 @keyframes notificationsSlideUpDown { @include notificationsSlideUpDown();}
 
+@mixin anim-notificationsSlideUpDown($duration, $timing: ease-in-out, $count: 1) {
+  @include animation-name(notificationsSlideUpDown);
+  @include animation-duration($duration);
+  @include animation-timing-function($timing);
+  @include animation-fill-mode(both);
+  @include animation-iteration-count($count);
+}
+
 // ====================
 
 // bounce in
-@mixin bounce-in {
+@mixin bounceIn {
   0% {
     opacity: 0;
-    @include transform(scale(.3));
+    @include transform(scale(0.3));
   }
 
   50% {
@@ -102,14 +134,61 @@
   }
 }
 
-@-moz-keyframes bounce-in { @include bounce-in(); }
-@-webkit-keyframes bounce-in { @include bounce-in(); }
-@-o-keyframes bounce-in { @include bounce-in(); }
-@keyframes bounce-in { @include bounce-in();}
+@-moz-keyframes bounceIn { @include bounceIn(); }
+@-webkit-keyframes bounceIn { @include bounceIn(); }
+@-o-keyframes bounceIn { @include bounceIn(); }
+@keyframes bounceIn { @include bounceIn();}
 
-@mixin bounce-in-animation($duration, $timing: ease-in-out) {
-  @include animation-name(bounce-in);
+@mixin anim-bounceIn($duration, $timing: ease-in-out, $count: 1) {
+  @include animation-name(bounceIn);
   @include animation-duration($duration);
   @include animation-timing-function($timing);
   @include animation-fill-mode(both);
+  @include animation-iteration-count($count);
+}
+
+// ====================
+
+// bounce in
+@mixin bounceOut {
+  0% {
+    opacity: 0;
+    @include transform(scale(0.3));
+  }
+
+  50% {
+    opacity: 1;
+    @include transform(scale(1.05));
+  }
+
+  100% {
+    @include transform(scale(1));
+  }
+
+  0% {
+    @include transform(scale(1));
+  }
+
+  50% {
+    opacity: 1;
+    @include transform(scale(1.05));
+  }
+
+  100% {
+    opacity: 0;
+    @include transform(scale(0.3));
+  }
+}
+
+@-moz-keyframes bounceOut { @include bounceOut(); }
+@-webkit-keyframes bounceOut { @include bounceOut(); }
+@-o-keyframes bounceOut { @include bounceOut(); }
+@keyframes bounceOut { @include bounceOut();}
+
+@mixin anim-bounceOut($duration, $timing: ease-in-out, $count: 1) {
+  @include animation-name(bounceOut);
+  @include animation-duration($duration);
+  @include animation-timing-function($timing);
+  @include animation-fill-mode(both);
+  @include animation-iteration-count($count);
 }