You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
3.0 KiB
97 lines
3.0 KiB
/*
|
|
* Chrome of the /blocks section — the shell only: topbar, rail and content
|
|
* column. The CONTROLS inside it are canon components (ToggleGroup, Button,
|
|
* Link…), like the rest of the site; this file just places the three regions
|
|
* and paints their edges with foundation tokens.
|
|
*
|
|
* (The B contract's «no CSS» rule is about `src/uix/blocks/`, the tier itself.
|
|
* This is app-land chrome for the demo site, the same role `uix.css` plays for
|
|
* the component docs.)
|
|
*/
|
|
|
|
[data-blocks-shell] {
|
|
min-block-size: 100dvh;
|
|
background: var(--color-surface-default);
|
|
color: var(--color-content-primary);
|
|
}
|
|
|
|
/* NOT sticky: a demo page whose star is a block that pins would have its own
|
|
chrome fighting it — the block's header would slide under this bar and the
|
|
`offset` you set would read as something else. The section's chrome scrolls
|
|
away; the block owns the top of the viewport. */
|
|
[data-blocks-topbar] {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-4);
|
|
padding-inline: var(--space-4);
|
|
padding-block: var(--space-2);
|
|
background: color-mix(in srgb, var(--color-surface-default) 88%, transparent);
|
|
backdrop-filter: blur(8px);
|
|
border-block-end: var(--border-width) solid var(--color-border-subtle);
|
|
}
|
|
|
|
[data-blocks-body] {
|
|
display: flex;
|
|
align-items: stretch;
|
|
min-block-size: 0;
|
|
}
|
|
|
|
[data-blocks-rail] {
|
|
flex: none;
|
|
inline-size: 15rem;
|
|
padding: var(--space-4);
|
|
border-inline-end: var(--border-width) solid var(--color-border-subtle);
|
|
position: sticky;
|
|
inset-block-start: 0;
|
|
align-self: start;
|
|
max-block-size: 100dvh;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
/* Below `lg` the rail folds away: the topbar keeps the axes, and the gallery
|
|
is one tap away. A demo section does not need a drawer of its own. */
|
|
@media (width < 64rem) {
|
|
[data-blocks-rail] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
[data-blocks-content] {
|
|
flex: 1 1 auto;
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
/*
|
|
* The stage — a page in miniature with its own scroll host, so a block that
|
|
* pins (site-header) pins against THIS box and not the viewport.
|
|
*
|
|
* It is a bare frame on purpose: a `Card` would bring its own padding (its
|
|
* recipe paints with `--card-padding-*`, which a `padding={0}` on the Box
|
|
* layer does not override), and that padding pushed a header with
|
|
* `offset: 0` twenty-one pixels away from the edge it was supposed to touch.
|
|
* A stage has to be flush.
|
|
*/
|
|
[data-blocks-stage] {
|
|
block-size: var(--blocks-stage-height, 520px);
|
|
display: flex;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
border: var(--border-width) solid var(--color-border-subtle);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--color-surface-muted);
|
|
}
|
|
|
|
/* The preview IS a page: its own document, its own viewport scroll. Resizing
|
|
this element resizes that viewport, which is how the narrow branch of a
|
|
responsive block can be seen honestly. */
|
|
[data-blocks-preview] {
|
|
border: 0;
|
|
block-size: 100%;
|
|
max-inline-size: 100%;
|
|
background: var(--color-surface-default);
|
|
transition: inline-size var(--duration-fast) var(--ease-default);
|
|
}
|