Andreas Reinhold / reiniandClaude Opus 5
0013e0154d
Plan step 35: <x-app-shell> becomes <x-scaffold>, M3's and Compose's name for the structure of bars, rails and panes, with no alias; every package view, the showcase, the tests, the skills, README and UPGRADE follow. Its markup and Tailwind classes stay for the navigation rewrite. The new fab slot places the FAB as Compose's Scaffold does - bottom-end, 16px from the edges below medium and 24px from it, clear of the navigation bar and of a snackbar on screen (resources/css/layout/scaffold.css) - and the content region tells a pane inside that the margin is already drawn. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
66 lines
3.2 KiB
CSS
66 lines
3.2 KiB
CSS
/*
|
|
* <x-scaffold>: the FAB it places, and the margin its content region already draws.
|
|
*
|
|
* The rest of the scaffold — the rail, the navigation bar, the content region — is still drawn by
|
|
* its Tailwind classes until its rewrite (plan step 36); this file holds only what step 35 added.
|
|
*
|
|
* `data-md-scaffold-fab` places the page's FAB as Compose's Scaffold places its floating action
|
|
* button: fixed at the bottom-end corner (M3's adaptive placement for a FAB, "lower right (bottom
|
|
* trailing) corner", docs/reference/m3/components-actions-communication-containment.md § FAB →
|
|
* Behaviour), with M3's margin from the window's edges — 16px below medium and 24px from 600px
|
|
* (docs/reference/m3/foundations-supplement.md § Breakpoints). `inset-inline-end` is the trailing
|
|
* edge, so a right-to-left document puts it on the left, clear of the safe area on that side.
|
|
*
|
|
* From the bottom it clears, in order: the navigation bar, or the bottom safe area where there is
|
|
* none — `max()`, since `--material-bottom-bar` already includes the safe area (the navigation bar
|
|
* publishes it on the scaffold below medium); then a snackbar while one shows. <x-toast> sits 16px
|
|
* above the bar and publishes its height as `--material-snackbar-height` while it is on screen, so
|
|
* the FAB adds that height and the snackbar's own 16px (`min()` of the height and 16px is 16px when
|
|
* a snackbar shows and 0px when none does) — M3: "snackbars should appear above FABs — never in
|
|
* front of or behind one" (§ Snackbar → Placement). It moves there on the spatial spring, which
|
|
* reduced motion makes instant. z-index 30 is the navigation bar's own layer: over the page, under
|
|
* a scrim and the snackbar.
|
|
*
|
|
* `--md-layout-margin: 0px` on the content region tells a pane or canonical layout inside that the
|
|
* region already keeps the window margin (layout/pane.css), so neither draws it a second time.
|
|
*
|
|
* In `material.layout`.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@layer material.layout {
|
|
[data-md-scaffold] main {
|
|
--md-layout-margin: 0px;
|
|
}
|
|
|
|
[data-md-scaffold-fab] {
|
|
--md-scaffold-fab-margin: var(--md-sys-measurement-space200);
|
|
|
|
position: fixed;
|
|
z-index: 30;
|
|
inset-inline-end: max(
|
|
var(--md-scaffold-fab-margin),
|
|
var(--material-safe-right, env(safe-area-inset-right))
|
|
);
|
|
inset-block-end: calc(
|
|
max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom)))
|
|
+ var(--md-scaffold-fab-margin)
|
|
+ var(--material-snackbar-height, 0px)
|
|
+ min(var(--material-snackbar-height, 0px), var(--md-sys-measurement-space200))
|
|
);
|
|
transition: inset-block-end var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);
|
|
|
|
@media (width >= 600px) {
|
|
--md-scaffold-fab-margin: var(--md-sys-measurement-space300);
|
|
}
|
|
}
|
|
|
|
[data-md-scaffold-fab]:dir(rtl) {
|
|
inset-inline-end: max(
|
|
var(--md-scaffold-fab-margin),
|
|
var(--material-safe-left, env(safe-area-inset-left))
|
|
);
|
|
}
|
|
}
|