Andreas Reinhold / reiniandClaude Opus 5
6c7414d60e
Plan step 36. <x-loading> renders data-md-loading and data-md-contained, and loading.css in material.components draws the 48px indicator in primary, the contained circle and the still shape under reduced motion. The view no longer reads the caller's classes to decide its size and colour: a caller's utility outranks the package's layer on its own. ActionStylesheetsTest checks the group's stylesheets for the package's shape (layer statement, plain imports, material.components, tokens, px breakpoints, imports of rendered components) and its views for class lists; tests/Support/ComponentStylesheet reads a rule's declarations. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
54 lines
1.9 KiB
CSS
54 lines
1.9 KiB
CSS
/*
|
|
* <x-loading>: M3 Expressive's loading indicator, a shape that morphs through seven Expressive
|
|
* shapes while it turns, for a wait with no known length.
|
|
*
|
|
* The drawing is resources/svg/loading-indicator/, ported from androidx Compose Material 3's
|
|
* LoadingIndicator in bin/loading-indicator.mjs (Apache-2.0): LoadingIndicatorTokens' 38px
|
|
* indicator in a 48px container, which is the size here unless the caller's CSS sizes it. It is
|
|
* drawn in the text colour, `primary` (ActiveIndicatorColor) unless the caller colours it;
|
|
* `contained` puts it on a `primary-container` circle in `on-primary-container`
|
|
* (ContainedContainerColor, ContainedIndicatorColor), for a spinner over content.
|
|
*
|
|
* The animated drawing is SMIL, so it runs without script. Under `prefers-reduced-motion` the
|
|
* still drawing of the same shape takes its place: the view renders both, and this file shows one.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@layer material.components {
|
|
[data-md-loading] {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: 48px;
|
|
block-size: 48px;
|
|
color: var(--md-sys-color-primary);
|
|
|
|
& > svg {
|
|
inline-size: 100%;
|
|
block-size: 100%;
|
|
}
|
|
|
|
& > [data-md-loading-still] {
|
|
display: none;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
& > [data-md-loading-animated] {
|
|
display: none;
|
|
}
|
|
|
|
& > [data-md-loading-still] {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-md-loading][data-md-contained] {
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--md-sys-color-primary-container);
|
|
color: var(--md-sys-color-on-primary-container);
|
|
}
|
|
}
|