Move transition animation from KuiToast to KuiGlobalToastList.

elastic · Aug 10, 2017 · 6acd033 · 6acd033
1 parent f71769a
commit 6acd033
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 36 deletions.
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
@@ -1688,6 +1688,8 @@ table {
 
 .kuiGlobalToastList__item {
   margin-bottom: 20px;
+  -webkit-animation: 0.5s kuiShowToast;
+          animation: 0.5s kuiShowToast;
   /**
      * 1. justify-content: flex-end interferes with overflowing content, so we'll use this to push
      *    items to the bottom instead.
@@ -1696,14 +1698,32 @@ table {
     margin-top: auto;
     /* 1 */ }
 
+@-webkit-keyframes kuiShowToast {
+  from {
+    -webkit-transform: translateX(30px);
+            transform: translateX(30px);
+    opacity: 0; }
+  to {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+    opacity: 1; } }
+
+@keyframes kuiShowToast {
+  from {
+    -webkit-transform: translateX(30px);
+            transform: translateX(30px);
+    opacity: 0; }
+  to {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+    opacity: 1; } }
+
 .kuiToast {
   box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
   position: relative;
   padding: 12px;
   background-color: #FFF;
-  border: 1px solid #D9D9D9;
-  -webkit-animation: 0.5s kuiShowToast;
-          animation: 0.5s kuiShowToast; }
+  border: 1px solid #D9D9D9; }
 
 /**
    * 1. Fit button to icon.
@@ -1777,26 +1797,6 @@ table {
   color: #000;
   font-weight: 300; }
 
-@-webkit-keyframes kuiShowToast {
-  from {
-    -webkit-transform: translateX(30px);
-            transform: translateX(30px);
-    opacity: 0; }
-  to {
-    -webkit-transform: translateX(0);
-            transform: translateX(0);
-    opacity: 1; } }
-
-@keyframes kuiShowToast {
-  from {
-    -webkit-transform: translateX(30px);
-            transform: translateX(30px);
-    opacity: 0; }
-  to {
-    -webkit-transform: translateX(0);
-            transform: translateX(0);
-    opacity: 1; } }
-
 .kuiTitle {
   font-size: 24px;
   font-size: 1.5rem;

diff --git a/ui_framework/src/components/toast/_global_toast_list.scss b/ui_framework/src/components/toast/_global_toast_list.scss
@@ -19,6 +19,7 @@
 
   .kuiGlobalToastList__item {
     margin-bottom: 20px;
+    animation: 0.5s kuiShowToast;
 
     /**
      * 1. justify-content: flex-end interferes with overflowing content, so we'll use this to push
@@ -28,3 +29,15 @@
       margin-top: auto; /* 1 */
     }
   }
+
+@keyframes kuiShowToast {
+  from {
+    transform: translateX(30px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
diff --git a/ui_framework/src/components/toast/_toast.scss b/ui_framework/src/components/toast/_toast.scss
@@ -5,7 +5,6 @@
   padding: $kuiSizeM;
   background-color: $kuiColorEmptyShade;
   border: $kuiBorderThin;
-  animation: 0.5s kuiShowToast;
 }
 
   /**
@@ -81,15 +80,3 @@ $toastTypes: (
     color: $kuiTitleColor;
     font-weight: $kuiFontWeightLight;
   }
-
-@keyframes kuiShowToast {
-  from {
-    transform: translateX(30px);
-    opacity: 0;
-  }
-
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}