@talentsoft-opensource/hylia/molecules/button-round.less

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

.button-round {
    font-size: 1.6rem;
    line-height: 1.6rem;

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

    width: 4.5rem;
    height: 4.5rem;

    border-width: 0.2rem;
    border-style: solid;
    border-radius: 50%;
}

.button-round-dropdown {
    width: 3.3rem;
    height: 3.3rem;

    &__up, &__down {
        position: absolute;
        top: 50%;
        left: 50%;
    }

    &__up {
        transition: transform 0.3s 0.1s, opacity 0.3s 0.1s;
        transform: translate(-50%, -80%);

        opacity: 0;
        color: @stormtrooper;
    }

    &__down {
        transition: transform 0.3s 0.1s, opacity 0.3s 0.1s;
        transform: translate(-50%, -50%);

        opacity: 1;
        color: @smart;
    }

    &--open {
        background-color: @smart;

        .button-round-dropdown__down {
            transform: translate(-50%, -80%);

            opacity: 0;
        }

        .button-round-dropdown__up {
            transform: translate(-50%, -55%);

            opacity: 1;
        }
    }
}