105 lines
5.4 KiB
CSS
105 lines
5.4 KiB
CSS
/* Dialog mapping. ui_viz: docs/components/dialog.md (Dialog / Modal), §1.1, §2, §4, §9. Radix keeps Portal, focus trap, ARIA, Escape, focus return and scroll lock.
|
|
Only the look is set here: container, regions (Header / Body / Footer) and text. The Overlay, motion and Close button keep the shadcn defaults. */
|
|
:root, [data-hm-theme] {
|
|
/* ui_viz: dialog.md §2, §8.1 — Radius 8px (Dialog-local, USER_DECISION) and shadow 0 0 12px rgba(0,0,0,.2) (D-093 D-088) — Confirmed. Dialog-local, not Foundation tokens. */
|
|
--hm-dialog-radius: 8px;
|
|
--hm-dialog-shadow: 0 0 12px color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
|
|
/* ui_viz: dialog.md §2 — Surface color.bg.surface / foreground color.fg.primary — Confirmed reuse */
|
|
--hm-dialog-background: var(--hm-sem-bg-surface);
|
|
--hm-dialog-text: var(--hm-sem-fg-primary);
|
|
/* ui_viz: dialog.md §2 — outer 1px; color #DEDBD2 is Temporary (Token relation TBD, DIALOG-10 FOLLOW_UP). Same value as the Header divider. */
|
|
--hm-dialog-border-width: 1px;
|
|
--hm-dialog-border-color: var(--hm-sem-stroke-input-default);
|
|
--hm-dialog-divider-color: var(--hm-sem-stroke-input-default);
|
|
|
|
/* ui_viz: dialog.md §9 — Header 24/24/16, Title<->Description 8, Body 24 all sides, Actions 0/24/24, Action gap 8 — Confirmed (D-093, COMPONENT_SCOPED) */
|
|
--hm-dialog-padding: 24px;
|
|
--hm-dialog-header-padding-bottom: 16px;
|
|
--hm-dialog-header-gap: 8px;
|
|
--hm-dialog-actions-gap: 8px;
|
|
--hm-dialog-footer-padding-top: 16px;
|
|
|
|
/* ui_viz: dialog.md §1.1 — Title heading-md 20/28/700 (Dialog-local), Description body-sm 14/20/400, Body body-md 16/24/400 */
|
|
--hm-dialog-title-font-size: 20px;
|
|
--hm-dialog-title-line-height: 28px;
|
|
--hm-dialog-title-font-weight: 700;
|
|
--hm-dialog-description-font-size: 14px;
|
|
--hm-dialog-description-line-height: 20px;
|
|
--hm-dialog-body-font-size: 16px;
|
|
--hm-dialog-body-line-height: 24px;
|
|
/* ui_viz: dialog.md §1.2 — Description foreground color.fg.secondary is REFERENCE_ONLY / PARTIAL (current style kept, not a Confirmed value) */
|
|
--hm-dialog-description-color: var(--hm-sem-fg-secondary);
|
|
|
|
/* ui_viz: dialog.md §2, §9 — size is fit-content; max width = viewport - 2 x edge; max height also subtracts the app common header / footer.
|
|
edge 16px is REVIEW (existing reference value, not a global spacing token). The two app heights are Web Mapping names the consuming screen may set (default 0). */
|
|
--hm-dialog-edge: 16px;
|
|
--hm-dialog-app-header-height: 0px;
|
|
--hm-dialog-app-footer-height: 0px;
|
|
}
|
|
|
|
[data-slot="dialog-content"] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
/* Content size up to the max width. Not fit-content: with the shadcn `left: 50%` placement, fit-content only gets half the viewport
|
|
as available width, so a text Dialog stopped at 50vw (195px at 390px) instead of 100vw - 2 x edge. max-content + max-width gives the same min(content, max). */
|
|
width: max-content;
|
|
max-width: calc(100vw - 2 * var(--hm-dialog-edge));
|
|
max-height: calc(100dvh - var(--hm-dialog-app-header-height) - var(--hm-dialog-app-footer-height) - 2 * var(--hm-dialog-edge));
|
|
/* Centered in the area left by the app header / footer. */
|
|
top: calc(var(--hm-dialog-app-header-height) + (100dvh - var(--hm-dialog-app-header-height) - var(--hm-dialog-app-footer-height)) / 2);
|
|
padding: 0;
|
|
border: var(--hm-dialog-border-width) solid var(--hm-dialog-border-color);
|
|
border-radius: var(--hm-dialog-radius);
|
|
background: var(--hm-dialog-background);
|
|
color: var(--hm-dialog-text);
|
|
box-shadow: var(--hm-dialog-shadow);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* Header: Title (and optional Description) with the inset divider below it (24px each side, not edge to edge).
|
|
The divider is the last pixel of the 16px bottom inset (ui_viz draws it inside the padding), so the border width comes out of the padding. */
|
|
[data-slot="dialog-header"] {
|
|
flex: none;
|
|
gap: var(--hm-dialog-header-gap);
|
|
margin-inline: var(--hm-dialog-padding);
|
|
padding: var(--hm-dialog-padding) 0 calc(var(--hm-dialog-header-padding-bottom) - var(--hm-dialog-border-width));
|
|
border-bottom: var(--hm-dialog-border-width) solid var(--hm-dialog-divider-color);
|
|
}
|
|
[data-slot="dialog-title"] {
|
|
font-size: var(--hm-dialog-title-font-size);
|
|
line-height: var(--hm-dialog-title-line-height);
|
|
font-weight: var(--hm-dialog-title-font-weight);
|
|
color: var(--hm-dialog-text);
|
|
}
|
|
[data-slot="dialog-description"] {
|
|
font-size: var(--hm-dialog-description-font-size);
|
|
line-height: var(--hm-dialog-description-line-height);
|
|
font-weight: 400;
|
|
color: var(--hm-dialog-description-color);
|
|
}
|
|
|
|
/* Body: the only region that scrolls. Wide content (tables) scrolls sideways inside it, never the page. */
|
|
[data-slot="dialog-body"] {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
padding: var(--hm-dialog-padding);
|
|
font-size: var(--hm-dialog-body-font-size);
|
|
line-height: var(--hm-dialog-body-line-height);
|
|
font-weight: 400;
|
|
}
|
|
[data-slot="dialog-body"] > :first-child { margin-top: 0; }
|
|
[data-slot="dialog-body"] > :last-child { margin-bottom: 0; }
|
|
|
|
/* Footer (Actions): trailing edge, cancel first and the action last, no divider above. Stacking on a narrow screen is TBD in ui_viz (shadcn stacking kept). */
|
|
[data-slot="dialog-footer"] {
|
|
flex: none;
|
|
gap: var(--hm-dialog-actions-gap);
|
|
margin: 0;
|
|
padding: var(--hm-dialog-footer-padding-top) var(--hm-dialog-padding) var(--hm-dialog-padding);
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
}
|