293df10590
Add a shadcn-inspired tasks list recipe (src/recipes/tasks.cljc) that composes card, table, badge, button, form, and icon components into a full task management page with toolbar, data table, and pagination. Add :size :sm prop to the badge component for compact inline labels used in the tasks table. Small badges have tighter padding, smaller font, and full pill border-radius. Wire the tasks page into all three dev targets (hiccup, replicant, squint) with navigation and routing. Add small badge demos to the components overview in all targets.
117 lines
2.5 KiB
CSS
117 lines
2.5 KiB
CSS
/* ── Tasks Recipe ─────────────────────────────────────────────────── */
|
|
/* Styles for the Tasks List recipe (shadcn-inspired). */
|
|
|
|
.tasks-page {
|
|
max-width: 64rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.tasks-heading {
|
|
margin: 0;
|
|
font-size: var(--font-lg);
|
|
font-weight: 700;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
/* ── Toolbar ─────────────────────────────────────────────────────── */
|
|
|
|
.tasks-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--size-3);
|
|
margin-bottom: var(--size-4);
|
|
}
|
|
|
|
.tasks-toolbar-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-2);
|
|
flex: 1;
|
|
}
|
|
|
|
.tasks-toolbar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-2);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasks-search {
|
|
max-width: 16rem;
|
|
}
|
|
|
|
/* ── Table overrides ─────────────────────────────────────────────── */
|
|
|
|
.tasks-table {
|
|
font-size: var(--font-sm);
|
|
}
|
|
|
|
.tasks-cell-checkbox {
|
|
width: var(--size-10);
|
|
padding-left: var(--size-3);
|
|
padding-right: 0;
|
|
}
|
|
|
|
.tasks-cell-id {
|
|
width: 6rem;
|
|
white-space: nowrap;
|
|
font-size: var(--font-xs);
|
|
}
|
|
|
|
.tasks-cell-label {
|
|
width: 8rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tasks-cell-title {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tasks-cell-status {
|
|
width: 8rem;
|
|
}
|
|
|
|
.tasks-cell-priority {
|
|
width: 6rem;
|
|
}
|
|
|
|
.tasks-cell-actions {
|
|
width: var(--size-10);
|
|
text-align: right;
|
|
padding-right: var(--size-3);
|
|
}
|
|
|
|
/* ── Status & Priority display ───────────────────────────────────── */
|
|
|
|
.tasks-status,
|
|
.tasks-priority {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--size-2);
|
|
font-size: var(--font-sm);
|
|
color: var(--fg-1);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ── Footer ──────────────────────────────────────────────────────── */
|
|
|
|
.tasks-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-top: var(--size-4);
|
|
}
|
|
|
|
.tasks-footer-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-4);
|
|
}
|
|
|
|
.tasks-pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-1);
|
|
}
|