Andreas Reinhold / reiniandClaude Sonnet 5
c887bcd054
Plan step 36 (containment group): <x-divider> moves its class lists into resources/css/components/divider.css, keyed on data-md-divider, data-md-orientation, data-md-inset/middle and data-md-divider-heading/ -text for the subheader form (DividerTokens.kt; docs/reference/m3 § Divider). Imported from the Containment block of components.css. Hooks renamed: none of divider's own (it had no data-* hooks before), but its rendered attribute order moved data-md-* ahead of role/aria-*, which ToolbarTest.php's regex for a toolbar's vertical divider depended on; fixed in the same commit. form.css picks up the @import './divider.css' its TODO(step 36) marker was waiting on, since form.blade.php renders <x-divider> and divider.css now carries the material.components layer. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
76 lines
2.8 KiB
CSS
76 lines
2.8 KiB
CSS
/*
|
|
* <x-divider>: M3's divider (DividerTokens.kt, androidx Compose Material 3, Apache-2.0) — a single
|
|
* 1px outline-variant line, full-width by default, `data-md-inset` 16px from the start or
|
|
* `data-md-middle` 16px from both ends (docs/reference/m3/components-actions-communication-containment.md
|
|
* § Divider → Specs: "Divider inset left margin 16dp", "Divider middle-inset left/right margin
|
|
* 16dp"). A vertical divider (`data-md-orientation="vertical"`) stretches the height of its row
|
|
* instead of drawing a width.
|
|
*
|
|
* `data-md-divider-heading` draws the divider with a subheader, M3's way to head a group in a list
|
|
* or a menu: the words lead, 4px of gap to the rule that runs on from them, 8px short of the end
|
|
* and 8px above the next row (the same section's "Space between divider & supporting text 4dp",
|
|
* "Divider right margin 8dp", "Divider bottom margin 8dp"). The label, `data-md-divider-text`, is
|
|
* the rich tooltip's subhead type — title-small in on-surface-variant — since the divider's own
|
|
* page names no type role for it.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@layer material.components {
|
|
[data-md-divider] {
|
|
flex-shrink: 0;
|
|
background-color: var(--md-sys-color-outline-variant);
|
|
}
|
|
|
|
[data-md-divider][data-md-orientation='horizontal'] {
|
|
width: auto;
|
|
height: 1px;
|
|
}
|
|
|
|
[data-md-divider][data-md-orientation='vertical'] {
|
|
width: 1px;
|
|
align-self: stretch;
|
|
}
|
|
|
|
[data-md-divider][data-md-orientation='horizontal'][data-md-inset] {
|
|
margin-inline-start: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-divider][data-md-orientation='horizontal'][data-md-middle] {
|
|
margin-inline: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-divider][data-md-orientation='vertical'][data-md-middle] {
|
|
margin-block: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-divider-heading] {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space50);
|
|
padding-bottom: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-divider-heading][data-md-inset] {
|
|
margin-inline-start: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-divider-heading][data-md-middle] {
|
|
margin-inline: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-divider-text] {
|
|
flex-shrink: 0;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-title-sm);
|
|
letter-spacing: var(--md-sys-typescale-title-sm-tracking);
|
|
}
|
|
|
|
[data-md-divider-heading] [data-md-divider] {
|
|
flex: 1 1 0%;
|
|
min-width: 0;
|
|
margin-inline-end: var(--md-sys-measurement-space100);
|
|
}
|
|
}
|