@stories-js/core/dist/collection/components/split-pane/split-pane.css

Stories web components to build stories

:host {
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  user-select: auto;
  cursor: auto;
  width: auto;
  height: 100vh;
}

:host([resizing]) {
  user-select: none;
}

:host([resizing][split=horizontal]) {
  cursor: col-resize;
}

:host #median {
  inline-size: 0.5rem;
  grid-column: 2/3;
}

:host #median:hover {
  cursor: col-resize;
}

:host [name=slot1] {
  grid-column: 1/2;
  grid-row: 1/1;
}

:host [name=slot2] {
  grid-column: 3/4;
  grid-row: 1/1;
}

:host([resizing][split=vertical]) {
  cursor: row-resize;
}

:host([split=vertical]) {
  grid-template-rows: 1fr max-content 1fr;
  grid-template-columns: none;
}

:host([split=vertical]) #median {
  block-size: 0.5rem;
  inline-size: auto;
  grid-row: 2/3;
  grid-column: 1/1;
}

:host([split=vertical]) #median:hover {
  cursor: row-resize;
}

:host([split=vertical]) [name=slot1] {
  grid-row: 1/2;
  grid-column: 1/1;
}

:host([split=vertical]) [name=slot2] {
  grid-row: 3/4;
  grid-column: 1/1;
}

#median {
  background: bisque;
}

::slotted(*) {
  overflow: auto;
}