refactor admin CSS: replace utility classes with semantic styles
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>
2026-03-01 17:15:25 +00:00
|
|
|
/* 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;
|
|
|
|
|
}
|
|
|
|
|
|
complete admin CSS refactor: delete utilities.css, add layout primitives
- 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>
2026-03-01 21:40:21 +00:00
|
|
|
/* 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; }
|
|
|
|
|
|
refactor admin CSS: replace utility classes with semantic styles
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>
2026-03-01 17:15:25 +00:00
|
|
|
/* 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);
|
|
|
|
|
}
|
|
|
|
|
}
|
