fine-true/lib/drawer/index.css

A small and beautiful Vue3 version of the UI Library

.fine-drawer-content{position:fixed;background-color:#fff;z-index:var(--fine-drawer-zindex);display:flex;flex-direction:column}.fine-drawer-content.fine-drawer-rtl{right:0;top:0;height:100%}.fine-drawer-content.fine-drawer-ltr{left:0;top:0;height:100%}.fine-drawer-content.fine-drawer-ttb{left:0;top:0;width:100%}.fine-drawer-content.fine-drawer-btt{left:0;bottom:0;width:100%}.fine-drawer-head{display:flex;padding:var(--fine-drawer-head-padding);line-height:var(--fine-drawer-head-line-height)}.fine-drawer-head .fine-drawer-title{flex:1;font-size:var(--fine-drawer-title-size);color:var(--fine-drawer-title-color)}.fine-drawer-head .fine-drawer-close .fine-icon{font-size:var(--fine-drawer-head-icon-size);color:var(--fine-drawer-head-icon-color);transition:color .25s}.fine-drawer-head .fine-drawer-close .fine-icon:hover{color:var(--fine-drawer-head-icon-hover-color)}.fine-drawer-body{padding:var(--fine-drawer-body-padding);font-size:var(--fine-drawer-body-size);color:var(--fine-drawer-body-color);line-height:var(--fine-drawer-body-line-height);flex:1;overflow:auto}.fine-drawer-fade-btt-enter-active,.fine-drawer-fade-ltr-enter-active,.fine-drawer-fade-rtl-enter-active,.fine-drawer-fade-ttb-enter-active{transition:all .15s ease-out}.fine-drawer-fade-btt-leave-active,.fine-drawer-fade-ltr-leave-active,.fine-drawer-fade-rtl-leave-active,.fine-drawer-fade-ttb-leave-active{transition:all .15s cubic-bezier(1,.5,.8,1)}.fine-drawer-fade-rtl-enter-from,.fine-drawer-fade-rtl-leave-to{transform:translateX(100%)}.fine-drawer-fade-ltr-enter-from,.fine-drawer-fade-ltr-leave-to{transform:translateX(-100%)}.fine-drawer-fade-ttb-enter-from,.fine-drawer-fade-ttb-leave-to{transform:translateY(-100%)}.fine-drawer-fade-btt-enter-from,.fine-drawer-fade-btt-leave-to{transform:translateY(100%)}