Andreas Reinhold / reiniandClaude Opus 5
cbc0fa76d2
Plan step 23 (containment), containment.md § Missing: "no divider pinned between a scrolling body and the header/actions". Every dialog now draws a 1px outline-variant rule under the header once the body is scrolled away from its top, and over the actions while more of it is below; a body that fits shows neither. The rules are pseudo-elements in the rows' own padding (dialog.css), so showing one moves nothing, and x-dialog-dividers (dialog.js) marks the wire:ignore.self <dialog>, which a morph leaves alone, watching scroll and a ResizeObserver on the body and a wrapper around the slot. The M3 gaps are split around the rules (8/8 under the header, 8/16 over the actions). A full-screen dialog's rule sits under its phone bar, and its action bar's always-on border follows the scroll too. `separator` now means "draw both rules always" instead of rendering two <x-divider> elements. The fade uses the effects-fast token, zero under reduced motion. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
46 lines
1.6 KiB
CSS
46 lines
1.6 KiB
CSS
/*
|
|
* Livewire Material — the one stylesheet an application imports, after Tailwind, followed by
|
|
* the scheme `php artisan material:scheme` wrote for it:
|
|
*
|
|
* @import 'tailwindcss';
|
|
* @import '../../vendor/nonameweb/livewire-material/resources/css/material.css';
|
|
* @import './material-scheme.css';
|
|
* @source '../../vendor/nonameweb/livewire-material/resources/views';
|
|
* @source '../../vendor/nonameweb/livewire-material/src';
|
|
*
|
|
* tokens/scheme.css is the package's own default (M3's baseline purple), so an application
|
|
* renders before it has a scheme; the application's file declares the same roles later and wins.
|
|
*/
|
|
|
|
@import './tokens/scheme.css';
|
|
@import './tokens/shape.css';
|
|
@import './tokens/elevation.css';
|
|
@import './tokens/motion.css';
|
|
@import './tokens/type.css';
|
|
@import './tokens/font.css';
|
|
@import './tokens/theme.css';
|
|
@import './tokens/state.css';
|
|
@import './components/actions.css';
|
|
@import './components/groups.css';
|
|
@import './components/list.css';
|
|
@import './components/collapse.css';
|
|
@import './components/dialog.css';
|
|
@import './components/field.css';
|
|
@import './components/menu.css';
|
|
@import './components/selection.css';
|
|
@import './components/search.css';
|
|
@import './components/datepicker.css';
|
|
@import './components/timepicker.css';
|
|
@import './components/tabs.css';
|
|
@import './components/app-bar.css';
|
|
@import './components/navigation.css';
|
|
@import './components/toolbar.css';
|
|
@import './components/table.css';
|
|
|
|
@layer base {
|
|
html {
|
|
background-color: var(--md-sys-color-surface);
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
}
|