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
* 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
* row of text buttons pulled back to the text's edge, the trick every text-button row in this
* package uses (chip.css, fab-menu.css, rich-tooltip.css).
* row of text buttons pulled back 12px to the text's edge, as the rich tooltip's actions row is
* (rich-tooltip.css).
*
* `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
* button reaches M3's 48px target from its drawn 40px (ACT-18) with its own state layer, focus
* ring and touch target rather than the shared classes (foundation/interaction.css): its `-8px`
* margin, pulling it flush with the alert's own edge, already claims the touch target's `::after`
* inset.
* button is drawn at 40px, pulled 8px out into the alert's padding, and reaches M3's 48px target
* (ACT-18) through an `::after`. Its state layer, focus ring and target are the declarations of
* the foundation's `md-state-layer`, `md-focus-ring` and `md-touch-target`
* (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;
@@ -65,7 +66,7 @@
[data-md-alert-content] {
min-width: 0;
flex: 1 1 auto;
flex: 1;
align-self: center;
}