­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ /* ========================================================================== #THE DEFAULT GRIDABLE GRID ========================================================================== */ /** * All of the CSS for your public-facing functionality should be * included in this file. */ // The Grid .gridable--row { display: flex; flex-flow: row wrap; justify-content: space-between; overflow: hidden; margin-left: -20px; } .gridable--col { flex: 0 0 100%; width: 100%; max-width: 100%; padding-left: 20px; &.is-empty { @media only screen and (max-width: 1024px) { display: none; } } } @for $i from 1 through 12 { .gridable--col.col-#{$i} { flex-basis: percentage($i/12); width: percentage($i/12); max-width: percentage($i/12); } } @media only screen and (max-width: 1024px) { .gridable--col[class*="col-"] { flex-basis: 100%; width: 100%; max-width: 100%; } } .gridable--col { overflow: hidden; box-sizing: border-box; } /* Rows and Columns Style Variants. ========================================================================== */ // DO NOT EDIT DIRECTLY // Copy from editor-style.scss // Rows $gridable-row-simple: '.row-style--simple'; $gridable-row-boxed: '.row-style--boxed'; // Columns $gridable-col-simple: '.col-style--simple'; $gridable-col-boxed: '.col-style--boxed'; // Rows Styling Rules #{$gridable-row-simple} { } // Full Width Light Background #{$gridable-row-boxed} { background-color: #eef1f2; } // Columns Styling Rules // Default #{$gridable-col-simple} { } // Dark Background // White Text // Padding #{$gridable-col-boxed} { // @extend %p-m; background-color: #23252d; // @extend .dark; * { color: white; } }