90 lines
2.5 KiB
CSS
90 lines
2.5 KiB
CSS
/* ⚠ In a virtualized table the library puts EVERY CELL in its own absolutely positioned band of
|
|
one row step, and `role="row"` stays a ZERO-height container (measured: band 32px, row 1px).
|
|
Hence rules are drawn by the CELL, the cell fills the band, and hover and selection paint through
|
|
a descendant selector. The header group is zero-height for the same reason and the library
|
|
already wraps it in a sticky box — so its ground is painted by the header CELLS, or rows scroll
|
|
straight through the column titles. */
|
|
|
|
.frame {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Both axes on the scroll container the virtualizer measures: when the columns together need more
|
|
than the panel gives, the table scrolls sideways instead of squeezing text out of existence. */
|
|
.table {
|
|
flex: 1;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
outline: none;
|
|
}
|
|
|
|
/* With nothing to show the table is its head alone. The height is spelled out because an empty
|
|
collection makes the library reserve the whole viewport for an empty state of its own (702px). */
|
|
.frameEmpty .table {
|
|
height: var(--row-height-table);
|
|
flex: none;
|
|
}
|
|
|
|
/* A column header has to read as a header, not as one more line of data. */
|
|
.column {
|
|
display: flex;
|
|
contain: layout paint style;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
align-items: center;
|
|
padding-inline: var(--space-4);
|
|
border-bottom: 1px solid var(--color-separator);
|
|
background-color: var(--color-chrome);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-small);
|
|
font-weight: inherit;
|
|
letter-spacing: 0.06em;
|
|
text-align: left;
|
|
text-transform: uppercase;
|
|
outline: none;
|
|
}
|
|
|
|
.row {
|
|
cursor: default;
|
|
outline: none;
|
|
}
|
|
|
|
.cell {
|
|
display: flex;
|
|
contain: layout paint style;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
align-items: center;
|
|
padding-inline: var(--space-4);
|
|
border-bottom: 1px solid var(--color-separator);
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
outline: none;
|
|
}
|
|
|
|
/* The column rule is the SAME line that divides rows: lines that mean the same are drawn the
|
|
same. On the cell, so it spans the band edge to edge and joins the one below. */
|
|
.divided {
|
|
border-left: 1px solid var(--color-separator);
|
|
}
|
|
|
|
.row[data-hovered] .cell {
|
|
background-color: var(--color-raised);
|
|
}
|
|
|
|
.row[data-selected] .cell {
|
|
background-color: var(--color-selected);
|
|
}
|
|
|
|
.row[data-focus-visible] .cell {
|
|
border-block-color: var(--color-accent);
|
|
}
|
|
|
|
.empty {
|
|
padding: var(--space-5) var(--space-4);
|
|
color: var(--color-text-secondary);
|
|
}
|