noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Grow the alert's text from a zero basis again

Browse Source 
Plan step 36. The rewrite drew Tailwind's `flex-1` (flex: 1 1 0%) as
`flex: 1 1 auto`; it is `flex: 1` again. The header's reasons were not
true either: no chip or FAB menu stylesheet pulls a text-button row back
(the rich tooltip's does), and the dismiss button's negative margin
does not stop a touch target's ::after. It now says the button carries
the shared classes' declarations because the view writes no class list,
as button.css does.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 17:06:50 +02:00
co-authored by Claude Opus 5
parent 204c2d2b24
commit 4893eaf398
1 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components/alert.css
+8 -7
View File
@@ -2,15 +2,16 @@
* <x-alert>: a notice in the page — not an M3 component (M3's banner is gone), drawn in M3's own * <x-alert>: a notice in the page — not an M3 component (M3's banner is gone), drawn in M3's own
* terms as the plan's deliberate-deviations note records: the state's container colour (tinted, * terms as the plan's deliberate-deviations note records: the state's container colour (tinted,
* never filled), a medium corner, the state's icon, title-small/body-medium text and an actions * never filled), a medium corner, the state's icon, title-small/body-medium text and an actions
* row of text buttons pulled back to the text's edge, the trick every text-button row in this * row of text buttons pulled back 12px to the text's edge, as the rich tooltip's actions row is
* package uses (chip.css, fab-menu.css, rich-tooltip.css). * (rich-tooltip.css).
* *
* `data-md-color`: info (the default), success, warning, error, primary, secondary, tertiary or * `data-md-color`: info (the default), success, warning, error, primary, secondary, tertiary or
* neutral (surface-container-high, on-surface — it has no state colour of its own). The dismiss * neutral (surface-container-high, on-surface — it has no state colour of its own). The dismiss
* button reaches M3's 48px target from its drawn 40px (ACT-18) with its own state layer, focus * button is drawn at 40px, pulled 8px out into the alert's padding, and reaches M3's 48px target
* ring and touch target rather than the shared classes (foundation/interaction.css): its `-8px` * (ACT-18) through an `::after`. Its state layer, focus ring and target are the declarations of
* margin, pulling it flush with the alert's own edge, already claims the touch target's `::after` * the foundation's `md-state-layer`, `md-focus-ring` and `md-touch-target`
* inset. * (foundation/interaction.css), keyed on the button itself as button.css does, because the view
* writes no class list.
*/ */
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@@ -65,7 +66,7 @@
[data-md-alert-content] { [data-md-alert-content] {
min-width: 0; min-width: 0;
flex: 1 1 auto; flex: 1;
align-self: center; align-self: center;
} }