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

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

.tiny-fade-enter-active{-webkit-animation:.3s mobile-fade-in both ease-out;animation:.3s mobile-fade-in both ease-out}.tiny-fade-leave-active{-webkit-animation:.3s mobile-fade-out both ease-in;animation:.3s mobile-fade-out both ease-in}.tiny-overlay{position:fixed;top:0;left:0;z-index:1;width:100%;height:100%;background-color:rgba(0,0,0,.7)}.tiny-overflow-hidden{overflow:hidden!important}.tiny-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:#fff;-webkit-overflow-scrolling:touch;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.tiny-popup--center{-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);left:50%;top:50%}.tiny-popup--center.tiny-popup--round{border-radius:20px}.tiny-popup--top{top:0;left:0;width:100%}.tiny-popup--top.tiny-popup--round{border-radius:0 0 20px 20px}.tiny-popup--right{top:50%;right:0;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.tiny-popup--right.tiny-popup--round{border-radius:20px 0 0 20px}.tiny-popup--bottom{bottom:0;left:0;width:100%}.tiny-popup--bottom.tiny-popup--round{border-radius:20px 20px 0 0}.tiny-popup--left{top:50%;left:0;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.tiny-popup--left.tiny-popup--round{border-radius:0 20px 20px 0}.tiny-popup--safe-area-inset-bottom{padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}.tiny-popup-slide-top-enter,.tiny-popup-slide-top-leave-active{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.tiny-popup-slide-right-enter,.tiny-popup-slide-right-leave-active{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}.tiny-popup-slide-bottom-enter,.tiny-popup-slide-bottom-leave-active{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.tiny-popup-slide-left-enter,.tiny-popup-slide-left-leave-active{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}.tiny-popup__close-icon{position:absolute;z-index:1;color:#c8c9cc;font-size:22px;cursor:pointer}.tiny-popup__close-icon:active{color:#969799}.tiny-popup__close-icon--top-left{top:16px;left:16px}.tiny-popup__close-icon--top-right{top:16px;right:16px}.tiny-popup__close-icon--bottom-left{bottom:16px;left:16px}.tiny-popup__close-icon--bottom-right{right:16px;bottom:16px}@-webkit-keyframes mobile-fade-in{from{opacity:0}to{opacity:1}}@keyframes mobile-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes mobile-fade-out{from{opacity:1}to{opacity:0}}@keyframes mobile-fade-out{from{opacity:1}to{opacity:0}}