Andreas Reinhold / reiniandClaude Opus 5
83ed671c4e
tests / lint (push) Successful in 1m0s
tests / feature (8.4) (push) Successful in 1m10s
tests / feature (8.5) (push) Successful in 1m6s
tests / browser (chrome, chromium) (push) Successful in 3m28s
tests / browser (firefox, firefox) (push) Successful in 4m20s
tests / browser (safari, webkit) (push) Failing after 6m16s
A data table styled from descendant selectors, a Livewire sort header with aria-sort, and Laravel's and Livewire's full and simple paginators drawn in M3, put in front of their own views. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
79 lines
2.7 KiB
CSS
79 lines
2.7 KiB
CSS
/*
|
|
* Data tables: `<x-table>` (resources/views/components/table.blade.php), whose callers write plain
|
|
* `<thead>`, `<tr>`, `<th>` and `<td>` inside it.
|
|
*
|
|
* So the styling is descendant selectors on the one attribute the component sets, all inside
|
|
* `:where()` and `@layer components`: a caller's `text-end` or `whitespace-nowrap` on a cell always
|
|
* wins. Header cells in title-small on-surface-variant over an outline-variant rule, body cells in
|
|
* body-medium between faint rules. One density step tighter on a fine pointer — keyed on the
|
|
* pointer, not the width, so a touch tablet in landscape keeps rows a finger can hit. A row that
|
|
* opens something is `data-list-row` and answers a pointer as a list row does (components/list.css).
|
|
*/
|
|
|
|
@layer components {
|
|
/* `relative` makes the table the containing block for anything absolute inside it — an `sr-only`
|
|
header label, a tooltip. Without it they escape the scroll box and widen a phone's layout
|
|
viewport. */
|
|
[data-table] {
|
|
--cell-x: 0.75rem;
|
|
--cell-y: 0.75rem;
|
|
|
|
position: relative;
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
color: var(--md-sys-color-on-surface);
|
|
font: var(--md-sys-typescale-body-md);
|
|
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
|
}
|
|
|
|
[data-table][data-size="xs"] {
|
|
--cell-x: 0.5rem;
|
|
--cell-y: 0.5rem;
|
|
|
|
font: var(--md-sys-typescale-body-sm);
|
|
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
|
}
|
|
|
|
@media (pointer: fine) {
|
|
[data-table] {
|
|
--cell-y: 0.5rem;
|
|
}
|
|
|
|
[data-table][data-size="xs"] {
|
|
--cell-y: 0.25rem;
|
|
}
|
|
}
|
|
|
|
[data-table] :where(th, td) {
|
|
padding: var(--cell-y) var(--cell-x);
|
|
text-align: start;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
[data-table] :where(thead th) {
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-title-sm);
|
|
letter-spacing: var(--md-sys-typescale-title-sm-tracking);
|
|
white-space: nowrap;
|
|
border-bottom: 1px solid var(--md-sys-color-outline-variant);
|
|
}
|
|
|
|
[data-table][data-size="xs"] :where(thead th) {
|
|
font: var(--md-sys-typescale-label-md);
|
|
letter-spacing: var(--md-sys-typescale-label-md-tracking);
|
|
}
|
|
|
|
[data-table] :where(tbody tr) {
|
|
border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent);
|
|
}
|
|
|
|
[data-table] :where(tbody tr:last-child) {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
[data-table] :where(tbody tr[aria-selected="true"]) {
|
|
background-color: var(--md-sys-color-secondary-container);
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
}
|