double-ui-vue
Version:
2 lines (1 loc) • 2.11 kB
CSS
.d-sidebar-custom{position:relative;display:flex;width:100%;height:100%;font-size:0;overflow:hidden}.d-sidebar-custom-col-resize{cursor:col-resize}.d-sidebar-custom-col-resize>div{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.d-sidebar-custom-col-resize .d-sidebar-left{pointer-events:none}.d-sidebar-custom-normal .d-sidebar-custom-btn{border-radius:12px;width:24px;height:24px;line-height:24px;transform:translate(-12px)}.d-sidebar-custom-normal .d-sidebar-custom-btn svg{width:12px;height:12px}.d-sidebar-custom-large .d-sidebar-custom-btn{border-radius:14px;width:28px;height:28px;line-height:28px;transform:translate(-14px)}.d-sidebar-custom-large .d-sidebar-custom-btn svg{width:16px;height:16px}.d-sidebar-custom-line{position:absolute;left:222px;top:0;z-index:11;background-color:var(--blue-500);width:2px;height:100%;pointer-events:none}.d-sidebar-custom-bar{position:absolute;top:0;z-index:11;width:3px;height:100%}.d-sidebar-custom-bar-change-size{cursor:col-resize}.d-sidebar-custom-bar-change-size:hover:before{content:"";position:absolute;top:0;right:1px;z-index:11;display:block;background-color:var(--blue-500);width:2px;height:100%}.d-sidebar-custom-btn{position:absolute;top:16px;z-index:12;display:inline-block;background-color:var(--theme);border:1px solid var(--grey-300);box-shadow:var(--box-shadow-right);overflow:hidden;font-size:0;text-align:center;cursor:pointer;transition:background-color .3s}.d-sidebar-custom-btn:hover{background-color:var(--blue-500);border-color:var(--blue-500)}.d-sidebar-custom-btn:hover svg path{fill:var(--white)}.d-sidebar-custom-btn svg{margin-top:-2px;vertical-align:middle;font-size:0;transition:transform .3s}.d-sidebar-custom-btn svg path{transition:fill .3s}.d-sidebar-custom-btn-normal svg{margin-left:-2px}.d-sidebar-custom-btn-rotate svg{margin-right:-2px;transform:rotate(180deg)}.d-sidebar-left{position:relative;z-index:10;background-color:var(--grey-50);border-right:1px solid var(--grey-300);width:224px;height:100%;overflow:auto}.d-sidebar-right{width:calc(100% - 224px);height:100%;overflow:auto}