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

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

.ia_dropdown,
.ia_select,
[psc='Joy/Class/Input'] {
    @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: 1.5rem;
    --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.5rem;
    --joy-Input-paddingInline: 0.75rem;
    --joy-Input-decoratorChildHeight: min(2rem, var(--joy-Input-minHeight));

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

    /* Apply component properties */
    overflow: visible;
    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);
    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/Size/sm'] {
        --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'] {
        --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'] {
        --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);
    }

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

    svg {
        fill: currentColor;
    }

    input {
        font-family: var(--joy-fontFamily-body);
        font-size: var(--joy-fontSize-md);
    }

    &.iaDropdownCommon > div {
        overflow: visible;
    }

    &:focus-within::before {
        --joy-Input-focused: 1;
    }

    &::before {
        box-sizing: border-box;
        content: '';
        display: block;
        position: absolute;
        pointer-events: none;
        inset: 0px;
        z-index: 1;
        border-radius: var(--joy-Input-radius, inherit);
        margin: calc(var(--joy-Input-borderWidth, 0px) * -1);
        box-shadow: var(--joy-Input-focusedInset, inset) 0 0 0
            calc(var(--joy-Input-focused) * var(--joy-Input-focusedThickness))
            var(--joy-Input-focusedHighlight);
    }

    &__placeholder {
        opacity: var(--joy-Input-placeholderOpacity);
    }
}

.iaDropdownCommon {
    &_search {
        color: var(--joy-palette-text-primary);
    }

    &_search_enabled {
        cursor: text;
    }
}

.iaDropdownCommon_clear_value,
.ia_dropdown__expandIcon.material-icons.md-24 {
    --joy-Icon-margin: initial;

    min-width: var(--joy-IconButton-size, 2.5rem);
    min-height: var(--joy-IconButton-size, 2.5rem);

    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);

    margin-top: calc(var(--joy-Input-decoratorChildOffset) / 2);
    margin-bottom: calc(var(--joy-Input-decoratorChildOffset) / 2);
    margin-left: var(--joy-Input-decoratorChildOffset);

    symbol {
        -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);
    }
}

.ia_dropdown__valuePill {
    @include variant-support(Chip);
    @include variant-forced(Chip, soft);

    --joy-Chip-radius: 1.5rem;

    cursor: pointer;

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

    font-size: var(--joy-joy-fontSize-sm);
    font-weight: var(--joy-joy-fontWeight-md);
    font-family: var(--joy-joy-fontFamily-body);
    margin-block-start: 3px;
    margin-block-end: 3px;
    padding-inline-start: 12px;
    padding-inline-end: 12px;
}

.ia_dropdown__removeValue {
    @include variant-support(Button);
    @include variant-forced(Button, solid);

    --joy-Button-radius: 100%;

    margin-right: -7px;
    height: 22px;
    width: 22px;

    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);

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

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

.iaDropdownCommon_clear_value,
.ia_dropdown__expandIcon {
    @include variant-support(Button);

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

    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);
    border-radius: var(--joy-IconButton-radius, var(--joy-radius-sm));

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

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

.ia_dropdown__optionsModal {
    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);
}

.ia_dropdown__option {
    @include variant-support(Option);
    @include style-forced(Option, plain, neutral);

    /* Define component properties */
    --joy-OptionDivider-gap: 0.375rem;
    --joy-Option-minHeight: 2.5rem;
    --joy-Option-paddingY: 0.375rem;
    --joy-Option-paddingX: 0.75rem;
    --joy-Option-fontSize: var(--joy-joy-fontSize-md);
    --joy-Option-paddingLeft: var(--joy-Option-paddingX);
    --joy-Option-paddingRight: var(--joy-Option-paddingX);
    --joy-Option-startActionTranslateX: calc(
        0.5 * var(--joy-Option-paddingLeft)
    );
    --joy-Option-endActionTranslateX: calc(
        -0.5 * var(--joy-Option-paddingRight)
    );

    /* Style */
    font-family: var(--joy-fontFamily-body);
    padding-block: calc(
        var(--joy-Option-paddingY) - var(--joy-Option-borderWidth, 0px)
    );
    margin-inline: var(--joy-ListItemButton-marginInline);
    text-align: initial;
    background-color: initial;
    cursor: pointer;
    margin-block-start: var(--joy-List-gap);
    padding-inline-start: calc(
        var(--joy-Option-paddingLeft) +
            var(
                --joy-Option-startActionWidth,
                var(--joy-unstable_startActionWidth, 0px)
            )
    );
    padding-inline-end: calc(
        var(--joy-Option-paddingRight) +
            var(
                --joy-Option-endActionWidth,
                var(--joy-unstable_endActionWidth, 0px)
            )
    );
    min-block-size: var(--joy-Option-minHeight);

    /* Apply component properties */
    color: var(--joy-Option-Color);
    background-color: var(--joy-Option-Bg);
    border-color: var(--joy-Option-Border);
    border-width: var(--joy-Option-borderWidth);
    border-style: var(--joy-Option-borderStyle);
    font-size: var(--joy-Option-fontSize);

    &:hover {
        --joy-Option-Bg: var(--joy-palette-neutral-plainHoverBg);
    }

    &--joy-selected {
        @include style-forced(Option, soft, primary);

        font-weight: var(--joy-fontWeight-md);
    }
}

/* Resets and Adjustments */
.iaDropdownCommon.iaDropdownCommon_multi-select > div {
    & > *:first-child:has(.ia_dropdown__valuePill) {
        margin-left: calc(var(--joy-Input-decoratorChildOffset) * -1);
    }
    & > *:last-child:has(symbol) {
        margin-right: calc(var(--joy-Input-decoratorChildOffset) * -1);
    }
}

.iaDropdownCommon_options_modal .iaDropdownCommon_option.ia_dropdown__option {
    padding: 8px 8px;
}

.iaDropdownCommon .iaDropdownCommon_value-container .ia_dropdown__valuePill {
    align-items: center;
}

.iaDropdownCommon.ia_dropdown {
    overflow: visible;
}

.iaSelectCommon {
    align-items: stretch;
    justify-content: stretch;
}
.iaSelectCommon_select {
    height: unset !important;
}