@taiga-ui/core/styles/components/appearance.less

Core library for creating Angular components and applications using Taiga UI

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

/**
 * @name Appearance
 * @selector [tuiAppearance]
 *
 * @description
 * Base directive to apply different styles to interactive elements
 *
 * @attributes
 * data-appearance — current appearance
 * data-state — manual interactive state override ('active' | 'disabled' | 'hover')
 * data-focus — manual :focus-visible state override
 * data-mode — arbitrary manual mode like 'checked', 'invalid' or 'checked invalid'
 *
 * @example
 * <button tuiAppearance data-appearance='primary'></button>
 *
 * @see-also
 * Button
 */
[tuiAppearance] {
    .transition(all);

    position: relative;
    appearance: none;
    outline: 0.125rem solid transparent;
    outline-offset: -0.125rem;
    transition-property: color, background-color, opacity, box-shadow, border-color, border-radius, filter;

    &.tui-appearance-initializing {
        transition: none !important;
    }

    .appearance-focus({
        outline-color: var(--tui-border-focus);
    });

    .appearance-disabled({
        cursor: initial;
        opacity: var(--tui-disabled-opacity);
    });
}