Andreas Reinhold / reiniandClaude Opus 5
b677e60876
Plan step 35: <x-stack gap align>, the first of M3's layout components, with what they all share - src/Support/Layout.php reading the props into data-md-* attributes, the spacing-token gap and padding rules, the hide-below/hide-from rules in material.visibility, the stylesheet checks for resources/css/layout, the browser test file and the skill's Layout group. The Workbench puts the material layers above Tailwind's preflight, which would otherwise zero every layout padding and margin. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
127 lines
3.4 KiB
CSS
127 lines
3.4 KiB
CSS
/*
|
|
* Gap and padding, the two spacing props of the layout components, on M3's measurement scale.
|
|
*
|
|
* Both take only a token's name — `data-md-gap="space200"`, `data-md-padding="space300"` — and the
|
|
* value is that token, `--md-sys-measurement-space200` (docs/reference/m3/styles-supplement.md
|
|
* § Spacing; resources/css/tokens/spacing.css). A name the scale does not have renders as `none`
|
|
* (src/Support/Layout.php): no gap, and no padding.
|
|
*
|
|
* A gap is written to `--md-gap`, not to `gap` itself: the stack, row, grid and feed read it (a
|
|
* grid also counts it into a column's width), and each resets it on itself at zero specificity, so
|
|
* an arrangement nested in another never inherits its parent's gap. Padding goes on directly.
|
|
*
|
|
* In `material.layout`, under every component.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@layer material.layout {
|
|
[data-md-gap='none'] {
|
|
--md-gap: 0px;
|
|
}
|
|
|
|
[data-md-gap='space25'] {
|
|
--md-gap: var(--md-sys-measurement-space25);
|
|
}
|
|
|
|
[data-md-gap='space50'] {
|
|
--md-gap: var(--md-sys-measurement-space50);
|
|
}
|
|
|
|
[data-md-gap='space75'] {
|
|
--md-gap: var(--md-sys-measurement-space75);
|
|
}
|
|
|
|
[data-md-gap='space100'] {
|
|
--md-gap: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-gap='space125'] {
|
|
--md-gap: var(--md-sys-measurement-space125);
|
|
}
|
|
|
|
[data-md-gap='space200'] {
|
|
--md-gap: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-gap='space300'] {
|
|
--md-gap: var(--md-sys-measurement-space300);
|
|
}
|
|
|
|
[data-md-gap='space400'] {
|
|
--md-gap: var(--md-sys-measurement-space400);
|
|
}
|
|
|
|
[data-md-gap='space500'] {
|
|
--md-gap: var(--md-sys-measurement-space500);
|
|
}
|
|
|
|
[data-md-gap='space600'] {
|
|
--md-gap: var(--md-sys-measurement-space600);
|
|
}
|
|
|
|
[data-md-gap='space700'] {
|
|
--md-gap: var(--md-sys-measurement-space700);
|
|
}
|
|
|
|
[data-md-gap='space800'] {
|
|
--md-gap: var(--md-sys-measurement-space800);
|
|
}
|
|
|
|
[data-md-gap='space900'] {
|
|
--md-gap: var(--md-sys-measurement-space900);
|
|
}
|
|
|
|
[data-md-padding='space25'] {
|
|
padding: var(--md-sys-measurement-space25);
|
|
}
|
|
|
|
[data-md-padding='space50'] {
|
|
padding: var(--md-sys-measurement-space50);
|
|
}
|
|
|
|
[data-md-padding='space75'] {
|
|
padding: var(--md-sys-measurement-space75);
|
|
}
|
|
|
|
[data-md-padding='space100'] {
|
|
padding: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-padding='space125'] {
|
|
padding: var(--md-sys-measurement-space125);
|
|
}
|
|
|
|
[data-md-padding='space200'] {
|
|
padding: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-padding='space300'] {
|
|
padding: var(--md-sys-measurement-space300);
|
|
}
|
|
|
|
[data-md-padding='space400'] {
|
|
padding: var(--md-sys-measurement-space400);
|
|
}
|
|
|
|
[data-md-padding='space500'] {
|
|
padding: var(--md-sys-measurement-space500);
|
|
}
|
|
|
|
[data-md-padding='space600'] {
|
|
padding: var(--md-sys-measurement-space600);
|
|
}
|
|
|
|
[data-md-padding='space700'] {
|
|
padding: var(--md-sys-measurement-space700);
|
|
}
|
|
|
|
[data-md-padding='space800'] {
|
|
padding: var(--md-sys-measurement-space800);
|
|
}
|
|
|
|
[data-md-padding='space900'] {
|
|
padding: var(--md-sys-measurement-space900);
|
|
}
|
|
}
|