@mussonindustrial/pyro-mui-joy/src/components/numeric-entry.css

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

[data-component='ia.input.numeric-entry-field'],
.ia_numericEntryFieldComponent__modal .ia_inputField__wrapper {
    @include variant-support(Input);

    /* Define component properties */
    --joy-Input-radius: var(--joy-radius-sm);
    --joy-Input-gap: 0.5rem;
    --joy-Input-placeholderColor: inherit;
    --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-Icon-fontSize: 0.85rem;
    --joy-Input-decoratorChildOffset: min(
        calc(
            var(--joy-Input-paddingInline) -
                (
                    var(--joy-Input-minHeight) - 2 *
                        var(--joy-variant-borderWidth, 0px) -
                        var(--joy-Input-decoratorChildHeight)
                ) / 2
        ),
        var(--joy-Input-paddingInline)
    );
    --joy-_Input-paddingBlock: max(
        (
                var(--joy-Input-minHeight) - 2 *
                    var(--joy-variant-borderWidth, 0px) -
                    var(--joy-Input-decoratorChildHeight)
            ) / 2,
        0px
    );
    --joy-Input-decoratorChildRadius: max(
        var(--joy-Input-radius) - var(--joy-variant-borderWidth, 0px) -
            var(--joy-_Input-paddingBlock),
        min(
            var(--joy-_Input-paddingBlock) + var(--joy-variant-borderWidth, 0px),
            var(--joy-Input-radius) / 2
        )
    );
    --joy-Button-minHeight: var(--joy-Input-decoratorChildHeight);
    --joy-IconButton-size: var(--joy-Input-decoratorChildHeight);
    --joy-Button-radius: var(--joy-Input-decoratorChildRadius);
    --joy-IconButton-radius: var(--joy-Input-decoratorChildRadius);

    /* Default to Medium size */
    --joy-Input-minHeight: 2.25rem;
    --joy-Input-paddingInline: 0.75rem;
    --joy-Input-decoratorChildHeight: min(1.75rem, var(--joy-Input-minHeight));

    /* Style */
    box-sizing: border-box;
    min-width: 0px;
    min-height: var(--joy-Input-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-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)
        );
    }

    svg {
        fill: currentColor;
    }

    input {
        border: none;
        color: var(--joy-Input-Color);
        background-color: transparent;
        font-family: var(--joy-fontFamily-body);
        font-size: var(--joy-fontSize-md);
        /* margin-inline-start: calc(var(--joy-Input-decoratorChildOffset) * -1); */

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

.ia_numericEntryFieldComponent__modal .ia_inputField,
.ia_numericEntryFieldComponent__modal .ia_inputField__wrapper {
    @include style-forced(Input, outlined, primary);
}

/* Edit Icon */
.ia_numericEntryFieldComponent__editLink {
    @include variant-support(IconButton);

    --joy-Icon-margin: initial;

    min-width: var(--joy-IconButton-size, 2.25rem) !important;
    min-height: var(--joy-IconButton-size, 2.25rem) !important;

    padding-inline: 0.25rem;
    padding-block: 0px;
    margin: var(--joy-IconButton-margin);
    border-radius: var(--joy-IconButton-radius, var(--joy-radius-sm));

    cursor: pointer;
    display: inline-flex;

    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    --joy-variant-borderWidth: 0px;

    margin-inline-start: calc(var(--joy-_Input-paddingBlock) / 2);
    margin-inline-end: calc(var(--joy-Input-decoratorChildOffset) * -1);

    --joy-Button-borderStyle: none;
    --joy-Button-radius: var(--joy-radius-sm);

    color: var(--joy-IconButton-Color);
    background-color: var(--joy-IconButton-Bg);
    border-color: var(--joy-IconButton-Border);
    border-width: var(--joy-IconButton-borderWidth);
    border-style: var(--joy-IconButton-borderStyle);
    border-radius: var(--joy-IconButton-radius);

    &:hover {
        @include component-state(IconButton, Hover);
    }

    &:active {
        @include component-state(IconButton, Active);
    }

    svg {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        margin: var(--joy-Icon-margin);
        width: 1em;
        height: 1em;
        display: inline-block;
        fill: currentColor;
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        font-size: var(--joy-Icon-fontSize, 1.25rem);
        color: var(--joy-Icon-color);
    }

    g {
        width: 100%;
        height: 100%;
    }
}

/* Size Support */
[psc='Joy/Size/sm'] [data-component='ia.input.numeric-entry-field'],
[psc='Joy/Size/sm'][data-component='ia.input.numeric-entry-field'] {
    --joy-Input-minHeight: 2rem;
    --joy-Input-paddingInline: 0.5rem;
    --joy-Input-decoratorChildHeight: min(1.5rem, var(--joy-Input-minHeight));
}

[psc='Joy/Size/md'] [data-component='ia.input.numeric-entry-field'],
[psc='Joy/Size/md'][data-component='ia.input.numeric-entry-field'] {
    --joy-Input-minHeight: 2.25rem;
    --joy-Input-paddingInline: 0.75rem;
    --joy-Input-decoratorChildHeight: min(1.75rem, var(--joy-Input-minHeight));
}

[psc='Joy/Size/lg'] [data-component='ia.input.numeric-entry-field'],
[psc='Joy/Size/lg'][data-component='ia.input.numeric-entry-field'] {
    --joy-Input-minHeight: 2.75rem;
    --joy-Input-paddingInline: 1rem;
    --joy-Input-decoratorChildHeight: min(2.25rem, var(--joy-Input-minHeight));
}

/* Resets and Fixes */
.ia_numericEntryFieldComponent__wrapper,
.ia_numericEntryFieldComponent__wrapper--joy-readOnly {
    justify-content: stretch !important;
    align-items: center !important;
    height: unset !important;
    width: 100% !important;
    border: none;
    background-color: transparent;
}

/* Modal */
.ia_numericEntryFieldComponent__modal {
    background-color: var(--joy-palette-background-popup);
    border-color: var(--joy-palette-neutral-outlinedBorder);
    border-width: var(--joy-variant-outlined-borderWidth);
    border-style: var(--joy-variant-outlined-borderStyle);
    box-shadow: var(--joy-shadow-lg);
    border-radius: var(--joy-radius-sm);

    flex-basis: auto;
    flex-grow: 1;

    .ia_button--joy-primary {
        margin-left: 10px;

        @include style-forced(Button, solid, primary);

        &:hover {
            @include component-state-forced(Button, solid, Hover);
        }

        &:active {
            @include component-state-forced(Button, solid, Active);
        }
    }

    .ia_button--joy-secondary {
        margin-left: auto;

        @include style-forced(Button, plain, primary);

        &:hover {
            @include component-state-forced(Button, plain, Hover);
        }

        &:active {
            @include component-state-forced(Button, plain, Active);
        }
    }

    &.component-modal-large-viewport.component-modal-below:not(
            .hide-arrow
        ):after,
    &.component-modal-large-viewport.component-modal-below:not(
            .hide-arrow
        ):before {
        border-bottom-color: var(--joy-palette-neutral-600) !important;
    }

    &_content {
        align-items: stretch;
    }

    &:not(.component-modal-large-viewport) &_content {
        width: 100% !important;
    }
}