vue-allotment/dist/vue-allotment.css

Vue 3 port of React Allotment - resizable split views with draggable dividers

:root{--separator-border: rgba(128, 128, 128, .35);--sash-hover-transition-duration: .1s}._splitView_pzp7c_6{height:100%;overflow:hidden;position:relative;width:100%}._splitView_pzp7c_6>._sashContainer_pzp7c_13{height:100%;pointer-events:none;position:absolute;width:100%}._splitView_pzp7c_6>._sashContainer_pzp7c_13>._sash_pzp7c_13{pointer-events:auto}._splitView_pzp7c_6>._splitViewContainer_pzp7c_24{height:100%;position:relative;white-space:nowrap;width:100%}._splitView_pzp7c_6>._splitViewContainer_pzp7c_24>._splitViewView_pzp7c_31{overflow:hidden;position:absolute;white-space:initial}._splitView_pzp7c_6._vertical_pzp7c_37>._splitViewContainer_pzp7c_24>._splitViewView_pzp7c_31{width:100%}._splitView_pzp7c_6._horizontal_pzp7c_41>._splitViewContainer_pzp7c_24>._splitViewView_pzp7c_31{height:100%}._splitView_pzp7c_6._separatorBorder_pzp7c_45>._splitViewContainer_pzp7c_24>._splitViewView_pzp7c_31:not(:first-child):before{background-color:var(--separator-border);content:" ";left:0;pointer-events:none;position:absolute;top:0;z-index:5}._splitView_pzp7c_6._separatorBorder_pzp7c_45._vertical_pzp7c_37>._splitViewContainer_pzp7c_24>._splitViewView_pzp7c_31:not(:first-child):before{height:1px;width:100%}._splitView_pzp7c_6._separatorBorder_pzp7c_45._horizontal_pzp7c_41>._splitViewContainer_pzp7c_24>._splitViewView_pzp7c_31:not(:first-child):before{height:100%;width:1px}:root{--focus-border: #007fd4;--sash-size: 8px;--sash-hover-size: 4px}._sash_j5cmb_7{position:absolute;z-index:35;touch-action:none;pointer-events:auto;text-align:initial}._sash_j5cmb_7._disabled_j5cmb_15{pointer-events:none}._sash_j5cmb_7._mac_j5cmb_19._vertical_j5cmb_19{cursor:col-resize}._sash_j5cmb_7._vertical_j5cmb_19._minimum_j5cmb_23{cursor:e-resize}._sash_j5cmb_7._vertical_j5cmb_19._maximum_j5cmb_27{cursor:w-resize}._sash_j5cmb_7._mac_j5cmb_19._horizontal_j5cmb_31{cursor:row-resize}._sash_j5cmb_7._horizontal_j5cmb_31._minimum_j5cmb_23{cursor:s-resize}._sash_j5cmb_7._horizontal_j5cmb_31._maximum_j5cmb_27{cursor:n-resize}._sash_j5cmb_7._disabled_j5cmb_15{cursor:default!important;pointer-events:none!important}._sash_j5cmb_7._vertical_j5cmb_19{cursor:ew-resize;top:0;width:var(--sash-size);height:100%}._sash_j5cmb_7._horizontal_j5cmb_31{cursor:ns-resize;left:0;width:100%;height:var(--sash-size)}._sash_j5cmb_7:not(._disabled_j5cmb_15)>._orthogonal-drag-handle_j5cmb_62{content:" ";height:calc(var(--sash-size) * 2);width:calc(var(--sash-size) * 2);z-index:100;display:block;cursor:all-scroll;position:absolute}._sash_j5cmb_7._horizontal_j5cmb_31._orthogonal-edge-north_j5cmb_72:not(._disabled_j5cmb_15)>._orthogonal-drag-handle_j5cmb_62._start_j5cmb_73,._sash_j5cmb_7._horizontal_j5cmb_31._orthogonal-edge-south_j5cmb_74:not(._disabled_j5cmb_15)>._orthogonal-drag-handle_j5cmb_62._end_j5cmb_75{cursor:nwse-resize}._sash_j5cmb_7._horizontal_j5cmb_31._orthogonal-edge-north_j5cmb_72:not(._disabled_j5cmb_15)>._orthogonal-drag-handle_j5cmb_62._end_j5cmb_75,._sash_j5cmb_7._horizontal_j5cmb_31._orthogonal-edge-south_j5cmb_74:not(._disabled_j5cmb_15)>._orthogonal-drag-handle_j5cmb_62._start_j5cmb_73{cursor:nesw-resize}._sash_j5cmb_7._vertical_j5cmb_19>._orthogonal-drag-handle_j5cmb_62._start_j5cmb_73{left:calc(var(--sash-size) * -.5);top:calc(var(--sash-size) * -1)}._sash_j5cmb_7._vertical_j5cmb_19>._orthogonal-drag-handle_j5cmb_62._end_j5cmb_75{left:calc(var(--sash-size) * -.5);bottom:calc(var(--sash-size) * -1)}._sash_j5cmb_7._horizontal_j5cmb_31>._orthogonal-drag-handle_j5cmb_62._start_j5cmb_73{top:calc(var(--sash-size) * -.5);left:calc(var(--sash-size) * -1)}._sash_j5cmb_7._horizontal_j5cmb_31>._orthogonal-drag-handle_j5cmb_62._end_j5cmb_75{top:calc(var(--sash-size) * -.5);right:calc(var(--sash-size) * -1)}._sash_j5cmb_7:before{content:"";pointer-events:none;position:absolute;width:100%;height:100%;transition:background-color var(--sash-hover-transition-duration) ease-out;background:transparent}._sash_j5cmb_7._vertical_j5cmb_19:before{width:var(--sash-hover-size);left:calc(50% - (var(--sash-hover-size) / 2))}._sash_j5cmb_7._horizontal_j5cmb_31:before{height:var(--sash-hover-size);top:calc(50% - (var(--sash-hover-size) / 2))}._sash_j5cmb_7._hover_j5cmb_126:before,._sash_j5cmb_7._active_j5cmb_127:before{background:var(--focus-border)}