@mussonindustrial/pyro-mui-joy/src/components/text-field.css

A port of Material UI Joy Theme for Ignition by Inductive Automation

[data-component='ia.input.text-field'],
[data-component='ia.input.date-time-input'] .ia_inputField,
[data-component='ia.input.password-field'] .ia_inputField {
    @include variant-support(Input);

    /* Define component properties */
    --joy-Input-radius: var(--joy-radius-sm);
    --joy-Input-gap: 0.5rem;
    --joy-Input-placeholderColor: var(--joy-Input-Color);
    --joy-Input-placeholderOpacity: 0.5;
    --joy-Input-focused: 0;
    --joy-Input-focusedThickness: var(--joy-focus-thickness);
    --joy-Input-focusedHighlight: var(
        --joy-variant-focusedHighlight,
        var(--joy-palette-focusVisible)
    );
    --joy-Input-minHeight: 2.5rem;
    --joy-Input-paddingInline: 0.75rem;

    /* Default to Medium size */
    --joy-Input-minHeight: 2.5rem;
    --joy-Input-paddingInline: 0.75rem;

    /* Style */
    box-sizing: border-box;
    min-width: 0px;
    overflow: visible;
    position: relative;
    display: flex;
    font-family: var(--joy-fontFamily-body);
    font-size: var(--joy-fontSize-md);

    /* Apply component properties */
    color: var(--joy-Input-Color);
    background-color: var(
        --joy-Input-Bg,
        var(--joy-palette-background-surface)
    );
    border-color: var(--joy-Input-Border);
    border-width: var(--joy-Input-borderWidth);
    border-style: var(--joy-Input-borderStyle);
    border-radius: var(--joy-Input-radius);
    min-height: var(--joy-Input-minHeight) !important;
    padding-inline: var(--joy-Input-paddingInline);

    &:hover {
        --joy-Input-Border: var(
            --joy-variant-HoverBorder,
            var(--joy-Input-default-HoverBorder)
        );
    }

    &:disabled {
        @include component-state(Input, Disabled);

        pointer-events: none;
        cursor: default;
    }

    &[psc='Joy/Variant/plain'],
    &[psc='Joy/Variant/outlined'] {
        --joy-Input-Bg: var(--joy-palette-background-surface);
    }

    &::placeholder {
        font-family: var(--joy-fontFamily-body);
        font-size: var(--joy-fontSize-md);
        color: var(--joy-Input-placeholderColor);
        opacity: var(--joy-Input-placeholderOpacity);
    }

    &:focus-within {
        outline-width: var(--joy-Input-focusedThickness);
        outline-style: solid;
        outline-color: var(--joy-Input-focusedHighlight);
        outline-offset: min(
            calc(var(--joy-Input-borderWidth, 0px) * -1),
            calc(var(--joy-Input-focusedThickness) * -1)
        );
    }
}

[psc='Joy/Size/sm'] .ia_inputField,
[psc='Joy/Size/sm'].ia_inputField {
    --joy-Input-minHeight: 2rem;
    --joy-Input-paddingInline: 0.5rem;
    --joy-Input-decoratorChildHeight: min(1.5rem, var(--joy-Input-minHeight));
    font-size: var(--joy-fontSize-sm, 0.875rem);
}

[psc='Joy/Size/md'] .ia_inputField,
[psc='Joy/Size/md'].ia_inputField {
    --joy-Input-minHeight: 2.25rem;
    --joy-Input-paddingInline: 0.75rem;
    --joy-Input-decoratorChildHeight: min(1.75rem, var(--joy-Input-minHeight));
    font-size: var(--joy-fontSize-md, 1rem);
}

[psc='Joy/Size/lg'] .ia_inputField,
[psc='Joy/Size/lg'].ia_inputField {
    --joy-Input-minHeight: 2.75rem;
    --joy-Input-paddingInline: 1rem;
    --joy-Input-decoratorChildHeight: min(2.25rem, var(--joy-Input-minHeight));
    font-size: var(--joy-fontSize-lg, 1.125rem);
}

/* Resets */
[data-component='ia.input.password-field'] .ia_inputField {
    height: unset !important;
    height: unset !important;
}