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

Draw the dragged layer on a card that is not a row

Browse Source 
Plan step 36 review of f04e31b3. The card rendered md-state-layer only
on a row, so a card the application marks data-md-dragged without being
a row, as the showcase's "A card being dragged" is, lost the 16% dragged
layer its old inset shadow drew and its header still promises. Every
card now renders the class, since the attribute arrives from script
after render, and card.css keeps the layer off a card that is neither a
row nor dragged. The divider under the header is matched as its child.

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 22:00:49 +02:00
co-authored by Claude Opus 5
parent 7d3abdd506
commit c298b19e75
3 changed files with 32 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components/card.css
+11 -4
View File
@@ -6,10 +6,13 @@
* which never morphs (M3 specifies shape morph for buttons, FABs and list items, never cards —
* docs/audits/m3-alignment/containment.md, C-23).
*
* A row (`data-md-list-row`, `resources/js/list-rows.js`) renders the shared `md-state-layer` and
* `md-focus-ring` classes (foundation/interaction.css) for its tint and its ring; this file adds
* only what a card needs beyond them:
* Every card renders the shared `md-state-layer` class, and a row (`data-md-list-row`,
* `resources/js/list-rows.js`) `md-focus-ring` too (foundation/interaction.css), for its tint and
* its ring; this file adds only what a card needs beyond them:
*
* - *no layer* on a card that is neither a row nor dragged: a card that does not open anything
* answers no pointer, but any card can be carried, and the application sets `data-md-dragged`
* from script long after the view rendered;
* - per-state *elevation*, which the shared class has no opinion on: elevated 1dp rest → 2dp
* hover → 1dp focus/pressed; filled and outlined 0dp rest → 1dp hover → 0dp focus/pressed
* (the cross-check table's Hover/Focus/Pressed rows). Pressed and focus fall back to the rest
@@ -57,6 +60,10 @@
background-color: var(--md-sys-color-surface);
}
[data-md-card]:not([data-md-list-row], [data-md-dragged])::before {
display: none;
}
[data-md-card][data-md-list-row] {
cursor: pointer;
transition-property: box-shadow;
@@ -157,7 +164,7 @@
margin-inline-end: calc(-1 * var(--md-sys-measurement-space100));
}
[data-md-card-header] [data-md-divider] {
[data-md-card-header] > [data-md-divider] {
margin-top: var(--md-sys-measurement-space200);
}