rabbit-simple-ui/src/styles/components/message.less

A simple UI component library based on JavaScript

@import '../animation/move.less';
@import '../color/colorPalette.less';
@import '../custom.less';
@import '../mixins/close.less';

@message-prefix-cls: ~'@{css-prefix}message';
@icon-prefix-cls: ~'@{css-prefix}icon';

@message-timing-function: cubic-bezier(0.23, 1, 0.32, 1);

.@{message-prefix-cls} {
    font-size: @font-size-base;
    position: fixed;
    z-index: @zindex-message;
    width: 100%;
    top: 16px;
    left: 0;
    pointer-events: none;

    &-notice {
        padding: 8px;
        text-align: center;
        transition: height @animation-time @ease-in-out, padding @animation-time @ease-in-out;

        &:first-child {
            margin-top: -8px;
        }

        &-close {
            position: absolute;
            right: 4px;
            top: 10px;
            color: #999;
            outline: none;

            i.@{icon-prefix-cls} {
                .close-base(4px);
            }
        }
    }

    &-notice-content {
        display: inline-block;
        pointer-events: all;
        padding: @padding-xs + 2 @padding-md;
        border-radius: @border-radius-base;
        box-shadow: @shadow-base;
        background: @white;
        position: relative;

        &-text {
            display: inline-block;
        }
    }

    &-notice-closable {
        .@{message-prefix-cls}-notice-content-text {
            padding-right: 32px;
        }
    }

    &-success .@{icon-prefix-cls} {
        color: @success-color;
    }

    &-error .@{icon-prefix-cls} {
        color: @error-color;
    }

    &-warning .@{icon-prefix-cls} {
        color: @warning-color;
    }

    &-info .@{icon-prefix-cls},
    &-loading .@{icon-prefix-cls} {
        color: @primary-color;
    }

    .@{icon-prefix-cls} {
        margin-right: 8px;
        font-size: 18px;
        position: relative;
        top: 1px;

        // 修复 loading 图标旋转左右晃动
        &-loading-solid {
            height: 5px;
        }
    }

    &-notice-with-background {
        .@{message-prefix-cls}-notice-content {
            &-background {
                box-shadow: none;
                border-radius: 4px;
            }

            &-info {
                background: ~`colorPalette('@{primary-color}', 0.6) `;
                color: ~`colorPalette('@{primary-color}', 6) `;
                border: 1px solid~`colorPalette('@{primary-color}', 1.5) `;
            }

            &-success {
                background: ~`colorPalette('@{success-color}', 1.2) `;
                color: ~`colorPalette('@{success-color}', 6) `;
                border: 1px solid~`colorPalette('@{success-color}', 2) `;
            }

            &-warning {
                background: ~`colorPalette('@{warning-color}', 1) `;
                color: ~`colorPalette('@{warning-color}', 6) `;
                border: 1px solid~`colorPalette('@{warning-color}', 2) `;
            }

            &-error {
                background: ~`colorPalette('@{error-color}', 1) `;
                color: ~`colorPalette('@{error-color}', 6) `;
                border: 1px solid~`colorPalette('@{error-color}', 2) `;
            }
        }
    }
}

.move(message, rabMessageMoveIn, enter, @animation-time, @message-timing-function);
.move(message, rabMessageMoveOut, leave, @animation-time, @message-timing-function);