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

A piece of view can be divided into areas where the width or height can be adjusted by dragging.

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

.@{split-prefix} {
  height: 100%;
  display: flex;
  flex-direction: row;
  &-bar {
    z-index: 10;
    position: relative;
    justify-content: center;
    display: flex;
    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 .3s;
      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 .3s;
  }
  &-horizontal > &-bar {
    cursor: col-resize;
    width: 5px;
    flex-direction: column;
    box-shadow: inset 1px 0 0 0 #d5d5d5, 1px 0 0 0 #d5d5d5;
    &::before, &::after {
      height: 3px;
      width: 100%;
      box-shadow: inset 0 1px 0 0 #d5d5d5, 0 1px 0 0 #d5d5d5;
    }
    &::before {
      margin-top: -1px;
    }
    &::after {
      margin-top: 3px;
    }
    &.disable {
      box-shadow: inset 1px 0 0 0 #e6e6e6, 1px 0 0 0 #eaeaea !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 #d5d5d5, 0 1px 0 0 #d5d5d5;
    &.disable {
      box-shadow: inset 0 1px 0 0 #e6e6e6, 0 1px 0 0 #eaeaea !important;
    }
    &::before, &::after {
      height: 100%;
      width: 3px;
      box-shadow: inset 1px 0 0 0 #d5d5d5, 1px 0 0 0 #d5d5d5;
    }
    &::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 {
      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-color: #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-color: #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: #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;
    }
  }
}