Andreas Reinhold / reiniandClaude Opus 5
5cdeec26e8
<x-menu> renders data-md-menu with data-md-sheet-at-compact, and its popover data-md-menu-popover with data-md-position and data-md-vibrant; menu.css caps a long menu at 288px so it scrolls instead of running off the top layer (ACT-04) and ties the open/close transition to the trigger's corner (ACT-26), restyles a submenu to open in place inside a sheet-at-compact sheet, and still carries the dropdown a select's picker and a searchable choices field draw, so select.css and choices.css finish their step-36 TODO import. actions.css sheds the state-transition-fast and popover-transition utilities menu-item and menu no longer use; state-transition-default and [data-fab-menu] stay for fab-menu's own rewrite. data-menu, data-menu-filter, data-menu-sheet, data-menu-empty, data-sheet-at-compact, data-vibrant and data-active are renamed to data-md-*, also in menu.js, split-button.css (which renders a <x-menu> and now imports its stylesheet) and AppBarTest's overflow menu (plan step 36, actions). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
36 lines
1.3 KiB
CSS
36 lines
1.3 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';
|
|
|
|
/* Inputs, selection and data — leaving in step 36 */
|
|
@import './components/datepicker.css';
|
|
@import './components/timepicker.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';
|