MAINHACK

Viewing / Editing File: grid-api.scss

@use "sass:math";
// COMPONENT API: GRID
// Used specific path here since, pro loads the grid and 'current path' will be wrong.
@import "../../../../../assets/dev/scss/editor/_breakpoints.scss";

// MIXIN: Grid Coll generator
$eps-grid-columns: 12;
$eps-grid-spacing-keys: (5 8 10 12 16);
$grid-spacing-gutter: calc( var(--grid-spacing-gutter) * calc(#{spacing(10)} / 10) );

//defining flex traits
@mixin grid-item-auto($size) {
	.#{$eps-prefix}grid-item-#{$size} {
		flex-grow: 1;
		max-width: 100%;
		flex-basis: 0;
	}
}

// defining cols.
@mixin grid-col-generator($size, $grid-columns: $eps-grid-columns) {
	@for $i from 1 through $grid-columns {
		.#{$eps-prefix}grid-item-#{$size}-#{$i} {
			flex-grow: 0;
			max-width: calc( #{$i} / #{$grid-columns} * 100% );
			flex-basis: calc( #{$i} / #{$grid-columns} * 100% );
		}
	}
}

// generating spacing classes and custom properties
@mixin grid-spacing-classes($keys, $amp:'&') {
	@each $key in $keys {
		#{$amp}-#{$key} {
			--grid-spacing-gutter: #{spacing($key)};
		}
	}
}

// exporting custom properties
@mixin grid-custom-properties {
	:root {
		--grid-spacing-width: calc(100% + var(#{--grid-container-gutters}));
		--grid-spacing-gutters: calc(2 * var(#{--grid-spacing-gutter}));
	}
}

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: grid-api.scss

Server Info

System Features