Andreas Reinhold / reiniandClaude Opus 5
8dd0a7ef9d
Plan step 36. <x-button-group> renders data-md-button-group (standard or connected), data-md-size, data-md-shape and, with a selection, data-md-selection and data-md-selection-required. button-group.css now also draws the standard group: its gaps per size, the square corner scale it hands its buttons, and the press expansion that widens a pressed label button while its neighbours give way. groups.css keeps only the split button until that is rewritten too. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
82 lines
3.7 KiB
CSS
82 lines
3.7 KiB
CSS
/*
|
|
* Split buttons: shapes that depend on a button's place beside its other half. Button groups and
|
|
* `<x-group>` draw theirs from resources/css/components/button-group.css.
|
|
*
|
|
* Unlayered on purpose, until the split button leaves Tailwind too.
|
|
*
|
|
* Split button (`<x-split-button>`): two halves on their own corner scale — SplitButton*Tokens
|
|
* gives the inner corner 4/4/4/8/12px at rest and *grows* it to 8/12/12/20/20px under the finger,
|
|
* the opposite of a connected group. The trailing half turns round and its chevron turns over
|
|
* while its menu is open, on M3's standard scheme rather than the expressive springs (the site:
|
|
* "the trailing button uses the standard motion scheme, not expressive, when rotating"), and the
|
|
* chevron sits a little towards the leading half so the pair reads as one control
|
|
* (`--split-nudge`: 1/1/2/3/6px). `--split-icon` is the trailing icon's own size,
|
|
* 22/22/26/38/50px, which the icon-button table does not know about.
|
|
*
|
|
* "Full" here is half the size's height (`--group-full`), never `--md-sys-shape-corner-full`'s
|
|
* 9999px: when a box's radii add up to more than its side, CSS scales every radius by the same
|
|
* factor, and a 9999px corner beside an 8px one drew the inner corners square.
|
|
*/
|
|
|
|
[data-button-group] {
|
|
--group-full: 1.25rem;
|
|
--group-outer: var(--group-full);
|
|
}
|
|
|
|
[data-button-group][data-size='xs'] { --group-full: 1rem; }
|
|
[data-button-group][data-size='md'] { --group-full: 1.75rem; }
|
|
[data-button-group][data-size='lg'] { --group-full: 3rem; }
|
|
[data-button-group][data-size='xl'] { --group-full: 4.25rem; }
|
|
|
|
[data-button-group='split'] { --split-inner: var(--md-sys-shape-corner-xs); --split-inner-pressed: var(--md-sys-shape-corner-md); --split-icon: 22px; --split-nudge: 1px; }
|
|
[data-button-group='split'][data-size='xs'] { --split-inner-pressed: var(--md-sys-shape-corner-sm); }
|
|
[data-button-group='split'][data-size='md'] { --split-icon: 26px; --split-nudge: 2px; }
|
|
[data-button-group='split'][data-size='lg'] { --split-inner: var(--md-sys-shape-corner-sm); --split-inner-pressed: var(--md-sys-shape-corner-lg-increased); --split-icon: 38px; --split-nudge: 3px; }
|
|
[data-button-group='split'][data-size='xl'] { --split-inner: var(--md-sys-shape-corner-md); --split-inner-pressed: var(--md-sys-shape-corner-lg-increased); --split-icon: 50px; --split-nudge: 6px; }
|
|
|
|
/* The halves take their inner corner from `--group-corner`, so pressing changes one variable and
|
|
the rounded outer corners stay put. */
|
|
[data-split] {
|
|
--group-corner: var(--split-inner);
|
|
|
|
border-start-start-radius: var(--group-corner);
|
|
border-end-start-radius: var(--group-corner);
|
|
border-start-end-radius: var(--group-corner);
|
|
border-end-end-radius: var(--group-corner);
|
|
}
|
|
|
|
[data-split]:active {
|
|
--group-corner: var(--split-inner-pressed);
|
|
}
|
|
|
|
[data-split='trailing'][aria-expanded='true'] {
|
|
--group-corner: var(--group-full);
|
|
}
|
|
|
|
[data-split='leading'] {
|
|
border-start-start-radius: var(--group-outer);
|
|
border-end-start-radius: var(--group-outer);
|
|
}
|
|
|
|
[data-split='trailing'] {
|
|
border-start-end-radius: var(--group-outer);
|
|
border-end-end-radius: var(--group-outer);
|
|
}
|
|
|
|
/*
|
|
* The trailing chevron: its own size, and `--split-nudge` off centre towards the leading half —
|
|
* equal and opposite margins move it by exactly that much inside a centred flex row, in whichever
|
|
* direction the writing mode runs.
|
|
*/
|
|
[data-split='trailing'] svg {
|
|
width: var(--split-icon);
|
|
height: var(--split-icon);
|
|
margin-inline-start: calc(-1 * var(--split-nudge));
|
|
margin-inline-end: var(--split-nudge);
|
|
transition: rotate var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
|
|
}
|
|
|
|
[data-split='trailing'][aria-expanded='true'] svg {
|
|
rotate: 180deg;
|
|
}
|