02 Modals (CMM) – JJROD Agency Docs

Modal Reveal Animation

/*---------------------------------------------------------------------------
04-02 Modals (CMM)
---------------------------------------------------------------------------*/

/* Modal Reveal Animation FRAMEWORK 2024-05-29
-----------------------------------------------*/

@keyframes modalReveal{ 0% { opacity:0; } 100% { opacity:1; } }
:root { --modalRevealAinmation: modalReveal ease .25s; }

Fullscreen Modal

/* Fullscreen Modal FRAMEWORK 2024-05-29
-----------------------------------------------*/
:root {
    --fullscrnmodal_closebtnsize: 3rem;
    --fullscrnmodal_closebtmedgespace: 1rem;
    --fullscrnmodal_closebtnspace: calc( var(--fullscrnmodal_closebtnsize) + var(--fullscrnmodal_closebtmedgespace) + var(--fullscrnmodal_closebtmedgespace));
    --fullscrnmodal_modal_light-bkg: rgba(255,255,255,0.9);
    --fullscrnmodal_modal_light-closebtn: var(--clr-1);
    --fullscrnmodal_modal_dark-bkg: rgba(0,15,30,0.9);
    --fullscrnmodal_modal_dark-closebtn: var(--clr-white);
}
    @media screen and (min-width: 800px) {
        :root {
            --fullscrnmodal_closebtnsize: 4rem;
            --fullscrnmodal_closebtmedgespace: 2rem;
        }
    }

/* Fullscreen Modal BKG */
.fullscrnmodal { display: none; position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; padding: var(--fullscrnmodal_closebtnspace) 0 ; transition: var(--transitions);  animation: var(--modalRevealAinmation); }
.fullscrnmodal-content { margin: auto; height: 100%; display: flex; justify-content: center; flex-direction: column; }

/* Fullscreen Modal Close Button */
.fullscrnmodal_close_btn svg { position: absolute; top: var(--fullscrnmodal_closebtmedgespace); right: var(--fullscrnmodal_closebtmedgespace); font-size: var(--fullscrnmodal_closebtnsize); height: 1em; transition: var(--transitions); }
.fullscrnmodal_close_btn svg:hover, .modal_close_btn svg:focus { text-decoration: none; cursor: pointer; opacity: 0.5; }

/* Fullscreen Modal Colors */
.fullscrnmodal { background-color: var(--fullscrnmodal_modal_light-bkg); backdrop-filter: var(--backdropsaturate) var(--backdropblur); -webkit-backdrop-filter: var(--backdropsaturate) var(--backdropblur); }
.fullscrnmodal.modal_dark  { background-color: var(--fullscrnmodal_modal_dark-bkg);  backdrop-filter: var(--backdropsaturate) var(--backdropblur); -webkit-backdrop-filter: var(--backdropsaturate) var(--backdropblur); }
.fullscrnmodal_close_btn svg { color: var(--fullscrnmodal_modal_light-closebtn); }
.modal_dark .fullscrnmodal_close_btn svg { color: var(--fullscrnmodal_modal_dark-closebtn); }

Window Modal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum tincidunt nisl eu scelerisque. Suspendisse a lorem sem. Proin ullamcorper pharetra quam tempor facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sagittis, elit dictum hendrerit eleifend, sapien mauris tempus sem, eu feugiat sapien justo ac diam. Phasellus tempor lobortis auctor. Praesent porttitor, nisl at elementum aliquet, elit quam feugiat felis, ac mattis erat nulla rutrum nunc. Curabitur sagittis lorem ut porttitor accumsan. Phasellus ultricies eleifend elementum. Proin porttitor, ligula ut vehicula pulvinar, eros ex vehicula turpis, ac lobortis eros libero et enim. Sed pretium sem a dolor consequat, et eleifend leo condimentum. Sed consectetur viverra efficitur. Mauris vitae pharetra mi. Vestibulum in finibus massa.

/* Window Modal FRAMEWORK 2024-05-29
-----------------------------------------------*/
:root {
    --windowmodal-bkg: rgba(0, 15, 30, 0.5);
    --windowmodal-edge_space: 1rem;
    --windowmodal-closebtn_color: var(--clr-2);
    --windowmodal-closebtn_color-hover: var(--clr-1);
}

/* Window Modal Elements */
.windowmodal { display: none; position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%;  background-color: var(--windowmodal-bkg);  backdrop-filter: var(--backdropsaturate) var(--backdropblur); -webkit-backdrop-filter: var(--backdropsaturate) var(--backdropblur); animation: var(--modalRevealAinmation); }
.windowmodal-container { display: flex; justify-content: center; flex-direction: column; margin: auto; height: 100%; width: 100%; max-width: calc( var(--gcw-max-m) + calc( var(--windowmodal-edge_space) * 4 ) ); }
.windowmodal-container-inner { position: relative; background-color: var(--clr-white); margin: calc( var(--windowmodal-edge_space) * 2 ); padding:calc( var(--windowmodal-edge_space) * 2 ) var(--windowmodal-edge_space); box-shadow: var(--shadowbox); max-height: calc(100vh - var(--sp-feat));}
.windowmodal-content { height: 100%; overflow-y: auto;  padding: 0 var(--windowmodal-edge_space); }

/* Window Modal Colors */
.windowmodal-close svg { position: absolute; right: -1rem; top: -1rem; font-size: 2.5rem; height: 1em; }
.windowmodal-close svg.close-small circle { fill: var(--windowmodal-closebtn_color); transition:  var(--transitions);}
.windowmodal-close svg.close-small path { fill: var(--clr-white); }
.windowmodal-close svg:hover circle, .windowmodal-close svg:focus circle { fill: var(--windowmodal-closebtn_color-hover); }