// COMPONENT: GRID
// Defines Grid and Item blocks
@import "grid-api";
.#{$eps-prefix}grid {
// Flex Structure rules
// apply to all screen size
// @props: container
&-container {
display: flex;
flex-wrap: wrap;
width: 100%;
// @prop: no-wrap
&--no-wrap {
flex-wrap: nowrap;
}
&--wrap-reverse {
flex-wrap: wrap-reverse;
}
// @prop: spacing[5,8,10,12,16]
// defined within container only
// item padding can be 8,10,12,16
// container width and negative margin are calculated dynamically
// @markup <Grid container spacing={5} and so on >
&--spacing {
--grid-row-gutter: calc(-1 * #{$grid-spacing-gutter});
width: var(--grid-spacing-width);
margin: var(--grid-row-gutter);
> .#{$eps-prefix}grid-item {
padding: var(--grid-spacing-gutter);
}
}
}
// - direction
// @props: direction[
// 'row'
// 'row-reverse'
// 'column'
// 'column-reverse'
// ]
&--direction {
&-row {
flex-direction: row;
&-reverse {
flex-direction: row-reverse;
}
}
&-column {
flex-direction: column;
&-reverse {
flex-direction: column-reverse;
}
}
}
// Flex alignments
// @props: justifyContent[
// 'stretch'
// 'start'
// 'center'
// 'end'
// 'space-between'
// 'space-around'
// ]
// default: 'stretch'
&--justify {
&-stretch {
justify-content: stretch;
}
&-start {
justify-content: flex-start;
}
&-center {
justify-content: center;
}
&-end {
justify-content: flex-end;
}
&-space-between {
justify-content: space-between;
}
&-space-around {
justify-content: space-around;
}
&-space-evenly {
justify-content: space-evenly;
}
}
// @props: alignContent[
// 'stretch'
// 'start'
// 'center'
// 'end'
// 'space-between'
// 'space-around'
// ]
// default: 'stretch'
&--align-content {
&-stretch {
align-content: stretch;
}
&-start {
align-content: flex-start;
}
&-center {
align-content: center;
}
&-end {
align-content: flex-end;
}
&-space-between {
align-content: space-between;
}
}
// @props: alignItems[
// 'start'
// 'center'
// 'end'
// 'baseline'
// 'stretch'
// ]
// default: 'stretch'
&--align-items {
&-start {
align-items: flex-start;
}
&-center {
align-items: center;
}
&-end {
align-items: flex-end;
}
&-baseline {
align-items: baseline;
}
&-stretch {
align-items: stretch;
}
}
}
// - Grid Item assumes display flex and wrap on parent
// - Defining Item Base Properties
// - Generating flex item traits within @media breakpoints
// Zero min width to disable overflow while container is no wrap
// @prop: ZeroMinWidth
// @markup <Grid item zeroMinWidth> or <Grid item sm> and so on..
.#{$eps-prefix}grid-item--zero-min-width {
min-width: 0;
}
// Item flex sizing, auto grid
// @prop: [xs,sm,md,lg,xl,xxl]
// @markup <Grid item xs> or <Grid item sm> and so on..
// No need for container:
// @prop: [xs={@num<=12}],sm={@num<=12},md={@num<=12},lg={@num<=12},xl={@num<=12},xxl={@num<=12}]
// @markup <Grid item xs={4}> or <Grid item sm={3}> and so on..
@each $breakpoint in map-keys($breakpoints) {
@media screen and (min-width: #{map-get($breakpoints, $breakpoint)}) {
@include grid-item-auto($breakpoint);
}
}
// Generating cols per each media breakpoint
@include grid-col-generator(xs);
@media screen and (min-width: $editor-screen-sm-min) {
@include grid-col-generator(sm);
}
@media screen and (min-width: $editor-screen-md-min) {
@include grid-col-generator(md);
}
@media screen and (min-width: $editor-screen-lg-min) {
@include grid-col-generator(lg);
}
@media screen and (min-width: $editor-screen-xl-min) {
@include grid-col-generator(xl);
}
@media screen and (min-width: $editor-screen-xxl-min) {
@include grid-col-generator(xxl);
}