@mussonindustrial/pyro-mui-joy/src/components/buttons.css

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

/* Button */
[data-component='ia.input.button'],
.ia_button--joy-primary,
.ia_button--joy-secondary,
.ia_passwordFieldComponent__visibilityLink {
    @include variant-support(Button);

    /* Default to Medium size */
    --joy-Icon-margin: initial;
    --joy-Icon-fontSize: 1.5rem;
    --joy-CircularProgress-size: 24px;
    --joy-Button-gap: 0.5rem;
    min-height: var(--joy-Button-minHeight, 2.5rem);
    font-size: var(--joy-fontSize-sm);

    /* Style */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;

    font-family: var(--joy-fontFamily-body);
    font-weight: var(--joy-fontWeight-lg);
    line-height: 1;
    padding-block: 0.25rem;
    padding-inline: 1rem;

    /* Apply component properties */
    color: var(--joy-Button-Color);
    background-color: var(--joy-Button-Bg);
    border-color: var(--joy-Button-Border);
    border-width: var(--joy-Button-borderWidth);
    border-style: var(--joy-Button-borderStyle);
    border-radius: var(--joy-Button-radius, var(--joy-radius-sm));
    margin: var(--joy-Button-margin);

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

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

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

        pointer-events: none;
        cursor: default;
    }

    svg {
        fill: currentColor;
        flex-shrink: 0;
    }
}

[psc='Joy/Size/sm'] [data-component='ia.input.button'],
[psc='Joy/Size/sm'][data-component='ia.input.button'][data-component='ia.input.button'],
[psc='Joy/Size/sm'] ~ .ia_passwordFieldComponent__visibilityLink {
    --joy-IconButton-size: 2rem;
    --joy-Icon-fontSize: calc(var(--joy-IconButton-size) / 1.6);

    min-height: var(--joy-Button-minHeight, 2rem);
    --joy-_Button-minHeight: var(--joy-Button-minHeight, 2rem);
    padding-block: 2px;
    padding-inline: 0.75rem;
    font-size: var(--joy-fontSize-sm);
}

[psc='Joy/Size/md'] [data-component='ia.input.button'],
[psc='Joy/Size/md'][data-component='ia.input.button'][data-component='ia.input.button'],
[psc='Joy/Size/md'] ~ .ia_passwordFieldComponent__visibilityLink {
    --joy-IconButton-size: 2.25rem;
    --joy-Icon-fontSize: calc(var(--joy-IconButton-size) / 1.5);

    min-height: var(--joy-Button-minHeight, 2.5rem);
    --joy-_Button-minHeight: var(--joy-Button-minHeight, 2.5rem);
    padding-block: 0.25rem;
    padding-inline: 1rem;
    font-size: var(--joy-fontSize-sm);
}

[psc='Joy/Size/lg'] [data-component='ia.input.button'],
[psc='Joy/Size/lg'][data-component='ia.input.button'][data-component='ia.input.button'],
[psc='Joy/Size/lg'] ~ .ia_passwordFieldComponent__visibilityLink {
    --joy-IconButton-size: 2.75rem;
    --joy-Icon-fontSize: calc(var(--joy-IconButton-size) / 1.571);

    min-height: var(--joy-Button-minHeight, 3rem);
    --joy-_Button-minHeight: var(--joy-Button-minHeight, 3rem);
    padding-block: 0.375rem;
    padding-inline: 1.5rem;
    font-size: var(--joy-fontSize-md);
}

.ia_passwordFieldComponent__visibilityLink {
    @include variant-forced(Button, plain);

    margin-top: 0px !important;
    width: var(--joy-_Button-minHeight) !important;
    min-width: var(--joy-_Button-minHeight) !important;

    & svg {
        min-height: var(--joy-Icon-fontSize, 2rem) !important;
        min-width: var(--joy-Icon-fontSize, 2rem) !important;
    }
}

@each $palette in $palettes {
    [psc='Joy/Palette/$(palette)']
        ~ .ia_passwordFieldComponent__visibilityLink {
        @include palette-forced(Button, $palette);
    }
}