ModalOverlay animation added for fade-in and fade-out

bcgov · Sep 19, 2024 · 0a686e4 · 0a686e4
1 parent 66426e9
commit 0a686e4
Showing 1 changed file with 22 additions and 4 deletions.
diff --git a/packages/react-components/src/components/Modal/Modal.css b/packages/react-components/src/components/Modal/Modal.css
@@ -11,12 +11,30 @@
   height: 100vh;
   width: 100vw;
   z-index: 1000;
+}
+.react-aria-ModalOverlay:has(.bcds-react-aria-Modal)[data-entering] {
+  animation: modal-fade 200ms;
+}
+.react-aria-ModalOverlay:has(.bcds-react-aria-Modal)[data-exiting] {
+  animation: modal-fade 150ms reverse ease-in;
+}
+@media (prefers-reduced-motion) {
+  /* Don't animate modal fade in/out if prefers-reduced-motion is on */
+  .react-aria-ModalOverlay:has(.bcds-react-aria-Modal)[data-entering] {
+    animation: unset;
+  }
+  .react-aria-ModalOverlay:has(.bcds-react-aria-Modal)[data-exiting] {
+    animation: unset;
+  }
+}
 
-  &[data-entering] {
-    animation-delay: 200ms;
+@keyframes modal-fade {
+  from {
+    opacity: 0;
   }
-  &[data-exiting] {
-    animation-delay: 200ms;
+
+  to {
+    opacity: 1;
   }
 }