Javier Rodriguez

Menu

09 Container Helpers

FRAMEWORK 2024-08-24

/*---------------------------------------------------------------------------
Grid Container Helpers - Container Variables Based in theme - FRAMEWORK 2024-05-25
---------------------------------------------------------------------------*/

/* Grid Container Classes
-----------------------------------------------*/  
.gcw-xl, .gcw-xl-child > :first-child                       { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: var(--gcw-max-xl); }
.gcw, .gcw-child > :first-child                             { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: var(--gcw-max); }
.gcw-m, .gcw-m-child > :first-child                         { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: var(--gcw-max-m); }
.gcw-s, .gcw-s-child > :first-child                         { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: var(--gcw-max-s); }
.gcw.fluid { width: 100%; max-width: 100% !important; }

.gcw-plus, .gcw-child-plus > :first-child                   { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: calc( var(--gcw-max) + var(--sp-base) + var(--sp-base) ); }
.gcw-plus-rim, .gcw-child-plus-rim > :first-child           { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: calc( var(--gcw-max) + var(--sp-rim) + var(--sp-rim) ); }
.gcw-plus-feat, .gcw-child-plus-feat > :first-child         { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: calc( var(--gcw-max) + var(--sp-feat) + var(--sp-feat) ); }

.gcw-m-plus, .gcw-m-child-plus > :first-child               { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: calc( var(--gcw-max-m) + var(--sp-base) + var(--sp-base) ); }
.gcw-m-plus-rim, .gcw-m-child-plus-rim > :first-child       { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: calc( var(--gcw-max-m) + var(--sp-rim) + var(--sp-rim) ); }
.gcw-m-plus-feat, .gcw-m-child-plus-feat > :first-child     { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: calc( var(--gcw-max-m) + var(--sp-feat) + var(--sp-feat) ); }

.gcw-s-plus, .gcw-s-child-plus > :first-child               { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: calc( var(--gcw-max-s) + var(--sp-base) + var(--sp-base) ); }
.gcw-s-plus-rim, .gcw-s-child-plus-rim > :first-child       { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: calc( var(--gcw-max-s) + var(--sp-rim) + var(--sp-rim) ); }
.gcw-s-plus-feat, .gcw-s-child-plus-feat > :first-child     { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: calc( var(--gcw-max-s) + var(--sp-feat) + var(--sp-feat) ); }

/* Grid Container Half Variables
-----------------------------------------------*/  
:root {
    --gcw-max-xl-half: calc( var(--gcw-max-xl) * .5 ); 
    --gcw-max-half: calc( var(--gcw-max) * .5 ); 
    --gcw-max-m-half: calc( var(--gcw-max-m) * .5 ); 
    --gcw-max-s-half: calc( var(--gcw-max-s) * .5 ); 
}