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

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

.Hylia-a-toaster {
    position: fixed;
    right: 2rem;
    bottom: 2rem;

    display: flex;
    align-items: center;

    width: 35rem;
    height: 8rem;
    padding: 2.5rem;

    border: 0.1rem solid @terran;
    border-radius: @radius;
    background-color: @stormtrooper;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);

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

        .Hylia-a-toaster__icon {
            font-size: 1.4rem;
            line-height: 2.6rem;

            background-color: @namek;
        }
    }

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

        .Hylia-a-toaster__icon {
            font-size: 1.2rem;
            line-height: 2.5rem;

            background-color: @saien;
        }
    }

    &--information {
        .Hylia-a-toaster__icon {
            font-size: 1.4rem;
            line-height: 2.7rem;

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

            background-color: @terran;
        }

        .Hylia-a-toaster__icon-info {
            width: 1.4rem;
        }
    }

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

        .Hylia-a-toaster__icon {
            line-height: 2.8rem;

            background-color: @ruban;
        }
    }

    &__icon {
        font-size: 1.3rem;
        line-height: 2.5rem;

        position: relative;

        flex-grow: 0;
        flex-shrink: 0;

        width: 2.6rem;
        height: 2.6rem;
        margin-right: 3rem;

        text-align: center;

        color: @stormtrooper;
        border-radius: 50%;
        background-color: @terran;
    }

    &__close {
        font-size: 1.5rem;

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

        cursor: pointer;

        color: @knight;
    }

    &__info {
        font-family: @condensed_regular;
        font-size: 1.4rem;
    }

    &__error {
        font-family: @condensed_regular;
        font-size: 1.4rem;
        font-weight: normal;

        display: inline-block;

        margin-top: 0.5rem;

        color: @ruban;

        &--action {
            cursor: pointer;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    &__timer {
        position: absolute;
        top: 0;
        left: 0;

        width: 100%;
        height: 100%;

        circle {
            fill: none;
            stroke: fade(@stormtrooper, 90%);
            stroke-width: 3;
        }
    }
}

@keyframes timerToster {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 75;
    }
}

@keyframes animationToaster {
    0% {
        transform: translateY(3rem);

        opacity: 0;
    }

    100% {
        transform: translateY(0);

        opacity: 1;
    }
}