@opentiny/vue-theme/modal/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-modal{--tv-Modal-mask-bg-color:var(--tv-color-bg-mask, rgba(0, 0, 0, 0.2));--tv-Modal-line-height:var(--tv-line-height-number, 1.5);--tv-Modal-box-width:400px;--tv-Modal-box-bg-color:var(--tv-color-bg-3, #ffffff);--tv-Modal-box-border-radius:var(--tv-border-radius-lg, 8px);--tv-Modal-box-box-shadow:var(--tv-shadow-4-down, 0 8px 24px 0 rgba(0, 0, 0, 0.16));--tv-Modal-status-icon-color-success:var(--tv-color-success-icon, #5cb300);--tv-Modal-status-icon-color-error:var(--tv-color-error-icon, #f23030);--tv-Modal-status-icon-color-warning:var(--tv-color-warn-icon, #ff8800);--tv-Modal-status-icon-color-info:var(--tv-color-info-icon, #1476ff);--tv-Modal-status-icon-color-question:var(--tv-color-icon-control, #191919);--tv-Modal-box-header-padding-x:var(--tv-space-xxxl, 32px);--tv-Modal-box-header-padding-top:var(--tv-space-xxxl, 32px);--tv-Modal-box-header-padding-bottom:24px;--tv-Modal-box-status-icon-font-size:21px;--tv-Modal-box-status-icon-margin-right:var(--tv-space-md, 8px);--tv-Modal-box-title-text-color:var(--tv-color-text, #191919);--tv-Modal-box-title-font-size:var(--tv-font-size-xxl, 20px);--tv-Modal-box-title-font-weight:var(--tv-font-weight-bold, 600);--tv-Modal-box-close-icon-top:20px;--tv-Modal-box-close-icon-right:20px;--tv-Modal-box-close-icon-size:24px;--tv-Modal-box-close-icon-color:var(--tv-color-icon, #808080);--tv-Modal-box-close-icon-color-hover:var(--tv-color-icon-hover, #191919);--tv-Modal-box-zoom-icon-right:48px;--tv-Modal-box-body-padding-x:var(--tv-space-xxxl, 32px);--tv-Modal-box-body-padding-y:0;--tv-Modal-box-body-text-font-size:var(--tv-font-size-default, 14px);--tv-Modal-box-body-text-text-color:var(--tv-color-text-secondary, #595959);--tv-Modal-box-footer-padding-x:var(--tv-space-xxxl, 32px);--tv-Modal-box-footer-padding-top:24px;--tv-Modal-box-footer-padding-bottom:var(--tv-space-xxxl, 32px);--tv-Modal-msg-box-bg-color:var(--tv-color-bg-2, #ffffff);--tv-Modal-msg-box-border-radius:var(--tv-border-radius-lg, 8px);--tv-Modal-msg-box-box-shadow:var(--tv-shadow-2-down, 0 2px 12px 0 rgba(0, 0, 0, 0.16));--tv-Modal-msg-box-box-padding-x:var(--tv-space-xl, 16px);--tv-Modal-msg-box-box-padding-y:var(--tv-space-lg, 12px);--tv-Modal-msg-box-status-icon-size:var(--tv-icon-size, 16px);--tv-Modal-msg-box-status-icon-margin-right:var(--tv-space-md, 8px);--tv-Modal-msg-box-text-color:var(--tv-color-text, #191919);--tv-Modal-msg-box-font-size:var(--tv-font-size-default, 14px);--tv-Modal-msg-box-font-weight:var(--tv-font-weight-regular, 400);--tv-Modal-msg-box-close-icon-margin-left:var(--tv-space-lg, 12px);--tv-Modal-msg-box-close-icon-size:var(--tv-icon-size, 16px);--tv-Modal-msg-box-close-icon-color:var(--tv-color-icon, #808080);--tv-Modal-msg-box-close-icon-color-hover:var(--tv-color-icon-hover, #191919);--tv-Modal-loading-status-icon-color:var(--tv-color-icon-active, #191919)}.tiny-modal__wrapper{display:none;position:fixed;top:0;left:0;width:100%;height:100%;line-height:var(--tv-Modal-line-height);-webkit-transition:top .4s;transition:top .4s}.tiny-modal__wrapper.active{display:block}.tiny-modal__wrapper.status__success .tiny-modal__status-wrapper svg{fill:var(--tv-Modal-status-icon-color-success)}.tiny-modal__wrapper.status__warning .tiny-modal__status-wrapper svg{fill:var(--tv-Modal-status-icon-color-warning)}.tiny-modal__wrapper.status__error .tiny-modal__status-wrapper svg{fill:var(--tv-Modal-status-icon-color-error)}.tiny-modal__wrapper.status__info .tiny-modal__status-wrapper svg{fill:var(--tv-Modal-status-icon-color-info)}.tiny-modal__wrapper.status__question .tiny-modal__status-wrapper svg{fill:var(--tv-Modal-status-icon-color-question)}.tiny-modal__wrapper.type__alert .tiny-modal__box,.tiny-modal__wrapper.type__confirm .tiny-modal__box{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:absolute;left:50%;top:15vh;width:var(--tv-Modal-box-width);background-color:var(--tv-Modal-box-bg-color);border-radius:var(--tv-Modal-box-border-radius);-webkit-box-shadow:var(--tv-shadow-4-down);box-shadow:var(--tv-shadow-4-down)}.tiny-modal__wrapper.type__alert .tiny-modal__box .tiny-modal__header,.tiny-modal__wrapper.type__confirm .tiny-modal__box .tiny-modal__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:var(--tv-Modal-box-header-padding-top) var(--tv-Modal-box-header-padding-x) var(--tv-Modal-box-header-padding-bottom) var(--tv-Modal-box-header-padding-x)}.tiny-modal__wrapper.type__alert .tiny-modal__box .tiny-modal__header .tiny-modal__status-wrapper,.tiny-modal__wrapper.type__confirm .tiny-modal__box .tiny-modal__header .tiny-modal__status-wrapper{font-size:var(--tv-Modal-box-status-icon-font-size);margin-right:var(--tv-Modal-box-status-icon-margin-right)}.tiny-modal__wrapper.type__alert .tiny-modal__box .tiny-modal__header .tiny-modal__status-wrapper .tiny-modal-svg__refresh,.tiny-modal__wrapper.type__confirm .tiny-modal__box .tiny-modal__header .tiny-modal__status-wrapper .tiny-modal-svg__refresh{fill:var(--tv-Modal-loading-status-icon-color)}.tiny-modal__wrapper.type__alert .tiny-modal__box .tiny-modal__header .tiny-modal__title,.tiny-modal__wrapper.type__confirm .tiny-modal__box .tiny-modal__header .tiny-modal__title{color:var(--tv-Modal-box-title-text-color);font-size:var(--tv-Modal-box-title-font-size);font-weight:var(--tv-Modal-box-title-font-weight)}.tiny-modal__wrapper.type__alert .tiny-modal__box .tiny-modal__header .tiny-modal__close-btn,.tiny-modal__wrapper.type__alert .tiny-modal__box .tiny-modal__header .tiny-modal__zoom-btn,.tiny-modal__wrapper.type__confirm .tiny-modal__box .tiny-modal__header .tiny-modal__close-btn,.tiny-modal__wrapper.type__confirm .tiny-modal__box .tiny-modal__header .tiny-modal__zoom-btn{position:absolute;top:var(--tv-Modal-box-close-icon-top);fill:var(--tv-Modal-box-close-icon-color);font-size:var(--tv-Modal-box-close-icon-size);cursor:pointer}.tiny-modal__wrapper.type__alert .tiny-modal__box .tiny-modal__header .tiny-modal__close-btn:hover,.tiny-modal__wrapper.type__alert .tiny-modal__box .tiny-modal__header .tiny-modal__zoom-btn:hover,.tiny-modal__wrapper.type__confirm .tiny-modal__box .tiny-modal__header .tiny-modal__close-btn:hover,.tiny-modal__wrapper.type__confirm .tiny-modal__box .tiny-modal__header .tiny-modal__zoom-btn:hover{fill:var(--tv-Modal-box-close-icon-color-hover)}.tiny-modal__wrapper.type__alert .tiny-modal__box .tiny-modal__header .tiny-modal__close-btn,.tiny-modal__wrapper.type__confirm .tiny-modal__box .tiny-modal__header .tiny-modal__close-btn{right:var(--tv-Modal-box-close-icon-right)}.tiny-modal__wrapper.type__alert .tiny-modal__box .tiny-modal__header .tiny-modal__zoom-btn,.tiny-modal__wrapper.type__confirm .tiny-modal__box .tiny-modal__header .tiny-modal__zoom-btn{right:var(--tv-Modal-box-zoom-icon-right)}.tiny-modal__wrapper.type__alert .tiny-modal__box .tiny-modal__body,.tiny-modal__wrapper.type__confirm .tiny-modal__box .tiny-modal__body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:var(--tv-Modal-box-body-padding-y) var(--tv-Modal-box-body-padding-x);white-space:normal;word-break:break-word}.tiny-modal__wrapper.type__alert .tiny-modal__box .tiny-modal__body .tiny-modal__content,.tiny-modal__wrapper.type__confirm .tiny-modal__box .tiny-modal__body .tiny-modal__content{width:100%;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.tiny-modal__wrapper.type__alert .tiny-modal__box .tiny-modal__body .tiny-modal__content .tiny-modal__text,.tiny-modal__wrapper.type__confirm .tiny-modal__box .tiny-modal__body .tiny-modal__content .tiny-modal__text{font-size:var(--tv-Modal-box-body-text-font-size);color:var(--tv-Modal-box-body-text-text-color)}.tiny-modal__wrapper.type__alert .tiny-modal__box .tiny-modal__footer,.tiny-modal__wrapper.type__confirm .tiny-modal__box .tiny-modal__footer{text-align:right;padding:var(--tv-Modal-box-footer-padding-top) var(--tv-Modal-box-footer-padding-x) var(--tv-Modal-box-footer-padding-bottom) var(--tv-Modal-box-footer-padding-x)}.tiny-modal__wrapper.type__alert .tiny-modal__box.is__drag,.tiny-modal__wrapper.type__alert .tiny-modal__footer-move,.tiny-modal__wrapper.type__alert .tiny-modal__header,.tiny-modal__wrapper.type__confirm .tiny-modal__box.is__drag,.tiny-modal__wrapper.type__confirm .tiny-modal__footer-move,.tiny-modal__wrapper.type__confirm .tiny-modal__header{cursor:move}.tiny-modal__wrapper.type__alert .tiny-modal__resize .sb-resize,.tiny-modal__wrapper.type__alert .tiny-modal__resize .selb-resize,.tiny-modal__wrapper.type__alert .tiny-modal__resize .sest-resize,.tiny-modal__wrapper.type__alert .tiny-modal__resize .st-resize,.tiny-modal__wrapper.type__alert .tiny-modal__resize .swlb-resize,.tiny-modal__wrapper.type__alert .tiny-modal__resize .swst-resize,.tiny-modal__wrapper.type__alert .tiny-modal__resize .wl-resize,.tiny-modal__wrapper.type__alert .tiny-modal__resize .wr-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .sb-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .selb-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .sest-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .st-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .swlb-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .swst-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .wl-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .wr-resize{position:absolute;z-index:100}.tiny-modal__wrapper.type__alert .tiny-modal__resize .wl-resize,.tiny-modal__wrapper.type__alert .tiny-modal__resize .wr-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .wl-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .wr-resize{width:8px;height:100%;top:0;cursor:w-resize}.tiny-modal__wrapper.type__alert .tiny-modal__resize .wl-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .wl-resize{left:-3px}.tiny-modal__wrapper.type__alert .tiny-modal__resize .wr-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .wr-resize{right:-3px}.tiny-modal__wrapper.type__alert .tiny-modal__resize .selb-resize,.tiny-modal__wrapper.type__alert .tiny-modal__resize .sest-resize,.tiny-modal__wrapper.type__alert .tiny-modal__resize .swlb-resize,.tiny-modal__wrapper.type__alert .tiny-modal__resize .swst-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .selb-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .sest-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .swlb-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .swst-resize{width:10px;height:10px;z-index:101}.tiny-modal__wrapper.type__alert .tiny-modal__resize .sest-resize,.tiny-modal__wrapper.type__alert .tiny-modal__resize .swst-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .sest-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .swst-resize{top:-8px}.tiny-modal__wrapper.type__alert .tiny-modal__resize .selb-resize,.tiny-modal__wrapper.type__alert .tiny-modal__resize .swlb-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .selb-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .swlb-resize{bottom:-8px}.tiny-modal__wrapper.type__alert .tiny-modal__resize .sest-resize,.tiny-modal__wrapper.type__alert .tiny-modal__resize .swlb-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .sest-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .swlb-resize{cursor:sw-resize}.tiny-modal__wrapper.type__alert .tiny-modal__resize .selb-resize,.tiny-modal__wrapper.type__alert .tiny-modal__resize .swst-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .selb-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .swst-resize{cursor:se-resize}.tiny-modal__wrapper.type__alert .tiny-modal__resize .swlb-resize,.tiny-modal__wrapper.type__alert .tiny-modal__resize .swst-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .swlb-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .swst-resize{left:-8px}.tiny-modal__wrapper.type__alert .tiny-modal__resize .selb-resize,.tiny-modal__wrapper.type__alert .tiny-modal__resize .sest-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .selb-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .sest-resize{right:-8px}.tiny-modal__wrapper.type__alert .tiny-modal__resize .sb-resize,.tiny-modal__wrapper.type__alert .tiny-modal__resize .st-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .sb-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .st-resize{width:100%;height:8px;left:0;cursor:s-resize}.tiny-modal__wrapper.type__alert .tiny-modal__resize .st-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .st-resize{top:-3px}.tiny-modal__wrapper.type__alert .tiny-modal__resize .sb-resize,.tiny-modal__wrapper.type__confirm .tiny-modal__resize .sb-resize{bottom:-3px}.tiny-modal__wrapper.is__maximize .tiny-modal__resize{display:none}.tiny-modal__wrapper.lock__scroll{overflow:hidden}.tiny-modal__wrapper:not(.lock__scroll){overflow:auto}.tiny-modal__wrapper .tiny-modal__box{pointer-events:all}.tiny-modal__wrapper:not(.lock__view){pointer-events:none}.tiny-modal__wrapper.is__mask{background-color:var(--tv-Modal-mask-bg-color)}.tiny-modal__wrapper.type__alert .tiny-modal__box,.tiny-modal__wrapper.type__confirm .tiny-modal__box{opacity:0;-webkit-transition:opacity .4s ease-in;transition:opacity .4s ease-in}.tiny-modal__wrapper.type__alert.is__visible.is__visible .tiny-modal__box,.tiny-modal__wrapper.type__confirm.is__visible.is__visible .tiny-modal__box{opacity:1}.tiny-modal__wrapper.type__message{text-align:center}.tiny-modal__wrapper.type__message .tiny-modal__box{display:inline-block;background-color:var(--tv-Modal-msg-box-bg-color);border-radius:var(--tv-Modal-msg-box-border-radius);-webkit-box-shadow:var(--tv-Modal-msg-box-box-shadow);box-shadow:var(--tv-Modal-msg-box-box-shadow);padding:var(--tv-Modal-msg-box-box-padding-y) var(--tv-Modal-msg-box-box-padding-x);text-align:left}.tiny-modal__wrapper.type__message .tiny-modal__box .tiny-modal__body{display:-webkit-box;display:-ms-flexbox;display:flex;white-space:normal;word-break:break-word}.tiny-modal__wrapper.type__message .tiny-modal__box .tiny-modal__body .tiny-modal__status-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:var(--tv-Modal-msg-box-status-icon-margin-right)}.tiny-modal__wrapper.type__message .tiny-modal__box .tiny-modal__body .tiny-modal__status-wrapper svg{font-size:var(--tv-Modal-msg-box-status-icon-size)}.tiny-modal__wrapper.type__message .tiny-modal__box .tiny-modal__body .tiny-modal__status-wrapper .tiny-modal-svg__refresh{fill:var(--tv-Modal-loading-status-icon-color)}.tiny-modal__wrapper.type__message .tiny-modal__box .tiny-modal__body .tiny-modal__content{width:100%;max-width:800px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.tiny-modal__wrapper.type__message .tiny-modal__box .tiny-modal__body .tiny-modal__content .tiny-modal__text{color:var(--tv-Modal-msg-box-text-color);font-size:var(--tv-Modal-msg-box-font-size);font-weight:var(--tv-Modal-msg-box-font-weight)}.tiny-modal__wrapper.type__message .tiny-modal__box .tiny-modal__body .tiny-modal__close-wrapper svg{margin-left:var(--tv-Modal-msg-box-close-icon-margin-left);fill:var(--tv-Modal-msg-box-close-icon-color);font-size:var(--tv-Modal-msg-box-close-icon-size);cursor:pointer}.tiny-modal__wrapper.type__message .tiny-modal__box .tiny-modal__body .tiny-modal__close-wrapper svg:hover{fill:var(--tv-Modal-msg-box-close-icon-color-hover)}