Files
livewire-material/resources/css/tailwind.css
T
Andreas Reinhold / reiniandClaude Opus 5 2a4dcead3d Draw the split button without Tailwind
Plan step 36. <x-split-button> renders data-md-split-button and
data-md-size on the pair and data-md-split on its halves. split-button.css
draws SplitButton*Tokens' shape — full outer corners, inner corners that
grow under the finger, the trailing half round while its menu is open —
the narrower leading padding and 48px trailing half at xs and sm, and the
chevron's own size, nudge and turn on the standard scheme. groups.css is
empty and leaves tailwind.css.

The actions browser test follows data-md-split and data-md-button-group,
and gains the owed tests for a connected segment's 48px edge and a
button group's single-required and multi selection.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
2026-09-14 15:03:02 +02:00

41 lines
1.5 KiB
CSS

/*
* Livewire Material's Tailwind half: the theme that turns the tokens into utilities, the token
* utilities, and the component stylesheets still written for Tailwind (`@utility`, `@variant`,
* `@layer components`). It goes when the last component leaves Tailwind.
*
* It carries no tokens, so it can sit behind the foundation without declaring them twice — the
* Workbench imports it that way, after Tailwind:
*
* @import '../../../resources/css/foundation.css';
* @import 'tailwindcss' source(none);
* @import '../../../resources/css/tailwind.css';
*
* An application on 1.x-style imports keeps importing material.css, which brings the tokens and
* this file together.
*/
@import './tokens/theme.css';
@import './tokens/utilities.css';
/* Actions and communication — leaving in step 36 */
@import './components/actions.css';
@import './components/menu.css';
/* Inputs, selection and data — leaving in step 36 */
@import './components/field.css';
@import './components/selection.css';
@import './components/search.css';
@import './components/datepicker.css';
@import './components/timepicker.css';
@import './components/table.css';
/* Containment — leaving in step 36 */
@import './components/list.css';
@import './components/collapse.css';
@import './components/dialog.css';
/* Navigation — leaving in step 36 */
@import './components/tabs.css';
@import './components/app-bar.css';
@import './components/navigation.css';
@import './components/toolbar.css';