improves styles for flash notices

app/assets/stylesheets/layout.scss

@@ -732,6 +732,56 @@ form {
 // 07. Callout
 // -----------
 
+.callout-slide {
+  animation-duration: 1s;
+  -webkit-animation-duration: 1s;
+  animation-fill-mode: both;
+  -webkit-animation-fill-mode: both;
+  animation-name: slide;
+  -webkit-animation-name: slide;
+}
+
+@-webkit-keyframes slide {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slide {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.notice-container {
+  min-width: $line-height*12;
+  position: absolute;
+  right: 24px;
+  top: 24px;
+
+  .notice {
+    height: $line-height*4;
+
+    .notice-text {
+      width: 95%;
+    }
+  }
+}
+
 .callout {
   font-size: $small-font-size;
 

app/views/layouts/_flash.html.erb

@@ -1,10 +1,12 @@
 <% flash.each do |flash_key, flash_message| %>
-  <div id="<%= flash_key %>" data-alert class="row" data-closable>
-    <div class="callout <%= flash_key %>">
+  <div id="<%= flash_key %>" data-alert class="notice-container callout-slide" data-closable>
+    <div class="callout notice <%= flash_key %>">
       <button class="close-button" aria-label="<%= t("application.close") %>" type="button" data-close>
         <span aria-hidden="true">&times;</span>
       </button>
+      <div class="notice-text">
         <%= flash_message %>
       </div>
     </div>
+  </div>
 <% end %>