Andreas Reinhold / reiniandClaude Sonnet 5
20b062846d
Plan step 36 follow-up. Deleting navigation.css also deleted the only definition of the rail-collapsed: custom variant, which scaffold.blade.php's data-app-shell-actions row still uses (rail-collapsed:flex-col) — scaffold's own rewrite is a later batch, so it is still Tailwind. Left alone, that class would silently stop matching anything. The definition moves into tailwind.css, updated to the data-md-* hooks navigation-rail.css now renders (data-rail and data-rail-auto are unchanged, so those branches needed nothing); otherwise it reproduces the same seven branches navigation-rail.css's own header documents, so the two cannot drift silently in what "collapsed" means. It goes with the scaffold's own rewrite. theme-script.blade.php's doc comment, which named the old variant, now points at navigation-rail.css directly. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
66 lines
2.8 KiB
CSS
66 lines
2.8 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';
|
|
|
|
/*
|
|
* `rail-collapsed:` — Tailwind's, for the one class left that needs it:
|
|
* scaffold.blade.php's `data-app-shell-actions` row (`rail-collapsed:flex-col`), stacking the
|
|
* footer's icon buttons once the rail they sit in narrows. The definition used to live in
|
|
* navigation.css; that file is gone (plan step 36, navigation group), so this is what is left of
|
|
* it — updated to the `data-md-*` hooks navigation-rail.css now renders, otherwise identical to
|
|
* every branch that file's own header still documents. Goes with the scaffold's own rewrite,
|
|
* whenever `data-app-shell-actions` stops being a Tailwind class list.
|
|
*/
|
|
@custom-variant rail-collapsed {
|
|
&:where([data-md-navigation-rail='collapsed'], [data-md-navigation-rail='collapsed'] *) {
|
|
@slot;
|
|
}
|
|
|
|
&:where([data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]), [data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *) {
|
|
@slot;
|
|
}
|
|
|
|
&:where([data-md-navigation-rail='modal']:not([data-md-open]), [data-md-navigation-rail='modal']:not([data-md-open]) *) {
|
|
@slot;
|
|
}
|
|
|
|
@media (width < 600px) {
|
|
&:where([data-md-navigation-rail='collapsible']:not([data-md-open]), [data-md-navigation-rail='collapsible']:not([data-md-open]) *) {
|
|
@slot;
|
|
}
|
|
}
|
|
|
|
@media (width < 840px) {
|
|
&:where([data-md-navigation-rail='adaptive']:not([data-md-open]), [data-md-navigation-rail='adaptive']:not([data-md-open]) *) {
|
|
@slot;
|
|
}
|
|
}
|
|
|
|
@media (840px <= width < 1200px) {
|
|
&:where(:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]), :is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]) *) {
|
|
@slot;
|
|
}
|
|
}
|
|
|
|
@media (width >= 1200px) {
|
|
&:where([data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]), [data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]) *) {
|
|
@slot;
|
|
}
|
|
}
|
|
}
|