ae6cf209aa
- Delete utilities.css (701 lines / 24 KB of Tailwind utility clones) - Add layout.css with admin-stack, admin-row, admin-cluster, admin-grid primitives and gap variants (sm, md, lg, xl) - Add transitions.css import and layout.css import to admin.css entry point - Replace all Tailwind utility classes across 26 admin templates with semantic admin-*/theme-*/page-specific CSS classes - Replace all non-dynamic inline styles with semantic classes - Add ~100 new semantic classes to components.css (analytics, dashboard, order detail, settings, theme editor, generic utilities) - Fix stray text-error → admin-text-error in media.ex - Add missing .truncate definition to admin CSS - Only remaining inline styles are dynamic data values (progress bars, chart dimensions) and one JS.toggle target Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
46 lines
1.2 KiB
CSS
46 lines
1.2 KiB
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;
|
|
}
|
|
|
|
/* Stack gap variants */
|
|
.admin-stack-sm { --admin-stack-gap: 0.5rem; }
|
|
.admin-stack-md { --admin-stack-gap: 0.75rem; }
|
|
.admin-stack-lg { --admin-stack-gap: 1.5rem; }
|
|
.admin-stack-xl { --admin-stack-gap: 2rem; }
|
|
|
|
/* Row gap variants */
|
|
.admin-row-lg { --admin-row-gap: 0.75rem; }
|
|
|
|
/* 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);
|
|
}
|
|
}
|