flex-splitter-directive/styles.css

Dead simple pane-splitter control based on flexbox.

:where([data-flex-splitter-horizontal], [data-flex-splitter-vertical]) {
  display: flex;
  height: 100%;
}
:where(:is([data-flex-splitter-horizontal], [data-flex-splitter-vertical]) > *) {
  flex: none;
  overflow: auto;
  box-sizing: border-box;
}
:where(:is([data-flex-splitter-horizontal], [data-flex-splitter-vertical]) > [role="separator"]) {
  position: relative;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background-color: rgba(160, 160, 160, 0.15);
  z-index: 100;
}
:where(:is([data-flex-splitter-horizontal], [data-flex-splitter-vertical]) > [role="separator"]:hover) {
  background-color: rgba(160, 160, 160, 0.45);
}
:where(:is([data-flex-splitter-horizontal], [data-flex-splitter-vertical]) > [role="separator"])::before {
  content: "";
  box-sizing: border-box;
  border: 4px rgba(160, 160, 160, 0.8);
}
:where(:is([data-flex-splitter-horizontal], [data-flex-splitter-vertical]) > [role="separator"])::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
}
:where([data-flex-splitter-horizontal] > [role="separator"]) {
  cursor: ew-resize;
  width: 4px;
}
:where([data-flex-splitter-horizontal] > [role="separator"])::before {
  width: 8px;
  margin: -2px;
  height: 24px;
  border-style: double;
}
:where([data-flex-splitter-vertical]) {
  flex-direction: column;
}
:where([data-flex-splitter-vertical] > [role="separator"]) {
  cursor: ns-resize;
  height: 4px;
}
:where([data-flex-splitter-vertical] > [role="separator"])::before {
  width: 24px;
  height: 8px;
  margin: -2px;
  border-style: double;
}