@use "sass:list"; @use '../helpers/baseMixin.scss'; .vxe-split { width: 100%; &.is--vertical { & > .vxe-split-wrapper { flex-direction: column; & > .vxe-split-pane { width: 100%; } } } &.is--drag { user-select: none; & > .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; 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; 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 { 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; @include baseMixin.createAnimationTransition(transform, 0.1s); &:hover { background-color: var(--vxe-ui-font-primary-lighten-color); } &:active { transform: translate(-50%, -50%) scale(0.9); } } .vxe-split-pane { display: flex; position: relative; overflow: hidden; &.is--hidden { width: 0; } &.is--padding { & > .vxe-split-pane--wrapper { padding: var(--vxe-ui-layout-padding-default); } } &.is--fill { flex-grow: 1; } &.is--width, &.is--height { flex-shrink: 0; } &.is--border { & > .vxe-split-pane--wrapper { border: 1px solid var(--vxe-ui-base-popup-border-color); } } &.is--resize { &.is--expand { &.is--horizontal { & > .vxe-split-pane-handle { .vxe-split-pane-handle-bar { cursor: w-resize; } } } &.is--vertical { & > .vxe-split-pane-handle { .vxe-split-pane-handle-bar { cursor: n-resize; } } } & > .vxe-split-pane-handle { & > .vxe-split-pane-handle-bar { background-color: var(--vxe-ui-split-handle-bar-background-color); &:hover { background-color: var(--vxe-ui-font-primary-lighten-color); } &:active { background-color: var(--vxe-ui-font-primary-darken-color); } } } } } &.is--horizontal { flex-direction: row; & > .vxe-split-pane-handle { .vxe-split-pane-handle-bar { width: var(--vxe-ui-split-handle-bar-horizontal-width); height: 100%; } .vxe-split-pane-action-btn { width: var(--vxe-ui-split-handle-bar-horizontal-width); height: var(--vxe-ui-split-handle-bar-horizontal-height); } } &.is--border { & > .vxe-split-pane-handle { border-width: 1px 0 1px 0; } } } &.is--vertical { flex-direction: column; & > .vxe-split-pane-handle { .vxe-split-pane-handle-bar { height: var(--vxe-ui-split-handle-bar-vertical-height); width: 100%; } .vxe-split-pane-action-btn { width: var(--vxe-ui-split-handle-bar-vertical-width); height: var(--vxe-ui-split-handle-bar-vertical-height); } } &.is--border { & > .vxe-split-pane-handle { border-width: 0 1px 0 1px; } } } } .vxe-modal--content { & > .vxe-split { height: 100%; } }