Fix: Added notify and drawer default CSS animations (#531)

adaptlearning · Jan 14, 2025 · b4e3772 · b4e3772
1 parent 3c5d654
commit b4e3772
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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;
+  }
+}