Files
openidea/src/ui/Splitter.module.css
T

72 lines
1.4 KiB
CSS

.group {
min-width: 0;
min-height: 0;
}
.panel {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
height: 100%;
}
.handle {
position: relative;
flex: none;
background: var(--border);
outline: none;
transition: background var(--dur) var(--ease);
}
.handle[aria-orientation="vertical"] {
width: 1px;
cursor: col-resize;
}
.handle[aria-orientation="horizontal"] {
height: 1px;
cursor: row-resize;
}
.handle::after {
content: "";
position: absolute;
z-index: var(--z-panel);
}
.handle[aria-orientation="vertical"]::after {
inset: 0 -3px;
}
.handle[aria-orientation="horizontal"]::after {
inset: -3px 0;
}
.handle[data-separator="hover"],
.handle:focus-visible {
background: var(--border-strong);
}
.handle[data-separator="active"] {
background: var(--border-strong);
}
.handle[data-separator="disabled"] {
cursor: default;
}
.invisible,
.invisible[data-separator] {
background: none;
}
.invisible[aria-orientation="vertical"] {
width: 0;
}
.invisible[aria-orientation="horizontal"] {
height: 0;
}
/* Islands gaps: nothing is drawn while dragging; keyboard focus still shows. */
.invisible:focus-visible::after {
background: color-mix(in srgb, var(--focus-ring) 55%, transparent);
}
.handle[data-separator="disabled"]::after {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.handle {
transition: none;
}
}