Rewrite the drawer (side sheet) without Tailwind, remove pane
Plan step 36 (containment group): <x-drawer>'s class lists move into resources/css/components/drawer.css, keyed on data-md-drawer (with data-md-open, data-md-standard) and data-md-drawer-scrim/-sheet (data-md-side)/-head/-head-row/-heading/-title/-subtitle/-close/-body/ -actions. The modal sheet slides in on the emphasized-decelerate easing and out on emphasized-accelerate (an asymmetric CSS transition expressed by giving the open-state selector its own transition-duration/-timing-function, which the "after-change style" rule picks up); the sheet stays x-show-driven, with @starting-style + transition-behavior: allow-discrete taking the place of x-transition's enter/leave classes, matching resources/css/components/search.css's already-rewritten scrim/view. A standard sheet drops the scrim and trap from 840px and only fades in place (an in-flow box does not travel); data-md-drawer-collapsed (from the view's `wide` Alpine state) takes it out of the layout while closed there. <x-drawer pane> is removed: step 35's <x-list-detail> is M3's form of that job (the plan's decision, docs/plans/material-3-alignment.md "Decisions"). Removed the prop, its CSS classes and its tests (OverlayTest's two pane-only tests deleted, the others' pane cases dropped); pointed each mention at <x-list-detail> in the material-3 guideline, the material-3-design and livewire-material-development skills, and added a line to UPGRADE.md's 2.0.0 notes. No other living file named `<x-drawer pane>` (grepped views, tests, README, boost, workbench excluding build output); docs/plans and docs/audits keep their history unchanged. Imported from the Containment block of components.css, importing button.css and divider.css for what the view renders. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
3c235ecc1e
commit
9dd527f303
@@ -0,0 +1,226 @@
|
||||
/*
|
||||
* `<x-drawer>`: M3's side sheet, modal by default and co-planar as `standard` from 840px
|
||||
* (docs/reference/m3/components-actions-communication-containment.md § Side sheets → Specs; no
|
||||
* androidx Compose token file exists for it — Compose support is "Unavailable" per the site — so
|
||||
* the numbers come from the specs page and, for the standard variant's 0dp elevation,
|
||||
* material-components-android's `SideSheet.md`).
|
||||
*
|
||||
* [data-md-drawer] the wrapper; data-md-open, data-md-standard
|
||||
* [data-md-drawer-scrim] modal only (hidden by JS once the sheet is wide/standard)
|
||||
* [data-md-drawer-sheet] surface-container-low, elevation 1; data-md-side
|
||||
* [data-md-drawer-head] title/subtitle/close, and the separator's divider
|
||||
* [data-md-drawer-head-row], [data-md-drawer-heading], [data-md-drawer-title],
|
||||
* [data-md-drawer-subtitle], [data-md-drawer-close]
|
||||
* [data-md-drawer-body] a size container, so its contents lay out by the sheet's own
|
||||
* width (`@md:`), never the viewport's
|
||||
* [data-md-drawer-actions] left-aligned, 72dp (C-10 — a dialog's are trailing-aligned)
|
||||
*
|
||||
* 400px cap, 24dp start/end padding, a large corner on the inner edge only, 56dp side-sheet
|
||||
* width start — all from the specs table. It enters on the emphasized-decelerate easing rather
|
||||
* than a spring, because a sheet anchored to an edge that overshot would open a gap; below
|
||||
* `expanded` it slides, and once `standard` makes it co-planar it only fades (an in-flow box does
|
||||
* not need to travel).
|
||||
*
|
||||
* A `standard` sheet drops the scrim, the trap and the elevation, and swaps surface-container-low
|
||||
* for `surface` with an outline-variant rule down its inner edge, in place of the scrim
|
||||
* (its anatomy's "Divider (optional)"). Below `expanded` (840px) it is the modal sheet — M3 caps
|
||||
* a side sheet at 400dp, and a 600px window has too little room left beside one, so the switch
|
||||
* sits at `expanded` rather than `medium`. `data-md-drawer-collapsed` (the view, from the
|
||||
* `wide` — window ≥ 840px — Alpine state) takes the standard sheet out of the layout entirely
|
||||
* while it is closed there, so the content beside it fills the space.
|
||||
*/
|
||||
|
||||
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
||||
|
||||
@import './button.css';
|
||||
@import './divider.css';
|
||||
|
||||
@layer material.components {
|
||||
[data-md-drawer-scrim] {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 40;
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
|
||||
transition-property: opacity, display;
|
||||
transition-duration: var(--md-sys-motion-effects-default-duration);
|
||||
transition-timing-function: var(--md-sys-motion-effects-default);
|
||||
transition-behavior: allow-discrete;
|
||||
}
|
||||
|
||||
@starting-style {
|
||||
[data-md-drawer-scrim] {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
[data-md-drawer-sheet] {
|
||||
position: fixed;
|
||||
top: var(--material-safe-top, env(safe-area-inset-top));
|
||||
bottom: 0;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
padding: var(--md-sys-measurement-space300);
|
||||
background-color: var(--md-sys-color-surface-container-low);
|
||||
color: var(--md-sys-color-on-surface);
|
||||
box-shadow: var(--md-sys-elevation-1);
|
||||
translate: 100% 0;
|
||||
opacity: 0;
|
||||
transition-property: translate, opacity, display;
|
||||
transition-duration: var(--md-sys-motion-effects-default-duration);
|
||||
transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate);
|
||||
transition-behavior: allow-discrete;
|
||||
}
|
||||
|
||||
[data-md-drawer-sheet][data-md-side='end'] {
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
|
||||
[data-md-drawer-sheet][data-md-side='start'] {
|
||||
inset-inline-start: 0;
|
||||
translate: -100% 0;
|
||||
}
|
||||
|
||||
[data-md-drawer][data-md-open] [data-md-drawer-sheet] {
|
||||
translate: 0 0;
|
||||
opacity: 1;
|
||||
transition-duration: var(--md-sys-motion-spatial-default-duration);
|
||||
transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
|
||||
}
|
||||
|
||||
@starting-style {
|
||||
[data-md-drawer][data-md-open] [data-md-drawer-sheet] {
|
||||
translate: 100% 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
[data-md-drawer][data-md-open] [data-md-drawer-sheet][data-md-side='start'] {
|
||||
translate: -100% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 600px) {
|
||||
[data-md-drawer-sheet] {
|
||||
width: var(--sheet-width);
|
||||
max-width: calc(100vw - 64px);
|
||||
}
|
||||
|
||||
[data-md-drawer-sheet][data-md-side='end'] {
|
||||
border-start-start-radius: var(--md-sys-shape-corner-lg);
|
||||
border-end-start-radius: var(--md-sys-shape-corner-lg);
|
||||
}
|
||||
|
||||
[data-md-drawer-sheet][data-md-side='start'] {
|
||||
border-start-end-radius: var(--md-sys-shape-corner-lg);
|
||||
border-end-end-radius: var(--md-sys-shape-corner-lg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Co-planar from expanded: sticky beside the content, no scrim, no elevation, flat on
|
||||
`surface` with an outline-variant rule down the inner edge instead. It only fades here —
|
||||
an in-flow box does not travel like an overlay does. */
|
||||
@media (width >= 840px) {
|
||||
[data-md-drawer][data-md-standard] {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100dvh;
|
||||
flex-shrink: 0;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
[data-md-drawer][data-md-standard][data-md-drawer-collapsed] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-md-drawer][data-md-standard] [data-md-drawer-sheet] {
|
||||
position: relative;
|
||||
top: 0;
|
||||
z-index: auto;
|
||||
height: 100%;
|
||||
translate: 0 0;
|
||||
border-radius: var(--md-sys-shape-corner-none);
|
||||
background-color: var(--md-sys-color-surface);
|
||||
box-shadow: none;
|
||||
opacity: 0;
|
||||
transition-property: opacity, display;
|
||||
transition-duration: var(--md-sys-motion-effects-default-duration);
|
||||
transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate);
|
||||
}
|
||||
|
||||
[data-md-drawer][data-md-standard][data-md-open] [data-md-drawer-sheet] {
|
||||
opacity: 1;
|
||||
transition-duration: var(--md-sys-motion-spatial-default-duration);
|
||||
transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
|
||||
}
|
||||
|
||||
@starting-style {
|
||||
[data-md-drawer][data-md-standard][data-md-open] [data-md-drawer-sheet] {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
[data-md-drawer][data-md-standard] [data-md-drawer-sheet][data-md-side='end'] {
|
||||
border-inline-start: 1px solid var(--md-sys-color-outline-variant);
|
||||
}
|
||||
|
||||
[data-md-drawer][data-md-standard] [data-md-drawer-sheet][data-md-side='start'] {
|
||||
border-inline-end: 1px solid var(--md-sys-color-outline-variant);
|
||||
}
|
||||
}
|
||||
|
||||
[data-md-drawer-head] {
|
||||
margin-bottom: var(--md-sys-measurement-space200);
|
||||
}
|
||||
|
||||
[data-md-drawer-head-row] {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
[data-md-drawer-heading] {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
[data-md-drawer-title] {
|
||||
font: var(--md-sys-typescale-title-lg);
|
||||
letter-spacing: var(--md-sys-typescale-title-lg-tracking);
|
||||
}
|
||||
|
||||
[data-md-drawer-subtitle] {
|
||||
margin-top: var(--md-sys-measurement-space50);
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
font: var(--md-sys-typescale-body-md);
|
||||
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
||||
}
|
||||
|
||||
[data-md-drawer-close] {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
margin-top: calc(-1 * var(--md-sys-measurement-space100));
|
||||
margin-inline-end: -12px;
|
||||
}
|
||||
|
||||
[data-md-drawer-head] > [data-md-divider] {
|
||||
margin-top: var(--md-sys-measurement-space200);
|
||||
}
|
||||
|
||||
[data-md-drawer-body] {
|
||||
container-type: inline-size;
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
[data-md-drawer-actions] {
|
||||
display: flex;
|
||||
min-height: var(--md-sys-measurement-space900);
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: var(--md-sys-measurement-space100);
|
||||
padding-top: var(--md-sys-measurement-space200);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user