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

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

[data-component='ia.input.text-area'] {
    @include variant-support(Textarea);

    /* Define component properties */
    --joy-Textarea-radius: var(--joy-radius-sm);
    --joy-Textarea-gap: 0.5rem;
    --joy-Textarea-placeholderColor: var(--joy-Textarea-Color);
    --joy-Textarea-placeholderOpacity: 0.5;
    --joy-Textarea-focused: 0;
    --joy-Textarea-focusedThickness: var(--joy-focus-thickness);
    --joy-Textarea-focusedHighlight: var(--joy-palette-primary-solidBg);
    --joy-Textarea-minHeight: 2.5rem;
    --joy-Textarea-paddingBlock: calc(
        0.5rem - var(--joy-variant-borderWidth, 0px)
    );
    --joy-Textarea-paddingInline: 0.75rem;

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

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

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

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

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

        pointer-events: none;
        cursor: default;
    }

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

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

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

[psc='Joy/Size/sm'] [data-component='ia.input.text-area'],
[psc='Joy/Size/sm'][data-component='ia.input.text-area'] {
    --joy-Textarea-minHeight: 2rem;
    --joy-Textarea-paddingInline: 0.5rem;
}

[psc='Joy/Size/md'] [data-component='ia.input.text-area'],
[psc='Joy/Size/md'][data-component='ia.input.text-area'] {
    --joy-Textarea-minHeight: 2.5rem;
    --joy-Textarea-paddingInline: 0.75rem;
}

[psc='Joy/Size/lg'] [data-component='ia.input.text-area'],
[psc='Joy/Size/lg'][data-component='ia.input.text-area'] {
    --joy-Textarea-minHeight: 3rem;
    --joy-Textarea-paddingInline: 1rem;
}