@uiw/react-split/src/style/index.less

A piece of content can be divided into areas that can be dragged to adjust the width or height.

@split-prefix: ~'w-split';

.@{split-prefix} {
  height: 100%;
  display: flex;
  flex-direction: row;
  --w-split-bar-shadow: #d5d5d5;
  --w-split-bar-shadow-disable: #d5d5d5;
  &-bar {
    z-index: 10;
    position: relative;
    justify-content: center;
    display: flex;
    background: var(--w-split-bar-background, rgb(248, 248, 249));
    user-select: none;
    &::before,
    &::after {
      content: '';
      display: block;
    }
    &.disable {
      pointer-events: none;
      cursor: not-allowed !important;
    }
    &:hover:not(.disable) {
      transition: background-color 0.3s;
      background: var(--w-split-bar-hover-background, #ecf7ff);
    }
  }
  &.dragging &-pane {
    position: relative;
    &::before {
      content: '';
      display: block;
      position: absolute;
      height: 100%;
      width: 100%;
      z-index: 10;
    }
  }
  & > &-pane {
    transform: none;
  }
  &:not(.dragging) > &-pane {
    transition: all 0.3s;
  }
  &-horizontal > &-bar {
    cursor: col-resize;
    width: 5px;
    flex-direction: column;
    box-shadow:
      inset 1px 0 0 0 var(--w-split-bar-shadow),
      1px 0 0 0 var(--w-split-bar-shadow);
    &::before,
    &::after {
      height: 3px;
      width: 100%;
      box-shadow:
        inset 0 1px 0 0 var(--w-split-bar-shadow),
        0 1px 0 0 var(--w-split-bar-shadow);
    }
    &::before {
      margin-top: -1px;
    }
    &::after {
      margin-top: 3px;
    }
    &.disable {
      box-shadow:
        inset 1px 0 0 0 var(--w-split-bar-shadow-disable),
        1px 0 0 0 var(--w-split-bar-shadow-disable) !important;
    }
  }
  &-vertical {
    flex-direction: column;
  }
  &-vertical > &-bar {
    cursor: row-resize;
    width: 100%;
    height: 5px;
    align-items: center;
    flex-direction: row;
    box-shadow:
      inset 0 1px 0 0 var(--w-split-bar-shadow),
      0 1px 0 0 var(--w-split-bar-shadow);
    &.disable {
      box-shadow:
        inset 0 1px 0 0 var(--w-split-bar-shadow-disable),
        0 1px 0 0 var(--w-split-bar-shadow-disable) !important;
    }
    &::before,
    &::after {
      height: 100%;
      width: 3px;
      box-shadow:
        inset 1px 0 0 0 var(--w-split-bar-shadow),
        1px 0 0 0 var(--w-split-bar-shadow);
    }
    &::before {
      margin-left: -1px;
    }
    &::after {
      margin-left: 3px;
    }
  }
  &-large-bar {
    div {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
    }
  }
  &-vertical > &-line-bar:hover,
  &-horizontal > &-line-bar:hover {
    &::before {
      background: var(--w-split-line-bar-hover-border-color, #008ef0);
    }
  }
  &-vertical > &-line-bar {
    height: 1px;
    div {
      cursor: row-resize;
      width: 100%;
      height: 8px;
      margin-top: -2px;
      margin-bottom: -2px;
      &:hover,
      &:active,
      &:focus {
        margin-top: -6px;
        margin-bottom: -6px;
        height: 6px;
        &::after {
          background: var(--w-split-line-bar-active-background, #008ef0);
        }
      }
      &::after {
        height: 1px;
        width: 100%;
      }
    }
  }
  &-horizontal > &-line-bar {
    width: 1px;
    div {
      cursor: col-resize;
      height: 100%;
      width: 8px;
      margin-left: -2px;
      margin-right: -2px;
      &:hover,
      &:active,
      &:focus {
        margin-left: -6px;
        margin-right: -6px;
        width: 6px;
        &::after {
          background: var(--w-split-line-bar-active-background, #008ef0);
        }
      }
      &::after {
        width: 1px;
        height: 100%;
      }
    }
  }
  &-vertical > &-line-bar,
  &-horizontal > &-line-bar {
    flex-direction: inherit;
    &::before {
      display: none;
    }
    div {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      &::after {
        content: '';
        display: block;
        background-color: var(--w-split-line-bar-background, #d5d5d5);
      }
    }
  }
  &-line-bar {
    box-shadow: inset 0 0 0 0 !important;
    background: transparent;
    &::before {
      box-shadow: inset 0 0 0 0 !important;
    }
    &::after {
      display: none;
    }
  }
}