Andreas Reinhold / reiniandClaude Sonnet 5
58ef33dc95
Plan step 39 (part 4). With Tailwind gone the Workbench's Vite build still turns every `:dir(rtl)` into a long `:lang()` list (its own CSS minifier, not Tailwind's doing — confirmed by rebuilding and grepping the output). Every RTL mirror rule across the eleven stylesheets that had one now selects `:is([dir='rtl'], [dir='rtl'] *)` instead, matching `:dir(rtl)`'s own specificity (one pseudo-class) and its inherited "this element or a descendant of one carrying the attribute" reach; the built CSS now keeps the selector as written (no `:lang(` or `:dir(` left). RTL browser tests drop the `lang="ar"` workaround the old rewrite needed (ContainmentTest's side-sheet probe, LayoutTest's shared layoutPage() helper) and set only dir="rtl"; CarouselTest's probe already did. Feature tests asserting the selector's literal text (Progress, Overlay, Menu, ListDetail, Icon, Carousel) updated to match. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
91 lines
3.5 KiB
CSS
91 lines
3.5 KiB
CSS
/*
|
||
* <x-list-detail>: M3's list-detail canonical layout — a list, and the detail of what it selected.
|
||
*
|
||
* Its visible-panes table, row by row (docs/reference/m3/foundations-supplement.md § Canonical
|
||
* layouts → List-detail):
|
||
*
|
||
* Compact (0–599) 1 pane list, or the detail once something is selected
|
||
* Medium (600–839) 1 or 2 1, M3's recommendation for a layout that is not low-density
|
||
* Expanded (840+) 2 list and detail side by side
|
||
* Large (1200–1599) 2 the same
|
||
* Extra-large (1600+) 2 the same
|
||
*
|
||
* Below 840px one pane shows: the list while `data-md-selected` is absent, the detail while it is
|
||
* there, with a back button — M3: "a Back button appears in the detail view only for single-pane
|
||
* layouts". From 840px the list is a fixed pane and the detail flexible, 24px apart: the fixed pane
|
||
* is 360dp at expanded and 412dp from large (§ Breakpoints, "fixed-and-flexible layout's fixed pane
|
||
* defaults to 360dp" at expanded and "412dp" at large and extra-large; 24dp margins and spacer),
|
||
* and every back button inside is hidden. Grid columns run in the inline direction, so in a
|
||
* right-to-left document the list is on the right — the mirror M3 requires of every canonical
|
||
* layout (docs/reference/m3/foundations.md § Layout → Bidirectionality / RTL) — and the back arrow
|
||
* turns with it.
|
||
*
|
||
* The layout keeps its content off the window's edge by M3's margin (16px below medium, 24px from
|
||
* it) unless it is inside something that already does (`--md-layout-margin`, pane.css), and tells
|
||
* what is inside it that the margin is drawn. A pane that is focused as a whole draws no outline:
|
||
* it is not a control, and the element focus lands on inside it is what shows the ring.
|
||
*
|
||
* In `material.layout`; the state and focus are resources/js/layout.js. Imports button.css for the
|
||
* detail pane's back button.
|
||
*/
|
||
|
||
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
||
|
||
@import './visibility.css';
|
||
@import '../components/button.css';
|
||
|
||
@layer material.layout {
|
||
[data-md-list-detail] {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr);
|
||
align-items: start;
|
||
padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space200));
|
||
|
||
@media (width >= 600px) {
|
||
padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space300));
|
||
}
|
||
|
||
@media (width >= 840px) {
|
||
grid-template-columns: 360px minmax(0, 1fr);
|
||
column-gap: var(--md-sys-measurement-space300);
|
||
}
|
||
|
||
@media (width >= 1200px) {
|
||
grid-template-columns: 412px minmax(0, 1fr);
|
||
}
|
||
}
|
||
|
||
[data-md-list-detail] > * {
|
||
--md-layout-margin: 0px;
|
||
}
|
||
|
||
[data-md-list-detail-pane] {
|
||
min-inline-size: 0;
|
||
outline: none;
|
||
}
|
||
|
||
[data-md-list-detail-back-row] {
|
||
display: flex;
|
||
align-items: center;
|
||
min-block-size: var(--md-sys-measurement-space800);
|
||
}
|
||
|
||
[data-md-list-detail-back] [data-md-icon]:is([dir='rtl'], [dir='rtl'] *) {
|
||
transform: scaleX(-1);
|
||
}
|
||
|
||
@media (width < 840px) {
|
||
[data-md-list-detail]:not([data-md-selected]) > [data-md-list-detail-pane='detail'],
|
||
[data-md-list-detail][data-md-selected] > [data-md-list-detail-pane='list'] {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (width >= 840px) {
|
||
[data-md-list-detail-back-row],
|
||
[data-md-list-detail] [data-md-list-detail-back] {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|