@opentiny/vue-theme
Version:
An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.
1 lines • 10.9 kB
CSS
.tiny-dialog-box{position:absolute;background:var(--tv-DialogBox-bg-color);border:1px solid transparent;border-radius:var(--tv-DialogBox-border-radius);-webkit-box-shadow:var(--tv-DialogBox-shadow);box-shadow:var(--tv-DialogBox-shadow);overflow:hidden}.tiny-dialog-box__wrapper{--tv-DialogBox-mask-bg-color:var(--tv-color-bg-mask, rgba(0, 0, 0, 0.2));--tv-DialogBox-bg-color:var(--tv-color-bg-3, #ffffff);--tv-DialogBox-border-radius:var(--tv-border-radius-lg, 8px);--tv-DialogBox-shadow:var(--tv-shadow-4-down, 0 8px 24px 0 rgba(0, 0, 0, 0.16));--tv-DialogBox-padding:var(--tv-space-xxxl, 32px);--tv-DialogBox-head-title-font-size:var(--tv-font-size-heading-md, 20px);--tv-DialogBox-head-title-font-weight:var(--tv-font-weight-bold, 600);--tv-DialogBox-head-title-text-color:var(--tv-color-text, #191919);--tv-DialogBox-btn-height:32px;--tv-DialogBox-close-icon-size:24px;--tv-DialogBox-close-icon-color:var(--tv-color-icon, #808080);--tv-DialogBox-close-icon-color-hover:var(--tv-color-icon-hover, #191919);--tv-DialogBox-body-font-size:var(--tv-font-size-default, 14px);--tv-DialogBox-body-text-color:var(--tv-color-text-secondary, #595959);--tv-DialogBox-drawer-body-color:var(--tv-color-text, #191919);--tv-DialogBox-drawer-min-width:500px;--tv-DialogBox-drawer-max-width:1000px;--tv-DialogBox-drawer-divider-border-color:var(--tv-color-border-divider, #f0f0f0);--tv-DialogBox-resize-icon-color:var(--tv-color-icon, #808080);--tv-DialogBox-resize-icon-color-hover:var(--tv-color-icon-hover, #191919);--tv-DialogBox-resize-icon-size:var(--tv-icon-size, 16px);--tv-DialogBox-vertical-padding:var(--tv-space-xs, 2px);position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;margin:0;display:block;-webkit-box-align:normal;-ms-flex-align:normal;align-items:normal}.tiny-dialog-box.is-fullscreen{left:0;top:0;width:100vw;height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.tiny-dialog-box.is-center .tiny-dialog-box__footer,.tiny-dialog-box.is-center .tiny-dialog-box__header{text-align:center}.tiny-dialog-box.is-fullscreen .tiny-dialog-box__body{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:scroll;max-height:100vh}.tiny-dialog-box .tiny-dialog-box__header{padding:var(--tv-DialogBox-padding) var(--tv-DialogBox-padding) 24px;background:var(--tv-DialogBox-bg-color);font-weight:var(--tv-DialogBox-head-title-font-weight);display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--tv-DialogBox-head-title-font-size);color:var(--tv-DialogBox-head-title-text-color)}.tiny-dialog-box .tiny-dialog-box__header .tiny-dialog-box__title{-webkit-box-flex:1;-ms-flex:1;flex:1}.tiny-dialog-box .tiny-dialog-box__header .tiny-dialog-box__btn-tools{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.tiny-dialog-box .tiny-dialog-box__header .tiny-dialog-box__headerbtn{position:relative;border:none;background:0 0;padding:0;line-height:1;top:-12px;right:-12px;cursor:pointer}.tiny-dialog-box .tiny-dialog-box__header .tiny-dialog-box__headerbtn+.tiny-dialog-box__headerbtn{margin-left:8px}.tiny-dialog-box .tiny-dialog-box__header .tiny-dialog-box__headerbtn:focus{outline:0}.tiny-dialog-box .tiny-dialog-box__header .tiny-dialog-box__headerbtn .tiny-dialog-box__close{fill:var(--tv-DialogBox-close-icon-color);font-size:var(--tv-DialogBox-close-icon-size)}.tiny-dialog-box .tiny-dialog-box__header .tiny-dialog-box__headerbtn .tiny-dialog-box__close:hover{fill:var(--tv-DialogBox-close-icon-color-hover)}.tiny-dialog-box .tiny-dialog-box__header .tiny-dialog-box__headerbtn .tiny-dialog-box__resize{fill:var(--tv-DialogBox-resize-icon-color);font-size:var(--tv-DialogBox-resize-icon-size)}.tiny-dialog-box .tiny-dialog-box__header .tiny-dialog-box__headerbtn .tiny-dialog-box__resize:hover{fill:var(--tv-DialogBox-resize-icon-color-hover)}.tiny-dialog-box .tiny-dialog-box__body{text-align:left;padding:var(--tv-DialogBox-vertical-padding) var(--tv-DialogBox-padding);color:var(--tv-DialogBox-body-text-color);font-size:var(--tv-DialogBox-body-font-size);overflow:auto;max-height:65vh}.tiny-dialog-box .tiny-dialog-box__body .tiny-upload{overflow:hidden}.tiny-dialog-box .tiny-dialog-box__body>span{max-height:120px;overflow-y:auto}.tiny-dialog-box .tiny-dialog-box__body .tiny-dept__search{line-height:30px}.tiny-dialog-box .tiny-dialog-box__footer{padding:24px var(--tv-DialogBox-padding) var(--tv-DialogBox-padding);text-align:right;-webkit-box-sizing:border-box;box-sizing:border-box}.tiny-dialog-box .tiny-dialog-box__footer .tiny-button{min-width:var(--tv-DialogBox-footer-btn-min-width)}.tiny-dialog-box .tiny-dialog-box__footer .tiny-toolbar .tiny-button{margin:0 4px}.tiny-dialog-box.is-right-slide{border-radius:0;min-width:var(--tv-DialogBox-drawer-min-width);max-width:var(--tv-DialogBox-drawer-max-width);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.tiny-dialog-box.is-right-slide .tiny-dialog-box__footer,.tiny-dialog-box.is-right-slide .tiny-dialog-box__header{width:calc(100% - 64px);margin-left:var(--tv-DialogBox-padding);margin-right:var(--tv-DialogBox-padding)}.tiny-dialog-box.is-right-slide .tiny-dialog-box__header{padding:var(--tv-DialogBox-padding) 0 24px;border-bottom:1px solid var(--tv-DialogBox-head-divider-border-color)}.tiny-dialog-box.is-right-slide .tiny-dialog-box__headerbtn{right:-16px}.tiny-dialog-box.is-right-slide .tiny-dialog-box__body{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:auto;color:var(--tv-DialogBox-drawer-body-color);border-bottom:1px solid var(--tv-DialogBox-drawer-divider-border-color);padding:var(--tv-DialogBox-vertical-padding) var(--tv-DialogBox-padding);max-height:100vh}.tiny-dialog-box.is-right-slide .tiny-dialog-box__footer{padding:24px 0 var(--tv-DialogBox-padding);text-align:right}.dialog-box__scroll-lock{overflow:hidden}.v-modal{--tv-DialogBox-mask-bg-color:var(--tv-color-bg-mask, rgba(0, 0, 0, 0.2));--tv-DialogBox-bg-color:var(--tv-color-bg-3, #ffffff);--tv-DialogBox-border-radius:var(--tv-border-radius-lg, 8px);--tv-DialogBox-shadow:var(--tv-shadow-4-down, 0 8px 24px 0 rgba(0, 0, 0, 0.16));--tv-DialogBox-padding:var(--tv-space-xxxl, 32px);--tv-DialogBox-head-title-font-size:var(--tv-font-size-heading-md, 20px);--tv-DialogBox-head-title-font-weight:var(--tv-font-weight-bold, 600);--tv-DialogBox-head-title-text-color:var(--tv-color-text, #191919);--tv-DialogBox-btn-height:32px;--tv-DialogBox-close-icon-size:24px;--tv-DialogBox-close-icon-color:var(--tv-color-icon, #808080);--tv-DialogBox-close-icon-color-hover:var(--tv-color-icon-hover, #191919);--tv-DialogBox-body-font-size:var(--tv-font-size-default, 14px);--tv-DialogBox-body-text-color:var(--tv-color-text-secondary, #595959);--tv-DialogBox-drawer-body-color:var(--tv-color-text, #191919);--tv-DialogBox-drawer-min-width:500px;--tv-DialogBox-drawer-max-width:1000px;--tv-DialogBox-drawer-divider-border-color:var(--tv-color-border-divider, #f0f0f0);--tv-DialogBox-resize-icon-color:var(--tv-color-icon, #808080);--tv-DialogBox-resize-icon-color-hover:var(--tv-color-icon-hover, #191919);--tv-DialogBox-resize-icon-size:var(--tv-icon-size, 16px);--tv-DialogBox-vertical-padding:var(--tv-space-xs, 2px);position:fixed;left:0;top:0;width:100%;height:100%;background:var(--tv-DialogBox-mask-bg-color)}.v-modal-enter{-webkit-animation:v-modal-in .2s ease;animation:v-modal-in .2s ease}.v-modal-leave{-webkit-animation:v-modal-out .2s ease forwards;animation:v-modal-out .2s ease forwards}@-webkit-keyframes v-modal-in{0%{opacity:0}}@keyframes v-modal-in{0%{opacity:0}}@-webkit-keyframes v-modal-out{100%{opacity:0}}@keyframes v-modal-out{100%{opacity:0}}.dialog-slideRight-enter-active{-webkit-animation:slideRight .5s ease-in forwards;animation:slideRight .5s ease-in forwards}.dialog-slideRight-leave-active{-webkit-animation:slideRightout .5s ease-in forwards;animation:slideRightout .5s ease-in forwards}@-webkit-keyframes slideRight{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}50%{opacity:.6;-webkit-transform:translateX(50%);transform:translateX(50%)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideRight{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}50%{opacity:.6;-webkit-transform:translateX(50%);transform:translateX(50%)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes slideRightout{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}50%{opacity:.6;-webkit-transform:translateX(50%);transform:translateX(50%)}100%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes slideRightout{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}50%{opacity:.6;-webkit-transform:translateX(50%);transform:translateX(50%)}100%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}}.dialog-fade-enter-active{-webkit-animation:dialog-fade-in .3s;animation:dialog-fade-in .3s}.dialog-fade-leave-active{-webkit-animation:dialog-fade-out .3s;animation:dialog-fade-out .3s}.dialog-fade-leave-active .tiny-dialog-box{-webkit-animation:dialog-fade-out 3s;animation:dialog-fade-out 3s}@-webkit-keyframes dialog-fade-in{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes dialog-fade-in{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes dialog-fade-out{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}100%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}}@keyframes dialog-fade-out{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}100%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}}.enlarge-enter-active{-webkit-animation:enlarge-in 350ms linear;animation:enlarge-in 350ms linear}@-webkit-keyframes enlarge-in{0%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(.5);transform:scale(.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes enlarge-in{0%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(.5);transform:scale(.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@media (max-width:480px){.tiny-dialog-box{width:100%;top:0;left:0}}