@ihatecode/react-splitter
Version:
A split pane component written in React.
62 lines (50 loc) • 1.21 kB
CSS
.ihc-splitter-wrapper {
width: 100%;
height: 100%;
display: flex;
--ihc-splitter-size: 1px;
--ihc-splitter-color: #eee;
}
.ihc-splitter-vertical {
flex-direction: column;
}
.ihc-splitter-resizing {
user-select: none;
}
.ihc-splitter-horizontal.ihc-splitter-resizing {
cursor: col-resize;
}
.ihc-splitter-vertical.ihc-splitter-resizing {
cursor: row-resize;
}
.ihc-splitter-vertical>.ihc-splitbar {
height: var(--ihc-splitter-size);
min-height: var(--ihc-splitter-size);
width: 100%;
cursor: row-resize;
}
.ihc-splitter-horizontal>.ihc-splitbar {
width: var(--ihc-splitter-size);
min-width: var(--ihc-splitter-size);
height: 100%;
cursor: col-resize;
}
.ihc-splitter-nonresizable>.ihc-splitbar {
cursor: default;
}
.ihc-splitbar {
position: relative;
background-color: var(--ihc-splitter-color);
}
.ihc-splitbar-disabled {
cursor: default;
}
.ihc-splitter-item {
flex-basis: 0;
overflow: hidden;
transition: flex-basis 100ms linear;
}
.ihc-splitter-resizing>.ihc-splitter-item {
will-change: flex-basis;
transition-duration: 0ms;
}