@fesjs/fes-design/es/badge/style/index.less

fes-design for PC

@import '../../style/themes/index';
@import '../../style/mixins/index';

@badge: ~'@{cls-prefix}-badge';
@sup: ~'@{badge}-sup';
@badge-font-size: calc(var(--f-font-size-base) - 2px); // 12px

.@{badge} {
    position: relative;
    display: inline-block;
    vertical-align: middle;

    .@{sup} {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        color: var(--f-white);
        font-size: @badge-font-size;
        line-height: 20px;
        text-align: center;
        border-radius: 10px;
        transform: translate(50%, -50%);
        transform-origin: 100% 0;

        &-size-small {
            min-width: 16px;
            height: 16px;
            padding: 0 4px;
            line-height: 16px;
            border-radius: 8px;
        }

        // 单独使用，移除偏移量
        &-alone {
            position: static;
            transform: none;
        }

        &-dot {
            width: 8px;
            min-width: 8px;
            height: 8px;
            padding: 0;

            &.@{sup}-size-small {
                width: 6px;
                min-width: 6px;
                height: 6px;
            }
        }

        &-type-success {
            background-color: var(--f-success-color);
        }

        &-type-danger {
            background-color: var(--f-danger-color);
        }

        &-type-warning {
            background-color: var(--f-warning-color);
        }

        &-type-primary {
            background-color: var(--f-primary-color);
        }
    }
}