@uiw/react-split/esm/style/index.css

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

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