refactor styles

sumup-oss · Dec 17, 2024 · 2613758 · 2613758
1 parent 2ac350c
commit 2613758
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 54 deletions.
diff --git a/.changeset/gold-lemons-report.md b/.changeset/gold-lemons-report.md
@@ -1,5 +1,5 @@
 ---
-"@sumup-oss/design-tokens": patch
+"@sumup-oss/design-tokens": minor
 ---
 
 Added "::backdrop" to the list of selectors to apply theme custom properties to. See https://developer.chrome.com/blog/css-backdrop-inheritance.
diff --git a/packages/circuit-ui/components/Modal/Modal.module.css b/packages/circuit-ui/components/Modal/Modal.module.css
@@ -1,28 +1,27 @@
-.dialog {
+.base {
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
   padding: 0;
   margin: auto;
   overflow-y: auto;
   pointer-events: none;
   visibility: hidden;
   background-color: var(--cui-bg-elevated);
   border: none;
-  border-radius: var(--cui-border-radius-mega);
   outline: none;
   animation: fade-out 0.3s forwards;
 }
 
-.dialog.show {
+.base.show {
   pointer-events: auto;
   animation: fade-in 0.3s forwards;
 }
 
-.dialog::after {
-  position: absolute;
+.content {
+  position: relative;
+}
+
+.base::after {
+  position: sticky;
   right: 0;
   bottom: 0;
   left: 0;
@@ -36,16 +35,30 @@
 }
 
 @media (min-width: 480px) {
-  .dialog::after {
+  .base {
+    width: min-content;
+    min-width: 480px;
+    max-width: 90vw;
+    max-height: 90vh;
+    border-radius: var(--cui-border-radius-mega);
+  }
+
+  .base::after {
     height: var(--cui-spacings-giga);
-    border-bottom-right-radius: var(--cui-border-radius-mega);
-    border-bottom-left-radius: var(--cui-border-radius-mega);
+  }
+
+  .base .content {
+    padding: var(--cui-spacings-giga);
+    padding-bottom: calc(
+      env(safe-area-inset-bottom) + var(--cui-spacings-giga)
+    );
   }
 }
 
 @media (max-width: 479px) {
-  .dialog {
+  .base {
     top: unset;
+    right: 0;
     bottom: 0;
     left: 0;
     width: 100%;
@@ -55,24 +68,39 @@
     animation: slide-out 0.3s forwards;
   }
 
-  .dialog.show {
+  .base.show {
     animation: slide-in 0.3s forwards;
   }
+
+  .immersive {
+    height: 100%;
+    max-height: unset;
+    border: none;
+    border-radius: unset;
+  }
+
+  .base .content {
+    padding: var(--cui-spacings-mega);
+    padding-bottom: calc(
+      env(safe-area-inset-bottom) + var(--cui-spacings-mega)
+    );
+    -webkit-overflow-scrolling: touch;
+  }
 }
 
 /* Native Backdrop */
-.dialog::backdrop {
+.base::backdrop {
   background-color: var(--cui-bg-overlay);
   animation: fade-out 0.3s forwards;
 }
 
-.dialog.show::backdrop {
+.base.show::backdrop {
   pointer-events: auto;
   animation: fade-in 0.3s forwards;
 }
 
 /* Polyfill Backdrop */
-.dialog + .backdrop {
+.base + .backdrop {
   position: fixed;
   top: 0;
   right: 0;
@@ -86,47 +114,15 @@
   animation: fade-in 0.3s forwards;
 }
 
-.dialog .close {
+/* Close button */
+.base .close {
   position: absolute;
   top: var(--cui-spacings-byte);
   right: var(--cui-spacings-byte);
   z-index: var(--cui-z-index-absolute);
 }
 
-@media (max-width: 479px) {
-  .immersive {
-    height: 100%;
-    max-height: unset;
-    border: none;
-    border-radius: unset;
-  }
-}
-
-@media (max-width: 479px) {
-  .dialog .content {
-    padding: var(--cui-spacings-mega);
-    padding-bottom: calc(
-      env(safe-area-inset-bottom) + var(--cui-spacings-mega)
-    );
-    -webkit-overflow-scrolling: touch;
-  }
-}
-
-@media (min-width: 480px) {
-  .dialog {
-    width: min-content;
-    min-width: 480px;
-    max-width: 90vw;
-    max-height: 90vh;
-  }
-
-  .dialog .content {
-    padding: var(--cui-spacings-giga);
-    padding-bottom: calc(
-      env(safe-area-inset-bottom) + var(--cui-spacings-giga)
-    );
-  }
-}
+/* Animations */
 
 @keyframes fade-in {
   from {

diff --git a/packages/circuit-ui/components/Modal/Modal.tsx b/packages/circuit-ui/components/Modal/Modal.tsx
@@ -300,7 +300,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>((props, ref) => {
         onClick={onDialogClick}
         ref={applyMultipleRefs(ref, dialogRef)}
         className={clsx(
-          classes.dialog,
+          classes.base,
           variant === 'immersive' && classes.immersive,
           className,
         )}