@wener/console
Version:
Base console UI toolkit
48 lines (40 loc) • 829 B
CSS
.PanelResizeLineHandle {
background-color: var(--color-base-300);
position: relative;
--size: 1px;
&:hover,
&[data-resize-handle-state="hover"],
&[data-resize-handle-state="drag"] {
&::before {
background-color: oklch(from var(--color-base-300) calc(l - 0.2) c h);
position: absolute;
inset: 0;
content: "";
z-index: 30;
}
&[data-resize-handle-state="drag"] {
/* stronger vision indication */
&::before {
background-color: var(--color-info);
}
}
}
&[data-panel-group-direction="horizontal"] {
width: var(--size);
cursor: col-resize;
&::before {
width: 3px;
height: 100%;
translate: -1px 0;
}
}
&[data-panel-group-direction="vertical"] {
height: var(--size);
cursor: row-resize;
&::before {
width: 100%;
height: 3px;
translate: 0 -1px;
}
}
}