@talentsoft-opensource/hylia/atoms/input-switch.less

The Hylia design systems. Contains all the building blocks style rules for Talentsoft.

.Hylia-a-inputSwitch {
    display: flex;
    align-items: center;

    cursor: pointer;

    .Hylia-a-label {
        margin-right: 1rem;
    }

    &:hover:not(.Hylia-a-inputSwitch--disabled) {
        .Hylia-a-inputSwitch__apparence:after {
            background-color: lighten(@terran, 20%);
        }
    }

    &-label--right {
        flex-direction: row-reverse;

        .Hylia-a-label {
            margin-right: 0;
            margin-left: 1rem;
        }
    }

    &--disabled {
        .Hylia-a-inputSwitch__apparence:after {
            border-color: darken(@knight, 10%);
            background-color: lighten(@knight, 30%);
        }

        //When input is checked
        .Hylia-a-inputSwitch__input:checked {
            & + .Hylia-a-inputSwitch__apparence {
                background-color: @knight;

                &:after {
                    border-color: darken(@knight, 30%);
                }
            }
        }
    }

    &__input {
        &:checked {
            & + .Hylia-a-inputSwitch__apparence:after {
                transform: translate(106%, -50%);
            }
        }

        &:checked:not(:disabled) {
            & + .Hylia-a-inputSwitch__apparence {
                animation: onFocusChecked 1s;

                background-color: @terran;
            }

            & + .Hylia-a-inputSwitch__apparence:after {
                border: 0.2rem solid darken(@terran, 30%);
            }
        }

        &:hover:not(:disabled) {
            .Hylia-a-inputSwitch__apparence:after {
                background-color: lighten(@terran, 30%);
            }
        }

        &:focus {
            &:checked:not(:disabled) {
                & + .Hylia-a-inputSwitch__apparence {
                    box-shadow: 0 0 0 0.3rem fade(@terran, 30%);
                }
            }

            &:not(:disabled) {
                & + .Hylia-a-inputSwitch__apparence {
                    box-shadow: 0 0 0 0.3rem fade(@apprentice, 30%);
                }
            }
        }

        &:focus:disabled {
            & + .Hylia-a-inputSwitch__apparence {
                animation: onFocus 1s;
            }
        }
    }

    &__apparence {
        position: relative;

        display: inline-flex;
        align-items: center;

        width: 4rem;
        height: 2rem;

        user-select: none;
        transition: all 1s;

        border-radius: 100rem;
        outline: none;
        background-color: @minion;

        &:after {
            position: absolute;
            top: 50%;
            left: 0;

            display: block;

            width: 1.5rem;
            height: 1.5rem;

            content: "";
            transition: all 0.4s;
            transform: translate(0, -50%);

            border: 0.2rem solid @terran;
            border-radius: 100%;
            background-color: @stormtrooper;
        }
    }

    &__icon {
        font-size: 1.2rem;

        position: relative;
        top: 0.1em;
        left: 0.5rem;

        color: @stormtrooper;
    }
}

@keyframes onFocusChecked {
    0% {
        box-shadow: 0 0 0 0 @terran;
    }
    100% {
        box-shadow: 0 0 0 0.6rem fade(@terran, 0);
    }
}

@keyframes onFocus {
    0% {
        box-shadow: 0 0 0 0 @apprentice;
    }
    100% {
        box-shadow: 0 0 0 0.6rem fade(@apprentice, 0);
    }
}