mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-29 00:05:01 +00:00
JohnDoe6345789
58a94d0489
feat(styles): create global styles entry point and organize global styles feat(styles): implement base HTML element styles and utility classes for flexbox feat(styles): establish layout, position, spacing, and text utility classes feat(styles): introduce mixins for animations, cards, dialogs, flexbox, grid, and responsive design test(quick_guide): add component and metadata validation tests for quick_guide package test(ui_level6): implement metadata validation tests for ui_level6 package
28 lines
630 B
SCSS
28 lines
630 B
SCSS
// Grid atom - responsive grid layouts
|
|
|
|
.grid {
|
|
display: grid;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.grid--sm { gap: var(--spacing-sm); }
|
|
.grid--lg { gap: var(--spacing-lg); }
|
|
|
|
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
|
|
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
|
|
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
|
|
|
|
.auto-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.auto-grid--sm {
|
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
}
|
|
|
|
.auto-grid--lg {
|
|
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
|
}
|