merge

frontend/assets/css/animations.css

@@ -0,0 +1,84 @@
+/*
+    Zoom animation
+*/
+
+.zoom-leave-active,
+.zoom-enter-active {
+    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+
+.zoom-enter-to,
+.zoom-leave-from {
+    opacity: 1;
+    transform: scale(1) translateY(0px);
+}
+
+.zoom-enter-from,
+.zoom-leave-to {
+    opacity: 0;
+    transform: scale(0.95) translateY(15px);
+}
+
+/*
+    Fade animation
+*/
+
+.fade-leave-active,
+.fade-enter-active {
+    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+    opacity: 1;
+    transform: scale(1);
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+    transform: scale(0.95);
+}
+
+/*
+    FadeDown animation
+*/
+
+.fade-down-leave-active,
+.fade-down-enter-active {
+    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+
+.fade-down-enter-to,
+.fade-down-leave-from {
+    opacity: 1;
+    transform: translateY(0px) scale(1);
+}
+
+.fade-down-enter-from,
+.fade-down-leave-to {
+    opacity: 0;
+    transform: translateY(10px) scale(0.95);
+}
+
+/*
+    FadeRightToLeft animation
+*/
+
+.fade-right-to-left-leave-active,
+.fade-right-to-left-enter-active {
+    transform-origin: bottom right;
+    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+
+.fade-right-to-left-enter-to,
+.fade-right-to-left-leave-from {
+    opacity: 1;
+    transform: translateX(0px) scale(1);
+}
+
+.fade-right-to-left-enter-from,
+.fade-right-to-left-leave-to {
+    opacity: 0;
+    transform: translateX(30px) scale(0.95);
+}

frontend/assets/css/button.comp.css

@@ -36,10 +36,10 @@
     }
 
     &:disabled {
-        @apply bg-slate-50 text-slate-300;
+        @apply bg-slate-100 text-slate-400;
 
         svg[class~=iconify] path {
-            @apply stroke-slate-300;
+            @apply stroke-slate-400;
         }
     }
 }
@@ -57,10 +57,10 @@
     }
 
     &:disabled {
-        @apply bg-slate-100 text-slate-300;
+        @apply bg-slate-100 text-slate-400;
 
         svg[class~=iconify] path {
-            @apply stroke-slate-300;
+            @apply stroke-slate-400;
         }
     }
 }
@@ -103,10 +103,10 @@
     }
 
     &:disabled {
-        @apply text-slate-300;
+        @apply text-slate-400;
 
         svg[class~=iconify] path {
-            @apply stroke-slate-300;
+            @apply stroke-slate-400;
         }
     }
 }

frontend/assets/css/tailwind.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 
+@import "./animations.css";
 @import "./other.utils.css";
 @import "./typo.utils.css";
 @import "./button.comp.css";
@@ -120,12 +121,16 @@
     --breakpoint-xs: 480px;
 
     /* ANIMATIONS */
-    --animate-marquee: marquee 20s linear infinite;
+    --animate-marquee: marquee 3s linear infinite;
     --animate-slide-down: slideDown 300ms ease-out;
     --animate-slide-up: slideUp 300ms ease-out;
     --animate-overlay-show: overlayShow 150ms ease-in;
     --animate-content-show: contentShow 150ms ease-in;
 
+    --animate-toast-hide: toastHide 100ms ease-in;
+    --animate-toast-in: toastSlideIn 600ms cubic-bezier(0.16, 1, 0.3, 1);
+    --animate-toast-out: toastSlideOut 200ms ease-out;
+
     @keyframes marquee {
         to {
             transform: translateX(50%);
@@ -169,6 +174,37 @@
             transform: scale(1);
         }
     }
+
+    @keyframes toastHide {
+        from {
+            opacity: 1;
+        }
+        to {
+            opacity: 0;
+        }
+    }
+
+    @keyframes toastSlideIn {
+        from {
+            opacity: 0;
+            transform: translateX(calc(100% + var(--viewport-padding)));
+        }
+        to {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    @keyframes toastSlideOut {
+        from {
+            opacity: 1;
+            transform: translateX(var(--reka-toast-swipe-end-x));
+        }
+        to {
+            opacity: 0;
+            transform: translateX(calc(100% + var(--viewport-padding)));
+        }
+    }
 }
 
 /* CONTAINER */