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

UI Component for chief editor

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

@text-offset: -12px;
@dot-offset: -5px;

.@{prefixCls}-badge {
    display: inline-block;
    position: relative;
    .transition();

    &-type-info {
        .@{prefixCls}-badge-sup-inner {
            background-color: @color-neutral8;
        }
    }

    &-type-primary {
        .@{prefixCls}-badge-sup-inner {
            background-color: @color-primary6;
        }
    }

    &-type-danger {
        .@{prefixCls}-badge-sup-inner {
            background-color: @color-danger6;
        }
    }

    &-type-warning {
        .@{prefixCls}-badge-sup-inner {
            background-color: @color-warning6;
        }
    }

    &-type-success {
        .@{prefixCls}-badge-sup-inner {
            background-color: @color-success6;
        }
    }

    &-sup {
        position: absolute;
        box-sizing: border-box;
        font-size: 0;
    }

    &-placement-top-left {
        .@{prefixCls}-badge-sup {
            bottom: 100%;
            right: 100%;
        }

        .@{prefixCls}-badge-text {
            margin: 0 @text-offset @text-offset 0;
        }

        .@{prefixCls}-badge-dot {
            margin: 0 @dot-offset @dot-offset 0;
        }
    }

    &-placement-top-right {
        .@{prefixCls}-badge-sup {
            bottom: 100%;
            left: 100%;
        }

        .@{prefixCls}-badge-text {
            margin: 0 0 @text-offset @text-offset;
        }

        .@{prefixCls}-badge-dot {
            margin: 0 0 @dot-offset @dot-offset;
        }
    }

    &-placement-bottom-left {

        .@{prefixCls}-badge-sup {
            top: 100%;
            right: 100%;
        }

        .@{prefixCls}-badge-text {
            margin: @text-offset @text-offset 0 0;
        }

        .@{prefixCls}-badge-dot {
            margin: @dot-offset @dot-offset 0 0;
        }
    }

    &-placement-bottom-right {
        .@{prefixCls}-badge-sup {
            top: 100%;
            left: 100%;
        }

        .@{prefixCls}-badge-text {
            margin: @text-offset 0 0 @text-offset;
        }

        .@{prefixCls}-badge-dot {
            margin: @dot-offset 0 0 @dot-offset;
        }
    }
}

.@{prefixCls}-badge-text {
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    text-align: center;
    line-height: 20px;
    padding: 0 6px;
    box-sizing: border-box;
    color: #fff;
    font-size: 12px;
    border: 1px solid #fff;
}

.@{prefixCls}-badge-dot {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    border: 1px solid #fff;
}