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
15 lines
575 B
CSS
15 lines
575 B
CSS
/*
|
|
* The layout components (plan step 35): the scaffold, panes, the canonical layouts, surfaces and
|
|
* the arrangements inside a pane, each in `material.layout`, with the visibility props in
|
|
* `material.visibility`. Step 37 folds this file into all.css.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@import './layout/stack.css';
|
|
@import './layout/row.css';
|
|
@import './layout/grid.css';
|
|
@import './layout/surface.css';
|
|
@import './layout/pane.css';
|
|
@import './layout/list-detail.css';
|