.task-table__cell — body |
Cell modifiers (apply per column to control width / alignment
/ typography):
--checkbox — narrow column, checkbox-only
--name — task name, primary-weight text, flex-grows
--status — composes .status-dot + label text
--time — duration estimate (e.g., "10 wks")
--assignee — assignee name or "Unassigned"
--due — due date with calendar icon, or em-dash if none
Row states:
.is-done — task completed (strikethrough name, dim text)
.is-selected — subtle blue tint background
Header cell states:
.is-sorted — column is the current sort key (shows arrow)
.is-sorted-desc — sort is descending (rotates arrow)
Cell states:
.task-table__cell--due.is-overdue — red text, semibold
Status pattern:
The status cell composes .status-dot:
|
Completed
|
No new status classes needed — uses existing primitive.
=========================================================== */
.task-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-body);
font-size: var(--font-size-small); /* 13px */
color: var(--color-text);
}
/* ----- Header row ----- */
.task-table thead th {
padding: var(--space-3) var(--space-6) var(--space-4); /* 6 12 8 */
border-bottom: 1px solid var(--color-border-light);
text-align: left;
white-space: nowrap;
font-size: var(--font-size-micro); /* 11px */
font-weight: var(--font-weight-medium);
color: var(--color-text-dim);
vertical-align: middle;
}
.task-table__header-cell {
/* Inherits from `thead th` above; this class is here as a
hook so pages can target sortable cells specifically. */
}
/* When a header is sortable, wrap its content in a button so
keyboard users can activate the sort. The button strips its
own visual treatment to inherit the th styling. */
.task-table__header-cell button {
background: transparent;
border: 0;
padding: 0;
font: inherit;
color: inherit;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--space-2); /* 4px */
text-transform: inherit;
letter-spacing: inherit;
}
.task-table__header-cell button:hover {
color: var(--color-text);
}
.task-table__header-cell button:focus-visible {
outline: 0;
box-shadow: 0 0 0 3px var(--color-focus-ring);
border-radius: var(--radius-xs);
}
.task-table__header-label {
/* Hook only; styled by parent button. */
}
.task-table__sort-icon {
display: none; /* shown only when .is-sorted is on the parent header cell */
width: 12px;
height: 12px;
flex-shrink: 0;
transition: transform var(--duration-fast) var(--easing-default);
}
.task-table__header-cell.is-sorted {
color: var(--color-text);
}
.task-table__header-cell.is-sorted .task-table__sort-icon {
display: inline-block;
}
.task-table__header-cell.is-sorted-desc .task-table__sort-icon {
transform: rotate(180deg);
}
/* ----- Body rows ----- */
.task-table tbody tr {
border-bottom: 1px solid var(--color-border-light);
cursor: pointer;
transition: background-color var(--duration-fast) var(--easing-default);
}
.task-table tbody tr:last-child {
border-bottom: 0;
}
.task-table tbody tr:hover {
background: var(--color-bg-hover);
}
.task-table__row.is-selected {
background: var(--color-blue-glow);
}
.task-table__row.is-selected:hover {
background: var(--color-blue-glow); /* keep on hover */
}
/* Done state — strikes through the task name and dims the row. */
.task-table__row.is-done .task-table__cell--name {
text-decoration: line-through;
color: var(--color-text-dim);
font-weight: var(--font-weight-regular);
}
.task-table__row.is-done .task-table__cell {
color: var(--color-text-dim);
}
/* ----- Body cells ----- */
.task-table__cell {
padding: var(--space-5) var(--space-6); /* 10 12 */
vertical-align: middle;
}
/* Cell modifiers by column ---------------------------------- */
/* Checkbox cell — narrow, just holds the checkbox. */
.task-table__cell--checkbox {
width: 40px;
padding-right: 0;
}
/* Name cell — primary text, semibold, flex-grows by default. */
.task-table__cell--name {
font-weight: var(--font-weight-semibold);
color: var(--color-text);
/* Pages can add max-width if needed; default lets it grow. */
}
/* Status cell — composes .status-dot. Cell itself just lays out. */
.task-table__cell--status {
white-space: nowrap;
color: var(--color-text-secondary);
}
.task-table__cell--status .status-dot {
margin-right: var(--space-3); /* 6px between dot and label */
vertical-align: -1px;
}
/* Time cell (duration estimate) — secondary text, no wrap. */
.task-table__cell--time {
white-space: nowrap;
color: var(--color-text-secondary);
}
/* Assignee cell — primary text by default; pages can render
"Unassigned" with __cell--assignee.is-unassigned to dim it. */
.task-table__cell--assignee {
white-space: nowrap;
color: var(--color-text);
}
.task-table__cell--assignee.is-unassigned {
color: var(--color-text-secondary);
font-weight: var(--font-weight-regular);
}
/* Due cell — calendar icon + date. Default is dim (no due
set). Has-value adds normal text color; overdue is red. */
.task-table__cell--due {
white-space: nowrap;
color: var(--color-text-dim);
font-weight: var(--font-weight-regular);
}
.task-table__cell--due svg {
width: 14px;
height: 14px;
margin-right: var(--space-2); /* 4px */
vertical-align: -2px;
color: var(--color-text-dim);
}
.task-table__cell--due.has-value {
color: var(--color-text);
font-weight: var(--font-weight-medium);
}
.task-table__cell--due.has-value svg {
color: var(--color-text-dim);
}
.task-table__cell--due.is-overdue {
color: var(--color-red);
font-weight: var(--font-weight-semibold);
}
.task-table__cell--due.is-overdue svg {
color: var(--color-red);
}
/* ===========================================================
33. COLLAPSIBLE SECTION — .collapsible-section
Visual reference: Task Detail "Subtasks" header strip
(the cdv-sec / cdv-sec-h pattern). Generic clickable header
strip that sits above page content groups — subtask lists,
notes lists, files lists, activity lists, etc. The same
chrome will appear in many places across the product.
IMPORTANT — scope of this component:
This component is *only the header strip*. It does NOT
wrap or render the content below it. The header itself
does not change visually when its content is collapsed —
only the chevron rotates as a visual cue.
Pages are responsible for:
- Rendering the content below the header
- Show/hiding that content when the user clicks the head
The component provides a single state flag (.is-collapsed)
on the wrapper that rotates the chevron. Pages should
reuse the same flag to drive their content show/hide,
so chevron and content stay in sync from one source of
truth.
Distinct from:
.card — content surface, not header chrome
.banner — inline callout, not a section divider
.tabs — switches between content; section organizes one
Anatomy:
__head — clickable header strip (the visible chrome)
__title — section title text (display font)
__count — count pill next to title (e.g., "4")
__actions — right-side action cluster (add button + chevron)
__add — positioning slot for the add button
(composes .btn, e.g., .btn .btn--ghost
.btn--icon .btn--sm .collapsible-section__add)
__chevron — collapse/expand chevron (a