bk-vue-cec/lib/ui/message.css

一个为运维业务场景而生，好看易用的Vue2原创组件库，由T-inside Design进行托管社区化运作

.bk-message{
    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;
    left:50%;
    padding:10px 15px;
    background:#f0f8ff;
    border:1px solid #E6F0FF;
    border-radius:2px;
    -webkit-box-shadow:0px 2px 4px 0px rgba(16, 37, 74, 0.1);
            box-shadow:0px 2px 4px 0px rgba(16, 37, 74, 0.1);
    z-index:2500;
    -webkit-transform:translateX(-50%);
            transform:translateX(-50%);
    -webkit-transition:top .3s linear;
    transition:top .3s linear;
}

.bk-message-primary{
    background:#f0f8ff;
    border-color:#E6F0FF;
}

.bk-message-primary .bk-message-icon .bk-icon{
        color:#006DFF;
    }

.bk-message-primary .bk-message-close .icon-close{
        color:#99C5FF;
    }

.bk-message-error{
    background:#ffeded;
    border-color:#FFDDDD;
    -webkit-box-shadow:0px 2px 4px 0px rgba(86, 34, 34, 0.1);
            box-shadow:0px 2px 4px 0px rgba(86, 34, 34, 0.1);
}

.bk-message-error .bk-message-icon .bk-icon{
        color:#EA3636;
    }

.bk-message-error .bk-message-close .icon-close{
        color:#FD9C9C;
    }

.bk-message-warning{
    background:#fff4e2;
    border-color:#FFE8C3;
    -webkit-box-shadow:0px 2px 4px 0px rgba(75, 51, 13, 0.1);
            box-shadow:0px 2px 4px 0px rgba(75, 51, 13, 0.1);
}

.bk-message-warning .bk-message-icon .bk-icon{
        color:#FF9C01;
    }

.bk-message-warning .bk-message-close .icon-close{
        color:#FFD695;
    }

.bk-message-success{
    background:#f2fff4;
    border-color:#DCFFE2;
    -webkit-box-shadow:0px 2px 4px 0px rgba(16, 68, 29, 0.1);
            box-shadow:0px 2px 4px 0px rgba(16, 68, 29, 0.1);
}

.bk-message-success .bk-message-icon .bk-icon{
        color:#2DCB56;
    }

.bk-message-success .bk-message-close .icon-close{
        color:#94F5A4;
    }

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

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

.bk-message-content{
    box-flex:1;
    -webkit-box-flex:1;
        -ms-flex-positive:1;
            flex-grow:1;
    -ms-flex:1;
        flex:1;
    min-width:230px;
    max-width:538px;
    line-height:20px;
    font-size:14px;
    text-align:left;
    color:#63656e;
    word-break:break-all
}

.bk-message-content.ellipsis{
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }

.bk-message-content.multi-ellipsis{
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-line-clamp:var(--line);
        -webkit-box-orient:vertical;
    }

.bk-message-close{
    -ms-flex-item-align:start;
        align-self:flex-start;
    -ms-flex-negative:0;
        flex-shrink:0;
    text-align:center;
}

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

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

.bk-message-copy{
    font-size:14px;
    -ms-flex-item-align:end;
        align-self:flex-end;
    color:#006DFF;
    cursor:pointer;
    margin-left:5px;
    line-height:20px;
}

.bk-message-copy.copied{
    color:#979ba5;
    cursor:default;
}

.vertical-move-enter,
.vertical-move-leave-to{
    opacity:0;
    margin-top:-50px;
}

.vertical-move-enter-active,
.vertical-move-leava-active{
    -webkit-transition:margin .2s linear;
    transition:margin .2s linear;
}