Andreas Reinhold / reiniandClaude Opus 5
c68a1fdbef
<x-sort-header> renders data-md-sort-header (data-md-active on the sorted column) with its button and arrow as data-md-* attributes; the button keeps md-focus-ring and md-touch-target, the arrow takes size 16, and the hover and hint-arrow states move into components/sort-header.css (plan step 36). A browser test presses the button at the edge of its 48px target. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
59 lines
2.2 KiB
CSS
59 lines
2.2 KiB
CSS
/*
|
|
* <x-sort-header>: a column header that sorts the table (resources/views/components/sort-header.blade.php),
|
|
* inside <x-table> (components/table.css), which draws the cell itself.
|
|
*
|
|
* The button is the header's own text, in the header cell's type and colour, with a 16px arrow 4px
|
|
* after it; the corner is extra-small, for the focus ring the button wears (`md-focus-ring`), and
|
|
* `md-touch-target` gives the one-line button M3's 48px target (foundation/interaction.css). The
|
|
* sorted column (`data-md-active`) reads in on-surface with its arrow showing the direction; another
|
|
* column turns on-surface only while hovered, and shows a faint upward arrow while hovered or
|
|
* focused, at 60% of the ink — a hint of what pressing would do, not a state M3 names, fading on the
|
|
* fast effects spring.
|
|
*
|
|
* [data-md-sort-header] the <th>; data-md-active, aria-sort
|
|
* [data-md-sort-header-button]
|
|
* [data-md-sort-header-arrow]
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@import './icon.css';
|
|
|
|
@layer material.components {
|
|
[data-md-sort-header-button] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space50);
|
|
border-radius: var(--md-sys-shape-corner-xs);
|
|
cursor: pointer;
|
|
}
|
|
|
|
[data-md-sort-header][data-md-active] [data-md-sort-header-button] {
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
[data-md-sort-header-button]:hover {
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
}
|
|
|
|
[data-md-sort-header-arrow] {
|
|
transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
[data-md-sort-header]:not([data-md-active]) [data-md-sort-header-arrow] {
|
|
opacity: 0;
|
|
}
|
|
|
|
[data-md-sort-header]:not([data-md-active]) [data-md-sort-header-button]:focus-visible [data-md-sort-header-arrow] {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
[data-md-sort-header]:not([data-md-active]) [data-md-sort-header-button]:hover [data-md-sort-header-arrow] {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
}
|