@talentsoft-opensource/hylia/atoms/button.less

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

.Hylia-a-button {
    font-family: @condensed_regular;
    font-size: 1.4rem;

    position: relative;

    min-width: 11.5rem;
    height: 3.5rem;
    margin: 0 0.5rem;
    padding: 0 1rem;

    border: none;
    border-radius: @radius;

    &:not(:disabled) {
        cursor: pointer;
    }

    &__counter {
        font-family: @condensed_bold;
        font-size: 1.3rem;
        line-height: 2.2rem;

        position: absolute;
        top: 50%;
        right: 1rem;

        min-width: 2.3rem;
        height: 2.2rem;
        padding: 0 0.5rem;

        transform: translateY(-50%);

        color: @smart;
        border-radius: 1000rem;
        background-color: @stormtrooper;
    }

    &--full {
        min-width: 100%;
    }

    &--icon {
        padding: 0 3.5rem;

        i {
            position: absolute;
            top: 50%;
            left: 1rem;

            padding-right: 1rem;

            transform: translateY(-50%);
        }
    }

    &--counter {
        padding: 0 5rem;

        // Fix color type
        &.Hylia-a-button-primary--positive {
            .Hylia-a-button__counter {
                color: @namek;
            }
        }

        &.Hylia-a-button-primary--warning {
            .Hylia-a-button__counter {
                color: @saien;
            }
        }

        &.Hylia-a-button-primary--negative {
            .Hylia-a-button__counter {
                color: @ruban;
            }
        }

        &.Hylia-a-button-secondary--positive {
            .Hylia-a-button__counter {
                color: @stormtrooper;
                background-color: @namek;
            }
        }

        &.Hylia-a-button-secondary--warning {
            .Hylia-a-button__counter {
                color: @stormtrooper;
                background-color: @saien;
            }
        }

        &.Hylia-a-button-secondary--negative {
            .Hylia-a-button__counter {
                color: @stormtrooper;
                background-color: @ruban;
            }
        }
    }

    &--small {
        line-height: 2.3rem;

        height: 2.4rem;
    }

    // Primary
    &-primary {
        transition: background-color 0.3s, border 0.3s;

        color: @stormtrooper;
        border-width: 0.1rem;
        border-style: solid;
        border-color: @smart;
        background-color: @smart;

        &:not(:disabled):hover {
            border: 0.1rem solid darken(@smart, 10%);
            background-color: darken(@smart, 10%);
        }

        &:not(:disabled):active {
            background-color: darken(@smart, 10%);
        }

        &:not(:disabled):focus {
            animation: onPressDefault 1s;
        }

        &:disabled {
            color: @knight;
            border: 0.1rem solid @apprentice;
            background-color: @apprentice;
        }

        &--positive {
            color: @stormtrooper;
            border-color: @namek;
            background-color: @namek;

            &:not(:disabled):hover {
                border: 0.1rem solid darken(@namek, 10%);
                background-color: darken(@namek, 10%);
            }

            &:not(:disabled):active {
                background-color: darken(@namek, 10%);
            }

            &:not(:disabled):focus {
                animation: onPressPositive 1s;
            }
        }

        &--warning {
            color: @stormtrooper;
            border-color: @saien;
            background-color: @saien;

            &:not(:disabled):hover {
                border: 0.1rem solid darken(@saien, 10%);
                background-color: darken(@saien, 10%);
            }

            &:not(:disabled):active {
                background-color: darken(@saien, 10%);
            }

            &:not(:disabled):focus {
                animation: onPressWarning 1s;
            }
        }

        &--negative {
            color: @stormtrooper;
            border-color: @ruban;
            background-color: @ruban;

            &:not(:disabled):hover {
                border: 0.1rem solid darken(@ruban, 10%);
                background-color: darken(@ruban, 10%);
            }

            &:not(:disabled):active {
                background-color: darken(@ruban, 10%);
            }

            &:not(:disabled):focus {
                animation: onPressNegative 1s;
            }
        }
    }

    // Secondary
    &-secondary {
        transition: background-color 0.3s, color 0.3s;

        color: @smart;
        border-width: 0.1rem;
        border-style: solid;
        border-color: @smart;
        background-color: @stormtrooper;

        &:not(:disabled):hover {
            color: @stormtrooper;
            background-color: @smart;

            .Hylia-a-button__counter {
                color: @smart;
                background-color: @stormtrooper;
            }
        }

        &:not(:disabled):active {
            background-color: darken(@smart, 10%);
        }

        &:not(:disabled):focus {
            animation: onPressDefault 1s;
        }

        .Hylia-a-button__counter {
            color: @stormtrooper;
            background-color: @smart;
        }

        &:disabled {
            color: @apprentice;
            border: @apprentice 0.1rem solid;
        }

        &--positive {
            color: @namek;
            border-color: @namek;

            &:not(:disabled):hover {
                border: 0.1rem solid @namek;
                background-color: @namek;
            }

            &:not(:disabled):active {
                background-color: @namek;
            }

            &:not(:disabled):focus {
                animation: onPressPositive 1s;
            }
        }

        &--warning {
            color: @saien;
            border-color: @saien;

            &:not(:disabled):hover {
                border: 0.1rem solid @saien;
                background-color: @saien;
            }

            &:not(:disabled):active {
                background-color: @saien;
            }

            &:not(:disabled):focus {
                animation: onPressWarning 1s;
            }
        }

        &--negative {
            color: @ruban;
            border-color: @ruban;

            &:not(:disabled):hover {
                border: 0.1rem solid @ruban;
                background-color: @ruban;
            }

            &:not(:disabled):active {
                background-color: @ruban;
            }

            &:not(:disabled):focus {
                animation: onPressNegative 1s;
            }
        }
    }

    // Standard with Shadow
    &-standard {
        transition: all 0.3s;

        color: @smart;
        border: 0.1rem solid @stormtrooper;
        background-color: @stormtrooper;
        box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);

        &:not(:disabled):hover {
            border: 0.1rem solid @smart;
        }

        &:not(:disabled):focus {
            animation: onPressDefault 1s;
        }
    }

    // Ghost with transparent
    &-ghost {
        min-width: auto;

        transition: all 0.3s;

        color: @smart;
        border: 0.1rem solid transparent;
        background-color: transparent;

        &:not(:disabled):hover {
            box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
            background-color: @stormtrooper;
        }

        &:not(:disabled):focus {
            animation: onPressDefault 1s;
        }

        &--positive {
            color: @namek;

            &:not(:disabled):hover {
                .button-hover-ghost(@stormtrooper, @namek);
            }

            &:not(:disabled):focus {
                animation: onPressPositive 1s;
            }
        }

        &--warning {
            color: @saien;

            &:not(:disabled):hover {
                .button-hover-ghost(@stormtrooper, @saien);
            }

            &:not(:disabled):focus {
                animation: onPressWarning 1s;
            }
        }

        &--negative {
            color: @ruban;

            &:not(:disabled):hover {
                .button-hover-ghost(@stormtrooper, @ruban);
            }

            &:not(:disabled):focus {
                animation: onPressNegative 1s;
            }
        }
    }

    // Hollow
    &-hollow {
        color: @smart;
        border: dashed 0.1rem currentColor; 
    }

    // Round
    &-round {
        font-size: 1.8rem;
        line-height: 3.6rem;
        justify-content: center;
        align-items: center;
        display: inline-flex;
        width: 3.5rem;
        min-width: auto;
        height: 3.5rem;
        padding: 0;

        border-radius: 50%;

        i {
            padding: 0;
            position: static;
            transform: translate(0, 0);
        }
    }
}

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

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

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

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

.button-hover-ghost(@background, @border) {
        border: 0.1rem solid @border;
        background-color: @background;
}