yyzone/src/assets/styles/components/message.less

yyzone vue components and utils

@prefixMessageCls: ~'@{yy-css-prefix}message';

@message-width: 320px;
@message-padding: 8px 14px;

.@{prefixMessageCls} {
    .vertical(fixed);
    top: 24px;
    width: @message-width;

    &-item {
        padding: @message-padding;
        border-radius: 4px;
        box-shadow: @yy-shadow-base;
        font-size: @yy-font-size-small;
        color: @yy-text-primary-color;
        margin-bottom: 20px;
        display: flex;
        &-success {
            background-color: @yy-message-success-bg;
            border: 1px solid @yy-message-success-border;
        }
        &-error {
            background-color: @yy-message-error-bg;
            border: 1px solid @yy-message-error-border;
        }
        &-warning {
            background-color: @yy-message-warning-bg;
            border: 1px solid @yy-message-warning-border;
        }
        &-icon {
            display: inline-block;
            .square(16px);
            margin-right: 6px;
            svg {
                .square(100%);
            }
        }
        &-text {
            line-height: 16px;
            flex: 1;
        }
        &-close {
            .square(16px);
            display: inline-block;
            line-height: 16px;
            margin-right: -10px;
            margin-left: 4px;
            color: @yy-text-info-color;
            .cursor();
        }
        &-multi-line {
            .@{prefixMessageCls}-item-icon {
                margin-top: 2px;
            }
            .@{prefixMessageCls}-item-text {
                line-height: 18px;
            }
            .@{prefixMessageCls}-close {
                margin-top: 2px;
            }
        }
    }
}