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

Taiga UI Angular main components kit

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

/**
 * @name Checkbox
 * @selector [tuiCheckbox]
 *
 * @description
 * A stylized input type="checkbox"
 *
 * @attributes
 * data-size — size (default: 'm') ('s' | 'm')
 *
 * @vars
 * --t-checked-icon — checkmark icon
 * --t-indeterminate-icon — indeterminate state icon
 *
 * @example
 * <input type="checkbox" tuiCheckbox />
 *
 * @see-also
 * Switch, Radio, Appearance
 */
[tuiCheckbox] {
    --t-size: 1.5rem;
    --t-radius: var(--tui-radius-s);

    inline-size: var(--t-size);
    block-size: var(--t-size);
    border-radius: var(--t-radius);
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;

    &::before {
        .fullsize(absolute, inset);

        content: '';
        inline-size: 1rem;
        block-size: 1rem;
        margin: auto;
        background: currentColor;
        mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"></svg>') center/100%;
        transform: scale(0);
        transition:
            transform var(--tui-duration) ease-in-out,
            mask 0s var(--tui-duration) ease-in-out;
    }

    &:disabled._readonly {
        opacity: 1;
        pointer-events: none;
    }

    &:checked,
    &:indeterminate {
        &::before {
            mask-image: var(--t-checked-icon);
            transform: scale(1);
            transition:
                transform var(--tui-duration) ease-in-out,
                mask 0s ease-in-out;
        }
    }

    &:indeterminate::before {
        mask-image: var(--t-indeterminate-icon);
    }

    &[data-size='s'] {
        --t-size: 1rem;
        --t-radius: var(--tui-radius-xs);

        &::before {
            inline-size: 0.875rem;
            block-size: 0.875rem;
        }
    }

    &:invalid:not([data-mode]),
    &[data-mode~='invalid'] {
        color: #fff;
    }
}