@talentsoft-opensource/hylia/organisms/modal.less

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

.Hylia-m-modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 120rem;
    max-height: 100vh;
    opacity: 0;
    animation: modalAppear 0.3s 0.2s forwards;

    @media screen and (min-width: @md) {
        padding: 5.4rem 2rem;
    }

    &__close {
        font-size: 2rem;
        line-height: 3.2rem;
        z-index: 1;
        position: absolute;
        top: 1rem;
        right: 2rem;

        width: 3.5rem;
        height: 3.5rem;

        cursor: pointer;
        text-align: center;

        color: @stormtrooper;
    }

    &__overlaid {
        position: fixed;
        top: 0;
        left: 0;

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

        width: 100%;
        height: 100%;

        background-color: fade(@vader, 90%);

        &--short {
            .Hylia-m-modal__icon {
                display: none;

                @media screen and (min-width: @md) {
                    display: block;
                }
            }

            .Hylia-m-modal {
                padding: 5.4rem 2rem;
            }
        }
    }

    &__wrapper {
        display: flex;
        flex-direction: column;
        max-height: 100vh;

        & > *:last-child {
            border-bottom-left-radius: @radius;
            border-bottom-right-radius: @radius;
        }

        &--fullheight {
            height: 100vh;
        }
    }

    &__title {
        font-family: @condensed_bold;
        font-size: 2.6rem;
        line-height: 3rem;

        display: flex;
        align-items: center;

        margin-bottom: 2rem;

        color: @smart;
    }

    &__subject {
        padding: 2rem 2rem 0 2rem;
    }

    &__header {
        background-color: @stormtrooper;
        border-top-left-radius: @radius;
        border-top-right-radius: @radius;
    }

    &__menu {
        position: relative;
        z-index: 1;

        margin-top: 2rem;
        padding: 0 2rem;

        border-bottom: 0.1rem solid @apprentice;
        background-color: @stormtrooper;
    }

    &__content {
        flex: 1 1 auto;
        max-height: 100%;
        display: flex;
        min-height: 0px;
        padding: 1rem;

        background-color: @stormtrooper;

        .scrollbar;

        &--noPadding {
            padding: 0;
        }
    }

    &__footer {
        display: flex;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: flex-end;

        padding: 1rem 2rem;

        border-top: 0.1rem solid @apprentice;
        border-bottom-right-radius: @radius;
        border-bottom-left-radius: @radius;
        background-color: @acolyte;

        & > button {
            margin: 0 0.5rem;
        }
    }
}

@keyframes modalAppear {
    0%{
        opacity: 0;
        transform: translateY(4rem);
    }

    100%{
        opacity: 1;
        transform: translateX(0);
    }
}