bk-magic-vue/lib/ui/dialog.css

基于蓝鲸 Magicbox 和 Vue 的前端组件库

.bk-dialog-mask{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:rgba(0, 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 !important;
}

.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% !important;
            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 24px;
        line-height:1.2;
        text-align:center;
    }

.bk-dialog-wrapper .bk-dialog-header p,
        .bk-dialog-wrapper .bk-dialog-header .bk-dialog-header-inner{
            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 p, .bk-dialog-wrapper .header-on-left div{
            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, 0.15);
                box-shadow:0 4px 12px rgba(0, 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 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 30px;
        }

.bk-dialog-wrapper .bk-info-box .bk-dialog-sub-header{
            padding:5px 50px 6px 50px
        }

.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 linear 1s infinite;
                    animation:loading linear 1s 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 24px;
            line-height:1;
            text-align:center
        }

.bk-dialog-wrapper .bk-info-box .bk-dialog-type-header.loading,
            .bk-dialog-wrapper .bk-info-box .bk-dialog-type-header.has-sub-header{
                padding:3px 24px 10px 24px;
            }

.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 24px;
            line-height:1;
            text-align:center
        }

.bk-dialog-wrapper .bk-info-box .bk-dialog-type-sub-header.loading{
                padding:3px 24px 32px 24px;
            }

.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-warning,
            .bk-dialog-wrapper .bk-info-box .bk-dialog-mark.bk-dialog-error,
            .bk-dialog-wrapper .bk-info-box .bk-dialog-mark.bk-dialog-success{
                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:#ffdddd;
                color:#ea3636;
            }

.bk-dialog-wrapper .bk-info-box .bk-dialog-mark.bk-dialog-success{
                background-color:#e5f6ea;
                color:#3fc06d;
            }

@keyframes loading{
    from{
        -webkit-transform:rotate(0);
                transform:rotate(0);
    }
    to{
        -webkit-transform:rotate(360deg);
                transform:rotate(360deg);
    }
}

@-webkit-keyframes mask-fading{
    0%{
        display:block;
        background-color:rgba(0, 0, 0, 0);
    }
    100%{
        background-color:rgba(0, 0, 0, 0.6);
    }
}

@keyframes mask-fading{
    0%{
        display:block;
        background-color:rgba(0, 0, 0, 0);
    }
    100%{
        background-color:rgba(0, 0, 0, 0.6);
    }
}

@-webkit-keyframes mask-hidding{
    0%{
        background-color:rgba(0, 0, 0, 0.6);
        display:block;
    }
    100%{
        background-color:rgba(0, 0, 0, 0);
        display:none;
    }
}

@keyframes mask-hidding{
    0%{
        background-color:rgba(0, 0, 0, 0.6);
        display:block;
    }
    100%{
        background-color:rgba(0, 0, 0, 0);
        display:none;
    }
}

@-webkit-keyframes loading{
    from{
        -webkit-transform:rotate(0);
                transform:rotate(0);
    }
    to{
        -webkit-transform:rotate(360deg);
                transform:rotate(360deg);
    }
}

@media (max-width: 768px){
    .bk-dialog{
        width:auto !important;
        margin:10px;
    }
}