shut/src/less/css.Modal.less

Shut UI Framework

@import "utilities/scroll";
// dynamic dialog

:root {
    --sh-start: -100%;
    --sh-end: 100%;
}


.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--sh-modal-index-10);
    background-color: var(--sh-modal-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal {
    background-color: var(--sh-white);
    z-index: var(--sh-modal-zindex);
    overflow: hidden;
    outline: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    background-clip: padding-box;
    box-shadow: @shadows[deeper]; // Remove focus outline from opened modal
    max-height: calc(100dvh - var(--sh-modal-margin) * 2);
    width: calc(100dvw - var(--sh-modal-margin) * 2);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sh-modal-padding);
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: var(--sh-modal-padding);
    overflow-y: auto;
    .scroll(var(--sh-modal-scrollbar-width));
    overscroll-behavior: contain;

}

.modal-footer {
    padding: var(--sh-modal-padding);
}

// following are flavors of the dialog


.modal-bottom-sheet .modal-overlay {
    align-items: flex-end;
}

.modal-full-height {
    .modal {
        height: calc(100dvh - var(--sh-modal-margin) * 2);
    }
}

.modal-full-screen {
    .modal {
        min-height: 100dvh;
        max-height: 100dvh;
        // min-width: 100dvw; buggy
          min-width: 100%;
        max-width: 100dvw;
        margin: 0;
    }

}

.modal-half-screen {
    .modal-overlay {
        justify-content: flex-start;
    }

    .modal {
        width: 90dvw;
        min-height: 100dvh;
        max-height: 100dvh;
        margin: 0;
    }

}

.animate {
    &.fromstart .modal {
        transform: translateX(var(--sh-start));
        animation: fromstart .15s @trans-func 0.15s;
        animation-fill-mode: forwards;
    }

    &.fromend .modal-overlay {
        justify-content: flex-end;
    }
    &.fromend .modal {
        transform: translateX(var(--sh-end));
        animation: fromend .15s @trans-func 0.15s;
        animation-fill-mode: forwards;
        
    }

    &.fromtop .modal {
        transform: translateY(-100%);
        animation: fromtop .15s @trans-func 0.15s;
        animation-fill-mode: forwards;
    }

    &.frombottom .modal {
        transform: translateY(100%);
        animation: frombottom .15s @trans-func 0.15s;
        animation-fill-mode: forwards;
    }
}



// media
.media(md, {
    .modal {
        max-width: @screen[md];
        margin-inline: auto;
    }

    .modal-half-screen .modal {
        width: 50dvw;
    }

});


// different basic animations 
@keyframes fromstart {
    from {
        transform: translateX(var(--sh-start));
    }

    to {
        transform: translateX(0);
    }
}

@keyframes fromend {
    from {
        transform: translateX(var(--sh-end));
    }

    to {
        transform: translateX(0);
    }
}

@keyframes frombottom {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes fromtop {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}