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

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

.bk-notify{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
        -ms-flex-direction:row;
            flex-direction:row;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    position:fixed;
    padding:16px 24px 16px 24px;
    width:360px;
    background:rgba(255,255,255,1);
    -webkit-box-shadow:0px 3px 6px 0px rgba(0,0,0,0.15);
            box-shadow:0px 3px 6px 0px rgba(0,0,0,0.15);
    border-radius:2px;
    border:1px solid rgba(240,241,245,1);
    z-index:2500;
    -webkit-transition:top .3s linear, bottom .3s linear;
    transition:top .3s linear, bottom .3s linear
}

.bk-notify.center{
        left:50%;
        -webkit-transform:translateX(-50%);
                transform:translateX(-50%);
    }

.bk-notify-primary .bk-notify-icon .bk-icon{
        color:#3a84ff;
    }

.bk-notify-error .bk-notify-icon .bk-icon{
        color:#ea3636;
    }

.bk-notify-warning .bk-notify-icon .bk-icon{
        color:#ff9c01;
    }

.bk-notify-success .bk-notify-icon .bk-icon{
        color:#2dcb56;
    }

.bk-notify-icon{
    -ms-flex-item-align:start;
        align-self:flex-start;
    -ms-flex-negative:0;
        flex-shrink:0;
    margin-top:1px;
    margin-right:8px;
    color:#ffffff;
}

.bk-notify-icon .bk-icon{
        display:block;
        width:18px;
        height:18px;
        line-height:18px;
        font-size:18px;
        text-align:center;
        color:#ffffff;
        border-radius:50%;
    }

.bk-notify-content{
    box-flex:1;
    -webkit-box-flex:1;
        -ms-flex-positive:1;
            flex-grow:1;
    line-height:20px;
    font-size:14px;
    text-align:left;
    color:#63656e;
    background-color:inherit;
    word-break:break-all;
}

.bk-notify-content .bk-notify-content-title{
        margin-top:0;
        margin-bottom:8px;
        font-size:14px;
        font-weight:bold;
    }

.bk-notify-content .bk-notify-content-text{
        position:relative;
        background-color:inherit
    }

.bk-notify-content .bk-notify-content-text.limitLine{
            overflow:hidden;
        }

.bk-notify-content .bk-notify-content-text .showMoreBtn{
            display:inline-block;
            position:absolute;
            right:0;
            bottom:0;
            padding:0 0 0 10px;
            color:#3a84ff;
            background-color:inherit;
            border:none;
            outline:none;
        }

.bk-notify-close{
    text-align:center;
    position:absolute;
    right:8px;
    top:8px;
}

.bk-notify-close .bk-icon{
        display:block;
        width:20px;
        height:20px;
        line-height:20px;
        color:#979ba5;
        font-size:20px;
        font-weight:bold;
        border-radius:50%;
        cursor:pointer
    }

.bk-notify-close .bk-icon:hover{
            background-color:#f0f1f5;
        }

.placement-slide-enter,
.placement-slide-leave-to{
    opacity:0
}

.placement-slide-enter.right, .placement-slide-leave-to.right{
        -webkit-transform:translateX(100%);
                transform:translateX(100%);
    }

.placement-slide-enter.left, .placement-slide-leave-to.left{
        -webkit-transform:translateX(-100%);
                transform:translateX(-100%);
    }

.placement-slide-enter-active,
.placement-slide-leava-active{
    -webkit-transition:opacity .2s linear, -webkit-transform .3s linear;
    transition:opacity .2s linear, -webkit-transform .3s linear;
    transition:transform .3s linear, opacity .2s linear;
    transition:transform .3s linear, opacity .2s linear, -webkit-transform .3s linear;
}