@patternfly/patternfly/components/Splitter/splitter.css

Assets, source, tooling, and content for PatternFly 4

.pf-c-splitter {
  --pf-c-splitter--Height: 0.5rem;
  --pf-c-splitter--Width: 100%;
  --pf-c-splitter--BackgroundColor: var(--pf-global--BorderColor--100);
  --pf-c-splitter--Cursor: row-resize;
  --pf-c-splitter--m-vertical--Height: 100%;
  --pf-c-splitter--m-vertical--Width: 0.5rem;
  --pf-c-splitter--m-vertical--Cursor: col-resize;
  --pf-c-splitter__handle--Top: 50%;
  --pf-c-splitter__handle--Left: 50%;
  --pf-c-splitter__handle--after--BorderColor: var(--pf-global--Color--100);
  --pf-c-splitter__handle--after--BorderTopWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-splitter__handle--after--BorderRightWidth: 0;
  --pf-c-splitter__handle--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-splitter__handle--after--BorderLeftWidth: 0;
  --pf-c-splitter--m-vertical__handle--after--BorderTopWidth: 0;
  --pf-c-splitter--m-vertical__handle--after--BorderRightWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-splitter--m-vertical__handle--after--BorderBottomWidth: 0;
  --pf-c-splitter--m-vertical__handle--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-splitter__handle--after--Width: 0.75rem;
  --pf-c-splitter__handle--after--Height: 0.25rem;
  --pf-c-splitter__handle--m-vertical--after--Width: 0.25rem;
  --pf-c-splitter__handle--m-vertical--after--Height: 0.75rem;
  position: relative;
  width: var(--pf-c-splitter--Width);
  height: var(--pf-c-splitter--Height);
  cursor: var(--pf-c-splitter--Cursor);
  background-color: var(--pf-c-splitter--BackgroundColor); }
  .pf-c-splitter.pf-m-vertical {
    --pf-c-splitter--Height: var(--pf-c-splitter--m-vertical--Height);
    --pf-c-splitter--Width: var(--pf-c-splitter--m-vertical--Width);
    --pf-c-splitter--Cursor: var(--pf-c-splitter--m-vertical--Cursor);
    --pf-c-splitter__handle--after--Width: var(--pf-c-splitter__handle--m-vertical--after--Width);
    --pf-c-splitter__handle--after--Height: var(--pf-c-splitter__handle--m-vertical--after--Height);
    --pf-c-splitter__handle--after--BorderTopWidth: var(--pf-c-splitter--m-vertical__handle--after--BorderTopWidth);
    --pf-c-splitter__handle--after--BorderRightWidth: var(--pf-c-splitter--m-vertical__handle--after--BorderRightWidth);
    --pf-c-splitter__handle--after--BorderBottomWidth: var(--pf-c-splitter--m-vertical__handle--after--BorderBottomWidth);
    --pf-c-splitter__handle--after--BorderLeftWidth: var(--pf-c-splitter--m-vertical__handle--after--BorderLeftWidth); }

.pf-c-splitter__handle {
  position: absolute;
  top: var(--pf-c-splitter__handle--Top);
  left: var(--pf-c-splitter__handle--Left);
  transform: translate(-50%, -50%); }
  .pf-c-splitter__handle::after {
    display: block;
    width: var(--pf-c-splitter__handle--after--Width);
    height: var(--pf-c-splitter__handle--after--Height);
    content: "";
    border-color: var(--pf-c-splitter__handle--after--BorderColor);
    border-style: solid;
    border-width: var(--pf-c-splitter__handle--after--BorderTopWidth) var(--pf-c-splitter__handle--after--BorderRightWidth) var(--pf-c-splitter__handle--after--BorderBottomWidth) var(--pf-c-splitter__handle--after--BorderLeftWidth); }