Fix: Added notify and drawer default CSS animations

adaptlearning · Oct 29, 2024 · 0b389bf · 0b389bf
1 parent 324b1fa
commit 0b389bf
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 1 deletion.
diff --git a/less/core/drawer.less b/less/core/drawer.less
@@ -20,3 +20,28 @@
     }
   }
 }
+
+.drawer:not(.disable-animation) {
+  .transition(left @duration ease-in, right @duration ease-in, transform @duration ease-in, opacity @duration ease-in;);
+  opacity: 0;
+
+  &.is-position-auto,
+  &.is-position-right {
+    &.anim-open-after {
+      opacity: 1;
+    }
+    &.anim-close-after {
+      opacity: 0;
+    }
+  }
+
+  .dir-rtl &:not(.is-position-right),
+  &.is-position-left {
+    &.anim-open-after {
+      opacity: 1;
+    }
+    &.anim-close-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,40 @@
     .transition(background-color @duration ease-in, color @duration ease-in;);
   }
 }
+
+
+.notify:not(.disable-animation) > .notify__popup {
+  .transition(margin-top @duration, top @duration, transform @duration ease-in, opacity @duration ease-in, height @duration ease-in;);
+  opacity: 0;
+
+  .anim-open-before& {
+    opacity: 0;
+  }
+
+  .anim-open-after& {
+    transform: translateY(-50%);
+    opacity: 1;
+  }
+
+  .anim-close-after& {
+    transform: translateY(0%);
+    opacity: 0;
+  }
+}
+
+.notify:not(.disable-animation) > .notify__shadow {
+  .transition(opacity @duration ease-in;);
+  opacity: 0;
+
+  .anim-open-before& {
+    opacity: 0;
+  }
+
+  .anim-open-after& {
+    opacity: 1;
+  }
+
+  .anim-close-after& {
+    opacity: 0;
+  }
+}