feat(ui): migrate to Tailwind UI and add result matrix tooling
This commit is contained in:
@@ -0,0 +1,198 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Work+Sans:wght@400;500;600&display=swap');
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--brand-50: #f4f8ff;
|
||||
--brand-100: #dfeafe;
|
||||
--brand-200: #b9d3ff;
|
||||
--brand-300: #8ab3ff;
|
||||
--brand-400: #5d91ff;
|
||||
--brand-500: #3b6cff;
|
||||
--brand-600: #2c53d3;
|
||||
--brand-700: #233da3;
|
||||
--brand-800: #1f2f73;
|
||||
--brand-900: #1a2552;
|
||||
--erp-font-family-base: 'Work Sans', sans-serif;
|
||||
--erp-title-size: 20px;
|
||||
--erp-title-weight: 600;
|
||||
--erp-title-style: normal;
|
||||
--erp-subtitle-size: 14px;
|
||||
--erp-subtitle-weight: 400;
|
||||
--erp-subtitle-style: normal;
|
||||
--erp-field-label-size: 12px;
|
||||
--erp-field-label-weight: 500;
|
||||
--erp-field-label-style: normal;
|
||||
--erp-field-input-size: 12px;
|
||||
--erp-field-input-weight: 400;
|
||||
--erp-field-input-style: normal;
|
||||
--erp-table-header-size: 11px;
|
||||
--erp-table-header-weight: 600;
|
||||
--erp-table-header-style: normal;
|
||||
--erp-table-cell-size: 12px;
|
||||
--erp-table-cell-weight: 400;
|
||||
--erp-table-cell-style: normal;
|
||||
--erp-button-size: 12px;
|
||||
--erp-button-weight: 600;
|
||||
--erp-button-style: normal;
|
||||
--erp-menu-size: 12px;
|
||||
--erp-menu-weight: 600;
|
||||
--erp-menu-style: normal;
|
||||
--erp-card-title-size: 13px;
|
||||
--erp-card-title-weight: 600;
|
||||
--erp-card-title-style: normal;
|
||||
--erp-body-size: 12px;
|
||||
--erp-body-weight: 400;
|
||||
--erp-body-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--erp-font-family-base);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(59, 108, 255, 0.2), transparent 40%),
|
||||
radial-gradient(circle at bottom right, rgba(26, 37, 82, 0.25), transparent 45%),
|
||||
linear-gradient(120deg, rgba(248, 250, 252, 0.9), rgba(241, 245, 249, 0.85));
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.layout {
|
||||
@apply min-h-screen;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
@apply sticky top-0 z-10 flex items-center justify-between border-b border-slate-200 bg-white/90 px-7 py-4 backdrop-blur;
|
||||
}
|
||||
|
||||
.brand {
|
||||
@apply flex items-center gap-3;
|
||||
}
|
||||
|
||||
.topbar h1 {
|
||||
font-size: var(--erp-title-size);
|
||||
font-weight: var(--erp-title-weight);
|
||||
font-style: var(--erp-title-style);
|
||||
}
|
||||
|
||||
.topbar nav a,
|
||||
.topbar nav button {
|
||||
@apply ml-3 inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-700 shadow-sm transition;
|
||||
}
|
||||
|
||||
.topbar nav a.active {
|
||||
@apply bg-brand-500 text-white;
|
||||
}
|
||||
|
||||
.content {
|
||||
@apply px-7 py-6;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply mb-4 rounded-2xl border border-slate-200 bg-white/90 p-5 shadow-sm;
|
||||
}
|
||||
|
||||
.login-image {
|
||||
@apply flex min-h-[240px] items-center justify-center;
|
||||
}
|
||||
|
||||
.login-image img {
|
||||
@apply w-full max-w-sm rounded-xl border border-slate-200 bg-white;
|
||||
}
|
||||
|
||||
.grid-layout {
|
||||
@apply grid gap-4 md:grid-cols-2 xl:grid-cols-4;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: var(--erp-button-size);
|
||||
font-weight: var(--erp-button-weight);
|
||||
font-style: var(--erp-button-style);
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: var(--erp-field-input-size);
|
||||
font-weight: var(--erp-field-input-weight);
|
||||
font-style: var(--erp-field-input-style);
|
||||
@apply w-full rounded-xl border border-slate-200 px-3 py-2;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: var(--erp-field-label-size);
|
||||
font-weight: var(--erp-field-label-weight);
|
||||
font-style: var(--erp-field-label-style);
|
||||
@apply text-slate-500;
|
||||
}
|
||||
|
||||
.table {
|
||||
@apply w-full border-collapse;
|
||||
}
|
||||
|
||||
.table th {
|
||||
font-size: var(--erp-table-header-size);
|
||||
font-weight: var(--erp-table-header-weight);
|
||||
font-style: var(--erp-table-header-style);
|
||||
@apply border-b border-slate-200 px-3 py-2 text-left text-slate-500;
|
||||
}
|
||||
|
||||
.table td {
|
||||
font-size: var(--erp-table-cell-size);
|
||||
font-weight: var(--erp-table-cell-weight);
|
||||
font-style: var(--erp-table-cell-style);
|
||||
@apply border-b border-slate-100 px-3 py-2 text-left;
|
||||
}
|
||||
|
||||
.subnav {
|
||||
@apply mb-4 flex gap-3 rounded-2xl border border-slate-200 bg-white/90 px-4 py-3 shadow-sm;
|
||||
}
|
||||
|
||||
.subnav button {
|
||||
@apply inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-700 shadow-sm;
|
||||
}
|
||||
|
||||
.subnav button.active {
|
||||
@apply bg-brand-500 text-white;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
@apply inline-flex h-10 w-10 items-center justify-center rounded-full border border-transparent shadow-sm;
|
||||
}
|
||||
|
||||
.action-btn i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.action-suspend {
|
||||
@apply bg-amber-400 text-amber-950;
|
||||
}
|
||||
|
||||
.action-activate {
|
||||
@apply bg-emerald-400 text-emerald-950;
|
||||
}
|
||||
|
||||
.action-save {
|
||||
@apply bg-brand-500 text-white;
|
||||
}
|
||||
|
||||
.action-report {
|
||||
@apply bg-sky-600 text-white;
|
||||
}
|
||||
|
||||
.action-delete {
|
||||
@apply bg-rose-600 text-white;
|
||||
}
|
||||
|
||||
.badge {
|
||||
@apply rounded-full bg-blue-50 px-2 py-1 text-xs font-semibold text-blue-700;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
@apply fixed inset-0 z-50 flex items-center justify-center bg-black/40;
|
||||
}
|
||||
|
||||
.modal {
|
||||
@apply w-[min(420px,90vw)] rounded-2xl border border-slate-200 bg-white p-6 shadow-xl;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user