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

Taiga UI Angular main components kit

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

/**
 * @name Like
 * @selector [tuiLike]
 *
 * @description
 * A stylized input type="checkbox"
 *
 * @attributes
 * data-size — size (default: 'm') ('s' | 'm')
 *
 * @vars
 * --t-icon-color - custom color for `:checked` state
 * --t-unchecked-icon — default state icon
 * --t-checked-icon — checkmark icon
 *
 * @example
 * <input tuiLike />
 *
 * @see-also
 * Checkbox, Switch, Radio, Appearance
 */
[tuiLike] {
    --t-size: var(--tui-height-m);
    --t-border-width: 0.75rem;

    inline-size: var(--t-size);
    block-size: var(--t-size);
    border: var(--t-border-width) transparent solid;
    border-radius: 100%;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;

    &::before,
    &::after {
        .fullsize();
        .transition(~'transform, opacity');

        content: '';
        background: currentColor;
        mask: var(--t-unchecked-icon) no-repeat center/contain;
    }

    &::after {
        mask-image: var(--t-checked-icon);
        opacity: 0;
        color: var(--t-icon-color, inherit);
        transform: scale(0);
    }

    &:checked {
        &::before {
            opacity: 0;
        }

        &::after {
            opacity: 1;
            transform: scale(1);
            transition-timing-function: cubic-bezier(0.2, 0.6, 0.5, 1.8), ease-in-out;
        }
    }

    &[data-size='s'] {
        --t-size: var(--tui-height-s);
        --t-border-width: 0.5rem;
    }
}