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
65 lines
1.8 KiB
CSS
65 lines
1.8 KiB
CSS
/*
|
|
* `hide-below` and `hide-from`, the visibility props every layout component takes.
|
|
*
|
|
* The breakpoints are M3's (docs/reference/m3/foundations.md § Layout → Breakpoints): compact below
|
|
* 600px, medium 600, expanded 840, large 1200, extra-large 1600, in px — a dp is a CSS pixel, so a
|
|
* larger text size never moves them. `data-md-hide-below="expanded"` hides an element on a window
|
|
* narrower than 840px; `data-md-hide-from="expanded"` hides it from 840px on. There is nothing
|
|
* below compact and from compact is every width, so neither names it; `hidden` does that.
|
|
*
|
|
* In `material.visibility`, the last layer, so it beats the `display` of the component it sits on
|
|
* and of every other package rule. An application's own unlayered rule still wins, by design.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@layer material.visibility {
|
|
@media (width < 600px) {
|
|
[data-md-hide-below='medium'] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (width < 840px) {
|
|
[data-md-hide-below='expanded'] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (width < 1200px) {
|
|
[data-md-hide-below='large'] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (width < 1600px) {
|
|
[data-md-hide-below='extra-large'] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (width >= 600px) {
|
|
[data-md-hide-from='medium'] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (width >= 840px) {
|
|
[data-md-hide-from='expanded'] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (width >= 1200px) {
|
|
[data-md-hide-from='large'] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (width >= 1600px) {
|
|
[data-md-hide-from='extra-large'] {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|