@adobe/spectrum-css/dist/components/splitview/index-vars.css

The Spectrum CSS top-level backwards compatible package

.spectrum-SplitView {
  --spectrum-splitview-vertical-width: 100%;
  --spectrum-splitview-vertical-gripper-width: 50%;
  --spectrum-splitview-vertical-gripper-outer-width: 100%;
  --spectrum-splitview-vertical-gripper-reset: 0;
}

.spectrum-SplitView {
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

.spectrum-SplitView-pane {
  height: 100%;
}

[dir="ltr"] .spectrum-SplitView-gripper {
  left: calc((var(--spectrum-dragbar-gripper-width, var(--spectrum-global-dimension-static-size-50)) + 2 * var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width, var(--spectrum-global-dimension-static-size-25))) / 2 * -1);
}

[dir="rtl"] .spectrum-SplitView-gripper {
  right: calc((var(--spectrum-dragbar-gripper-width, var(--spectrum-global-dimension-static-size-50)) + 2 * var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width, var(--spectrum-global-dimension-static-size-25))) / 2 * -1);
}

.spectrum-SplitView-gripper {
  content: "";
  display: block;
  position: absolute;
  border-style: solid;
  border-radius: var(--spectrum-dragbar-gripper-border-radius, var(--spectrum-alias-border-radius-small));

  top: 50%;
  transform: translate(0, -50%);
  width: var(--spectrum-dragbar-gripper-width, var(--spectrum-global-dimension-static-size-50));
  height: var(--spectrum-dragbar-gripper-height, var(--spectrum-global-dimension-static-size-200));
  border-top-width: var(--spectrum-dragbar-gripper-border-width-vertical, 4px);
  border-bottom-width: var(--spectrum-dragbar-gripper-border-width-vertical, 4px);
  border-left-width: var(--spectrum-dragbar-gripper-border-width-horizontal, 3px);
  border-right-width: var(--spectrum-dragbar-gripper-border-width-horizontal, 3px);
}

.spectrum-SplitView-splitter {
  position: relative;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;

  width: var(--spectrum-dragbar-handle-width, var(--spectrum-global-dimension-static-size-25));
  height: 100%;
  z-index: 1;
}

[dir="ltr"] .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before,[dir="ltr"]  .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before {
        left: calc(50% - var(--spectrum-dragbar-handle-width, var(--spectrum-global-dimension-static-size-25)) / 2);
}

[dir="rtl"] .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before,[dir="rtl"]  .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before {
        right: calc(50% - var(--spectrum-dragbar-handle-width, var(--spectrum-global-dimension-static-size-25)) / 2);
}

.spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before, .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before {
        content: "";
        position: absolute;

        top: 0;
        width: var(--spectrum-dragbar-handle-width, var(--spectrum-global-dimension-static-size-25));
        height: 100%;
      }

[dir="ltr"] .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper {
      left: 0;
}

[dir="rtl"] .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper {
      right: 0;
}

[dir="ltr"] .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper {
      right: 0;
}

[dir="rtl"] .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper {
      left: 0;
}

[dir="ltr"] .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper {
      left: auto;
}

[dir="rtl"] .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper {
      right: auto;
}

.spectrum-SplitView--vertical {
  -ms-flex-direction: column;
      flex-direction: column;
}

.spectrum-SplitView--vertical .spectrum-SplitView-pane {
    height: auto;
    width: var(--spectrum-splitview-vertical-width);
  }

[dir="ltr"] .spectrum-SplitView--vertical .spectrum-SplitView-gripper {
    left: var(--spectrum-splitview-vertical-gripper-width);
}

[dir="rtl"] .spectrum-SplitView--vertical .spectrum-SplitView-gripper {
    right: var(--spectrum-splitview-vertical-gripper-width);
}

.spectrum-SplitView--vertical .spectrum-SplitView-gripper {
    top: calc((var(--spectrum-dragbar-gripper-width, var(--spectrum-global-dimension-static-size-50)) + 2 * var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width, var(--spectrum-global-dimension-static-size-25))) / 2 * -1);

    transform: translate(
      calc(-1 * var(--spectrum-splitview-vertical-gripper-width)),
      0
    );
    width: var(--spectrum-dragbar-gripper-height, var(--spectrum-global-dimension-static-size-200));
    height: var(--spectrum-dragbar-gripper-width, var(--spectrum-global-dimension-static-size-50));
    border-top-width: var(--spectrum-dragbar-gripper-border-width-horizontal, 3px);
    border-bottom-width: var(--spectrum-dragbar-gripper-border-width-horizontal, 3px);
    border-left-width: var(--spectrum-dragbar-gripper-border-width-vertical, 4px);
    border-right-width: var(--spectrum-dragbar-gripper-border-width-vertical, 4px);
  }

.spectrum-SplitView--vertical .spectrum-SplitView-splitter {
    width: var(--spectrum-splitview-vertical-width);
    height: var(--spectrum-dragbar-handle-width, var(--spectrum-global-dimension-static-size-25));
  }

[dir="ltr"] .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper,[dir="ltr"]  .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper {
        left: var(--spectrum-splitview-vertical-gripper-width);
}

[dir="rtl"] .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper,[dir="rtl"]  .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper {
        right: var(--spectrum-splitview-vertical-gripper-width);
}

[dir="ltr"] .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before,[dir="ltr"]  .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before {
          left: var(--spectrum-splitview-vertical-gripper-reset);
}

[dir="rtl"] .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before,[dir="rtl"]  .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before {
          right: var(--spectrum-splitview-vertical-gripper-reset);
}

.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before {
          top: calc(var(--spectrum-splitview-vertical-gripper-width) - var(--spectrum-dragbar-handle-width, var(--spectrum-global-dimension-static-size-25)) / 2);
          width: var(--spectrum-splitview-vertical-gripper-outer-width);
          height: var(--spectrum-dragbar-handle-width, var(--spectrum-global-dimension-static-size-25));
        }

.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper {
        top: var(--spectrum-splitview-vertical-gripper-reset);
      }

.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper {
        top: auto;
        bottom: var(--spectrum-splitview-vertical-gripper-reset);
      }

.spectrum-SplitView-pane {
  background-color: var(--spectrum-panel-background-color, var(--spectrum-global-color-gray-100));
}

.spectrum-SplitView-splitter {
  background-color: var(--spectrum-dragbar-handle-background-color, var(--spectrum-global-color-gray-300));
}

.spectrum-SplitView-gripper {
  border-color: var(--spectrum-dragbar-handle-background-color, var(--spectrum-global-color-gray-300));
}

.spectrum-SplitView-gripper:before {
    background-color: var(--spectrum-dragbar-handle-background-color, var(--spectrum-global-color-gray-300));
  }

.spectrum-SplitView-splitter.is-draggable:hover,
    .spectrum-SplitView-splitter.is-draggable.is-hovered {
      background-color: var(--spectrum-dragbar-handle-background-color-hover, var(--spectrum-global-color-gray-400));
    }

.spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper, .spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper {
        border-color: var(--spectrum-dragbar-handle-background-color-hover, var(--spectrum-global-color-gray-400));
      }

.spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper:before, .spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper:before {
          background-color: var(--spectrum-dragbar-handle-background-color-hover, var(--spectrum-global-color-gray-400));
        }

.spectrum-SplitView-splitter.is-draggable:active,
    .spectrum-SplitView-splitter.is-draggable.is-active {
      background-color: var(--spectrum-dragbar-handle-background-color-down, var(--spectrum-global-color-gray-800));
    }

.spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper, .spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper {
        border-color: var(--spectrum-dragbar-handle-background-color-down, var(--spectrum-global-color-gray-800));
      }

.spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper:before, .spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper:before {
          background-color: var(--spectrum-dragbar-handle-background-color-down, var(--spectrum-global-color-gray-800));
        }

.spectrum-SplitView-splitter.is-draggable:focus {
      outline: none;
    }

.spectrum-SplitView-splitter.is-draggable.focus-ring {
      background-color: var(--spectrum-alias-focus-color, var(--spectrum-global-color-blue-400));
    }

.spectrum-SplitView-splitter.is-draggable.focus-ring .spectrum-SplitView-gripper {
        border-color: var(--spectrum-alias-focus-color, var(--spectrum-global-color-blue-400));
        box-shadow: 0 0 0 1px var(--spectrum-alias-focus-color, var(--spectrum-global-color-blue-400));
      }

.spectrum-SplitView-splitter.is-draggable.focus-ring .spectrum-SplitView-gripper:before {
          background-color: var(--spectrum-alias-focus-color, var(--spectrum-global-color-blue-400));
        }