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
114 lines
3.8 KiB
CSS
114 lines
3.8 KiB
CSS
/*
|
|
* <x-progress>: M3 Expressive's progress indicator, drawn on the server for its first frame and
|
|
* frame by frame in the browser after.
|
|
*
|
|
* ProgressIndicatorTokens, LinearProgressIndicatorTokens, CircularProgressIndicatorTokens (androidx
|
|
* Compose Material 3, Apache-2.0): 4px stroke (`data-md-thick` 8px), linear 4px tall (8px thick,
|
|
* 10px `data-md-wavy`, 14px wavy thick — the container grows by the extra stroke, keeping the
|
|
* wave's own height put), circular 40px (44px thick, 48px wavy, 52px wavy thick). `data-md-color`
|
|
* is the active indicator's `color` and the track's `stroke`; the track is secondary-container for
|
|
* primary and secondary, and the colour's own container otherwise.
|
|
*
|
|
* Linear mirrors in a right-to-left document unconditionally — M3's own rule for this indicator,
|
|
* not the `mirror-rtl` a caller opts an icon into. The sizing here is a default only: an
|
|
* application's own class, unlayered or in Tailwind's `utilities` layer, always outranks
|
|
* `material.components`, so `w-*`/`size-*` still narrows or grows the indicator exactly as it did
|
|
* before this file existed.
|
|
*
|
|
* resources/js/progress.js reads and writes `data-md-value`, `data-md-max`, `data-md-circular`,
|
|
* `data-md-wavy` and `data-md-thick` — ProgressIndicator.kt, WavyProgressIndicator.kt and its
|
|
* Linear/CircularWavyProgressModifiers, ported at commit 27cf9a7d5788aa0f5f2d8b6699ce279560daf326
|
|
* — and draws every frame straight onto the SVG's own attributes; nothing here reads a class or
|
|
* runs a transition.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@layer material.components {
|
|
[data-md-progress] {
|
|
color: var(--md-sys-color-primary);
|
|
stroke: var(--md-sys-color-secondary-container);
|
|
|
|
& > svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
[data-md-progress]:not([data-md-circular]) {
|
|
display: block;
|
|
width: 100%;
|
|
height: 4px;
|
|
}
|
|
|
|
[data-md-progress]:not([data-md-circular]):is([dir='rtl'], [dir='rtl'] *) {
|
|
rotate: 180deg;
|
|
}
|
|
|
|
[data-md-progress]:not([data-md-circular])[data-md-thick] {
|
|
height: 8px;
|
|
}
|
|
|
|
[data-md-progress]:not([data-md-circular])[data-md-wavy] {
|
|
height: 10px;
|
|
}
|
|
|
|
[data-md-progress]:not([data-md-circular])[data-md-wavy][data-md-thick] {
|
|
height: 14px;
|
|
}
|
|
|
|
[data-md-progress][data-md-circular] {
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
vertical-align: middle;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
[data-md-progress][data-md-circular][data-md-thick] {
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
|
|
[data-md-progress][data-md-circular][data-md-wavy] {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
[data-md-progress][data-md-circular][data-md-wavy][data-md-thick] {
|
|
width: 52px;
|
|
height: 52px;
|
|
}
|
|
|
|
[data-md-progress][data-md-color='secondary'] {
|
|
color: var(--md-sys-color-secondary);
|
|
stroke: var(--md-sys-color-secondary-container);
|
|
}
|
|
|
|
[data-md-progress][data-md-color='tertiary'] {
|
|
color: var(--md-sys-color-tertiary);
|
|
stroke: var(--md-sys-color-tertiary-container);
|
|
}
|
|
|
|
[data-md-progress][data-md-color='error'] {
|
|
color: var(--md-sys-color-error);
|
|
stroke: var(--md-sys-color-error-container);
|
|
}
|
|
|
|
[data-md-progress][data-md-color='success'] {
|
|
color: var(--md-sys-color-success);
|
|
stroke: var(--md-sys-color-success-container);
|
|
}
|
|
|
|
[data-md-progress][data-md-color='warning'] {
|
|
color: var(--md-sys-color-warning);
|
|
stroke: var(--md-sys-color-warning-container);
|
|
}
|
|
|
|
[data-md-progress][data-md-color='info'] {
|
|
color: var(--md-sys-color-info);
|
|
stroke: var(--md-sys-color-info-container);
|
|
}
|
|
}
|