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

Core library for creating Angular components and applications using Taiga UI

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

tui-textfield {
    .scrollbar-hidden();
    .transition(color);

    --t-height: var(--tui-height-l);
    --t-padding: var(--tui-padding-l);
    --t-label: -0.7em;
    --t-label-size: 0.83em;
    --t-end: ~'0rem';
    --t-start: ~'0rem';

    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    cursor: pointer;
    min-block-size: var(--t-height);
    color: var(--tui-text-tertiary);
    padding: 0 var(--t-padding);
    border-radius: var(--tui-radius-l);
    font: var(--tui-font-text-ui-m);
    line-height: 1.25rem;
    box-sizing: border-box;
    gap: 0 0.25rem;
    isolation: isolate;

    &[style*='--t-icon-start:'] {
        --t-start: 2.25rem;
    }

    &[style*='--t-icon-end:'] {
        --t-end: 2.25rem;
    }

    &[tuiIcons]::after {
        position: relative;
        block-size: auto;
        align-self: stretch;
        border-inline-start: var(--t-padding) solid transparent;
        border-inline-end: var(--t-padding) solid transparent;
        margin: 0 calc(-1 * var(--t-padding));
    }

    &::-webkit-resizer {
        border: 0.25rem solid transparent;
        inline-size: 0.5rem;
        block-size: 0.5rem;
        box-sizing: content-box;
        color: var(--tui-text-tertiary);
        background: linear-gradient(
            -45deg,
            transparent,
            transparent 0.125rem,
            currentColor 0.125rem,
            currentColor 0.1875rem,
            transparent 0.1875rem,
            transparent 0.25rem,
            currentColor 0.25rem,
            currentColor 0.3125rem,
            transparent 0.35rem
        );
        background-clip: content-box;
    }

    label,
    & > .t-content,
    & > .t-template {
        pointer-events: none;
    }

    input,
    select,
    textarea {
        font: inherit;
        resize: none;
        outline: none;
        padding-block-start: 1.125rem;
        padding-block-end: 1.125rem;

        &[inputmode='none'] {
            caret-color: transparent;
        }
    }

    &[data-size='s'] {
        --t-height: var(--tui-height-s);
        --t-padding: var(--tui-padding-s);

        border-radius: var(--tui-radius-m);
        gap: 0;
        font: var(--tui-font-text-ui-s);
        line-height: 1rem;

        &[style*='--t-icon-start:'] {
            --t-start: 1.25rem;
        }

        &[style*='--t-icon-end:'] {
            --t-end: 1.25rem;
        }

        &::before {
            margin-inline-end: 0.5rem;
            margin-inline-start: -0.125rem;
            font-size: 1rem;
        }

        &::after {
            margin-inline-end: calc(-0.125rem - var(--t-padding));
            margin-inline-start: calc(0.625rem - var(--t-padding));
            font-size: 1rem;
        }

        input,
        select,
        textarea {
            padding-block-start: 0.5rem;
            padding-block-end: 0.5rem;
        }

        & > .t-content {
            margin-inline-end: -0.375rem;
        }
    }

    &[data-size='m'] {
        --t-height: var(--tui-height-m);
        --t-padding: var(--tui-padding-m);

        border-radius: var(--tui-radius-m);
        font: var(--tui-font-text-ui-s);
        line-height: 1rem;

        &[style*='--t-icon-start:'] {
            --t-start: 1.75rem;
        }

        &[style*='--t-icon-end:'] {
            --t-end: 1.75rem;
        }

        &::before {
            margin-inline-start: -0.125rem;
            margin-inline-end: 0.125rem;
        }

        &::after {
            margin-inline-start: calc(0.25rem - var(--t-padding));
            margin-inline-end: calc(-0.125rem - var(--t-padding));
        }

        input,
        select,
        textarea {
            padding-block-start: 0.875rem;
            padding-block-end: 0.875rem;
        }

        & > .t-content {
            margin-inline-end: -0.125rem;
        }
    }

    &[data-size='l'] {
        --t-label: -0.7rem;
    }

    /*
    TODO: refactor to the following way after Chrome 105+ & Safari 15.4+
    &:hover:has(input:not(:read-only)),
    &:hover:has(textarea:not(:read-only)),
    &:hover:has(select:not([data-mode='readonly'])) {
        color: var(--tui-text-secondary);
    }
    */
    &:hover {
        color: var(--tui-text-secondary);

        &:has(input:read-only):not([multi]),
        &:has(textarea:read-only),
        &:has(select[data-mode~='readonly']) {
            color: var(--tui-text-tertiary);
        }
    }

    &::before {
        z-index: 1;
        margin-inline-end: 0.5rem;
        pointer-events: none;
    }

    &:has(:disabled:not(.t-filler, button, option, [tuiChip]))::before,
    &:has(:disabled:not(.t-filler, button, option, [tuiChip]))::after,
    &:has(:disabled:not(.t-filler, button, option, [tuiChip])) > .t-template {
        opacity: var(--tui-disabled-opacity);
    }

    // TODO: Fallback until Safari 15.4
    &._disabled::before,
    &._disabled::after,
    &._disabled > .t-template {
        opacity: var(--tui-disabled-opacity);
    }

    &:has(label:not(:empty)) {
        & > .t-template,
        input:not([type='range']),
        select:defined,
        textarea:defined {
            padding-block-start: calc(var(--t-height) / 3);
            padding-block-end: 0;
        }
    }

    &:not([data-focus='true']):has(label:not(:empty)) {
        & > .t-template,
        input:not([type='range']),
        select:defined,
        textarea:defined {
            &::placeholder,
            &._empty {
                color: transparent;
            }
        }
    }

    // TODO: Fallback until Safari 15.4
    &._with-label {
        & > .t-template,
        input:not([type='range']),
        select:defined,
        textarea:defined {
            padding-block-start: calc(var(--t-height) / 3);
            padding-block-end: 0;
        }
    }

    &:not([data-focus='true'])._with-label {
        & > .t-template,
        input:not([type='range']),
        select:defined,
        textarea:defined {
            &::placeholder,
            &._empty {
                color: transparent;
            }
        }
    }

    & > .t-template,
    input:defined,
    select:defined,
    textarea:defined {
        .fullsize();

        appearance: none;
        box-sizing: border-box;
        border-radius: inherit;
        border-width: 0;
        overscroll-behavior: none;
        // StackBlitz changes "0rem" to "0" breaking calc
        padding-inline-start: calc(var(--t-start, ~'0rem') + var(--t-padding));
        padding-inline-end: calc(var(--t-end, ~'0rem') + var(--t-side) + var(--t-padding));
    }

    & > .t-template {
        display: flex;
        align-items: center;
        color: var(--tui-text-primary);
    }

    &._with-template input:not([type='range']),
    &._with-template select,
    &._with-template textarea {
        color: transparent !important;
    }

    input:not([type='range']),
    select:defined,
    textarea:defined {
        pointer-events: auto;
        background: none;

        // TODO: Remove :not when we drop old select tuiTextfield in v5
        &:not(select):read-only ~ .t-filler {
            display: none;
        }

        &:disabled {
            & ~ label,
            & ~ .t-content {
                opacity: var(--tui-disabled-opacity);

                > tui-icon {
                    display: none;
                }
            }
        }

        &:-webkit-autofill,
        &:not(._empty):not(:placeholder-shown) {
            & ~ label {
                font-size: var(--t-label-size);
                transform: translateY(var(--t-label));
            }

            &:not(:disabled)[data-mode~='invalid'] ~ label,
            &:invalid:not(:disabled):not([data-mode]) ~ label {
                color: var(--tui-text-negative);
            }

            &:not(:disabled):not([data-mode~='readonly']) ~ .t-content .t-clear {
                display: flex;
            }
        }

        &:not([data-mode~='readonly']) {
            .appearance-focus({
                &::placeholder,
                &._empty {
                    color: var(--tui-text-tertiary);
                }

                & ~ label {
                    color: var(--tui-text-primary) !important;
                    font-size: var(--t-label-size);
                    transform: translateY(var(--t-label));
                }
            });
        }

        // @deprecated remove in v5
        .ios-only({
            &._ios-fix {
                position: fixed;
                left: 1000rem;
            }
        });
    }

    // Increasing specificity to override all other styles
    [tuiLabel][tuiLabel][tuiLabel] {
        .transition(all);
        .text-overflow();

        position: relative;
        display: block;
        flex: 1;
        align-self: flex-start;
        font-size: inherit;
        line-height: var(--t-height);
    }

    label:defined,
    input:defined::placeholder,
    textarea:defined::placeholder,
    select:defined._empty {
        color: var(--tui-text-secondary);
    }

    select {
        &:not([data-mode~='readonly']) {
            cursor: pointer;
        }

        option[value='']:disabled {
            // Hide placeholder from native datalist (Windows OS only)
            color: transparent;
        }

        optgroup,
        option {
            // Windows OS only
            background-color: var(--tui-background-elevation-3);
        }

        optgroup,
        option:not(:disabled) {
            // In Windows OS native options inherit color of host <select>
            color: var(--tui-text-primary);
        }
    }

    button,
    a {
        pointer-events: auto;
    }

    & > .t-content {
        z-index: 1;
        display: flex;
        block-size: var(--t-height);
        align-items: center;
        gap: inherit;
        margin-inline-start: auto;
        isolation: isolate;
        border-radius: inherit;

        > tui-icon {
            pointer-events: auto;
        }
    }

    textarea ~ .t-content {
        min-inline-size: 0.5rem;
    }

    .t-clear {
        z-index: 1;
        display: none;
        pointer-events: auto;
    }

    & > .t-filler:defined {
        pointer-events: none;
        color: var(--tui-text-tertiary);
        opacity: 1;
    }

    [tuiFluidTypography] {
        font-weight: bold;
    }

    [tuiSelectLike]:not(:read-only) {
        cursor: pointer;
    }

    &:has(input[type='tel']) {
        direction: ltr;
    }
}