kingdot
Version:
A UI Components Library For Vue
1 lines • 4.55 kB
CSS
.kd-dialog-container{position:absolute;top:0;left:0;width:100%}.kd-dialog-container .kd-dialog-wrapper{position:fixed;top:0;left:0;right:0;bottom:0;overflow:auto}.kd-dialog-container .kd-dialog{position:relative;top:100px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);background-color:#222a41;box-shadow:0 0 8px 0 rgba(0,0,0,.06);border-radius:4px}.kd-dialog-container .kd-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.3)}.kd-dialog-container .kd-dialog-footer{position:relative;height:64px;padding:0 20px;line-height:52px;text-align:right}.kd-dialog-container .kd-dialog-center{text-align:center}.kd-dialog-container .kd-dialog-line{height:1px;width:100%;margin-bottom:4px;background:#2c314e}.kd-dialog .kd-dialog-header{height:48px;padding:0 20px;line-height:48px;border-radius:4px;cursor:move}.kd-dialog .kd-dialog-header.kd-dialog-header-backgroundColor{background-color:#2c314e}.kd-dialog .kd-dialog-title{padding:0 4px;font-size:14px;color:#fff;letter-spacing:0;line-height:16px}.kd-dialog .kd-dialog-close{position:relative;width:100%;height:44px;line-height:44px;cursor:move}.kd-dialog .kd-dialog-icon{position:absolute;right:25px;top:0;color:#ccc;cursor:pointer}.kd-dialog .kd-dialog-icon:hover{color:#557dfc}.kd-dialog .kd-dialog-body{padding:20px 20px 32px;word-break:break-all;color:#fff}.kd-dialog .kd-dialog-footer-height{height:16px}.kd-dialog-body .kd-icon-section{display:inline-block;border-radius:50%}.kd-dialog-body .kd-icon-section i:before{border-radius:50%;background-color:#fff}.kd-dialog-body .kd-dialog-icon-title{line-height:20px;font-size:16px;color:#fff}.kd-dialog-body.kd-dialog-body-confirm{text-align:center}.kd-dialog-body .kd-dialog-confirm-title{margin-bottom:16px;font-size:18px;text-align:center;line-height:22px;color:#fff;letter-spacing:0}.kd-dialog-body .kd-dialog-confirm-tips{font-size:14px;text-align:center;line-height:22px;color:#8d919b;letter-spacing:0}.kd-dialog-body .kd-dialog-icon-size-confirm{display:inline-block;margin-bottom:16px;font-size:50px}.kd-dialog-body.kd-dialog-tips-body{text-align:left;padding-left:30px}.kd-dialog-body .kd-dialog-icon-size-tips{display:inline-block;margin-top:-3px;font-size:30px;vertical-align:middle}.kd-dialog-body.kd-dialog-tips-body-center{text-align:center;padding:20px 20px 32px}.kd-dialog-body .kd-dialog-icon-size-tips-center{font-size:40px}.kd-dialog-body .kd-dailog-tips-icon{margin-right:12px}.kd-dialog-body .kd-dialog-tips-title{font-size:16px;line-height:30px;color:#fff}.kd-dialog-body .kd-dialog-tips-title-center{display:block;padding:8px 0;line-height:20px}.kd-dialog-body .kd-dialog-tips-message{margin-left:40px;margin-top:8px;font-size:12px;line-height:20px;color:#8d919b}.kd-dialog-body .kd-dialog-tips-message-center{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;margin-left:0;padding:0 10px;text-align:justify}.kd-dialog-confirm .kd-dialog-header,.kd-dialog-tips .kd-dialog-header{height:40px;line-height:40px}.kd-dialog-confirm .kd-dialog-body,.kd-dialog-tips .kd-dialog-body{padding-top:0}.kd-dialog-footer .kd-dialog-btn{margin:0 4px}.kd-dialog-fade-enter-active{-webkit-animation:dialog-fade-enter .3s;animation:dialog-fade-enter .3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.kd-dialog-fade-leave-active{-webkit-animation:dialog-fade-out .3s;animation:dialog-fade-out .3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.kd-dialog-body::-webkit-scrollbar{background-color:#222a41;width:8px}.kd-dialog-body::-webkit-scrollbar-track{background-color:#222a41;border-radius:10px}.kd-dialog-body::-webkit-scrollbar-thumb{background-color:#2c314e;border-radius:8px}@-webkit-keyframes dialog-fade-enter{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-enter{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}}