Restyle flash message animation

modules/system/assets/ui/docs/flashmessage.md

@@ -11,7 +11,7 @@ Displays a floating flash message on the screen.
 ### Trigger
 
     <p>
-        <a href="#" class="btn btn-primary" onclick="$.oc.flashMsg({text: 'The record has been successfujavascript:;ly saved. This message will go away in 1 second.', 'class': 'success', 'interval': 1}); return false;">
+        <a href="#" class="btn btn-primary" onclick="$.oc.flashMsg({text: 'The record has been successfully saved. This message will go away in 1 second.', 'class': 'success', 'interval': 1}); return false;">
             Create Success message
         </a>
     </p>

modules/system/assets/ui/js/flashmessage.js

@@ -15,8 +15,9 @@
 
         $('body > p.flash-message').remove()
 
-        if ($element.length == 0)
+        if ($element.length == 0) {
             $element = $('<p/>').addClass(options.class).html(options.text)
+        }
 
         $element.addClass('flash-message fade')
         $element.attr('data-control', null)

modules/system/assets/ui/less/flashmessage.less

@@ -35,13 +35,12 @@
 
     &.fade {
         .opacity(0);
-        .transition(~'all 0.5s, width 0s');
+        .transition(~'opacity .15s linear');
-        .transform(~'scale(0.9)');
     }
 
     &.fade.in {
         .opacity(1);
-        .transform( ~'scale(1)');
+        .animation(~'flashmessage-fade-in 1s cubic-bezier(0.2, 0.7, 0.5, 1)');
     }
 
     &.success { background: @color-flash-success-bg; }
@@ -79,4 +78,17 @@
         margin-left: 0;
         width: auto;
     }
+}
+
+@keyframes flashmessage-fade-in {
+    0% {
+        .transform(~"translateY(-30%)");
+        opacity: 0;
+    }
+    70% {
+        opacity: 1;
+    }
+    100% {
+        .transform(~"translateY(0)");
+    }
 }

modules/system/assets/ui/storm-min.js

@@ -1900,8 +1900,7 @@ $(container).triggerHandler('dispose-control')}}
 $.oc.foundation.controlUtils=ControlUtils;$(document).on('ajaxBeforeReplace',function(ev){$.oc.foundation.controlUtils.disposeControls(ev.target)})}(window.jQuery);+function($){"use strict";var FlashMessage=function(options,el){var
 options=$.extend({},FlashMessage.DEFAULTS,options),$element=$(el)
 $('body > p.flash-message').remove()
-if($element.length==0)
+if($element.length==0){$element=$('<p/>').addClass(options.class).html(options.text)}
-$element=$('<p/>').addClass(options.class).html(options.text)
 $element.addClass('flash-message fade')
 $element.attr('data-control',null)
 $element.append('<button type="button" class="close" aria-hidden="true">&times;</button>')

modules/system/assets/ui/storm.css

@@ -1691,8 +1691,8 @@ div.scoreboard .scoreboard-offset{padding-left:20px}
 body.slim-container div.scoreboard{padding:0 20px}
 #layout-canvas .flash-message{display:none}
 .flash-message{position:fixed;width:500px;left:50%;top:13px;margin-left:-250px;color:#ffffff;font-size:14px;padding:10px 30px 10px 15px;z-index:10000;word-wrap:break-word;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
-.flash-message.fade{opacity:0;filter:alpha(opacity=0);-webkit-transition:all 0.5s,width 0s;transition:all 0.5s,width 0s;-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}
+.flash-message.fade{opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity .15s linear;transition:opacity .15s linear}
-.flash-message.fade.in{opacity:1;filter:alpha(opacity=100);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
+.flash-message.fade.in{opacity:1;filter:alpha(opacity=100);-webkit-animation:flashmessage-fade-in 1s cubic-bezier(0.2,0.7,0.5,1);animation:flashmessage-fade-in 1s cubic-bezier(0.2,0.7,0.5,1)}
 .flash-message.success{background:#8da85e}
 .flash-message.error{background:#cc3300}
 .flash-message.warning{background:#f0ad4e}
@@ -1702,6 +1702,10 @@ body.slim-container div.scoreboard{padding:0 20px}
 .flash-message.static{position:static !important;width:auto !important;display:block !important;margin-left:0 !important}
 @media (max-width:768px){.flash-message{left:10px;right:10px;top:10px;margin-left:0;width:auto}
 }
+@keyframes flashmessage-fade-in{0%{-webkit-transform:translateY(-30%);-ms-transform:translateY(-30%);transform:translateY(-30%);opacity:0}
+70%{opacity:1}
+100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
+}
 [class^="flag-"],[class*=" flag-"]{background-image:url("images/flag-icons-small.png");width:16px;height:16px;line-height:16px;vertical-align:middle;display:inline-block;margin:-3px 2px 0 2px}
 @media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:2/1),only screen and (min-device-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx){[class^="flag-"],[class*=" flag-"]{background-image:url("images/flag-icons-large.png");background-size:16px 3952px}
 }