.vxe-split { width: 100%; } .vxe-split.is--vertical > .vxe-split-wrapper { flex-direction: column; } .vxe-split.is--vertical > .vxe-split-wrapper > .vxe-split-pane { width: 100%; } .vxe-split.is--drag { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .vxe-split.is--drag > .vxe-split-wrapper > .vxe-split-pane > .vxe-split-pane--wrapper::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .vxe-split-wrapper { height: 100%; display: flex; flex-direction: row; overflow: hidden; } .vxe-split-slots { display: none; } .vxe-split-pane-handle { position: relative; flex-shrink: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .vxe-split-pane--wrapper { position: relative; word-break: break-word; overflow: hidden; flex-grow: 1; } .vxe-split-pane--inner { height: 100%; width: 100%; overflow: auto; } .vxe-split-pane--inner > .vxe-split { height: 100%; } .vxe-split-pane-handle-bar { background-color: var(--vxe-ui-split-handle-bar-background-color); } .vxe-split-pane-action-btn { position: absolute; display: flex; flex-direction: row; align-items: center; justify-content: center; font-size: 0.5em; border-radius: var(--vxe-ui-base-border-radius); top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; color: var(--vxe-ui-layout-background-color); background-color: var(--vxe-ui-split-handle-button-background-color); border: 1px solid var(--vxe-ui-input-border-color); cursor: pointer; transition: transform 0.1s ease-in-out; } .vxe-split-pane-action-btn:hover { background-color: var(--vxe-ui-font-primary-lighten-color); } .vxe-split-pane-action-btn:active { transform: translate(-50%, -50%) scale(0.9); } .vxe-split-pane { display: flex; position: relative; overflow: hidden; } .vxe-split-pane.is--hidden { width: 0; } .vxe-split-pane.is--padding > .vxe-split-pane--wrapper { padding: var(--vxe-ui-layout-padding-default); } .vxe-split-pane.is--fill { flex-grow: 1; } .vxe-split-pane.is--width, .vxe-split-pane.is--height { flex-shrink: 0; } .vxe-split-pane.is--border > .vxe-split-pane--wrapper { border: 1px solid var(--vxe-ui-base-popup-border-color); } .vxe-split-pane.is--resize.is--expand.is--horizontal > .vxe-split-pane-handle .vxe-split-pane-handle-bar { cursor: w-resize; } .vxe-split-pane.is--resize.is--expand.is--vertical > .vxe-split-pane-handle .vxe-split-pane-handle-bar { cursor: n-resize; } .vxe-split-pane.is--resize.is--expand > .vxe-split-pane-handle > .vxe-split-pane-handle-bar { background-color: var(--vxe-ui-split-handle-bar-background-color); } .vxe-split-pane.is--resize.is--expand > .vxe-split-pane-handle > .vxe-split-pane-handle-bar:hover { background-color: var(--vxe-ui-font-primary-lighten-color); } .vxe-split-pane.is--resize.is--expand > .vxe-split-pane-handle > .vxe-split-pane-handle-bar:active { background-color: var(--vxe-ui-font-primary-darken-color); } .vxe-split-pane.is--horizontal { flex-direction: row; } .vxe-split-pane.is--horizontal > .vxe-split-pane-handle .vxe-split-pane-handle-bar { width: var(--vxe-ui-split-handle-bar-horizontal-width); height: 100%; } .vxe-split-pane.is--horizontal > .vxe-split-pane-handle .vxe-split-pane-action-btn { width: var(--vxe-ui-split-handle-bar-horizontal-width); height: var(--vxe-ui-split-handle-bar-horizontal-height); } .vxe-split-pane.is--horizontal.is--border > .vxe-split-pane-handle { border-width: 1px 0 1px 0; } .vxe-split-pane.is--vertical { flex-direction: column; } .vxe-split-pane.is--vertical > .vxe-split-pane-handle .vxe-split-pane-handle-bar { height: var(--vxe-ui-split-handle-bar-vertical-height); width: 100%; } .vxe-split-pane.is--vertical > .vxe-split-pane-handle .vxe-split-pane-action-btn { width: var(--vxe-ui-split-handle-bar-vertical-width); height: var(--vxe-ui-split-handle-bar-vertical-height); } .vxe-split-pane.is--vertical.is--border > .vxe-split-pane-handle { border-width: 0 1px 0 1px; } .vxe-modal--content > .vxe-split { height: 100%; }