noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep rail-collapsed: alive in Tailwind for scaffold.blade.php's one use

Browse Source 
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
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 00:12:01 +02:00
co-authored by Claude Sonnet 5
parent cbd7d01c62
commit 20b062846d
2 changed files with 48 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/tailwind.css
+47
View File
@@ -16,3 +16,50 @@
@import './tokens/theme.css'; @import './tokens/theme.css';
@import './tokens/utilities.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;
}
}
}
resources/views/components/theme-script.blade.php
+1 -1
View File
@@ -28,7 +28,7 @@
The rail rides along for the theme's reason: <html data-rail> is `expanded` or `collapsed` The rail rides along for the theme's reason: <html data-rail> is `expanded` or `collapsed`
(`livewire-material.rail.storage_key`, falling back to `rail.default`), and a collapsible (`livewire-material.rail.storage_key`, falling back to `rail.default`), and a collapsible
rail's width is CSS keyed on it (the `rail-collapsed:` variant). Set any later, a collapsed rail's width is CSS keyed on it directly (resources/css/components/navigation-rail.css). Set any later, a collapsed
rail would paint wide and snap shut on every load. `$store.rail` (resources/js/navigation.js) rail would paint wide and snap shut on every load. `$store.rail` (resources/js/navigation.js)
changes it. <html data-rail-auto> rides with it and says nothing was stored — the value is only changes it. <html data-rail-auto> rides with it and says nothing was stored — the value is only
`rail.default`, not a choice — so `<x-scaffold>`'s adaptive rail can start collapsed in the `rail.default`, not a choice — so `<x-scaffold>`'s adaptive rail can start collapsed in the