fixup animations in dialog

primer · Jan 18, 2024 · d85b9cf · d85b9cf
1 parent 9757311
commit d85b9cf
Showing 1 changed file with 17 additions and 10 deletions.
diff --git a/app/components/primer/alpha/dialog.pcss b/app/components/primer/alpha/dialog.pcss
@@ -87,18 +87,27 @@ dialog.Overlay:not([open]) {
   &.Overlay--placement-left, &.Overlay--placement-right {
     height: 100%;
     max-height: unset;
+    position: fixed;
+  }
+
+  &.Overlay--motion-scaleFade, &.Overlay--placement-left, &.Overlay--placement-right {
+    @media screen and (prefers-reduced-motion: no-preference) {
+      animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;
+    }
   }
 
   &.Overlay--placement-left {
     inset: 0 auto 0 0;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
+    animation-name: Overlay--motion-slideInRight;
   }
 
   &.Overlay--placement-right {
     inset: 0 0 0 auto;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
+    animation-name: Overlay--motion-slideInLeft;
   }
 
   /* start deprecate in favor of Alpha::Dialog */
@@ -147,12 +156,6 @@ dialog.Overlay:not([open]) {
   }
 
   /* end deprecate */
-
-  &.Overlay--motion-scaleFade {
-    @media screen and (prefers-reduced-motion: no-preference) {
-      animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;
-    }
-  }
 }
 
 @keyframes Overlay--motion-scaleFade {
@@ -340,29 +343,33 @@ dialog.Overlay:not([open]) {
 
 /* --viewportRange-narrowLandscape */
 @media (max-width: 767px) {
-  .Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow {
+  .Overlay.Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow {
     height: 100%;
     max-height: 100vh;
+    position: fixed;
   }
 
-  .Overlay--placement-left-whenNarrow {
+  .Overlay.Overlay--placement-left-whenNarrow {
     inset: 0 auto 0 0;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
+    animation-name: Overlay--motion-slideInLeft;
   }
 
-  .Overlay--placement-right-whenNarrow {
+  .Overlay.Overlay--placement-right-whenNarrow {
     inset: 0 0 0 auto;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
+    animation-name: Overlay--motion-slideInLeft;
   }
 
-  .Overlay--placement-bottom-whenNarrow {
+  .Overlay.Overlay--placement-bottom-whenNarrow {
     width: 100%;
     max-width: 100vw;
     inset: auto 0 0;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
+    animation-name: Overlay--motion-slideUp;
   }
 
   .Overlay--full-whenNarrow {