bk-magic-vue
Version:
基于蓝鲸 Magicbox 和 Vue 的前端组件库
3 lines (2 loc) • 7.16 kB
CSS
.bk-dialog-mask{position:fixed;top:0;bottom:0;left:0;right:0;background-color:rgba(0,0,0,.6);height:100%;z-index:1000}.bk-dialog-mask.show-active{display:block;-webkit-animation:mask-fading .4s;animation:mask-fading .4s}.bk-dialog-mask.hide-active{display:none;-webkit-animation:mask-hidding .4s;animation:mask-hidding .4s}.bk-dialog-hidden{display:none}.bk-dialog-wrapper{position:fixed;overflow:auto;top:0;right:0;bottom:0;left:0;z-index:1000;-webkit-overflow-scrolling:touch;outline:0}.bk-dialog-wrapper.bk-dialog-no-mask{pointer-events:none}.bk-dialog-wrapper *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.bk-dialog-wrapper .bk-dialog{width:auto;margin:0 auto;position:relative;outline:none;top:200px}.bk-dialog-wrapper .bk-dialog.bk-dialog-fullscreen{width:100%;top:0;bottom:0;position:absolute}.bk-dialog-wrapper .bk-dialog.bk-dialog-fullscreen .bk-dialog-content{width:100%;border-radius:0;position:absolute;top:0;bottom:0;margin-bottom:0}.bk-dialog-wrapper .bk-dialog.bk-dialog-fullscreen .bk-dialog-body{width:100%;overflow:auto;position:absolute;top:51px;bottom:61px}.bk-dialog-wrapper .bk-dialog.bk-dialog-fullscreen .bk-dialog-footer{position:absolute;width:100%;bottom:0}.bk-dialog-wrapper .bk-dialog.bk-dialog-fullscreen.bk-dialog-fullscreen-no-header .bk-dialog-body{top:0}.bk-dialog-wrapper .bk-dialog.bk-dialog-fullscreen.bk-dialog-fullscreen-no-footer .bk-dialog-body{bottom:0}.bk-dialog-wrapper .bk-dialog-tool{min-height:30px;position:relative}.bk-dialog-wrapper .bk-dialog-header{padding:0 24px 8px;line-height:1.2;text-align:center}.bk-dialog-wrapper .bk-dialog-header .bk-dialog-header-inner,.bk-dialog-wrapper .bk-dialog-header p{display:inline-block;width:100%;font-size:20px;color:#313238;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}.bk-dialog-wrapper .bk-dialog-header .header-center{font-size:24px}.bk-dialog-wrapper .bk-dialog-header p i,.bk-dialog-wrapper .bk-dialog-header p span{vertical-align:middle}.bk-dialog-wrapper .header-on-left{margin-top:-14px;font-size:20px}.bk-dialog-wrapper .header-on-left div,.bk-dialog-wrapper .header-on-left p{font-size:20px}.bk-dialog-wrapper .bk-dialog-body{padding:3px 24px 24px;font-size:14px;line-height:1.5;color:#63656e}.bk-dialog-wrapper .bk-dialog-content{position:relative;background-color:#fff;border:0;border-radius:2px;background-clip:padding-box;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.15);box-shadow:0 4px 12px rgba(0,0,0,.15)}.bk-dialog-wrapper .bk-dialog-content.bk-dialog-content-no-mask{pointer-events:auto}.bk-dialog-wrapper .bk-dialog-content.bk-dialog-content-drag{position:absolute}.bk-dialog-wrapper .bk-dialog-content.bk-dialog-content-drag .bk-dialog-tool{cursor:move}.bk-dialog-wrapper .bk-dialog-content.bk-dialog-content-dragging{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bk-dialog-wrapper .bk-dialog-footer{padding:7px 24px;background-color:#fafbfd;border-top:1px solid #dcdee5;border-radius:2px}.bk-dialog-wrapper .bk-dialog-footer .footer-wrapper{font-size:0}.bk-dialog-wrapper .bk-dialog-footer .footer-wrapper button{min-width:64px}.bk-dialog-wrapper .bk-dialog-footer .footer-wrapper button+button{margin-left:8px;margin-bottom:0}.bk-dialog-wrapper .bk-dialog-close{z-index:1;cursor:pointer;position:absolute;color:#979ba5;top:5px;right:5px;width:26px;height:26px;line-height:26px;text-align:center;border-radius:50%;font-weight:700;font-size:22px}.bk-dialog-wrapper .bk-dialog-close:hover{background-color:#f0f1f5}.bk-dialog-wrapper .bk-info-box .bk-dialog-header{padding:15px 30px 10px}.bk-dialog-wrapper .bk-info-box .bk-dialog-sub-header{padding:5px 50px 6px}.bk-dialog-wrapper .bk-info-box .bk-dialog-sub-header.has-sub{padding-bottom:21px}.bk-dialog-wrapper .bk-info-box .bk-dialog-sub-header .bk-dialog-header-inner{font-size:14px;color:#63656e;line-height:1.5;text-align:center;word-break:break-word}.bk-dialog-wrapper .bk-info-box .bk-dialog-body{padding:3px 24px 30px}.bk-dialog-wrapper .bk-info-box .bk-dialog-footer{text-align:center;padding:0 65px 33px;background-color:#fff;border:none;border-radius:0}.bk-dialog-wrapper .bk-info-box .bk-dialog-footer button{min-width:88px}.bk-dialog-wrapper .bk-info-box .bk-dialog-loading{width:58px;height:58px;line-height:58px;font-size:30px;border-radius:50%;-webkit-animation:loading 1s linear infinite;animation:loading 1s linear infinite}.bk-dialog-wrapper .bk-info-box .bk-dialog-type-body{padding:8px 24px 15px;font-size:14px;line-height:1.5;color:#63656e;text-align:center}.bk-dialog-wrapper .bk-info-box .bk-dialog-type-body.loading{padding:3px 24px 15px}.bk-dialog-wrapper .bk-info-box .bk-dialog-type-header{padding:3px 24px 22px;line-height:1;text-align:center}.bk-dialog-wrapper .bk-info-box .bk-dialog-type-header.has-sub-header,.bk-dialog-wrapper .bk-info-box .bk-dialog-type-header.loading{padding:3px 24px 10px}.bk-dialog-wrapper .bk-info-box .bk-dialog-type-header .header{display:inline-block;width:100%;font-size:20px;color:#313238;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5;margin:0}.bk-dialog-wrapper .bk-info-box .bk-dialog-type-header .bk-dialog-header-loading-sub{font-size:14px;margin-top:5px}.bk-dialog-wrapper .bk-info-box .bk-dialog-type-sub-header{padding:3px 24px 32px;line-height:1;text-align:center}.bk-dialog-wrapper .bk-info-box .bk-dialog-type-sub-header.loading{padding:3px 24px 32px}.bk-dialog-wrapper .bk-info-box .bk-dialog-type-sub-header .header{display:inline-block;width:100%;font-size:14px;color:#63656e;line-height:1.5;margin:0;text-align:center;word-break:break-all}.bk-dialog-wrapper .bk-info-box .bk-dialog-mark{display:block;margin:0 auto}.bk-dialog-wrapper .bk-info-box .bk-dialog-mark.bk-dialog-error,.bk-dialog-wrapper .bk-info-box .bk-dialog-mark.bk-dialog-success,.bk-dialog-wrapper .bk-info-box .bk-dialog-mark.bk-dialog-warning{width:42px;height:42px;line-height:42px;font-size:36px;color:#fff;border-radius:50%}.bk-dialog-wrapper .bk-info-box .bk-dialog-mark.bk-dialog-warning{background-color:#ffe8c3;color:#ff9c01;font-size:26px}.bk-dialog-wrapper .bk-info-box .bk-dialog-mark.bk-dialog-error{background-color:#fdd;color:#ea3636}.bk-dialog-wrapper .bk-info-box .bk-dialog-mark.bk-dialog-success{background-color:#e5f6ea;color:#3fc06d}@keyframes loading{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes mask-fading{0%{display:block;background-color:transparent}to{background-color:rgba(0,0,0,.6)}}@keyframes mask-fading{0%{display:block;background-color:transparent}to{background-color:rgba(0,0,0,.6)}}@-webkit-keyframes mask-hidding{0%{background-color:rgba(0,0,0,.6);display:block}to{background-color:transparent;display:none}}@keyframes mask-hidding{0%{background-color:rgba(0,0,0,.6);display:block}to{background-color:transparent;display:none}}@-webkit-keyframes loading{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@media (max-width:768px){.bk-dialog{width:auto;margin:10px}}
/*# sourceMappingURL=dialog.min.css.map */