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

An Amazing Vue3 UI Components Library, Using TypeScript.

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