vue-devui/modal/style.css

DevUI components based on Vite and Vue3

.devui-icon__container{display:inline-block;color:var(--devui-icon-fill, #71757f)}.devui-icon__container>*:not(:last-child){vertical-align:middle;margin-right:8px}.devui-icon__container i{vertical-align:middle;transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--no-slots i,.devui-icon--no-slots img{display:block}.devui-icon--disabled{color:var(--devui-disabled-text, #cfd0d3);cursor:not-allowed}.devui-icon--disabled i{color:var(--devui-disabled-text, #cfd0d3)}.devui-icon--operable:not(.devui-icon--disabled){cursor:pointer;transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--operable:not(.devui-icon--disabled) i{cursor:pointer}.devui-icon--operable:hover:not(.devui-icon--disabled){color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:hover:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-hover, var(--devui-list-item-hover-bg, #f2f2f3))}.devui-icon--operable:hover:not(.devui-icon--disabled) i{color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:active:not(.devui-icon--disabled){color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable:active:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-active, var(--devui-list-item-active-bg, #f2f5fc))}.devui-icon--operable:active:not(.devui-icon--disabled) i{color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable.devui-icon__container{height:32px;line-height:32px;padding:0 8px;margin-left:-8px;border-radius:var(--devui-border-radius, 2px);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--spin{animation:iconSpin 2.5s linear infinite}.devui-svg-icon{vertical-align:middle}@keyframes iconSpin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.devui-icon-group{display:inline-flex;align-items:center}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable){padding:8px;margin-left:0}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable):first-child{margin-left:-8px}.devui-icon-group>*:not(:first-child){margin-left:0}.devui-fixed-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--devui-shadow, rgba(37, 43, 58, .24));opacity:1;z-index:1050}.devui-fixed-overlay--fade-enter-active,.devui-fixed-overlay--fade-leave-active{transition:opacity .1s cubic-bezier(0,0,1,1)}.devui-fixed-overlay--fade-enter-from,.devui-fixed-overlay--fade-leave-to{opacity:0}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-length-connected-overlay, 0 2px 12px 0) var(--devui-shadow, rgba(37, 43, 58, .24));z-index:1000}.devui-flexible-overlay__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}.devui-modal{position:fixed;top:50%;left:50%;width:300px;border-radius:var(--devui-border-radius-card, 8px);border:none;opacity:1;transform:translate(-50%,-50%);background-color:var(--devui-fullscreen-overlay-bg, #ffffff);background-clip:padding-box;outline:0;box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 10px 24px 0) var(--devui-shadow, rgba(37, 43, 58, .24));z-index:var(--devui-z-index-modal, 1050)}.devui-modal .btn-close{position:absolute;right:20px;top:18px;-webkit-appearance:none;z-index:calc(var(--devui-z-index-modal, 1050) + 1)}.devui-modal .btn-close .devui-icon__container{display:inline-flex;align-items:center}.devui-modal .type-content{display:flex;align-items:center}.devui-modal .type-content-icon{display:flex;align-items:center;justify-content:center;vertical-align:middle;margin-right:8px;width:24px;height:24px;line-height:16px}.devui-modal .type-content-text{font-weight:700;vertical-align:middle;font-size:18px}.devui-modal-content{background:var(--devui-fullscreen-overlay-bg, #ffffff);border-radius:var(--devui-border-radius, 2px)}.devui-modal__header{width:100%;height:46px;line-height:26px;padding:20px 20px 0;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;letter-spacing:0;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:none}.devui-modal__header .header-alert-icon{display:inline-block;vertical-align:middle;margin-right:8px;line-height:16px;text-align:center}.devui-modal__body{padding:20px;font-size:var(--devui-font-size, 12px);color:var(--devui-text-weak, #575d6c);box-sizing:border-box}.devui-modal__footer{width:100%;border-top:none;text-align:center;padding:0 32px 24px;box-sizing:border-box}.devui-modal__footer>*{margin:0 4px}.devui-modal--wipe-enter-active{transition:opacity .1s cubic-bezier(.16,.75,.5,1),top .1s cubic-bezier(0,0,1,1)}.devui-modal--wipe-leave-active{transition:opacity .1s cubic-bezier(.5,0,.84,.25),top .1s cubic-bezier(0,0,1,1)}.devui-modal--wipe-enter-from,.devui-modal--wipe-leave-to{opacity:.2;top:calc(50% - 24px)}