Andreas Reinhold / reiniandClaude Opus 5
b5c5be1fd7
Plan step 35: <x-list-detail>, following the reference's visible-panes table row by row - one pane below expanded, the detail replacing the list with a back button once something is selected; from 840px the list a fixed 360px (412px from 1200px) beside the detail, 24px apart. The selection binds with wire:model or x-model; below expanded focus moves to the detail and back() returns it to the item (resources/js/layout.js). Grid columns mirror in RTL, and the back arrow turns with them. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
89 lines
3.4 KiB
CSS
89 lines
3.4 KiB
CSS
/*
|
||
* <x-list-detail>: M3's list-detail canonical layout — a list, and the detail of what it selected.
|
||
*
|
||
* Its visible-panes table, row by row (docs/reference/m3/foundations-supplement.md § Canonical
|
||
* layouts → List-detail):
|
||
*
|
||
* Compact (0–599) 1 pane list, or the detail once something is selected
|
||
* Medium (600–839) 1 or 2 1, M3's recommendation for a layout that is not low-density
|
||
* Expanded (840+) 2 list and detail side by side
|
||
* Large (1200–1599) 2 the same
|
||
* Extra-large (1600+) 2 the same
|
||
*
|
||
* Below 840px one pane shows: the list while `data-md-selected` is absent, the detail while it is
|
||
* there, with a back button — M3: "a Back button appears in the detail view only for single-pane
|
||
* layouts". From 840px the list is a fixed pane and the detail flexible, 24px apart: the fixed pane
|
||
* is 360dp at expanded and 412dp from large (§ Breakpoints, "fixed-and-flexible layout's fixed pane
|
||
* defaults to 360dp" at expanded and "412dp" at large and extra-large; 24dp margins and spacer),
|
||
* and every back button inside is hidden. Grid columns run in the inline direction, so in a
|
||
* right-to-left document the list is on the right — the mirror M3 requires of every canonical
|
||
* layout (docs/reference/m3/foundations.md § Layout → Bidirectionality / RTL) — and the back arrow
|
||
* turns with it.
|
||
*
|
||
* The layout keeps its content off the window's edge by M3's margin (16px below medium, 24px from
|
||
* it) unless it is inside something that already does (`--md-layout-margin`, pane.css), and tells
|
||
* what is inside it that the margin is drawn. A pane that is focused as a whole draws no outline:
|
||
* it is not a control, and the element focus lands on inside it is what shows the ring.
|
||
*
|
||
* In `material.layout`; the state and focus are resources/js/layout.js.
|
||
*/
|
||
|
||
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
||
|
||
@import './visibility.css';
|
||
|
||
@layer material.layout {
|
||
[data-md-list-detail] {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr);
|
||
align-items: start;
|
||
padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space200));
|
||
|
||
@media (width >= 600px) {
|
||
padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space300));
|
||
}
|
||
|
||
@media (width >= 840px) {
|
||
grid-template-columns: 360px minmax(0, 1fr);
|
||
column-gap: var(--md-sys-measurement-space300);
|
||
}
|
||
|
||
@media (width >= 1200px) {
|
||
grid-template-columns: 412px minmax(0, 1fr);
|
||
}
|
||
}
|
||
|
||
[data-md-list-detail] > * {
|
||
--md-layout-margin: 0px;
|
||
}
|
||
|
||
[data-md-list-detail-pane] {
|
||
min-inline-size: 0;
|
||
outline: none;
|
||
}
|
||
|
||
[data-md-list-detail-back-row] {
|
||
display: flex;
|
||
align-items: center;
|
||
min-block-size: var(--md-sys-measurement-space800);
|
||
}
|
||
|
||
[data-md-list-detail-back] [data-md-icon]:dir(rtl) {
|
||
transform: scaleX(-1);
|
||
}
|
||
|
||
@media (width < 840px) {
|
||
[data-md-list-detail]:not([data-md-selected]) > [data-md-list-detail-pane='detail'],
|
||
[data-md-list-detail][data-md-selected] > [data-md-list-detail-pane='list'] {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (width >= 840px) {
|
||
[data-md-list-detail-back-row],
|
||
[data-md-list-detail] [data-md-list-detail-back] {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|