vue-devui
Version:
DevUI components based on Vite and Vue3
2 lines (1 loc) • 9 kB
CSS
.devui-fixed-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--devui-shadow, rgba(37, 43, 58, .24));z-index:1050}.devui-fixed-overlay--fade-enter-active,.devui-fixed-overlay--fade-leave-active{transition:opacity .1s cubic-bezier(0,0,1,1)}.devui-fixed-overlay--fade-enter-from,.devui-fixed-overlay--fade-leave-to{opacity:0}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-length-connected-overlay, 0 2px 12px 0) var(--devui-shadow, rgba(37, 43, 58, .24));z-index:1000}.devui-flexible-overlay__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}.devui-tooltip{max-width:200px;min-height:26px;padding:4px 16px;font-size:var(--devui-font-size, 12px);color:var(--devui-feedback-overlay-text, #dfe1e6);letter-spacing:0;line-height:1.5;background:var(--devui-feedback-overlay-bg, #464d6e);box-shadow:none;overflow-wrap:break-word;word-break:break-word;word-wrap:break-word;text-align:start;border-radius:var(--devui-border-radius-feedback, 4px);font-style:normal;font-weight:400;line-break:auto;text-decoration:none;text-shadow:none;text-transform:none;word-spacing:normal;white-space:normal;opacity:1;z-index:var(--devui-z-index-pop-up, 1060)}.devui-tooltip--fade-bottom-enter-from,.devui-tooltip--fade-bottom-leave-to,.devui-tooltip--fade-top-enter-from,.devui-tooltip--fade-top-leave-to{opacity:.8;transform:scaleY(.8)}.devui-tooltip--fade-bottom-enter-to,.devui-tooltip--fade-bottom-leave-from,.devui-tooltip--fade-top-enter-to,.devui-tooltip--fade-top-leave-from{opacity:1;transform:scaleY(1)}.devui-tooltip--fade-bottom-enter-active,.devui-tooltip--fade-top-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-tooltip--fade-bottom-leave-active,.devui-tooltip--fade-top-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-tooltip--fade-left-enter-from,.devui-tooltip--fade-left-leave-to,.devui-tooltip--fade-right-enter-from,.devui-tooltip--fade-right-leave-to{opacity:.8;transform:scaleX(.8)}.devui-tooltip--fade-left-enter-to,.devui-tooltip--fade-left-leave-from,.devui-tooltip--fade-right-enter-to,.devui-tooltip--fade-right-leave-from{opacity:1;transform:scaleX(1)}.devui-tooltip--fade-left-enter-active,.devui-tooltip--fade-right-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-tooltip--fade-left-leave-active,.devui-tooltip--fade-right-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-tooltip--with-content{max-width:unset;padding:0}.devui-splitter__bar{background-color:var(--devui-dividing-line, #f2f2f3);display:flex;position:relative;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0}.devui-splitter__bar .devui-splitter__collapse{background-color:var(--devui-dividing-line, #f2f2f3);position:absolute;z-index:15;cursor:pointer}.devui-splitter__bar .devui-splitter__collapse:before,.devui-splitter__bar .devui-splitter__collapse:after{content:"";width:10px;height:2px;background:#ffffff;display:block;position:absolute}.devui-splitter__bar .devui-splitter__collapse:hover{background-color:var(--devui-brand-hover, #7693f5)}.devui-splitter__bar--horizontal .devui-splitter__collapse{width:12px;height:30px}.devui-splitter__bar--horizontal .devui-splitter__collapse.prev.hidden,.devui-splitter__bar--horizontal .devui-splitter__collapse.next.hidden{display:none}.devui-splitter__bar--horizontal .devui-splitter__collapse.prev{border-radius:0 var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px) 0;left:100%}.devui-splitter__bar--horizontal .devui-splitter__collapse.prev:before,.devui-splitter__bar--horizontal .devui-splitter__collapse.prev.collapsed:before{top:9px;left:1px}.devui-splitter__bar--horizontal .devui-splitter__collapse.prev:before{transform:rotate(-70deg)}.devui-splitter__bar--horizontal .devui-splitter__collapse.prev.collapsed:before{transform:rotate(70deg)}.devui-splitter__bar--horizontal .devui-splitter__collapse.prev:after,.devui-splitter__bar--horizontal .devui-splitter__collapse.prev.collapsed:after{top:18px;left:1px}.devui-splitter__bar--horizontal .devui-splitter__collapse.prev:after{transform:rotate(70deg)}.devui-splitter__bar--horizontal .devui-splitter__collapse.prev.collapsed:after{transform:rotate(-70deg)}.devui-splitter__bar--horizontal .devui-splitter__collapse.next{border-radius:var(--devui-border-radius-feedback, 4px) 0 0 var(--devui-border-radius-feedback, 4px);right:100%}.devui-splitter__bar--horizontal .devui-splitter__collapse.next:before,.devui-splitter__bar--horizontal .devui-splitter__collapse.next.collapsed:before{top:9px;right:1px}.devui-splitter__bar--horizontal .devui-splitter__collapse.next:before{transform:rotate(70deg)}.devui-splitter__bar--horizontal .devui-splitter__collapse.next.collapsed:before{transform:rotate(-70deg)}.devui-splitter__bar--horizontal .devui-splitter__collapse.next:after,.devui-splitter__bar--horizontal .devui-splitter__collapse.next.collapsed:after{top:18px;right:1px}.devui-splitter__bar--horizontal .devui-splitter__collapse.next:after{transform:rotate(-70deg)}.devui-splitter__bar--horizontal .devui-splitter__collapse.next.collapsed:after{transform:rotate(70deg)}.devui-splitter__bar--vertical .devui-splitter__collapse{height:12px;width:30px}.devui-splitter__bar--vertical .devui-splitter__collapse.prev.hidden,.devui-splitter__bar--vertical .devui-splitter__collapse.next.hidden{display:none}.devui-splitter__bar--vertical .devui-splitter__collapse.prev{border-radius:0 0 var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px);top:100%}.devui-splitter__bar--vertical .devui-splitter__collapse.prev:before,.devui-splitter__bar--vertical .devui-splitter__collapse.prev.collapsed:before{bottom:5px;left:5px}.devui-splitter__bar--vertical .devui-splitter__collapse.prev:before{transform:rotate(-20deg)}.devui-splitter__bar--vertical .devui-splitter__collapse.prev.collapsed:before{transform:rotate(20deg)}.devui-splitter__bar--vertical .devui-splitter__collapse.prev:after,.devui-splitter__bar--vertical .devui-splitter__collapse.prev.collapsed:after{bottom:5px;left:14px}.devui-splitter__bar--vertical .devui-splitter__collapse.prev:after{transform:rotate(20deg)}.devui-splitter__bar--vertical .devui-splitter__collapse.prev.collapsed:after{transform:rotate(-20deg)}.devui-splitter__bar--vertical .devui-splitter__collapse.next{border-radius:var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px) 0 0;bottom:100%}.devui-splitter__bar--vertical .devui-splitter__collapse.next:before,.devui-splitter__bar--vertical .devui-splitter__collapse.next.collapsed:before{top:5px;left:5px}.devui-splitter__bar--vertical .devui-splitter__collapse.next:before{transform:rotate(20deg)}.devui-splitter__bar--vertical .devui-splitter__collapse.next.collapsed:before{transform:rotate(-20deg);top:5px;left:5px}.devui-splitter__bar--vertical .devui-splitter__collapse.next:after,.devui-splitter__bar--vertical .devui-splitter__collapse.next.collapsed:after{top:5px;left:14px}.devui-splitter__bar--vertical .devui-splitter__collapse.next:after{transform:rotate(-20deg)}.devui-splitter__bar--vertical .devui-splitter__collapse.next.collapsed:after{transform:rotate(20deg)}.devui-splitter__bar--horizontal.resizable:not(.none-resizable):hover,.devui-splitter__bar--horizontal.resizable:not(.none-resizable):focus,.devui-splitter__bar--horizontal.resizable:not(.none-resizable):active,.devui-splitter__bar--vertical.resizable:not(.none-resizable):hover,.devui-splitter__bar--vertical.resizable:not(.none-resizable):focus,.devui-splitter__bar--vertical.resizable:not(.none-resizable):active{background-color:var(--devui-brand-hover, #7693f5)}.devui-splitter__bar--horizontal.resizable:not(.none-resizable):after,.devui-splitter__bar--vertical.resizable:not(.none-resizable):after{content:"";display:block;position:absolute;z-index:10}.devui-splitter__bar--horizontal.resizable{cursor:col-resize}.devui-splitter__bar--horizontal.resizable:after{cursor:col-resize;height:100%;width:10px;top:0}.devui-splitter__bar--vertical.resizable{cursor:row-resize}.devui-splitter__bar--vertical.resizable:after{cursor:row-resize;width:100%;height:10px;left:0}.devui-splitter{display:flex;width:100%;height:auto;position:relative;border-radius:var(--devui-border-radius, 2px)}.devui-splitter.devui-splitter--horizontal{flex-direction:row}.devui-splitter.devui-splitter--vertical{flex-direction:column}.devui-splitter__pane{position:relative;flex:1 1 auto;display:block;min-width:0;max-width:100%;min-height:0;max-height:100%}.devui-splitter__pane--fixed{flex-grow:0;flex-shrink:0}.devui-splitter__pane--hidden{flex:0;overflow:hidden}.devui-splitter__pane--grow{flex-grow:1}