You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
3.8 KiB
118 lines
3.8 KiB
/*
|
|
* Splitter recipe — paints two-or-more resizable panels separated by
|
|
* draggable handles. Soma owns the resize math (panel sizes, min /
|
|
* max clamping, collapsed state, keyboard arrow steps) and the
|
|
* `commit-resize` sema event; the recipe consumes the morfo's
|
|
* data-attrs to draw orientation-aware geometry plus hover / drag
|
|
* affordances on the resize trigger.
|
|
*
|
|
* [data-splitter] → flex container (row / column)
|
|
* [data-splitter-panel] → individual panel (flex item)
|
|
* [data-splitter-resize-trigger] → handle between two panels
|
|
*
|
|
* The handle gets a center grip (the `::before` pseudo) sized to
|
|
* match the orientation: tall and narrow in horizontal layouts,
|
|
* short and wide in vertical layouts. The grip is the affordance
|
|
* that tells the user the handle is draggable, not a passive border.
|
|
*/
|
|
|
|
[data-splitter] {
|
|
display: flex;
|
|
min-inline-size: 0;
|
|
min-block-size: 0;
|
|
border: var(--splitter-border-width, var(--border-width)) solid
|
|
var(--splitter-border-color, var(--color-border-default));
|
|
border-radius: var(--splitter-radius, var(--radius-md));
|
|
background: var(--splitter-bg, var(--color-surface-default));
|
|
overflow: hidden;
|
|
}
|
|
|
|
[data-splitter][data-orientation='vertical'] {
|
|
flex-direction: column;
|
|
}
|
|
|
|
[data-splitter][data-disabled] {
|
|
opacity: var(--splitter-disabled-opacity, 0.6);
|
|
}
|
|
|
|
[data-splitter-panel] {
|
|
min-inline-size: 0;
|
|
min-block-size: 0;
|
|
background: var(--splitter-panel-bg, transparent);
|
|
overflow: hidden;
|
|
}
|
|
|
|
[data-splitter-panel][data-state='collapsed'] {
|
|
pointer-events: none;
|
|
}
|
|
|
|
[data-splitter-resize-trigger] {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
background: var(--splitter-handle-bg, var(--color-border-subtle));
|
|
transition: background var(--splitter-transition-duration, var(--duration-fast))
|
|
var(--splitter-transition-ease, var(--ease-default));
|
|
}
|
|
|
|
[data-splitter-resize-trigger][data-orientation='horizontal'] {
|
|
inline-size: var(--splitter-handle-size, var(--space-2));
|
|
cursor: col-resize;
|
|
}
|
|
|
|
[data-splitter-resize-trigger][data-orientation='vertical'] {
|
|
block-size: var(--splitter-handle-size, var(--space-2));
|
|
cursor: row-resize;
|
|
}
|
|
|
|
[data-splitter-resize-trigger]:hover,
|
|
[data-splitter-resize-trigger][data-state='hover'] {
|
|
background: var(--splitter-handle-bg-hover, var(--color-border-default));
|
|
}
|
|
|
|
[data-splitter-resize-trigger]:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
|
|
[data-splitter-resize-trigger][data-state='dragging'],
|
|
[data-splitter-resize-trigger][data-dragging] {
|
|
background: var(--splitter-handle-bg-active, var(--color-primary-solid));
|
|
}
|
|
|
|
[data-splitter-resize-trigger][data-disabled] {
|
|
cursor: default;
|
|
background: var(--splitter-handle-bg, var(--color-border-subtle));
|
|
}
|
|
|
|
/* Center grip — a small pill in the middle of the handle. Sized to
|
|
match orientation: tall for horizontal handles (so the user can
|
|
target it on a thin column), wide for vertical handles. */
|
|
|
|
[data-splitter-resize-trigger]::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 50%;
|
|
border-radius: var(--splitter-grip-radius, var(--radius-full));
|
|
background: var(--splitter-grip-bg, var(--color-content-muted));
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
[data-splitter-resize-trigger][data-orientation='horizontal']::before {
|
|
inline-size: var(--splitter-grip-cross, 2px);
|
|
block-size: var(--splitter-grip-main, var(--space-4));
|
|
}
|
|
|
|
[data-splitter-resize-trigger][data-orientation='vertical']::before {
|
|
inline-size: var(--splitter-grip-main, var(--space-4));
|
|
block-size: var(--splitter-grip-cross, 2px);
|
|
}
|
|
|
|
/* Sema event hook — when commit-resize fires, the eidos events layer
|
|
stamps `data-event="commit-resize"` for `signal hold` duration.
|
|
Pulse the handle so the user gets visual confirmation that the
|
|
drag was committed. */
|
|
|
|
[data-splitter-resize-trigger][data-event='commit-resize'][data-event-phase='active'] {
|
|
background: var(--splitter-handle-bg-active, var(--color-primary-solid));
|
|
}
|