vue-amazing-ui/es/dialog/Dialog.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.fade-enter-active[data-v-51ea41ee],.fade-leave-active[data-v-51ea41ee]{transition:opacity .2s linear}.fade-enter-from[data-v-51ea41ee],.fade-leave-to[data-v-51ea41ee]{opacity:0}.zoom-enter[data-v-51ea41ee]{transform:none;opacity:0;animation-duration:.3s;animation-fill-mode:both;animation-timing-function:cubic-bezier(.08,.82,.17,1);animation-play-state:paused}.zoom-enter-active[data-v-51ea41ee]{animation-name:zoomIn-51ea41ee;animation-play-state:running}@keyframes zoomIn-51ea41ee{0%{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}.zoom-leave[data-v-51ea41ee]{animation-duration:.2s;animation-fill-mode:both;animation-play-state:paused;animation-timing-function:cubic-bezier(.78,.14,.15,.86)}.zoom-leave-active[data-v-51ea41ee]{animation-name:zoomOut-51ea41ee;animation-play-state:running}@keyframes zoomOut-51ea41ee{0%{transform:scale(1);opacity:1}to{transform:scale(.2);opacity:0}}.dialog-mask[data-v-51ea41ee]{position:fixed;inset:0;width:100%;height:100%;z-index:1000;background:#00000073}.dialog-wrap[data-v-51ea41ee]{position:fixed;inset:0;overflow:auto;outline:0;z-index:1010}.dialog-wrap .dialog-container[data-v-51ea41ee]{position:relative;margin:0 auto;color:#000000e0;font-size:14px;line-height:1.57142857;width:auto;max-width:calc(100vw - 32px);padding-bottom:24px;outline:none}.dialog-wrap .dialog-container .dialog-body-wrap[data-v-51ea41ee]{display:flex;flex-direction:column;position:relative;background-color:#fff;border-radius:8px;box-shadow:0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d;padding:20px 24px}.dialog-wrap .dialog-container .dialog-body-wrap .dialog-header[data-v-51ea41ee]{font-size:16px;color:#000000e0;font-weight:600;line-height:1.5;word-break:break-all;background:transparent;border-radius:8px 8px 0 0;margin-bottom:8px;max-width:calc(100% - 24px)}.dialog-wrap .dialog-container .dialog-body-wrap .header-with-switch[data-v-51ea41ee]{max-width:calc(100% - 54px)}.dialog-wrap .dialog-container .dialog-body-wrap .fullscreen-action[data-v-51ea41ee]{position:absolute;top:20px;z-index:1010;font-weight:600;line-height:1;background:transparent;border-radius:4px;width:22px;height:22px;cursor:pointer;transition:background .2s;display:flex;align-items:center;justify-content:center;right:48px}.dialog-wrap .dialog-container .dialog-body-wrap .fullscreen-action svg[data-v-51ea41ee]{font-size:16px;color:#00000073;fill:currentColor;transition:color .2s}.dialog-wrap .dialog-container .dialog-body-wrap .fullscreen-action[data-v-51ea41ee]:hover{background:#0000000f}.dialog-wrap .dialog-container .dialog-body-wrap .fullscreen-action:hover svg[data-v-51ea41ee]{color:#000000e0}.dialog-wrap .dialog-container .dialog-body-wrap .close-action[data-v-51ea41ee]{position:absolute;top:20px;right:18px;z-index:1010;font-weight:600;line-height:1;background:transparent;border-radius:4px;width:22px;height:22px;cursor:pointer;transition:background .2s;display:flex;align-items:center;justify-content:center}.dialog-wrap .dialog-container .dialog-body-wrap .close-action svg[data-v-51ea41ee]{font-size:16px;color:#00000073;fill:currentColor;transition:color .2s}.dialog-wrap .dialog-container .dialog-body-wrap .close-action[data-v-51ea41ee]:hover{background:#0000000f}.dialog-wrap .dialog-container .dialog-body-wrap .close-action:hover svg[data-v-51ea41ee]{color:#000000e0}.dialog-wrap .dialog-container .dialog-body-wrap .dialog-content[data-v-51ea41ee]{font-size:14px;color:#000000e0;line-height:1.57142857;word-break:break-all;transition:all .25s}.dialog-wrap .dialog-container .dialog-body-wrap .dialog-footer[data-v-51ea41ee]{text-align:end;background:transparent;margin-top:12px}.dialog-wrap .dialog-container .dialog-body-wrap .dialog-footer .mr8[data-v-51ea41ee]{margin-right:8px}.dialog-wrap .dialog-with-fullscreen[data-v-51ea41ee]{max-width:100%;padding-bottom:0}.flex-centered[data-v-51ea41ee]{display:flex;justify-content:center;align-items:center}.flex-centered .dialog-container[data-v-51ea41ee]{padding-bottom:0}