vue-amazing-ui/lib/modal/Modal.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.fade-enter-active[data-v-8d7a6788],.fade-leave-active[data-v-8d7a6788]{transition:opacity .2s linear}.fade-enter-from[data-v-8d7a6788],.fade-leave-to[data-v-8d7a6788]{opacity:0}.zoom-enter[data-v-8d7a6788]{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-8d7a6788]{animation-name:zoomIn-8d7a6788;animation-play-state:running}@keyframes zoomIn-8d7a6788{0%{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}.zoom-leave[data-v-8d7a6788]{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-8d7a6788]{animation-name:zoomOut-8d7a6788;animation-play-state:running}@keyframes zoomOut-8d7a6788{0%{transform:scale(1);opacity:1}to{transform:scale(.2);opacity:0}}.modal-mask[data-v-8d7a6788]{position:fixed;inset:0;width:100%;height:100%;z-index:1000;background:#00000073}.modal-wrap[data-v-8d7a6788]{position:fixed;inset:0;overflow:auto;outline:0;z-index:1010}.modal-wrap .modal-container[data-v-8d7a6788]{position:relative;margin:0 auto;color:#000000e0;font-size:14px;line-height:1.57142857;padding-bottom:24px;outline:none}.modal-wrap .modal-container .modal-body-wrap[data-v-8d7a6788]{position:relative;word-break:break-all;padding:20px 24px;background-color:#fff;border-radius:8px;width:auto;max-width:calc(100vw - 32px);box-shadow:0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d}.modal-wrap .modal-container .modal-body-wrap .modal-body[data-v-8d7a6788]{display:flex;flex-wrap:wrap;align-items:center}.modal-wrap .modal-container .modal-body-wrap .modal-body .modal-header[data-v-8d7a6788]{display:flex;align-items:center}.modal-wrap .modal-container .modal-body-wrap .modal-body .modal-header[data-v-8d7a6788] .icon-svg{flex-shrink:0;align-self:flex-start;display:inline-block;margin-right:12px;margin-top:1px;font-size:22px;fill:currentColor}.modal-wrap .modal-container .modal-body-wrap .modal-body .modal-header .modal-title[data-v-8d7a6788]{display:inline-block;font-size:16px;color:#000000e0;line-height:1.5;font-weight:600}.modal-wrap .modal-container .modal-body-wrap .modal-body .modal-header[data-v-8d7a6788] svg{fill:currentColor}.modal-wrap .modal-container .modal-body-wrap .modal-body .icon-info[data-v-8d7a6788]{color:var(--modal-primary-color)}.modal-wrap .modal-container .modal-body-wrap .modal-body .icon-success[data-v-8d7a6788]{color:var(--modal-success-color)}.modal-wrap .modal-container .modal-body-wrap .modal-body .icon-error[data-v-8d7a6788]{color:var(--modal-error-color)}.modal-wrap .modal-container .modal-body-wrap .modal-body .icon-warning[data-v-8d7a6788]{color:var(--modal-warning-color)}.modal-wrap .modal-container .modal-body-wrap .modal-body .icon-confirm[data-v-8d7a6788]{color:var(--modal-confirm-color)}.modal-wrap .modal-container .modal-body-wrap .modal-body .icon-erase[data-v-8d7a6788]{color:var(--modal-erase-color)}.modal-wrap .modal-container .modal-body-wrap .modal-body .modal-content[data-v-8d7a6788]{flex-basis:100%;margin-top:8px;font-size:14px;color:#000000e0;margin-left:34px;max-width:calc(100% - 34px)}.modal-wrap .modal-container .modal-body-wrap .modal-btns[data-v-8d7a6788]{margin-top:12px;text-align:right}.modal-wrap .modal-container .modal-body-wrap .modal-btns .mr8[data-v-8d7a6788]{margin-right:8px}.flex-centered[data-v-8d7a6788]{display:flex;justify-content:center;align-items:center}.flex-centered .modal-container[data-v-8d7a6788]{padding-bottom:0}