b7ec41b0cf
Replace Tailwind utility soup across admin templates with semantic CSS classes. Add layout primitives (stack, row, cluster, grid), extract JS transition helpers into transitions.css, and refactor core_components, layouts, settings, newsletter, order_show, providers, and theme editor templates. Utility occurrences reduced from 290+ to 127 across admin files. All 1679 tests pass. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
37 lines
977 B
CSS
37 lines
977 B
CSS
/* Admin layout primitives — composable building blocks mirroring shop/layout.css.
|
|
Each primitive does one layout job. Combine freely via CSS custom properties. */
|
|
|
|
@layer admin {
|
|
/* Vertical stack with consistent gap */
|
|
.admin-stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--admin-stack-gap, 1rem);
|
|
}
|
|
|
|
/* Horizontal flex row, no wrap — toolbars, inline groups, header bars */
|
|
.admin-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--admin-row-gap, 0.5rem);
|
|
}
|
|
|
|
/* Horizontal flex-wrap cluster — tags, badges, button groups */
|
|
.admin-cluster {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--admin-cluster-gap, 0.5rem);
|
|
align-items: center;
|
|
}
|
|
|
|
/* Intrinsic responsive grid — cards, media thumbnails */
|
|
.admin-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(
|
|
auto-fill,
|
|
minmax(min(var(--admin-grid-min, 16rem), 100%), 1fr)
|
|
);
|
|
gap: var(--admin-grid-gap, 1rem);
|
|
}
|
|
}
|