@opentiny/vue-theme/split/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-split-wrapper{--tv-Split-wrapper-border-color:var(--tv-color-border, #c2c2c2);--tv-Split-trigger-icon-line-color:var(--tv-color-icon, #808080);--tv-Split-trigger-icon-line-color-hover:var(--tv-color-icon-hover, #191919);--tv-Split-wrapper-radius-size:var(--tv-border-radius-lg, 8px);--tv-Split-trigger-line-bg-hover:var(--tv-color-border-active-control, #1476ff);position:relative;width:100%;height:100%;overflow:hidden;border-radius:var(--tv-Split-wrapper-radius-size);border:1px solid var(--tv-Split-wrapper-border-color)}.tiny-split-wrapper.no-border{border:none}.tiny-split-wrapper .tiny-split-wrapper{border-radius:0;border:none}.tiny-split-pane{position:absolute}.tiny-split-pane.left-pane,.tiny-split-pane.right-pane{top:0;bottom:0;overflow:hidden}.tiny-split-pane.left-pane{left:0}.tiny-split-pane.right-pane{right:0}.tiny-split-pane.bottom-pane,.tiny-split-pane.top-pane{left:0;right:0;overflow:hidden}.tiny-split-pane.top-pane{top:0}.tiny-split-pane.bottom-pane{bottom:0}.tiny-split-trigger-con{position:absolute;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:10}.tiny-split-trigger-bar-con{position:absolute;background:0 0}.tiny-split-trigger-bar-con.vertical{top:50%;width:16px;-webkit-transform:translate(-4px,-50%);transform:translate(-4px,-50%)}.tiny-split-trigger-bar-con.vertical svg{-webkit-transform:translateX(5px);transform:translateX(5px);fill:var(--tv-Split-trigger-icon-line-color)}.tiny-split-trigger-bar-con.horizontal{left:50%;width:16px;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}.tiny-split-trigger-bar-con.horizontal svg{-webkit-transform:translateY(2px);transform:translateY(2px);fill:var(--tv-Split-trigger-icon-line-color)}.tiny-split-trigger-vertical{width:1px;height:100%;background:var(--tv-Split-wrapper-border-color);cursor:e-resize}.tiny-split-trigger-vertical .tiny-split-trigger-bar{width:4px;height:4px;background:var(--tv-Split-wrapper-border-color);float:left;margin-top:4px}.tiny-split-trigger-horizontal{height:1px;width:100%;background:var(--tv-Split-wrapper-border-color);cursor:n-resize}.tiny-split-trigger-horizontal .tiny-split-trigger-bar{height:4px;width:4px;background:var(--tv-Split-wrapper-border-color);float:left;margin-left:4px;border-radius:50%}.tiny-split-horizontal .tiny-split-trigger-con{top:50%;height:100%;width:0}.tiny-split-horizontal .tiny-split-trigger-con .tiny-split-trigger-button{width:14px;height:26px;position:absolute;top:50%}.tiny-split-horizontal .tiny-split-trigger-con .tiny-split-trigger-button:hover{width:18px}.tiny-split-horizontal .tiny-split-trigger-con .tiny-split-trigger-left-button{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);left:-6px;border-right:0}.tiny-split-horizontal .tiny-split-trigger-con .tiny-split-trigger-left-button:hover{left:-10px}.tiny-split-horizontal .tiny-split-trigger-con .tiny-split-trigger-right-button{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);left:9px;border-left:0}.tiny-split-horizontal .tiny-split-trigger-con.tiny-split-trigger-con-disabled .tiny-split-trigger-horizontal,.tiny-split-horizontal .tiny-split-trigger-con.tiny-split-trigger-con-disabled .tiny-split-trigger-vertical{cursor:not-allowed}.tiny-split-horizontal .tiny-split-trigger-con.tiny-split-trigger-con-left-active{margin-left:-1px}.tiny-split-horizontal .tiny-split-vertical .tiny-split-trigger-con{left:50%;height:0;width:100%}.tiny-split-horizontal .tiny-split-trigger-con-drag{cursor:e-resize}.tiny-split-horizontal .tiny-split-pane-moving{cursor:e-resize}.tiny-split-vertical .tiny-split-trigger-con{left:50%;height:0;width:100%}.tiny-split-vertical .tiny-split-trigger-con .tiny-split-trigger-button{width:26px;height:14px;position:absolute;left:50%}.tiny-split-vertical .tiny-split-trigger-con .tiny-split-trigger-button:hover{height:18px}.tiny-split-vertical .tiny-split-trigger-con .tiny-split-trigger-top-button{-webkit-transform:translate(-50%,0);transform:translate(-50%,0);top:-6px;border-bottom:0}.tiny-split-vertical .tiny-split-trigger-con .tiny-split-trigger-top-button .tiny-svg{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.tiny-split-vertical .tiny-split-trigger-con .tiny-split-trigger-top-button:hover{top:-10px}.tiny-split-vertical .tiny-split-trigger-con .tiny-split-trigger-bottom-button{-webkit-transform:translate(-50%,0);transform:translate(-50%,0);border-top:0;top:9px}.tiny-split-vertical .tiny-split-trigger-con .tiny-split-trigger-bottom-button .tiny-svg{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.tiny-split-vertical .tiny-split-trigger-con.tiny-split-trigger-con-disabled .tiny-split-trigger-horizontal,.tiny-split-vertical .tiny-split-trigger-con.tiny-split-trigger-con-disabled .tiny-split-trigger-vertical{cursor:not-allowed}.tiny-split-vertical .tiny-split-trigger-con.tiny-split-trigger-con-top-active{margin-top:-1px}.tiny-split-vertical .tiny-split-horizontal .tiny-split-trigger-con{top:50%;height:100%;width:0}.tiny-split-vertical .tiny-split-trigger-con-drag{cursor:n-resize}.tiny-split-vertical .tiny-split-pane-moving{cursor:n-resize}.tiny-split .no-select{-ms-user-select:none;-webkit-user-select:none;-o-user-select:none;-moz-user-select:none;user-select:none}.tiny-split-trigger-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;visibility:hidden}.tiny-split-trigger-button .tiny-svg{fill:var(--tv-Split-trigger-icon-line-color)}.tiny-split-trigger-button:hover{cursor:pointer}.tiny-split-trigger-button:hover .tiny-svg{fill:var(--tv-Split-trigger-icon-line-color-hover)}.tiny-split-trigger-button-show{visibility:visible}.tiny-split-trigger-con-vertical.tiny-split-trigger-con-simple{padding:0 8px;cursor:e-resize}.tiny-split-trigger-con-horizontal.tiny-split-trigger-con-simple{padding:8px 0;cursor:n-resize}.tiny-split-trigger-con-simple .tiny-split-trigger-vertical{width:1px}.tiny-split-trigger-con-simple .tiny-split-trigger-horizontal{height:1px}.tiny-split-trigger-con-simple:hover .tiny-split-trigger{background:var(--tv-Split-trigger-line-bg-hover)}