| 1 |
@use "sass:math"; |
| 2 |
// COMPONENT API: GRID |
| 3 |
// Used specific path here since, pro loads the grid and 'current path' will be wrong. |
| 4 |
@import "../../../../../assets/dev/scss/editor/_breakpoints.scss"; |
| 5 |
|
| 6 |
// MIXIN: Grid Coll generator |
| 7 |
$eps-grid-columns: 12; |
| 8 |
$eps-grid-spacing-keys: (5 8 10 12 16); |
| 9 |
$grid-spacing-gutter: calc( var(--grid-spacing-gutter) * calc(#{spacing(10)} / 10) ); |
| 10 |
|
| 11 |
//defining flex traits |
| 12 |
@mixin grid-item-auto($size) { |
| 13 |
.#{$eps-prefix}grid-item-#{$size} { |
| 14 |
flex-grow: 1; |
| 15 |
max-width: 100%; |
| 16 |
flex-basis: 0; |
| 17 |
} |
| 18 |
} |
| 19 |
|
| 20 |
// defining cols. |
| 21 |
@mixin grid-col-generator($size, $grid-columns: $eps-grid-columns) { |
| 22 |
@for $i from 1 through $grid-columns { |
| 23 |
.#{$eps-prefix}grid-item-#{$size}-#{$i} { |
| 24 |
flex-grow: 0; |
| 25 |
max-width: calc( #{$i} / #{$grid-columns} * 100% ); |
| 26 |
flex-basis: calc( #{$i} / #{$grid-columns} * 100% ); |
| 27 |
} |
| 28 |
} |
| 29 |
} |
| 30 |
|
| 31 |
// generating spacing classes and custom properties |
| 32 |
@mixin grid-spacing-classes($keys, $amp:'&') { |
| 33 |
@each $key in $keys { |
| 34 |
#{$amp}-#{$key} { |
| 35 |
--grid-spacing-gutter: #{spacing($key)}; |
| 36 |
} |
| 37 |
} |
| 38 |
} |
| 39 |
|
| 40 |
// exporting custom properties |
| 41 |
@mixin grid-custom-properties { |
| 42 |
:root { |
| 43 |
--grid-spacing-width: calc(100% + var(#{--grid-container-gutters})); |
| 44 |
--grid-spacing-gutters: calc(2 * var(#{--grid-spacing-gutter})); |
| 45 |
} |
| 46 |
} |
| 47 |
|
