initial

layers/ui/styles/transitions.scss

@@ -0,0 +1,82 @@
+// Fade
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+// Shift
+.shift-enter-active,
+.shift-leave-active {
+  transition: all 0.2s ease;
+}
+
+.shift-enter-to,
+.shift-leave-from {
+  opacity: 1;
+}
+
+.shift-enter-from,
+.shift-leave-to {
+  opacity: 0;
+}
+
+.shift-enter-from {
+  transform: translateY(-15px);
+}
+
+.shift-leave-to {
+  transform: translateY(15px);
+}
+
+.ui-notification-enter-from {
+  &.left {
+    transform: translateX(-100%);
+  }
+
+  &.right {
+    transform: translateX(100%);
+  }
+}
+
+.ui-notification-enter-to,
+.ui-notification-leave-from {
+  opacity: 1;
+}
+
+.ui-notification-enter-from,
+.ui-notification-leave-to {
+  opacity: 0;
+}
+
+.ui-notification-leave-to {
+  transform: scale(0.9);
+}
+
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: opacity .2s ease-in-out;
+
+  [role="listbox"] {
+    pointer-events: none;
+    transition: transform .2s ease-in-out;
+  }
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+
+  [role="listbox"] {
+    transform: translateY(-12px);
+  }
+}