Merge pull request #63 from sg00dwin/toast-animation

Incorporate slide in/out animation for toast notifications

dist/less/_animations.less

+// Toast notification
+@keyframes toastSlideIn {
+  0% {
+    opacity: 0;
+    transform: translateX(150px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes toastSlideOut {
+  0% {
+    opacity: .75;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(150px);
+  }
+}

dist/less/_notifications.less

@@ -6,3 +6,20 @@
   font-weight: 700;
   margin-right: 5px;
 }
+
+.toast-notifications-list-pf {
+  top: 28px;
+  > div {
+    &.ng-enter {
+      animation: toastSlideIn .2s ease-out;
+    }
+    &.ng-leave {
+      animation: toastSlideOut .2s ease-in;
+    }
+    .toast-pf {
+      border-color: @color-pf-white;
+      margin-bottom: 5px;
+      width: 100%;
+    }
+  }
+}

dist/less/common.less

 // origin-web-common sans external dependency variables
 
+@import "_animations.less";
 @import "_core.less";
 @import "_forms.less";
 @import "_guided-tour.less";

dist/origin-web-common.css

+@keyframes toastSlideIn {
+  0% {
+    opacity: 0;
+    transform: translateX(150px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes toastSlideOut {
+  0% {
+    opacity: .75;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(150px);
+  }
+}
 .delete-resource-modal {
   background-color: #f1f1f1;
 }
@@ -189,6 +209,20 @@ div.hopscotch-bubble .hopscotch-nav-button.prev {
   font-weight: 700;
   margin-right: 5px;
 }
+.toast-notifications-list-pf {
+  top: 28px;
+}
+.toast-notifications-list-pf > div.ng-enter {
+  animation: toastSlideIn 0.2s ease-out;
+}
+.toast-notifications-list-pf > div.ng-leave {
+  animation: toastSlideOut 0.2s ease-in;
+}
+.toast-notifications-list-pf > div .toast-pf {
+  border-color: #fff;
+  margin-bottom: 5px;
+  width: 100%;
+}
 /* Fix some styles with the angular-ui-select bootstrap theme that isn't right when combined with all of our styles */
 .ui-select-bootstrap {
   /* Fixes ui-select's input box extending to 100% page width if the page has been resized after page-load

src/styles/_animations.less

+// Toast notification
+@keyframes toastSlideIn {
+  0% {
+    opacity: 0;
+    transform: translateX(150px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes toastSlideOut {
+  0% {
+    opacity: .75;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(150px);
+  }
+}

src/styles/_notifications.less

@@ -6,3 +6,20 @@
   font-weight: 700;
   margin-right: 5px;
 }
+
+.toast-notifications-list-pf {
+  top: 28px;
+  > div {
+    &.ng-enter {
+      animation: toastSlideIn .2s ease-out;
+    }
+    &.ng-leave {
+      animation: toastSlideOut .2s ease-in;
+    }
+    .toast-pf {
+      border-color: @color-pf-white;
+      margin-bottom: 5px;
+      width: 100%;
+    }
+  }
+}

src/styles/common.less

 // origin-web-common sans external dependency variables
 
+@import "_animations.less";
 @import "_core.less";
 @import "_forms.less";
 @import "_guided-tour.less";