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

A simple UI component library based on JavaScript

@import '../custom.less';
@import '../mixins/content.less';

@alert-tag-name: r-alert;
@alert-prefix-cls: ~'@{css-prefix}alert';
@icon-prefix-cls: ~'@{css-prefix}icon';

@{alert-tag-name} {
    color: @text-color;
    font-size: @font-size-base;
    line-height: @line-height-base;
    position: relative;
    display: block;
    padding: 8px 15px;
    margin-bottom: 10px;
    word-wrap: break-word;
    border-radius: @border-radius-base;
    border: @border-width-base @border-style-base tint(@primary-color, 65%);
    background-color: tint(@primary-color, 92%);

    .@{alert-prefix-cls}-icon {
        color: @primary-color;
    }

    &[type='success'] {
        border: @border-width-base @border-style-base tint(@success-color, 65%);
        background-color: #f6ffed;

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

    &[type='info'] {
        border: @border-width-base @border-style-base tint(@primary-color, 65%);
        background-color: tint(@primary-color, 92%);

        .@{alert-prefix-cls}-icon {
            color: @primary-color;
        }
    }

    &[type='warning'] {
        border: @border-width-base @border-style-base tint(@warning-color, 65%);
        background-color: #fffbe6;

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

    &[type='error'] {
        border: @border-width-base @border-style-base tint(@error-color, 65%);
        background-color: #fff2f0;

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

.@{alert-prefix-cls} {
    &-with-icon {
        padding: 8px 48px 8px 35px;
    }

    &-icon {
        font-size: @font-size-large;
        top: 6px;
        left: 12px;
        position: absolute;
    }

    &-title {
        color: @text-color;
    }

    &-desc {
        font-size: @font-size-base;
        color: @text-color;
        line-height: 22px;
        display: none;

        p {
            margin-bottom: 0;
        }
    }

    &-close {
        .content-close();
        top: 10px;
    }

    &-with-desc&-with-icon {
        padding: 16px 16px 16px 69px;
    }

    &-with-desc {
        padding: 16px;
        position: relative;
        border-radius: @border-radius-base;
        margin-bottom: 10px;
        color: @text-color;
        line-height: @line-height-base;

        .@{alert-prefix-cls} {
            &-desc {
                display: block;
            }

            &-title {
                font-size: @font-size-large;
                color: @title-color;
                display: block;
                margin-bottom: 4px;
            }

            &-icon {
                top: 50%;
                left: 22px;
                transform: translateY(-50%);
                font-size: 32px;
            }
        }
    }

    &-with-banner {
        border: 0 !important;
        border-radius: 0 !important;
    }
}