Last Piece Hacktivist Crew

Editing: grid.scss

// 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);
}

Cancel