gg-y-ui/lib/dialog/style/style.css

An enterprise-class UI design language and Vue-based implementation for web

.v-modal,.y-dialog.is-drawer .y-dialog__body{height:100%}.y-dialog,.y-dialog__body,.y-dialog__footer{box-sizing:border-box}.v-modal-enter{animation:v-modal-in .2s ease}.v-modal-leave{animation:v-modal-out .2s ease forwards}@keyframes v-modal-in{0%{opacity:0}}@keyframes v-modal-out{100%{opacity:0}}.v-modal{position:fixed;left:0;top:0;width:100%;opacity:.5;background:#000}.middleCenter,.y-dialog{top:50%;left:50%;max-height:calc(100vh - 96px)}.y-popup-parent__hidden{overflow:hidden}.dialog-fade-enter-active{animation:dialog-fade-in .3s}.dialog-fade-leave-active{animation:dialog-fade-out .3s}@keyframes dialog-fade-in{0%{transform:translate3d(0,-20px,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes dialog-fade-out{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,-20px,0);opacity:0}}.y-dialog__open .is-drawer.rtl{animation:rtl-dialog-in .3s 1ms}.y-dialog__open .is-drawer.ltr{animation:ltr-dialog-in .3s 1ms}.is-drawer.rtl{animation:rtl-dialog-out .3s 1ms}.is-drawer.ltr{animation:ltr-dialog-out .3s 1ms}@keyframes rtl-dialog-in{0%{transform:translate(100%,0)}100%{transform:translate(0,0)}}@keyframes rtl-dialog-out{0%{transform:translate(0,0)}100%{transform:translate(100%,0)}}@keyframes ltr-dialog-in{0%{transform:translate(-100%,0)}100%{transform:translate(0,0)}}@keyframes ltr-dialog-out{0%{transform:translate(0,0)}100%{transform:translate(-100%,0)}}.middleCenter{transform-origin:50% 50%;transform:translate(-50%,-50%)}.y-dialog{position:absolute;transform-origin:50% 50%;transform:translate(-50%,-50%);background:#fff;border-radius:4px;box-shadow:0 9px 30px rgba(12,33,63,.2);width:500px;display:flex;flex-direction:column}.y-dialog.is-drawer{max-height:unset;transform:unset;border-radius:0;overflow:hidden;top:0;bottom:0}.y-dialog.is-drawer.rtl{left:auto;right:0}.y-dialog.is-drawer.ltr{right:auto;left:0}.y-dialog--small{width:320px}.y-dialog--medium{width:500px}.y-dialog--big{width:700px}.y-dialog--large{width:920px}.y-dialog--huge{width:1280px}.y-dialog__wrapper{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;margin:0}.y-dialog__header{padding:14px 24px;background-color:#f8f9fb;display:flex;align-items:center;border-top-left-radius:4px;border-top-right-radius:4px}.y-dialog__headerbtn{position:absolute;top:14px;right:24px;padding:0;background:0 0;border:none;outline:0;cursor:pointer;font-size:18px;line-height:20px;height:20px}.y-dialog__headerbtn .y-dialog__close{color:#768893;font-size:18px}.y-dialog__title{font-size:14px;line-height:20px;font-weight:600;color:#1d1d1d}.y-dialog__operate{color:#768893;position:absolute;right:60px;top:14px;height:20px;display:flex;align-items:center}.y-dialog__operate::after{content:'';display:inline-block;width:1px;height:18px;background:linear-gradient(90deg,#E6E8EE 0,#E6E8EE 50.01%,rgba(230,232,238,0) 50.01%)}.y-dialog__operate i.y-icon{font-size:18px;line-height:20px;margin-right:16px}.y-dialog__body{padding:24px;color:#1d1d1d;font-size:14px;line-height:20px;word-break:break-all;overflow:auto}.y-dialog__footer{padding:16px 24px;text-align:right}