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
23 lines
882 B
CSS
23 lines
882 B
CSS
/*
|
|
* <x-icon>: a Material Symbol at the size it is drawn.
|
|
*
|
|
* 24px unless `size` sets `--md-icon-size` (resources/views/components/icon.blade.php), which is
|
|
* M3's default icon size (docs/reference/m3/styles.md § Icons). The symbol never shrinks in a flex
|
|
* row, so a long label beside it cannot squeeze it. `data-md-mirror-rtl` flips a directional
|
|
* symbol in a right-to-left document (docs/reference/m3/foundations.md § Layout → bidirectionality).
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@layer material.components {
|
|
[data-md-icon] {
|
|
flex-shrink: 0;
|
|
inline-size: var(--md-icon-size, 24px);
|
|
block-size: var(--md-icon-size, 24px);
|
|
}
|
|
|
|
[data-md-icon][data-md-mirror-rtl]:is([dir='rtl'], [dir='rtl'] *) {
|
|
transform: scaleX(-1);
|
|
}
|
|
}
|