zent/alert/lib/index.css

一套前端设计语言和基于React的实现

.zent-alert {
    box-sizing: border-box;
    width: 100%;
    font-size: 12px;
    height: 1px;
}
/* make child height: 100% work */
.zent-alert .zent-alert-content-wrapper {
    height: 100%;
    position: relative;
    overflow: hidden;
    /* trigger a BFC */
}
.zent-alert .zent-alert-content {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
}
.zent-alert.zent-alert-closable .zent-alert-close-wrapper {
    float: right;
    margin-left: 15px;
    height: 100%;
    width: 14px;
    position: relative;
}
.zent-alert.zent-alert-closable .zent-alert-close-btn {
    width: 14px;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
    font-family: sans-serif;
    font-size: 18px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    cursor: pointer;
    color: #999;
}
.zent-alert.zent-alert-size-normal {
    min-height: 44px;
    padding: 0 15px;
}
.zent-alert.zent-alert-size-large {
    min-height: 60px;
    padding: 0 15px 0 30px;
}
.zent-alert.zent-alert-border-rounded {
    border-radius: 4px;
}
.zent-alert.zent-alert-style-info {
    background: #F8F8F8;
    color: #333;
}
.zent-alert.zent-alert-style-warning {
    background: #FFF7CC;
    border: 1px solid #FDEEB2;
    color: #333333;
}
.zent-alert.zent-alert-style-danger {
    background: #FF4343;
    border: 1px solid #E8393A;
    color: #fff;
}
.zent-alert.zent-alert-style-danger .zent-alert-close-btn {
    color: #fff;
}