@taiga-ui/core/styles/theme/wrapper.less

Core library for creating Angular components and applications using Taiga UI

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

/**
 * TODO: Drop in v.5
 * @deprecated use appearance instead
 */
[tuiWrapper] {
    .transition(~'color, background, opacity');

    position: relative;
    display: block;
    block-size: 100%;
    inline-size: 100%;
    appearance: none;
    border-radius: inherit;

    .wrapper-disabled({
        pointer-events: none;
        opacity: var(--tui-disabled-opacity);
    });
}

[tuiWrapper][data-appearance='textfield'] {
    .transition(~'box-shadow, background');

    background: var(--tui-background-base);
    color: var(--tui-text-primary);
    outline: none !important;
    box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);

    &::after {
        .transition(color);
        .fullsize(absolute, inset);

        content: '';
        border-radius: inherit;
        border: 1px solid currentColor;
        pointer-events: none;
        color: var(--tui-border-normal);
    }

    .wrapper-hover({
        box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16);
    });

    .wrapper-focus({
        box-shadow: none;

        &:after {
            border-width: 2px;
            color: var(--tui-background-accent-1);
        }
    });

    .wrapper-readonly({
        box-shadow: none;
        background: transparent;

        &:after {
            color: var(--tui-border-normal);
        }
    });

    .wrapper-disabled({
        box-shadow: none;
    });

    .wrapper-invalid({
        &:after {
            color: var(--tui-text-negative);
        }
    });
}

[tuiTheme='dark'][tuiWrapper][data-appearance='textfield'],
[tuiTheme='dark'] [tuiWrapper][data-appearance='textfield'] {
    background: var(--tui-background-neutral-1);

    .wrapper-hover({
        background: var(--tui-background-neutral-1-hover);
    });

    .wrapper-focus({
        background: transparent;
    });
}

/* stylelint-disable order/order */
[tuiWrapper][data-appearance='table'] {
    border-radius: 0;
    background: transparent;
    color: var(--tui-text-primary);
    outline: none !important;

    /* stylelint-disable meowtec/no-px */
    &::before,
    &[data-appearance='table']::after {
        content: '';
        position: fixed;
        top: -0.03125rem;
        left: -1px;
        right: -0.03125rem;
        bottom: -1px;
    }
    /* stylelint-enable meowtec/no-px */

    &::before {
        .transition(background);

        z-index: -1;
        background-repeat: no-repeat;
        background-position: top right;
        background-size: 0.5rem 0.5rem;
    }

    &[data-appearance='table']::after {
        border: 1px solid currentColor;
        border-radius: inherit;
        pointer-events: none;
        color: var(--tui-border-normal);
    }

    .wrapper-hover({
        &:not(._focused):before {
            background-color: var(--tui-background-neutral-1);
        }
    });

    .wrapper-focus({
        background: transparent;

        &:after {
            border-width: 2px;
            color: var(--tui-border-focus);
        }
    });

    .wrapper-invalid({
        &:before {
            background-image: linear-gradient(to top right, transparent 0%, transparent 50%, var(--tui-status-negative) 50%, var(--tui-status-negative) 100%);
        }

        &:not(._focused):before {
            background-color: var(--tui-status-negative-pale);
        }

        .wrapper-hover({
            &:not(._focused):before {
                background-color: var(--tui-status-negative-pale-hover);
            }
        });

        .wrapper-disabled({
            background: transparent;
        });

        .wrapper-focus({
            background: transparent;

            --tui-border-focus: var(--tui-status-negative);

            &:after {
                border-width: 1px;
            }
        });
    });
}

table [tuiWrapper][data-appearance='table'] {
    &[data-appearance='table']:not(._focused)::after {
        border-width: 0;
    }

    &._focused {
        z-index: 1;
    }
}

[tuiWrapper][data-appearance='icon'] {
    color: var(--tui-text-tertiary);

    [tuiWrapper]:not([data-state='readonly']):hover .t-textfield-icon &:not([data-state='disabled']) {
        color: var(--tui-text-secondary);
    }

    .wrapper-hover({
        color: var(--tui-text-secondary);
    });

    .wrapper-active({
        color: var(--tui-text-primary);
    });
}

tui-primitive-textfield:hover:not(._disabled) [tuiAppearance][data-appearance='icon'],
tui-textarea:hover:not(._disabled) [tuiAppearance][data-appearance='icon'],
tui-input-tag:hover:not(._disabled) [tuiAppearance][data-appearance='icon'] {
    color: var(--tui-text-secondary);

    .wrapper-active({
        color: var(--tui-text-primary);
    });
}

[tuiWrapper][data-appearance='none'] {
    outline: none;

    &::after {
        border: none;
    }
}