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

yyzone vue components and utils

@prefixMessageCls: ~'yy-message';

@message-width: 320px;
@message-padding: 10px 16px;

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

    &-item {
        padding: @message-padding;
        background-color: #ffffff;
        border-radius: 4px;
        box-shadow: @yy-shadow-base;
        font-size: @yy-font-size-xs;
        color: @yy-text-default;
        margin-bottom: 20px;
        display: flex;
        &-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;
            .cursor();
        }
        &-multi-line {
            .@{prefixMessageCls}-item-icon {
                margin-top: 2px;
            }
            .@{prefixMessageCls}-item-text {
                line-height: 18px;
            }
            .@{prefixMessageCls}-close {
                margin-top: 2px;
            }
        }
    }
}