88 lines
3.6 KiB
CSS
88 lines
3.6 KiB
CSS
/* Sheet mapping. ui-viz has no Sheet spec (the Dialog doc lists "side sheet" as out of scope), so these are current HM values built
|
|
from the HM Semantic tokens. Modal panel attached to a viewport edge; Radix keeps Portal, focus trap, Escape and focus return.
|
|
Position and slide animation stay the shadcn classes; the Overlay keeps the shadcn default. Values repeat Dialog's look in
|
|
meaning only: no --hm-dialog-* token is referenced. */
|
|
:root, [data-hm-theme] {
|
|
--hm-sheet-background: var(--hm-sem-bg-surface);
|
|
--hm-sheet-text: var(--hm-sem-fg-primary);
|
|
--hm-sheet-border-width: 1px;
|
|
--hm-sheet-border-color: var(--hm-sem-stroke-input-default);
|
|
--hm-sheet-shadow: 0 0 12px color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
|
|
|
|
/* Left / right: fixed width, never wider than the viewport minus a strip of Overlay. Top / bottom: full width, height by content. */
|
|
--hm-sheet-width: 400px;
|
|
--hm-sheet-edge-gap: 48px;
|
|
|
|
--hm-sheet-padding: 24px;
|
|
--hm-sheet-header-gap: 8px;
|
|
--hm-sheet-footer-gap: 8px;
|
|
/* Space reserved at the Header end for the Close button (28px button + 8px gap). */
|
|
--hm-sheet-close-clearance: 36px;
|
|
|
|
--hm-sheet-title-font-size: 20px;
|
|
--hm-sheet-title-line-height: 28px;
|
|
--hm-sheet-title-font-weight: 700;
|
|
--hm-sheet-description-font-size: 14px;
|
|
--hm-sheet-description-line-height: 20px;
|
|
--hm-sheet-description-color: var(--hm-sem-fg-secondary);
|
|
--hm-sheet-body-font-size: 14px;
|
|
--hm-sheet-body-line-height: 20px;
|
|
}
|
|
|
|
[data-slot="sheet-content"] {
|
|
box-sizing: border-box;
|
|
background: var(--hm-sheet-background);
|
|
color: var(--hm-sheet-text);
|
|
box-shadow: var(--hm-sheet-shadow);
|
|
font-size: var(--hm-sheet-body-font-size);
|
|
line-height: var(--hm-sheet-body-line-height);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
[data-slot="sheet-content"][data-side="right"],
|
|
[data-slot="sheet-content"][data-side="left"] {
|
|
height: 100%;
|
|
width: min(var(--hm-sheet-width), calc(100vw - var(--hm-sheet-edge-gap)));
|
|
}
|
|
[data-slot="sheet-content"][data-side="top"],
|
|
[data-slot="sheet-content"][data-side="bottom"] {
|
|
width: 100%;
|
|
max-height: calc(100dvh - var(--hm-sheet-edge-gap));
|
|
}
|
|
/* Border only on the edge that faces the page. */
|
|
[data-slot="sheet-content"][data-side="right"] { border-left: var(--hm-sheet-border-width) solid var(--hm-sheet-border-color); }
|
|
[data-slot="sheet-content"][data-side="left"] { border-right: var(--hm-sheet-border-width) solid var(--hm-sheet-border-color); }
|
|
[data-slot="sheet-content"][data-side="top"] { border-bottom: var(--hm-sheet-border-width) solid var(--hm-sheet-border-color); }
|
|
[data-slot="sheet-content"][data-side="bottom"] { border-top: var(--hm-sheet-border-width) solid var(--hm-sheet-border-color); }
|
|
|
|
[data-slot="sheet-header"] {
|
|
flex: none;
|
|
gap: var(--hm-sheet-header-gap);
|
|
padding: var(--hm-sheet-padding) calc(var(--hm-sheet-padding) + var(--hm-sheet-close-clearance)) 16px var(--hm-sheet-padding);
|
|
}
|
|
[data-slot="sheet-title"] {
|
|
font-size: var(--hm-sheet-title-font-size);
|
|
line-height: var(--hm-sheet-title-line-height);
|
|
font-weight: var(--hm-sheet-title-font-weight);
|
|
color: var(--hm-sheet-text);
|
|
}
|
|
[data-slot="sheet-description"] {
|
|
font-size: var(--hm-sheet-description-font-size);
|
|
line-height: var(--hm-sheet-description-line-height);
|
|
font-weight: 400;
|
|
color: var(--hm-sheet-description-color);
|
|
}
|
|
|
|
/* Body: the only region that scrolls; Header and Footer stay in view. */
|
|
[data-slot="sheet-body"] {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
padding: 0 var(--hm-sheet-padding);
|
|
}
|
|
|
|
[data-slot="sheet-footer"] {
|
|
flex: none;
|
|
gap: var(--hm-sheet-footer-gap);
|
|
padding: 16px var(--hm-sheet-padding) var(--hm-sheet-padding);
|
|
}
|