@taiga-ui/kit/styles/components/badge.less

Taiga UI Angular main components kit

@import '@taiga-ui/core/styles/taiga-ui-local.less';

/**
 * @name Badge
 * @selector tui-badge, [tuiBadge]
 *
 * @description
 * A basic badge that can be used on it's own or on buttons/links
 *
 * @attributes
 * data-size — size (default: 'l') ('s' | 'm' | 'l' | 'xl')
 *
 * @example
 * <tui-badge>99+</tui-badge>
 *
 * @see-also
 * Icons, Appearance, Chip, Block
 */
tui-badge,
[tuiBadge] {
    --t-icon-size: 1rem;
    --t-padding: 0 0.5rem;
    --t-size: var(--tui-height-xs);
    --t-margin: -0.25rem;

    .button-base();

    border-radius: 6rem;
    background: #959595;
    color: var(--tui-background-base);
    padding: var(--t-padding);
    block-size: var(--t-size);
    min-inline-size: var(--t-size);
    inline-size: fit-content;
    font: var(--tui-font-text-s);

    &[tuiStatus]::before {
        inline-size: 0.375rem;
        block-size: 0.375rem;
        margin-inline-end: -0.25rem;
    }

    > tui-icon,
    &[tuiIcons]::before,
    &[tuiIcons]::after {
        font-size: var(--t-icon-size) !important;
    }

    &[data-appearance='error'], /* TODO @deprecated remove in v5 */
    &[data-appearance='negative'] {
        --t-status: var(--tui-status-negative);
    }

    &[data-appearance='success'], /* TODO @deprecated remove in v5 */
    &[data-appearance='positive'] {
        --t-status: var(--tui-status-positive);
    }

    &[data-appearance='warning'] {
        --t-status: var(--tui-status-warning);
    }

    &[data-appearance='info'] {
        --t-status: var(--tui-status-info);
    }

    &[data-appearance='neutral'] {
        --t-status: var(--tui-status-neutral);
    }

    &[tuiStatus][data-appearance='error']::before, /* TODO @deprecated remove in v5 */
    &[tuiStatus][data-appearance='success']::before, /* TODO @deprecated remove in v5 */
    &[tuiStatus][data-appearance='negative']::before,
    &[tuiStatus][data-appearance='positive']::before,
    &[tuiStatus][data-appearance='warning']::before,
    &[tuiStatus][data-appearance='info']::before,
    &[tuiStatus][data-appearance='neutral']::before {
        content: '';
        display: block;
        margin: 0;
    }

    &[data-size='s'] {
        --t-padding: 0 0.3125rem;
        --t-size: 1rem;
        --t-icon-size: 0.625rem;
        --t-margin: -0.125rem;

        font: var(--tui-font-text-xs);

        &[tuiStatus]::before {
            inline-size: 0.25rem;
            block-size: 0.25rem;
            margin-inline-end: -0.125rem;
        }
    }

    &[data-size='m'] {
        --t-padding: 0 0.375rem;
        --t-size: 1.25rem;
        --t-icon-size: 0.75rem;
        --t-margin: -0.125rem;
    }

    &[data-size='xl'] {
        --t-margin: -0.25rem;
        --t-padding: 0 0.75rem;
        --t-size: var(--tui-height-s);

        font: var(--tui-font-text-m);

        &[tuiStatus]::before {
            inline-size: 0.5rem;
            block-size: 0.5rem;
            margin-inline-end: -0.125rem;
        }
    }

    &[tuiAppearance][data-appearance='error'], /* TODO @deprecated remove in v5 */
    &[tuiAppearance][data-appearance='success'], /* TODO @deprecated remove in v5 */
    &[tuiAppearance][data-appearance='negative'],
    &[tuiAppearance][data-appearance='positive'],
    &[tuiAppearance][data-appearance='warning'],
    &[tuiAppearance][data-appearance='info'],
    &[tuiAppearance][data-appearance='neutral'] {
        color: var(--tui-text-primary);
    }
}

img[tuiBadge] {
    padding: 0;
    inline-size: var(--t-size);
}

tui-icon[tuiBadge] {
    --t-margin: 0 !important;

    mask: none;
    block-size: var(--t-size);
    inline-size: var(--t-size);

    &[data-size='s']::after {
        mask-size: 0.625rem;
    }

    &[data-size='m']::after {
        mask-size: 0.75rem;
    }

    &[data-size='l']::after,
    &[data-size='xl']::after {
        mask-size: 1rem;
    }
}