UNPKG

@adobe/spectrum-css

Version:

The Spectrum CSS top-level backwards compatible package

87 lines (82 loc) 2.46 kB
.spectrum-SplitView { display: -ms-flexbox; display: flex; overflow: hidden; } .spectrum-SplitView-pane { height: 100%; } .spectrum-SplitView-gripper { content: ''; display: block; position: absolute; border-style: solid; border-radius: 2px; top: 50%; transform: translate(0, -50%); left: -4px; width: 4px; height: 16px; border-width: 4px 3px; } .spectrum-SplitView-splitter { position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 2px; height: 100%; z-index: 1; } .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; left: calc(50% - 1px); width: 2px; height: 100%; } .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper { left: 0; } .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper { right: 0; left: auto; } .spectrum-SplitView--vertical { -ms-flex-direction: column; flex-direction: column; } .spectrum-SplitView--vertical .spectrum-SplitView-pane { height: auto; width: 100%; } .spectrum-SplitView--vertical .spectrum-SplitView-gripper { top: -4px; transform: translate(-50%, 0); left: 50%; width: 16px; height: 4px; border-width: 3px 4px; } .spectrum-SplitView--vertical .spectrum-SplitView-splitter { width: 100%; height: 2px; } .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper { left: 50%; } .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(50% - 1px); left: 0; width: 100%; height: 2px; } .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper { top: 0; } .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper { top: auto; bottom: 0; }