noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9ff5a7a8093155e2dc58fe0c447ab3706a0a6e3b
livewire-material/resources/css/components/list-item.css
T
Andreas Reinhold / reiniandClaude Sonnet 5 9ff5a7a809 Rewrite list and list-item without Tailwind 
Plan step 36 (containment group, last of its four components): moves
into resources/css/components/list.css (the container: display, the
2px segmented gap) and list-item.css (everything else — anatomy,
states, the segmented item's own background/corner, and the row
interaction pattern list.css used to carry). One commit for both:
list-item.css keys heavily on list's own data-md-list="segmented"
attribute and the two files are designed together.

Kept, now on data-md-* hooks: selectable/selection listbox semantics
(role="listbox"/"option", aria-selected, a trailing check as the
second cue, C-03), a disabled item's link dropped entirely rather than
left focusable (C-02), the segmented row's own state layer no longer
racing its background through an unlayered escape hatch (C-08 doesn't
recur — nothing here is unlayered), leading video/icon/avatar slots,
three-line top alignment and 12px vertical padding (C-15), 16px
leading/trailing gap (C-14), dividers inset 16px (C-16), the segmented
list's surface fill (C-21) and its hover/focus/pressed/selected corner
morph (C-22). The segmented icon size (20px) is now the `size` prop
`<x-icon>` already takes from the parent's @aware(['segmented']),
replacing the CSS override C-26's fix suggested.

data-md-lines="1|2|3" replaces the old line-count classes; data-md-list-item-*
hooks replace every other class list.

Hooks renamed data-list -> data-md-list, data-list-item -> data-md-list-item,
data-dividers -> data-md-dividers, data-selected -> data-md-selected, the
generic data-list-row/-open row pattern's last consumer (list-item)
moved, so list-rows.js drops the transitional dual-hook fallback the
card commit added. table.css now @imports list-item.css, completing
what its own comment already claimed (a row answers a pointer as a
list row does) under the new per-component-import architecture.

Imported from the Containment block of components.css; leaves
tailwind.css, which now carries only dialog.css for this group.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
2026-09-14 20:37:38 +02:00

238 lines
9.1 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/*
* <x-list-item>: a headline with what leads it, what supports it and what trails it, one- two- or
* three-line by `data-md-lines` (56/72/88px, `ListTokens.kt:180,323,347`, androidx Compose
* Material 3, Apache-2.0) — the tallest element sets the height, and a three-line item top-aligns
* rather than centring (docs/reference/m3/components-actions-communication-containment.md
* § Lists → Specs). Leading/trailing gap and container padding are both `space200` (16px,
* `ItemLeadingSpace`/`ItemTrailingSpace`/container padding, C-14).
*
* `data-md-list-row` (`resources/js/list-rows.js`, shared with `<x-card>` and an application's own
* table rows) and `[data-md-list-open]:focus-visible` answer with an 8%/10% on-surface state layer
* and a 3px secondary inset ring — excluded on `[data-md-card]`, which draws its own tint through
* the shared `md-state-layer` class instead (card.css). `data-md-selected` is M3's selected item,
* secondary-container filled, which also dims the description/overline/trailing/icon colour rules
* below since they exclude it — the container's own colour takes over by inheritance. A selected
* option draws a second cue, a trailing check, so selection is never colour alone (C-03).
* `aria-disabled` drops every colour to 38% on-surface and blocks the pointer; the view drops the
* item's link entirely rather than leaving a focusable, activatable control behind it (C-02).
*
* `data-md-list="segmented"` items (M3 Expressive) are `surface` tiles (`ItemSegmentedContainerColor`,
* C-21), 4px corners that open to 16px at the list's own ends and while hovered (12px), pressed,
* focused or selected (16px) — the specs page's interaction-state expressive shapes (C-22). Leading
* icons there are drawn at 20px, not scaled down from 24 — list-item.blade.php passes `size` to
* `<x-icon>` from the parent's `@aware(['segmented'])`, so no CSS override is needed here (C-26).
*
* `data-md-dividers` on the list insets its rule 16px from both ends (`DividerLeadingSpace`/
* `DividerTrailingSpace`, C-16) rather than full-bleed.
*
* Leading media: `data-md-list-item-avatar` is 40px, full corner, initials in primary-container
* when it is a `<span>`, an image otherwise; `data-md-list-item-image` is a 56px small-corner
* thumbnail; `data-md-list-item-video` is M3's leading video in its two sizes,
* `data-md-size="sm"` 100×56px (a two-line item) or `"lg"` 114×64px (a three-line item),
* `LeadingVideoSmall`/`LeadingVideoLarge`.
*/
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@import './icon.css';
@layer material.components {
[data-md-list-item] {
position: relative;
display: flex;
align-items: center;
gap: var(--md-sys-measurement-space200);
padding-inline: var(--md-sys-measurement-space200);
color: var(--md-sys-color-on-surface);
}
[data-md-list-item][data-md-lines='1'] {
min-height: 56px;
padding-block: var(--md-sys-measurement-space100);
}
[data-md-list-item][data-md-lines='2'] {
min-height: 72px;
padding-block: var(--md-sys-measurement-space100);
}
[data-md-list-item][data-md-lines='3'] {
min-height: 88px;
padding-block: calc((var(--md-sys-measurement-space100) + var(--md-sys-measurement-space200)) / 2);
align-items: flex-start;
}
[data-md-list-item][data-md-selected] {
background-color: var(--md-sys-color-secondary-container);
color: var(--md-sys-color-on-secondary-container);
}
[data-md-list-item][aria-disabled='true'] {
pointer-events: none;
}
[data-md-list-item][aria-disabled='true'] :is([data-md-list-item-title], [data-md-list-item-overline], [data-md-list-item-description], [data-md-list-item-trailing], [data-md-list-item-icon]) {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
[data-md-list-item]:not([data-md-selected], [aria-disabled='true']) :is([data-md-list-item-overline], [data-md-list-item-description], [data-md-list-item-trailing], [data-md-list-item-icon]) {
color: var(--md-sys-color-on-surface-variant);
}
[data-md-list-item-leading],
[data-md-list-item-end] {
display: flex;
flex-shrink: 0;
align-items: center;
}
[data-md-list-item-end] {
gap: var(--md-sys-measurement-space50);
}
[data-md-list-item-video] {
flex-shrink: 0;
overflow: hidden;
border-radius: var(--md-sys-shape-corner-sm);
background-color: var(--md-sys-color-surface-container-highest);
& > * {
width: 100%;
height: 100%;
object-fit: cover;
}
}
[data-md-list-item-video][data-md-size='sm'] {
width: 100px;
height: 56px;
}
[data-md-list-item-video][data-md-size='lg'] {
width: 114px;
height: 64px;
}
[data-md-list-item-avatar] {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: var(--md-sys-shape-corner-full);
object-fit: cover;
}
span[data-md-list-item-avatar] {
display: grid;
place-items: center;
background-color: var(--md-sys-color-primary-container);
color: var(--md-sys-color-on-primary-container);
font: var(--md-sys-typescale-title-md);
letter-spacing: var(--md-sys-typescale-title-md-tracking);
}
[data-md-list-item-image] {
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: var(--md-sys-shape-corner-sm);
object-fit: cover;
}
[data-md-list-item-content] {
min-width: 0;
flex: 1 1 0%;
}
[data-md-list-item-overline] {
font: var(--md-sys-typescale-label-sm);
letter-spacing: var(--md-sys-typescale-label-sm-tracking);
}
[data-md-list-item-title] {
display: block;
overflow: hidden;
outline: none;
font: var(--md-sys-typescale-body-lg);
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
text-overflow: ellipsis;
white-space: nowrap;
}
[data-md-list-item-description] {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font: var(--md-sys-typescale-body-md);
letter-spacing: var(--md-sys-typescale-body-md-tracking);
}
[data-md-list-item-trailing] {
flex-shrink: 0;
font: var(--md-sys-typescale-label-sm);
letter-spacing: var(--md-sys-typescale-label-sm-tracking);
}
[data-md-list][data-md-dividers] > [data-md-list-item]:not(:last-child)::after {
content: '';
position: absolute;
inset-inline: var(--md-sys-measurement-space200);
bottom: 0;
height: 1px;
background-color: var(--md-sys-color-outline-variant);
pointer-events: none;
}
[data-md-list-row] {
cursor: pointer;
transition-property: background-color, border-radius;
transition-duration: var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-spatial-fast-duration);
transition-timing-function: var(--md-sys-motion-effects-fast), var(--md-sys-motion-spatial-fast);
}
@media (hover: hover) {
[data-md-list-row]:not([data-md-card]):hover:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-md-list-open]):hover)) {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}
}
[data-md-list-row]:not([data-md-card]):has([data-md-list-open]:focus-visible) {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
outline: 3px solid var(--md-sys-color-secondary);
outline-offset: -3px;
}
[data-md-list-row]:not([data-md-card]):active:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-md-list-open]):active)) {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
}
[data-md-list-row] [data-md-list-open]:focus-visible {
outline: none;
}
[data-md-list='segmented'] > [data-md-list-item] {
background-color: var(--md-sys-color-surface);
border-radius: var(--md-sys-shape-corner-xs);
}
[data-md-list='segmented'] > [data-md-list-item]:first-child {
border-start-start-radius: var(--md-sys-shape-corner-lg);
border-start-end-radius: var(--md-sys-shape-corner-lg);
}
[data-md-list='segmented'] > [data-md-list-item]:last-child {
border-end-start-radius: var(--md-sys-shape-corner-lg);
border-end-end-radius: var(--md-sys-shape-corner-lg);
}
@media (hover: hover) {
[data-md-list='segmented'] > [data-md-list-item][data-md-list-row]:hover {
border-radius: var(--md-sys-shape-corner-md);
}
}
[data-md-list='segmented'] > [data-md-list-item]:is([data-md-selected], [data-md-list-row]:active, [data-md-list-row]:has([data-md-list-open]:focus-visible)) {
border-radius: var(--md-sys-shape-corner-lg);
}
}
Reference in New Issue View Git Blame Copy Permalink