75 lines
3.4 KiB
CSS
75 lines
3.4 KiB
CSS
/* Resizable mapping. ui-viz has no Resizable spec, so these are current HM values built from the HM Semantic / Primitive tokens.
|
|
react-resizable-panels v4 owns the drag, constraints, keyboard and the pointer target (it expands the target around the thin
|
|
separator); here only the divider and the optional grip are styled. The separator state is the library's `data-separator`
|
|
("inactive" | "hover" | "active") and `:focus-visible`. Panels and Group keep the library's inline sizing.
|
|
The divider look is in `@layer components` so a consumer's utility classes still win. Nothing here references Separator tokens. */
|
|
:root, [data-hm-theme] {
|
|
--hm-resizable-divider-width: 1px;
|
|
--hm-resizable-divider-color: var(--hm-sem-stroke-input-default);
|
|
/* Hover: a stronger neutral; dragging and keyboard focus: the primary color. The divider widens by a halo, not by layout. */
|
|
--hm-resizable-hover-color: var(--hm-sem-stroke-default);
|
|
--hm-resizable-active-color: var(--hm-sem-action-primary);
|
|
--hm-resizable-focus-color: var(--hm-sem-stroke-input-focus);
|
|
--hm-resizable-halo-width: 1px;
|
|
|
|
--hm-resizable-grip-width: 12px;
|
|
--hm-resizable-grip-height: 16px;
|
|
--hm-resizable-grip-radius: 2px;
|
|
--hm-resizable-grip-background: var(--hm-sem-bg-surface);
|
|
--hm-resizable-grip-border-color: var(--hm-sem-stroke-input-default);
|
|
--hm-resizable-grip-icon-size: 10px;
|
|
--hm-resizable-grip-icon-color: var(--hm-sem-fg-secondary);
|
|
|
|
/* Current HM value for this component only; not a global Disabled rule. */
|
|
--hm-resizable-disabled-opacity: 0.6;
|
|
}
|
|
|
|
@layer components {
|
|
[data-slot="resizable-handle"] {
|
|
flex-shrink: 0;
|
|
background: var(--hm-resizable-divider-color);
|
|
}
|
|
/* A separator between side-by-side panels is vertical; between stacked panels it is horizontal. */
|
|
[data-slot="resizable-handle"][aria-orientation="vertical"] {
|
|
width: var(--hm-resizable-divider-width);
|
|
}
|
|
[data-slot="resizable-handle"][aria-orientation="horizontal"] {
|
|
height: var(--hm-resizable-divider-width);
|
|
}
|
|
|
|
[data-slot="resizable-handle"][data-separator="hover"] {
|
|
background: var(--hm-resizable-hover-color);
|
|
box-shadow: 0 0 0 var(--hm-resizable-halo-width) var(--hm-resizable-hover-color);
|
|
}
|
|
[data-slot="resizable-handle"][data-separator="active"] {
|
|
background: var(--hm-resizable-active-color);
|
|
box-shadow: 0 0 0 var(--hm-resizable-halo-width) var(--hm-resizable-active-color);
|
|
}
|
|
[data-slot="resizable-handle"]:focus-visible {
|
|
background: var(--hm-resizable-focus-color);
|
|
box-shadow: 0 0 0 var(--hm-resizable-halo-width) var(--hm-resizable-focus-color);
|
|
}
|
|
[data-slot="resizable-handle"][data-disabled],
|
|
[data-slot="resizable-handle"][aria-disabled="true"] {
|
|
opacity: var(--hm-resizable-disabled-opacity);
|
|
}
|
|
|
|
[data-slot="resizable-handle-grip"] {
|
|
box-sizing: border-box;
|
|
width: var(--hm-resizable-grip-width);
|
|
height: var(--hm-resizable-grip-height);
|
|
border: 1px solid var(--hm-resizable-grip-border-color);
|
|
border-radius: var(--hm-resizable-grip-radius);
|
|
background: var(--hm-resizable-grip-background);
|
|
color: var(--hm-resizable-grip-icon-color);
|
|
}
|
|
[data-slot="resizable-handle-grip"] > svg {
|
|
width: var(--hm-resizable-grip-icon-size);
|
|
height: var(--hm-resizable-grip-icon-size);
|
|
}
|
|
/* Between stacked panels the grip lies down. */
|
|
[data-slot="resizable-handle"][aria-orientation="horizontal"] [data-slot="resizable-handle-grip"] {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|