imccyu
5da8e3b787
The collapsed rail becomes a 56px icon column (24px controls between 16px paddings) carrying expand, new session, search, and new workspace — each aligned with its expanded counterpart; rail search expands the sidebar and focuses the search box. Collapse/expand now animates: the frame transitions grid-template-columns (and the surviving handle its left) on the deepsuite sider curve — --ds-ease-in-out over --ds-transition-duration-slow, supplied by ui-theme's base sheet. Transitions pause during drags (data-dragging on the frame, set for the whole gesture) and under prefers-reduced-motion.
97 lines
2.4 KiB
CSS
97 lines
2.4 KiB
CSS
.frame {
|
|
position: relative; /* anchors the drag handles, which straddle column borders */
|
|
display: grid;
|
|
grid-template-rows: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: var(--dsw-alias-bg-base);
|
|
/* Collapse/expand animates the tracks on the deepsuite sider curve
|
|
(--ds-ease-in-out / --ds-transition-duration-slow, ui-theme base.css). */
|
|
transition: grid-template-columns var(--ds-transition-duration-slow) var(--ds-ease-in-out);
|
|
}
|
|
|
|
/* Dragging writes widths at pointer cadence; easing them would detach the
|
|
column from the handle. */
|
|
.frame[data-dragging] {
|
|
transition: none;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.frame {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
.sidebarCol {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
background: var(--dsw-specific-sidebar-fill);
|
|
border-right: 1px solid var(--dsw-alias-border-l1);
|
|
}
|
|
|
|
.centerCol {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.detailsCol {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
border-left: 1px solid var(--dsw-alias-border-l2);
|
|
}
|
|
|
|
/* The details subtree stays mounted at zero width, so its border must not paint
|
|
a 1px seam. The collapsed sidebar instead retains a bordered compact rail. */
|
|
.frame[data-details-collapsed] .detailsCol {
|
|
border-left: none;
|
|
}
|
|
|
|
/* Drag handles are frame children (columns clip overflow): an 8px hit strip
|
|
centered on the column border via inline left, above column content. The
|
|
visible pill (12x32 r10, riding the border at vertical center) is the figma
|
|
Handle component; the hit strip stays wider than the pill. */
|
|
.handle {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 8px;
|
|
margin-left: -4px;
|
|
cursor: col-resize;
|
|
z-index: 2;
|
|
touch-action: none;
|
|
/* Rides the same curve as the tracks so the pill stays on the moving
|
|
border during collapse/expand; paused while dragging (frame rule). */
|
|
transition: left var(--ds-transition-duration-slow) var(--ds-ease-in-out);
|
|
}
|
|
|
|
.frame[data-dragging] .handle {
|
|
transition: none;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.handle {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
.handle::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 12px;
|
|
height: 32px;
|
|
border-radius: 10px;
|
|
box-sizing: border-box;
|
|
background: var(--dsw-alias-bg-layer-2);
|
|
border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
|
|
}
|
|
|
|
.handle:hover::after,
|
|
.handle[data-dragging='true']::after {
|
|
border-color: var(--dsw-alias-border-l3);
|
|
}
|