@chief-editor/ui/css/components/Message/styles.less

UI Component for chief editor

@import "./var.less";
@import "./mixin.less";

.@{prefixCls}-message {
    position: relative;
    display: inline-block;
    min-width: 114px;
    padding: 8px;
    // todo 找UI确认
    border-radius: @border-radius-sm;
    background: @color-neutral4;
    color: @color-text-grey1;
    font-size: 14px;
    text-align: left;
    pointer-events: auto;
    box-sizing: border-box;
    // todo 找UI确认
    box-shadow: @box-shadow-sm;


    &-icon {
        margin: 0 8px;
        height: 16px;
        width: 16px;
        font-size: 16px;
        vertical-align: middle;
    }

    &-type-success {
        .@{prefixCls}-message-icon {
            color: @color-success6
        }
    }

    &-type-info {
        .@{prefixCls}-message-icon {
            color: @color-primary6;
        }
    }

    &-type-warning {
        .@{prefixCls}-message-icon {
            color: @color-warning6;
        }
    }

    &-type-error {
        .@{prefixCls}-message-icon {
            color: @color-danger6;
        }
    }

    &-type-loading {
        .@{prefixCls}-message-icon {
            color: @color-primary5;
        }
    }

    &-no-icon {
        padding-left: @base-space*4;
    }

    &-has-close {
        padding-right: @base-space*10;

        .@{prefixCls}-message-close {
            color: @color-text-grey3;
            position: absolute;
            right: @base-space*4;
            top: @base-space*3;
            cursor: pointer;
            font-size: 14px;
            vertical-align: middle;
        }
    }

    &-content {
        vertical-align: middle;
        .force-wrap();
    }
}