CSS 04 Components (C-M-P) – JJROD Agency Docs

00 Unique Elements & Classes (UNQ)

Last Updated 2024-06-24

/****************************************************************************
*****************************************************************************
04 Components (CMP)
*****************************************************************************
****************************************************************************/

/*---------------------------------------------------------------------------
04-00 Unique Elements & Classes (UNQ)
---------------------------------------------------------------------------*/

01 Navigation (MST)

Last Updated 2024-06-24

/*---------------------------------------------------------------------------
04-01 Navigation (MST)
---------------------------------------------------------------------------*/

Navigation Back to Top Link

/* Side Nav Back to top
-----------------------------------------------*/
#siderevealnav { position: fixed; bottom: -200px; right: var(--sws-wrapper-edge); z-index: 99; border-radius: var(--borderradius); transition: var(--transitions);  }
#siderevealnav.sidenavup { position: fixed; bottom: 100px; }
#siderevealnav .cart-count { padding: 1rem 0; }
#toTopBtn { border: none;outline: none; background-color: var(--brand-clr-primary); color: white; cursor: pointer; padding: .5rem; border-radius: var(--borderradius); font-size: 2rem; transition: var(--transitions) !important; }
#toTopBtn:hover { background-color: var(--clr-black); }

02 Modals (CMM)

Last Updated 2024-06-24

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); }

03 Search Elements (SCH)

Last Updated 2024-06-24

/*---------------------------------------------------------------------------
04-03 Search Elements (SCH) FRAMEWORK 2024-05-26
---------------------------------------------------------------------------*/

/* Search Form - Default
-----------------------------------------------*/
form.search-form { display: grid; grid-template-columns: 1fr; grid-gap: var(--sp-rim); }
    @media screen and (min-width: 800px) {
        form.search-form { grid-template-columns: 1fr auto; }
    }

04 Icons (ICN)

Last Updated 2024-06-24

/*---------------------------------------------------------------------------
04-04 Icons (ICN)
---------------------------------------------------------------------------*/

/* Social Icons FRAMEWORK 2024-05-27
-----------------------------------------------*/  
ul.sicons { margin: 0; }
ul.sicons li { list-style: none; }

/* Navicons - Navigational Icons FRAMEWORK 2024-06-24
-----------------------------------------------*/  
/* Default Vertical Nav Icons */
*[class*="navicon"] { 
    display:flex !important; gap: .5rem; 
    flex-direction: column; align-items: center; 
    justify-content: center; background: transparent; 
    border: none; margin: 0; padding: 0; 
    transition: var(--transitions); 
    line-height: 1; 
    font-size: .75rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    color: var(--clr-2); 
    text-decoration: none; 
}
*[class*="navicon"]:hover,*[class*="navicon"]:focus { background: none !important;  opacity: .3; }
*[class*="navicon"] svg { color: var(--clr-2); margin: 0; font-size: 1.5rem; }
*[class*="navicon"]:hover svg,*[class*="navicon"]:focus svg  {  }

/* Horizontal Nav Icons */
.navicon-hor { flex-direction: row; }

Navicons

Simple class for both links and buttons to place icon on top and text in header. Typically used in header/main navigation.

.navicon

<a href="#" class="navicon"><i class="fa-solid fa-user"></i> <span>Account</span></a>

<button class="navicon"><i class="fa-solid fa-magnifying-glass"></i> <span>Search</span></button>

/* Section Icon Heading FRAMEWORK 2024-05-27
-----------------------------------------------*/
*[class*="sect_head"] {
    display: grid;
    width: 100%;
    text-align: left;
    padding-bottom: .75rem;
    border-bottom: var(--vern-line);
    margin-top: 0rem;
    margin-bottom: 1.25rem;    
}
.sect_head--slim { border-bottom: none; padding-bottom: 0!important; margin-bottom: 0 !important; }
.sect_head--icon { grid-template-columns: var(--h2-size) 1fr; grid-gap: 0.75rem; }
.sect_head--icon > :first-child { display: flex; justify-content: center; height: var(--h2-size); width: 100%; }
.sect_head--icon > :last-child { display: flex; justify-content: center; flex-direction: column; height: 100%; }
.sect_head--icon svg { font-size: var(--h2-size); color: var(--clr-1); height: 1em; vertical-align: -0.125em; }
.sect_head--icon svg .fa-primary { fill: var(--fa-primary-color,currentColor); }
.sect_head--icon svg .fa-secondary { fill: var(--fa-secondary-color,currentColor); }

05 Accordions & Toggles (ACN)

Last Updated 2024-06-24

Basic Accordion

/*---------------------------------------------------------------------------
04-05 Accordions & Toggles (ACN)
---------------------------------------------------------------------------*/

/* Accordion FRAMEWORK 2024-05-27
-----------------------------------------------*/

*[class*="acc_container--"] { width: 100%; padding-bottom: var(--sp-rim); }
*[class*="acc_item--"] { position: relative; padding: 0.7rem 0; background-color:transparent; transition: var(--transitions) !important; border-bottom: var(--vern-line); }
*[class*="acc_item--"]:last-of-type { border: none; }
*[class*="acc_item--p"] { position: relative; padding: 1.5rem 0; }
*[class*="acc_item--"] .open_acc { background-color: transparent; }
*[class*="acc_item_question--"] { position: relative; display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: 1rem; }

/* Regular Title */
*[class*="acc_item_question--"] *[class*="acc_item_title"] { font-size: 1.2rem; font-weight: 700; line-height: 1.05; transition: var(--transitions); margin-bottom: 0; }
*[class*="acc_item_question--"] :hover*[class*="acc_item_title"] { color: var(--brand-clr-primary); }
.open_acc *[class*="acc_item_question--"] *[class*="acc_item_title"] { color: var(--brand-clr-primary); }

/* Heading Title */
*[class*="acc_item_question--"] .acc_item_title--heading { font-size: var(--h3-size); display: flex; width: 100%; justify-content: flex-start; align-items: center; text-align: left; }
*[class*="acc_item_question--"] .acc_item_title--heading:after { content: ''; border-top:var(--vern-line-em); margin: 0 0 0 20px; flex: 1 0 20px; opacity: 0; transition: var(--transitions_slower); }
.open_acc *[class*="acc_item_question--"] .acc_item_title--heading:after { opacity: 1;}

*[class*="acc_item_question--"] svg { transition: all 0.4s ease; align-self: start; font-size: 1.5rem; color: var(--clr-2); }
*[class*="acc_item_question--"]:hover svg { transform: scale(1.125); color: var(--brand-clr-primary); }
.open_acc *[class*="acc_item_question--"] svg { transform: rotate(-45deg); color: var(--brand-clr-primary); }
.open_acc *[class*="acc_item_question--"]:hover svg { transform: scale(1.125) rotate(-45deg); }

*[class*="acc_item_answer--"] { position: relative; display: none; padding-top: .75rem; }
*[class*="acc_item_answer--p"] { padding-top: 1.5rem; }

.acc_item_answer_inner { opacity: 0; transition: var(--transitions_slower); }
.open_acc .acc_item_answer_inner { opacity: 1; }

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus mi in aliquam dapibus. Mauris sollicitudin gravida posuere. Vivamus rhoncus semper mi non dapibus. Sed at neque ultricies, ornare leo id, posuere turpis. Sed quis est eu sapien blandit fermentum. Ut et diam mauris. Nullam lacinia dui dolor, non auctor diam tincidunt vel. Nunc ac felis bibendum, tempor odio vel, vestibulum nibh.

Sed faucibus mi in aliquam dapibus.

Fusce sodales felis ut sapien placerat auctor. Fusce posuere viverra nibh eu maximus. Vivamus vel erat ut augue tincidunt varius. Mauris vel massa a turpis vehicula pellentesque. Maecenas sit amet dui vel leo sodales ultricies a ut diam. Suspendisse semper eros enim, nec ornare mi commodo nec. Pellentesque vehicula massa id nisl feugiat volutpat. Nunc vehicula ullamcorper sem, eu convallis mauris pharetra commodo. Proin consequat facilisis porta. Sed nibh ante, facilisis in sem in, commodo maximus augue. Praesent iaculis malesuada metus, a vulputate massa mattis nec. Sed commodo condimentum ligula in ornare. Morbi eu eleifend metus. Nunc vitae risus hendrerit, malesuada ante eget, fermentum lorem. In at elementum nibh.

Mauris sollicitudin gravida posuere.

Morbi suscipit in nisl vel vehicula. Nunc ultrices sapien tortor, lobortis facilisis neque scelerisque sed. Ut semper magna ut enim eleifend, et commodo odio fringilla. Duis vulputate finibus eros. Sed fringilla tortor justo, ut euismod tortor viverra eget. Aliquam erat volutpat. Donec non pulvinar lacus.

Vivamus rhoncus semper mi non dapibus. Sed at neque ultricies, ornare leo id, posuere turpis.

Duis odio elit, ornare eu dapibus sed, ullamcorper ut dolor. Pellentesque placerat vestibulum laoreet. Aenean et convallis nunc. Suspendisse interdum risus sem, congue molestie felis mattis posuere. Nullam consectetur vestibulum ipsum, in tempor sem pellentesque et. Etiam porttitor tristique tortor ut commodo. Vivamus dui eros, porta sit amet urna quis, sollicitudin laoreet ex. Vestibulum non ipsum et turpis venenatis varius. Nullam nulla justo, finibus in iaculis sit amet, blandit a sem. Aliquam nec augue leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis scelerisque orci sed fermentum.

Sed quis est eu sapien blandit fermentum. Ut et diam mauris. Nullam lacinia dui dolor, non auctor diam tincidunt vel.

Maecenas vehicula ut libero sed luctus. Suspendisse tempor facilisis sodales. Integer sit amet semper nisi. Pellentesque sit amet luctus quam, et molestie neque. Duis ultrices fringilla lorem, vitae aliquet tellus blandit sed. In magna metus, interdum eu mattis a, laoreet et arcu. Integer ut nulla ac lectus tincidunt laoreet id a lacus. Quisque ultricies risus non tempor mattis. Praesent quis faucibus erat.

06 Pages (PGS)

Last Updated 2024-06-24

/*---------------------------------------------------------------------------
04-06 Pages (PGS)
---------------------------------------------------------------------------*/

07 Blog & Posts (BLG)

Last Updated 2024-06-24

/*---------------------------------------------------------------------------
04-07 Blog & Posts (BLG)
---------------------------------------------------------------------------*/

/*  Default Gutenberg Latest Posts Block FRAMEWORK 2024-05-26
-----------------------------------------------*/
.wp-block-latest-posts.is-grid { display: grid; grid-gap: var(--sp-rim); }
.wp-block-latest-posts__featured-image img { height: auto; width: 100%; max-width: 100%; object-fit: cover; max-height: 150px; }
.wp-block-latest-posts.wp-block-latest-posts__list { margin: 0; }
.wp-block-latest-posts.wp-block-latest-posts__list li { background-color: var(--clr-white);  margin: 0; width: 100%; box-shadow: var(--shadowbox-btn); transition: all 0.2s ease-in-out; }
.wp-block-latest-posts.wp-block-latest-posts__list li:hover { box-shadow: var(--shadowbox); }
.wp-block-latest-posts.wp-block-latest-posts__list li > a { font-family: futura-pt, sans-serif; font-weight: 700; font-style: italic; padding: calc( var(--sp-rim) * 0.5 ) var(--sp-rim);  display: block; }
.wp-block-latest-posts__featured-image a { width: 100%;}
    @media screen and (min-width: 800px) {
        .wp-block-latest-posts.is-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
        .wp-block-latest-posts.is-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
        .wp-block-latest-posts.is-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }
        .wp-block-latest-posts.is-grid.columns-5 { grid-template-columns: repeat(5, 1fr); }
        .wp-block-latest-posts__featured-image img { max-height: 200px; }
    }

/* Comments FRAMEWORK 2024-05-26
-----------------------------------------------*/
#comments .commentlist { margin-left: 0px; }
#respond ul { margin-left: 0px; }
.commentlist li { position: relative; clear: both; overflow: hidden; list-style-type: none; margin-bottom: 1.5em; padding: 0.7335em 10px; }
.commentlist li:last-child { margin-bottom: 0; }
.commentlist li ul.children { margin: 0; }
.commentlist li[class*=depth-] { margin-top: 1.1em; }
.commentlist li.depth-1 { margin-left: 0; margin-top: 0; }
.commentlist li:not(.depth-1) { margin-left: 10px; margin-top: 0; padding-bottom: 0; }
.commentlist .vcard { margin-left: 50px; }
.commentlist .vcard cite.fn { font-weight: 700; font-style: normal; }
.commentlist .vcard time { float: right; }
.commentlist .vcard time a { color: #999; text-decoration: none; }
.commentlist .vcard time a:hover { text-decoration: underline; }
.commentlist .vcard img.avatar { position: absolute; left: 10px; padding: 2px; border: 1px solid #cecece; background: #fff; }
.commentlist .comment_content p { margin: 0.7335em 0 1.5em; font-size: 1em; line-height: 1.5em; }
.commentlist .comment-reply-link { float: right; }

    /* COMMENT FORM STYLES */
    .respond-form { margin: 1.5em 10px; padding-bottom: 2.2em; }
    .respond-form form { margin: 0.75em 0; }
    .respond-form form li { list-style-type: none; clear: both; margin-bottom: 0.7335em; }
    .respond-form form li label,.respond-form form li small { display: none; }
    .respond-form form input[type=text],
    .respond-form form input[type=email],
    .respond-form form input[type=url],
    .respond-form form textarea { padding: 3px 6px; background: #efefef; border: 2px solid #cecece; line-height: 1.5em; }
    .respond-form form input[type=text]:focus,
    .respond-form form input[type=email]:focus,
    .respond-form form input[type=url]:focus,
    .respond-form form textarea:focus { background: #fff; }
    .respond-form form input[type=text]:invalid,
    .respond-form form input[type=email]:invalid,
    .respond-form form input[type=url]:invalid,
    .respond-form form textarea:invalid { outline: none; border-color: #fbc2c4; background-color: #f6e7eb; box-shadow: none; }
    .respond-form form input[type=text],
    .respond-form form input[type=email],
    .respond-form form input[type=url] { max-width: 400px; min-width: 250px; }
    .respond-form form textarea { resize: none; width: 97.3%; height: 150px; }
    #comment-form-title { margin: 0 0 1.1em; }
    #allowed_tags { margin: 1.5em 10px 0.7335em 0; }
    .nocomments { margin: 0 20px 1.1em; }

08 Custom Posts Types (CPT)

Last Updated 2024-06-24

/*---------------------------------------------------------------------------
04-08 Custom Posts Types (CPT)
---------------------------------------------------------------------------*/

09 Blocks (BKS)

Last Updated 2024-06-24

/*---------------------------------------------------------------------------
04-09 Blocks (BKS)
---------------------------------------------------------------------------*/

10 Widgets (WGT)

Last Updated 2024-06-24

/*---------------------------------------------------------------------------
04-10 Widgets (WGT)
---------------------------------------------------------------------------*/

11 Galleries (GLL)

Last Updated 2024-06-24

/*---------------------------------------------------------------------------
04-11 Galleries (GLL) FRAMEWORK 2024-05-26
---------------------------------------------------------------------------*/

/*  Default Gutenberg Gallery Block
-----------------------------------------------*/

/* Reset Gallery Figure sizing*/
.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image),
.wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image),
.wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image),
.wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image),
.wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image),
.wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image),
.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image),
.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2)~figure.wp-block-image:not(#individual-image),
.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:last-child 
{ width: 100% !important }

/* Gallery Block Grid & Columns */
.wp-block-gallery { display: grid !important; }
.wp-block-gallery.columns-1 { grid-template-columns: repeat(1, 1fr); }
.wp-block-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.wp-block-gallery.columns-4 { grid-template-columns: repeat(3, 1fr); }
.wp-block-gallery.columns-5 { grid-template-columns: repeat(3, 1fr); }
.wp-block-gallery.columns-6 { grid-template-columns: repeat(3, 1fr); }
.wp-block-gallery.columns-7 { grid-template-columns: repeat(3, 1fr); }
.wp-block-gallery.columns-8 { grid-template-columns: repeat(3, 1fr); }
.wp-block-gallery.columns-9 { grid-template-columns: repeat(3, 1fr); }
    
    @media screen and (min-width: 800px) {
        .wp-block-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
        .wp-block-gallery.columns-5 { grid-template-columns: repeat(5, 1fr); }
        .wp-block-gallery.columns-6 { grid-template-columns: repeat(6, 1fr); }
        .wp-block-gallery.columns-7 { grid-template-columns: repeat(7, 1fr); }
        .wp-block-gallery.columns-8 { grid-template-columns: repeat(8, 1fr); }
        .wp-block-gallery.columns-9 { grid-template-columns: repeat(9, 1fr); }
    }

12 Footer (FTR)

Last Updated 2024-06-24

/*---------------------------------------------------------------------------
04-12 Footer (FTR)
---------------------------------------------------------------------------*/