22

✏️ Editing: gridable-style.scss

/* ==========================================================================
    #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;
    }
}

MR SKB