.task-table__cell — body |
Cell modifiers (apply per column to control width / alignment
/ typography):
--checkbox — narrow column, checkbox-only
--name — task name, normal weight, 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 -----
SMALL CAPITALS, LIKE THE OTHER LISTS (JP, 2026-11-02). The contacts,
properties and estimates lists all label their columns in 11-12px grey
capitals with letter spacing; this table was the one main screen in
sentence case and medium weight. Now the estimates list's exact
treatment — 11px, semibold, uppercase, micro tracking — on every table
that uses this component (task list, contact, property, team member). */
.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-semibold);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-micro);
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;
/* A browser's own button style resets these two, so a sortable column
would print in lowercase next to the plain ones. */
text-transform: inherit;
letter-spacing: 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;
}
/* Hover is `.opens-row`'s — the task table is the one that already did it the
way JP wanted, and the other three were brought to it. Rows that carry no
`.opens-row` (a header, a table used for something other than opening a
task) keep this, which is why it is still here. */
.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);
/* The weight reset that used to be here did nothing once the name stopped
being semibold above. */
}
.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, flex-grows by default.
NOT BOLD (JP, 2026-10-04): *"under Tasks, the name itself is in bold. Don't
make it bold."* It was semibold, and the Estimates table right beside it on
the same screens is not — so two tables of the same shape, one above the
other, were shouting at different volumes. The name is already the leftmost
and widest thing in the row; it does not need weight as well. */
.task-table__cell--name {
color: var(--color-text);
/* Pages can add max-width if needed; default lets it grow. */
}
/* The to-do's name. Until 2026-11-02 a second line under it carried the
client (`.task-table__client-name`); the client now has a column. */
.task-table__task-name {
display: block;
}
/* Status cell — composes .status-dot. Cell itself just lays out. */
.task-table__cell--status {
/* position:relative anchors the SingleSelectDropdown panel to this
cell. is position:static by default, so without this the
panel escapes to a far ancestor (bottom-left-of-page bug). */
position: relative;
cursor: pointer;
white-space: nowrap;
color: var(--color-text-secondary);
}
.task-table__cell--status .status-dot {
margin-right: var(--space-3); /* 6px between dot and label */
/* Centred on the capitals (JP, 2026-11-02: "the green dot appears to be
bottom-justified versus centered with the letter N"). Measured on the
page: at -1px the 6px dot's centre sat 2px above the baseline while the
13px capitals' centre is 4.55px above it. 1px puts the dot's centre at
4px — within a pixel of the capitals and of the whole mixed-case word,
and on whole pixels so it does not blur. */
vertical-align: 1px;
}
/* The picture at the end of a status's name — 💬 for a text, 📧 for an
email — drawn by us as an outline icon, the calendar icon's size and
style, in the full text colour where the words are secondary grey. JP,
2026-11-01: *"the icon itself is very difficult to see"* — the e-mail
glyph every system draws is a pale smudge at this size. The markup comes
from `helpers/statusLabel.js` and its two client copies; a picture we do
not draw shows as itself, a step larger. */
/* Everywhere a status's name is printed with its picture: the task rows,
and the status pickers (the row's own and the toolbar's Status filter),
which draw the same markup through taskList.getStatusDropdownOption. */
.status-picture,
.task-table__cell--status .status-picture {
font-size: 1.4em;
line-height: 1;
/* ON the baseline. This span and the svg inside it are each placed
against a baseline, so an offset here STACKS with the svg's: at -1px
here and -1px there the icon sat 2px down, and JP saw it "a little
lower than the letters" (2026-11-02). The svg's own -1px is the whole
offset now. A picture we do not draw (an emoji) sits on the baseline. */
vertical-align: 0;
color: var(--color-text);
}
.status-picture svg,
.task-table__cell--status .status-picture svg {
display: inline-block; /* base.css makes every svg a block */
width: 11px; /* JP, 2026-11-02: "reduce the pixel size to 11 and position to -1" */
height: 11px;
vertical-align: -1px;
}
/* The time a task has sat in its status, at the end of the status's words
(JP, 2026-11-02: "status and then maybe a dot, and then the time"). It was
a column of its own; the room went to Contact. The sort is unchanged —
status, then longest-in-status first. */
.task-table__status-time {
color: var(--color-text-secondary);
white-space: nowrap;
}
/* COLUMNS SIZED TO THEIR WORDS, TASK TAKES THE REST (JP, 2026-11-02). The
task tables on the contact, property and team-member pages and a task's
subtasks. Fixed pixel widths were tried first and failed the same day:
the page's content column is narrower than the task list's and narrower
still with the info panel open, so "Need to Respond [icon] · 14 min" in a
186px Status spilled into Assignee, and Assignee into Due (JP: "smashed
together at the very end of the screen, and assignee overlaps due date").
Automatic layout with a 1% width on every column but Task makes each of
those exactly as wide as its longest cell, never narrower, and gives the
rest to Task — which is what "give as much space as possible to the Task
section" meant. The task list's own page keeps its fixed widths, because
there the point is that five separate tables line up. */
.task-table--snug .task-table__col--status,
.task-table--snug .task-table__col--contact,
.task-table--snug .task-table__col--who,
.task-table--snug .task-table__col--due { width: 1%; }
.task-table--snug .task-table__cell--status,
.task-table--snug .task-table__cell--contact,
.task-table--snug .task-table__cell--assignee,
.task-table--snug .task-table__cell--due,
.task-table--snug thead th { white-space: nowrap; }
.task-table--snug .task-table__cell--name { overflow-wrap: anywhere; }
/* ROOM BETWEEN THE COLUMNS (JP, 2026-11-02: "It just feels incredibly
crowded... I would at least double the spacing between each column...
You might even triple the space"). Tripled: 36px each side of every
column but Task, so neighbouring columns sit 72px apart and Task's words
sit 48px from Status. These tables have the room — Task takes whatever
is left and still has most of the width. */
.task-table--snug .task-table__cell--status,
.task-table--snug .task-table__cell--contact,
.task-table--snug .task-table__cell--assignee,
.task-table--snug .task-table__cell--due,
.task-table--snug thead th:not(.task-table__header-cell--name) {
padding-left: 36px;
padding-right: 36px;
}
/* On a narrower window a property's five columns at 36px a side left Task
narrower than Status (probe100 at 1100px); step the air down, still well
above the 12px it was. */
@media (max-width: 1200px) {
.task-table--snug .task-table__cell--status,
.task-table--snug .task-table__cell--contact,
.task-table--snug .task-table__cell--assignee,
.task-table--snug .task-table__cell--due,
.task-table--snug thead th:not(.task-table__header-cell--name) {
padding-left: 20px;
padding-right: 20px;
}
}
/* Contact cell — who the to-do is for, in a column of its own since
2026-11-02 (it was a second line under the name from 2026-10-11, when
there was no spare width; the Time column's room is now its room). A long
name is cut rather than allowed to widen the column. */
.task-table__cell--contact {
color: var(--color-text);
white-space: nowrap;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
}
/* Assignee cell — primary text by default; pages can render
"Unassigned" with __cell--assignee.is-unassigned to dim it. */
.task-table__cell--assignee {
position: relative;
cursor: pointer;
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.
**IT STAYS A TABLE CELL.** This was `display: flex` to line the icon up
with the date — which it did, and which also stopped the ` | ` being a
cell at all: a flex box inside a table row sits at the TOP of the row,
so on any row taller than one line (a to-do with the client's name on
its second line) the date and its icon rode 10px above Status, Time and
Assignee. JP, 2026-11-01: *"the dates and the date icon are not
justified... they are top-justified in the row."* The icon is inline
now and sits on the text's own baseline, and the cell centres with the
rest of the row the way the other three do. */
.task-table__cell--due {
position: relative;
cursor: pointer;
white-space: nowrap;
color: var(--color-text-dim);
font-weight: var(--font-weight-regular);
}
.task-table__cell--due svg {
display: inline-block; /* base.css makes every svg a block; this one sits in the line */
width: 14px;
height: 14px;
vertical-align: -2px;
margin-right: 1px; /* plus the space in the markup ≈ the old 4px gap */
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);
}
/* Horizontal-scroll wrapper — pair with .task-table on narrow-viewport contexts */
.task-table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 835px) {
.task-table-scroll .task-table {
min-width: 560px;
}
.task-table-scroll .task-table__header-cell--name,
.task-table-scroll .task-table__cell--name {
min-width: 275px;
}
}
/* ── Inline task dropdowns (SingleSelectDropdown) ────────────────
Used wherever a task-table row has clickable status / assignee /
due-date cells. The .inline-task-dropdown customClass is passed
to SingleSelectDropdown so all overrides are scoped here without
touching general-application-styles.css.
The triggering | must carry position:relative so the
position:absolute container anchors to that cell. Pages apply
that rule via their own page-scoped wrapper class.
Element map:
.multiselect-dropdown.inline-task-dropdown → dropdown chrome
.multiselect-display → hidden title strip
.singleselect-options → flat panel inside
.singleselect-search-container → search wrapper
.singleselect-search-input → search
.singleselect-options-wrapper → scrollable list
.singleselect-option → one option row
.singleselect-option.selected → active row
.singleselect-option-label → label text
.singleselect-check-icon → check mark
──────────────────────────────────────────────────────────── */
.inline-task-dropdown {
top: calc(100% + var(--space-2)) !important;
left: 0 !important;
z-index: var(--z-popover);
min-width: 240px;
max-width: 320px;
padding: var(--space-3) !important;
background: var(--color-bg) !important;
border: 1px solid var(--color-border) !important;
border-radius: var(--radius) !important;
box-shadow: var(--shadow-lg) !important;
font-family: var(--font-body) !important;
}
.inline-task-dropdown .multiselect-display {
display: none !important;
}
.inline-task-dropdown .singleselect-options {
position: static !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
max-height: none !important;
width: 100% !important;
overflow: visible !important;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.inline-task-dropdown .singleselect-search-container {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-1) var(--space-1) var(--space-2);
}
.inline-task-dropdown .singleselect-search-input {
width: 100%;
height: 32px;
padding: 0 var(--space-5) !important;
background: var(--color-bg) !important;
border: 1px solid var(--color-border) !important;
border-radius: var(--radius-sm) !important;
outline: 0;
font-family: var(--font-body) !important;
font-size: var(--font-size-small) !important;
color: var(--color-text) !important;
box-shadow: none !important;
transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.inline-task-dropdown .singleselect-search-input::placeholder {
color: var(--color-text-dim);
}
.inline-task-dropdown .singleselect-search-input:focus {
border-color: var(--color-blue) !important;
box-shadow: 0 0 0 3px var(--color-focus-ring) !important;
}
.inline-task-dropdown .singleselect-options-wrapper {
max-height: 220px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 1px;
}
.inline-task-dropdown .singleselect-option {
display: flex;
align-items: center;
gap: var(--space-5);
width: 100%;
padding: var(--space-4) var(--space-5) !important;
background: transparent !important;
border: 0 !important;
border-radius: var(--radius-sm) !important;
font-family: var(--font-body) !important;
font-size: var(--font-size-small) !important;
font-weight: var(--font-weight-medium) !important;
line-height: 1.2;
color: var(--color-text) !important;
cursor: pointer;
transition: background-color var(--duration-fast) var(--easing-default);
}
.inline-task-dropdown .singleselect-option:hover {
background: var(--color-bg-hover) !important;
}
.inline-task-dropdown .singleselect-option.selected {
color: var(--color-blue) !important;
font-weight: var(--font-weight-semibold) !important;
}
.inline-task-dropdown .singleselect-option-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font: inherit !important;
color: inherit !important;
cursor: pointer;
}
.inline-task-dropdown .singleselect-check-icon {
flex-shrink: 0;
font-size: 12px;
color: var(--color-blue);
margin-left: auto;
}
.inline-task-dropdown a.multiselect-clear-link {
font-size: var(--font-size-caption);
font-weight: var(--font-weight-medium);
color: var(--color-blue);
text-decoration: none;
cursor: pointer;
align-self: flex-start;
padding: 0 var(--space-2);
}
.inline-task-dropdown a.multiselect-clear-link:hover {
text-decoration: underline;
}
/* ===========================================================
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 |