Modal: Standardize reduced motion handling using media queries

SainathPoojary · Jan 3, 2025 · 7ea0752 · 7ea0752
1 parent 147e9bb
commit 7ea0752
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
@@ -33,10 +33,12 @@
 	display: flex;
 	// Animate the modal frame/contents appearing on the page.
 	animation-name: components-modal__appear-animation;
-	animation-duration: var(--modal-frame-animation-duration);
 	animation-fill-mode: forwards;
 	animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
-	@include reduce-motion("animation");
+
+	@media not (prefers-reduced-motion) {
+		animation-duration: var(--modal-frame-animation-duration);
+	}
 
 	.components-modal__screen-overlay.is-animating-out & {
 		animation-name: components-modal__disappear-animation;