aplance-ui 1.0.1

package/registry/components/primitives/modal/modal.module.css

@@ -0,0 +1,415 @@
+/* ─── Overlay ────────────────────────────────────────────────────────────────
+   Full-screen backdrop + flex positioning container.
+   Placement is driven by `data-placement` / `data-mobile-placement` on the
+   overlay and content so one prop contract controls both desktop and mobile.
+   ─────────────────────────────────────────────────────────────────────────── */
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: var(--color-overlay);
+  backdrop-filter: blur(var(--blur-sm));
+  -webkit-backdrop-filter: blur(var(--blur-sm));
+  z-index: var(--z-index-modal);
+  display: flex;
+  padding: var(--spacing-6);
+  /* Keep overflow locked by default to avoid transient scrollbars while
+     placement animations run. For scrollBehavior="outside", we opt in to
+     vertical scrolling with a data attribute below. */
+  overflow: hidden;
+  overscroll-behavior: contain;
+  opacity: 0;
+  transition: opacity var(--modal-animation-duration) var(--ease-in-out);
+
+  &[data-state='open'] {
+    opacity: 1;
+  }
+
+  &[data-scroll-behavior='outside'] {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  /* ─── Placement (overlay alignment) ──────────────────────────────────── */
+  &[data-placement='center'] {
+    align-items: center;
+    justify-content: center;
+  }
+  &[data-placement='top'] {
+    align-items: flex-start;
+    justify-content: center;
+    padding: 0;
+  }
+  &[data-placement='bottom'] {
+    align-items: flex-end;
+    justify-content: center;
+    padding: 0;
+  }
+  &[data-placement='left'] {
+    align-items: stretch;
+    justify-content: flex-start;
+    padding: 0;
+  }
+  &[data-placement='right'] {
+    align-items: stretch;
+    justify-content: flex-end;
+    padding: 0;
+  }
+  &[data-placement='full'] {
+    align-items: stretch;
+    justify-content: flex-start;
+    padding: 0;
+  }
+}
+
+/* ─── Content (dialog panel) ─────────────────────────────────────────────── */
+
+.content {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  border-radius: var(--radius-lg);
+  border: var(--border-1) solid var(--color-border);
+  box-shadow: var(--shadow-lg);
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  outline: none;
+
+  /* Placement-specific panel shape. Selectors target the content node's
+     own data-placement so sizes/radii stay in sync with overlay alignment. */
+  &[data-placement='bottom'] {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    max-width: 100%;
+  }
+  &[data-placement='top'] {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    max-width: 100%;
+  }
+  &[data-placement='left'],
+  &[data-placement='right'] {
+    height: 100%;
+    min-height: 100dvh;
+    border-radius: 0;
+    max-width: min(28rem, 100%);
+  }
+  &[data-placement='left'] {
+    border-right: var(--border-1) solid var(--color-border);
+  }
+  &[data-placement='right'] {
+    border-left: var(--border-1) solid var(--color-border);
+  }
+  &[data-placement='full'] {
+    max-width: 100%;
+    width: 100%;
+    height: 100%;
+    min-height: 100dvh;
+    border-radius: 0;
+  }
+}
+
+/* scrollBehavior="inside": body scrolls, header/footer stay pinned */
+.scroll_inside {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100dvh - 2 * var(--spacing-6));
+
+  /* Edge placements fill the viewport - inside-scroll should reach the edges */
+  &[data-placement='bottom'],
+  &[data-placement='top'],
+  &[data-placement='left'],
+  &[data-placement='right'],
+  &[data-placement='full'] {
+    max-height: 100dvh;
+  }
+
+  .body {
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    flex: 1 1 auto;
+  }
+}
+
+/* ─── Sizes (primarily for centered dialogs) ─────────────────────────────── */
+/* Edge-attached placements (top/bottom/full) override width to fill. */
+/* Left/right drawers use their own width cap above. */
+
+.size_sm {
+  max-width: 24rem;
+}
+.size_md {
+  max-width: 32rem;
+}
+.size_lg {
+  max-width: 48rem;
+}
+.size_xl {
+  max-width: 64rem;
+}
+.size_full {
+  max-width: 100%;
+  min-height: 100%;
+  border-radius: 0;
+}
+
+/* ─── Animations ─────────────────────────────────────────────────────────── */
+
+.anim_scale {
+  opacity: 0;
+  transform: scale(0.95);
+  transition:
+    opacity var(--modal-animation-duration) var(--ease-in-out),
+    transform var(--modal-animation-duration) var(--ease-in-out);
+
+  &[data-state='open'] {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.anim_fade {
+  opacity: 0;
+  transition: opacity var(--modal-animation-duration) var(--ease-in-out);
+
+  &[data-state='open'] {
+    opacity: 1;
+  }
+}
+
+/* slide-{edge}: enters from that edge. Pair with `placement` of the same
+   name for the natural sheet/drawer motion. */
+.anim_slide-bottom {
+  opacity: 0;
+  transform: translateY(16px);
+  transition:
+    opacity var(--modal-animation-duration) var(--ease-in-out),
+    transform var(--modal-animation-duration) var(--ease-in-out);
+
+  &[data-state='open'] {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.anim_slide-top {
+  opacity: 0;
+  transform: translateY(-16px);
+  transition:
+    opacity var(--modal-animation-duration) var(--ease-in-out),
+    transform var(--modal-animation-duration) var(--ease-in-out);
+
+  &[data-state='open'] {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.anim_slide-left {
+  opacity: 0;
+  transform: translateX(-16px);
+  transition:
+    opacity var(--modal-animation-duration) var(--ease-in-out),
+    transform var(--modal-animation-duration) var(--ease-in-out);
+
+  &[data-state='open'] {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.anim_slide-right {
+  opacity: 0;
+  transform: translateX(16px);
+  transition:
+    opacity var(--modal-animation-duration) var(--ease-in-out),
+    transform var(--modal-animation-duration) var(--ease-in-out);
+
+  &[data-state='open'] {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.anim_none {
+  opacity: 1;
+  transform: none;
+  transition: none;
+}
+
+/* ─── Header ─────────────────────────────────────────────────────────────── */
+
+.header {
+  padding: var(--spacing-6);
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-6);
+  flex-shrink: 0;
+}
+
+/* title + description stack */
+.header_content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  flex: 1;
+  min-width: 0;
+  padding-top: var(--spacing-3);
+}
+
+/* Close button sits inline at the end of the header row - no absolute needed */
+.close_button {
+  flex-shrink: 0;
+}
+
+.title {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-md);
+  color: var(--color-foreground);
+}
+
+.description {
+  font-size: var(--font-size-sm);
+  color: var(--color-muted-foreground);
+  line-height: 1.5;
+}
+
+/* ─── Body ───────────────────────────────────────────────────────────────── */
+
+.body {
+  padding: var(--spacing-6);
+  font-size: var(--font-size-base);
+  line-height: 1.6;
+}
+
+/* ─── Footer ─────────────────────────────────────────────────────────────── */
+
+.footer {
+  padding: var(--spacing-6);
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-4);
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+
+/* ─── Divider ────────────────────────────────────────────────────────────── */
+
+.divider {
+  border: none;
+  border-top: var(--border-1) solid var(--color-border);
+  margin: 0;
+}
+
+/* ─── Responsive: mobilePlacement takes over below --md ──────────────────── */
+/* The mobile override copies each placement's rules but reads from
+   data-mobile-placement. Kept co-located with the desktop rules above so
+   one contract drives both axes. */
+
+@media (--md) {
+  .overlay[data-mobile-placement='center'] {
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-6);
+  }
+  .overlay[data-mobile-placement='top'] {
+    align-items: flex-start;
+    justify-content: center;
+    padding: 0;
+  }
+  .overlay[data-mobile-placement='bottom'] {
+    align-items: flex-end;
+    justify-content: center;
+    padding: 0;
+  }
+  .overlay[data-mobile-placement='left'] {
+    align-items: stretch;
+    justify-content: flex-start;
+    padding: 0;
+  }
+  .overlay[data-mobile-placement='right'] {
+    align-items: stretch;
+    justify-content: flex-end;
+    padding: 0;
+  }
+  .overlay[data-mobile-placement='full'] {
+    align-items: stretch;
+    justify-content: flex-start;
+    padding: 0;
+  }
+
+  /* Panel shapes per mobile placement */
+  .content[data-mobile-placement='center'] {
+    border-radius: var(--radius-lg);
+    max-width: 100%;
+    height: auto;
+    min-height: 0;
+  }
+  .content[data-mobile-placement='bottom'] {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-top-left-radius: var(--radius-lg);
+    border-top-right-radius: var(--radius-lg);
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+    min-height: 0;
+  }
+  .content[data-mobile-placement='top'] {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+    min-height: 0;
+  }
+  .content[data-mobile-placement='left'],
+  .content[data-mobile-placement='right'] {
+    height: 100%;
+    min-height: 100dvh;
+    border-radius: 0;
+    max-width: min(20rem, 85%);
+  }
+  .content[data-mobile-placement='full'] {
+    max-width: 100%;
+    width: 100%;
+    height: 100%;
+    min-height: 100dvh;
+    border-radius: 0;
+  }
+
+  /* Scroll-inside extent follows the mobile placement, not the desktop one */
+  .scroll_inside[data-mobile-placement='center'] {
+    max-height: calc(100dvh - 2 * var(--spacing-6));
+  }
+  .scroll_inside[data-mobile-placement='bottom'],
+  .scroll_inside[data-mobile-placement='top'],
+  .scroll_inside[data-mobile-placement='left'],
+  .scroll_inside[data-mobile-placement='right'],
+  .scroll_inside[data-mobile-placement='full'] {
+    max-height: 100dvh;
+  }
+
+}
+
+@media (--motion-reduce) {
+  .overlay,
+  .anim_scale,
+  .anim_fade,
+  .anim_slide-top,
+  .anim_slide-bottom,
+  .anim_slide-left,
+  .anim_slide-right {
+    transition: none;
+  }
+
+  .anim_scale,
+  .anim_slide-top,
+  .anim_slide-bottom,
+  .anim_slide-left,
+  .anim_slide-right {
+    transform: none;
+  }
+}