From b4e3772853e9de66234a536ceb462ce617db5a25 Mon Sep 17 00:00:00 2001
From: Oliver Foster <oliver.foster@kineo.com>
Date: Tue, 14 Jan 2025 12:02:34 +0000
Subject: [PATCH] Fix: Added notify and drawer default CSS animations (#531)

---
 less/core/drawer.less | 34 ++++++++++++++++++++++++++++++++++
 less/core/notify.less | 31 ++++++++++++++++++++++++++++++-
 less/core/shadow.less | 13 +++++++++++++
 3 files changed, 77 insertions(+), 1 deletion(-)

diff --git a/less/core/drawer.less b/less/core/drawer.less
index f8db20ef..cc059cdb 100644
--- a/less/core/drawer.less
+++ b/less/core/drawer.less
@@ -20,3 +20,37 @@
     }
   }
 }
+
+.drawer:not(.disable-animation) {
+  opacity: 0;
+  
+  &.anim-show-before {
+    .transition(left var(--adapt-drawer-duration) var(--adapt-drawer-show-easing), right var(--adapt-drawer-duration) var(--adapt-drawer-show-easing), opacity var(--adapt-drawer-duration) var(--adapt-drawer-show-easing););
+  }
+
+  &.anim-hide-before {
+    .transition(left var(--adapt-drawer-duration) var(--adapt-drawer-hide-easing), right var(--adapt-drawer-duration) var(--adapt-drawer-hide-easing), opacity var(--adapt-drawer-duration) var(--adapt-drawer-hide-easing););
+  }
+
+  &.is-position-auto,
+  &.is-position-right {
+    &.anim-show-after {
+      opacity: 1;
+    }
+
+    &.anim-hide-after {
+      opacity: 0;
+    }
+  }
+
+  .dir-rtl &:not(.is-position-right),
+  &.is-position-left {
+    &.anim-show-after {
+      opacity: 1;
+    }
+
+    &.anim-hide-after {
+      opacity: 0;
+    }
+  }
+}
diff --git a/less/core/notify.less b/less/core/notify.less
index 1ae95f16..12699593 100644
--- a/less/core/notify.less
+++ b/less/core/notify.less
@@ -2,7 +2,6 @@
   &__popup {
     background-color: @notify;
     color: @notify-inverted;
-    .transition(margin-top @duration, top @duration;);
   }
 
   &__popup-inner {
@@ -106,3 +105,33 @@
     .transition(background-color @duration ease-in, color @duration ease-in;);
   }
 }
+
+
+.notify:not(.disable-animation) > .notify__popup {
+  .transition(top var(--adapt-notify-duration) @animation-easing, transform var(--adapt-notify-duration) @animation-easing, opacity var(--adapt-notify-duration) @animation-easing, height var(--adapt-notify-duration) @animation-easing;);
+  opacity: 0;
+  transform: translateY(0%);
+
+  .anim-show-after& {
+    transform: translateY(-50%);
+    opacity: 1;
+  }
+
+  .anim-hide-after& {
+    transform: translateY(0%);
+    opacity: 0;
+  }
+}
+
+.notify:not(.disable-animation) > .notify__shadow {
+  .transition(opacity var(--adapt-notify-duration) @animation-easing;);
+  opacity: 0;
+
+  .anim-show-after& {
+    opacity: 1;
+  }
+
+  .anim-hide-after& {
+    opacity: 0;
+  }
+}
diff --git a/less/core/shadow.less b/less/core/shadow.less
index c00e5873..b43e56c6 100644
--- a/less/core/shadow.less
+++ b/less/core/shadow.less
@@ -1,3 +1,16 @@
 .shadow {
   background-color: fade(@shadow, @shadow-opacity);
 }
+
+.shadow:not(.disable-animation) {
+  .transition(opacity @duration ease-in;);
+  opacity: 0;
+
+  &.anim-show-after {
+    opacity: 1;
+  }
+
+  &.anim-hide-after {
+    opacity: 0;
+  }
+}