77 lines
2.2 KiB
CSS
77 lines
2.2 KiB
CSS
/* The wrapper is needed only for the events caught on it (double click, pointer down for the
|
|
preload, Enter — which pins the tab) and therefore sets no sizes beyond what the panel has
|
|
already given. */
|
|
.frame {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* The tree itself is the scroll container: the virtualizer needs a height of its own, and the panel
|
|
gives it everything the header has left over. */
|
|
.tree {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
outline: none;
|
|
}
|
|
|
|
/* A transparent border instead of a margin, plus background-clip: the background is painted over
|
|
the border-box and paints a transparent border in too, so at a row step of 26 the fill comes out
|
|
24, as in the measurement. */
|
|
.item {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
align-items: center;
|
|
|
|
/* The row fills the virtualizer's band: otherwise its fill is shorter than the band, the row
|
|
sticks to the top edge and leaves an unpainted gap below — the same defect the table cells
|
|
had, found there by measurement and generalized here. */
|
|
height: 100%;
|
|
border-block: var(--row-fill-inset) solid transparent;
|
|
padding-inline: var(--space-2);
|
|
border-radius: var(--radius-control);
|
|
background-clip: padding-box;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* The level indent goes off the library's count: data-level comes from the tree, we do not measure
|
|
nesting by hand. */
|
|
.item[data-level='2'] {
|
|
padding-left: var(--space-6);
|
|
}
|
|
|
|
.item[data-hovered] {
|
|
background-color: var(--color-raised);
|
|
}
|
|
|
|
.item[data-selected] {
|
|
background-color: var(--color-selected);
|
|
}
|
|
|
|
.item[data-focus-visible] {
|
|
outline: 1px solid var(--color-accent);
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
/* The chevron and the stub in its place are of one width: rows without children do not slide
|
|
left. */
|
|
.chevron {
|
|
display: flex;
|
|
width: var(--space-6);
|
|
flex: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* The title takes all the free width, so the right edge of the row (state, counter, progress) is
|
|
pressed to the panel's edge, and it is exactly the title that is truncated first. */
|
|
.title {
|
|
overflow: hidden;
|
|
flex: 1;
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|