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

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

/* Switch */
.ia_toggleSwitch {
    --joy-variant-borderWidth: 0px;
    --joy-Switch-trackRadius: var(--joy-joy-radius-lg);
    --joy-Switch-thumbShadow: 0 0 0 1px var(--joy-Switch-trackBackground);
    --joy-Switch-trackWidth: 48px;
    --joy-Switch-trackHeight: 24px;
    --joy-Switch-thumbSize: 16px;
    --joy-Switch-gap: 8px;
    font-size: var(--joy-joy-fontSize-md);
    --joy-unstable_paddingBlock: max(
        (
                var(--joy-Switch-trackHeight) - 2 *
                    var(--joy-variant-borderWidth, 0px) -
                    var(--joy-Switch-thumbSize)
            ) / 2,
        0px
    );
    --joy-Switch-thumbRadius: max(
        var(--joy-Switch-trackRadius) - var(--joy-unstable_paddingBlock),
        min(
            var(--joy-unstable_paddingBlock) / 2,
            var(--joy-Switch-trackRadius) / 2
        )
    );
    --joy-Switch-thumbWidth: var(--joy-Switch-thumbSize);
    --joy-Switch-thumbOffset: max(
        (var(--joy-Switch-trackHeight) - var(--joy-Switch-thumbSize)) / 2,
        0px
    );
    --joy-Switch-trackBackground: var(
        --joy-joy-palette-neutral-solidBg,
        var(--joy-joy-palette-neutral-600, #5a5a72)
    );
    --joy-Switch-trackColor: var(
        --joy-joy-palette-neutral-solidColor,
        var(--joy-joy-palette-common-white, #fff)
    );
    --joy-Switch-trackBorderColor: currentColor;
    --joy-Switch-thumbBackground: var(
        --joy-joy-palette-neutral-solidColor,
        var(--joy-joy-palette-common-white, #fff)
    );
    --joy-Switch-thumbColor: var(
        --joy-joy-palette-neutral-solidBg,
        var(--joy-joy-palette-neutral-600, #5a5a72)
    );
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    font-family: var(--joy-joy-fontFamily-body);
    position: relative;
    padding: calc(
            (var(--joy-Switch-thumbSize) / 2) -
                (var(--joy-Switch-trackHeight) / 2)
        )
        calc(-1 * var(--joy-Switch-thumbOffset));
    background-color: initial;
    border: none;
    margin: var(--joy-unstable_Switch-margin);
}

.ia_toggleSwitch__track {
    position: relative;
    color: var(--joy-Switch-trackColor);
    height: var(--joy-Switch-trackHeight);
    width: var(--joy-Switch-trackWidth);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    box-sizing: border-box;
    border: var(--joy-variant-borderWidth, 0px) solid;
    border-color: var(--joy-Switch-trackBorderColor);
    background-color: var(--joy-Switch-trackBackground) !important;
    border-radius: var(--joy-Switch-trackRadius);
    font-family: var(--joy-joy-fontFamily-body);
    font-size: var(--joy-joy-fontSize-sm);
    filter: unset;
}

.ia_toggleSwitch:hover {
    --joy-Switch-trackBackground: var(
        --joy-joy-palette-neutral-solidHoverBg,
        var(--joy-joy-palette-neutral-600, #054da7)
    );
    --joy-Switch-trackBorderColor: currentColor;
    --joy-Switch-thumbColor: var(
        --joy-joy-palette-neutral-solidHoverBg,
        var(--joy-joy-palette-neutral-600, #054da7)
    );
}

.ia_toggleSwitch__track--joy-selected {
    background-color: var(--joy-Switch-trackBackground) !important;
    opacity: 1;
}

.ia_toggleSwitch__thumbContainer {
    --joy-Icon-fontSize: calc(var(--joy-Switch-thumbSize) * 0.75);
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: calc(
        50% - var(--joy-Switch-trackWidth) / 2 + var(--joy-Switch-thumbWidth) /
            2 + var(--joy-Switch-thumbOffset)
    );
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: var(--joy-Switch-thumbWidth);
    height: var(--joy-Switch-thumbSize);
    border-radius: var(--joy-Switch-thumbRadius);
    box-shadow: var(--joy-Switch-thumbShadow);
    color: var(--joy-Switch-thumbColor);
    background-color: var(--joy-Switch-thumbBackground) !important;
    transition: all 0.1s ease-in-out;
}

.ia_toggleSwitch__thumbContainer:has(.ia_toggleSwitch__thumb--joy-selected) {
    left: calc(
        50% + var(--joy-Switch-trackWidth) / 2 - var(--joy-Switch-thumbWidth) /
            2 - var(--joy-Switch-thumbOffset)
    );
}

.ia_toggleSwitch__thumb {
    display: none;
}