vue-amazing-ui/lib/drawer/Drawer.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.fade-enter-active[data-v-7d0b1a04],.fade-leave-active[data-v-7d0b1a04]{transition:opacity .3s}.fade-enter-from[data-v-7d0b1a04],.fade-leave-to[data-v-7d0b1a04]{opacity:0}.motion-top-enter-active[data-v-7d0b1a04],.motion-top-leave-active[data-v-7d0b1a04]{transition:all .3s}.motion-top-enter-from[data-v-7d0b1a04],.motion-top-leave-to[data-v-7d0b1a04]{transform:translateY(-100%)}.motion-right-enter-active[data-v-7d0b1a04],.motion-right-leave-active[data-v-7d0b1a04]{transition:all .3s}.motion-right-enter-from[data-v-7d0b1a04],.motion-right-leave-to[data-v-7d0b1a04]{transform:translate(100%)}.motion-bottom-enter-active[data-v-7d0b1a04],.motion-bottom-leave-active[data-v-7d0b1a04]{transition:all .3s}.motion-bottom-enter-from[data-v-7d0b1a04],.motion-bottom-leave-to[data-v-7d0b1a04]{transform:translateY(100%)}.motion-left-enter-active[data-v-7d0b1a04],.motion-left-leave-active[data-v-7d0b1a04]{transition:all .3s}.motion-left-enter-from[data-v-7d0b1a04],.motion-left-leave-to[data-v-7d0b1a04]{transform:translate(-100%)}.m-drawer[data-v-7d0b1a04]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;pointer-events:none;outline:none}.m-drawer .drawer-mask[data-v-7d0b1a04]{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1000;background:#00000073;pointer-events:auto}.m-drawer .drawer-wrap[data-v-7d0b1a04]{position:absolute;transition:all .3s}.m-drawer .drawer-wrap .drawer-content[data-v-7d0b1a04]{width:100%;height:100%;overflow:auto;background:#fff;pointer-events:auto}.m-drawer .drawer-wrap .drawer-content .drawer-body-wrapper[data-v-7d0b1a04]{display:flex;flex-direction:column;width:100%;height:100%}.m-drawer .drawer-wrap .drawer-content .drawer-body-wrapper .drawer-header[data-v-7d0b1a04]{display:flex;flex:0;align-items:center;padding:16px 24px;font-size:16px;line-height:1.5;border-bottom:1px solid rgba(5,5,5,.06)}.m-drawer .drawer-wrap .drawer-content .drawer-body-wrapper .drawer-header .header-title[data-v-7d0b1a04]{display:flex;flex:1;align-items:center;min-width:0;min-height:0}.m-drawer .drawer-wrap .drawer-content .drawer-body-wrapper .drawer-header .header-title .svg-close[data-v-7d0b1a04]{display:inline-block;margin-right:12px;font-size:16px;font-weight:600;color:#00000073;fill:currentColor;cursor:pointer;transition:color .2s}.m-drawer .drawer-wrap .drawer-content .drawer-body-wrapper .drawer-header .header-title .svg-close[data-v-7d0b1a04]:hover{color:#000000e0}.m-drawer .drawer-wrap .drawer-content .drawer-body-wrapper .drawer-header .header-title .header-title[data-v-7d0b1a04]{flex:1;margin:0;color:#000000e0;font-weight:600;font-size:16px;line-height:1.5}.m-drawer .drawer-wrap .drawer-content .drawer-body-wrapper .drawer-header .header-extra[data-v-7d0b1a04]{flex:none;color:#000000e0}.m-drawer .drawer-wrap .drawer-content .drawer-body-wrapper .drawer-body[data-v-7d0b1a04]{height:100%;padding:24px;word-break:break-all}.m-drawer .drawer-wrap .drawer-content .drawer-body-wrapper .drawer-footer[data-v-7d0b1a04]{flex-shrink:0;padding:8px 16px;border-top:1px solid rgba(5,5,5,.06);color:#000000e0}.m-drawer .drawer-top[data-v-7d0b1a04]{top:0;left:0;right:0;box-shadow:0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d}.m-drawer .drawer-right[data-v-7d0b1a04]{top:0;right:0;bottom:0;box-shadow:-6px 0 16px #00000014,-3px 0 6px -4px #0000001f,-9px 0 28px 8px #0000000d}.m-drawer .drawer-bottom[data-v-7d0b1a04]{bottom:0;left:0;right:0;box-shadow:0 -6px 16px #00000014,0 -3px 6px -4px #0000001f,0 -9px 28px 8px #0000000d}.m-drawer .drawer-left[data-v-7d0b1a04]{top:0;bottom:0;left:0;box-shadow:6px 0 16px #00000014,3px 0 6px -4px #0000001f,9px 0 28px 8px #0000000d}