grid-mixin.scss

//grid system mixin version

@import 'grid-settings';

@import 'grid-shared-mixins';

//make cells take up multiple columns worth of width
@mixin grid__cell--span($span, $totalCols, $important: ()) {
	flex-grow: 1;
	@if ($grid-calc-support) {
		width: calc(#{$span} / #{$totalCols} * 100%) $important;
	} @else {
		width: ($span / $totalCols * 100%) $important;
	}
}

@mixin grid(
	$cols: auto,
	$gutter: false,
	$breakpoints: default,
	$inners: false,
	$vAlign: false,
	$align: default,
	$space: false,
	$wrap: default,
	$MQs: true,
	$outerGutters: false,
	$cellSpan: false,
	$ieFloat: false,
	$mini: false,
	$vertical: false,
	$stretch: default,
	$shrink: true,
	$resize: default
) {
	-gutter-grid-: grid;
	box-sizing: border-box;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex !important;
	align-content: stretch;
	border-color: transparent;

	// $blockDisplayMode__sharedCircumstances:
		// $align != 'stretch' or // TO DO: CHECK HORIZONTAL ALIGNMENT
		// $space != false;

	// Only relevant to Legacy users
	$blockDisplayMode: $wrap == true or $stretch == false or $resize == false or
		$vertical or $ieFloat == true or $align != default or
		($vAlign and $cols != auto);

	//By default grids will stretch unless there is a column or alignment setting
	@if ($stretch == default) {
		$stretch: $cols ==
			auto and
			$space ==
			false and
			($align == default or $align == stretch);
	}

	@if (
		(
				not
					$grid-legacy-support and
					($wrap == true or ($cols != auto and $wrap == default))
			) or
			(
				$grid-legacy-support and
					$wrap !=
					false and
					(
						$align !=
							default or
							$space !=
							false or
							$stretch ==
							false or
							$resize ==
							false or
							($vAlign != false and $cols != auto)
					)
			)
	) {
		flex-wrap: wrap;
	}

	@if ($wrap == default) {
		@if ($grid-legacy-support) {
			// Legacy mode will not wrap unless it is explicitly set to true
			// (or if the screen sizer is small)
			$wrap: auto;
		} @else {
			//By default grids will not wrap unless there is a column setting
			$wrap: if($cols == auto, auto, true);
		}
	}

	@if ($vertical) {
		flex-direction: column;
	}

	@if (not $mini) {
		min-width: 100%;
	}

	@if ($grid-break-points != false) {
		@include mq(max, $grid-page-width) {
			@if ($MQs and $wrap == auto) {
				flex-wrap: wrap;
			}
		}
	}

	//grid cell styling
	> * {
		-gutter-grid-: cell;
		box-sizing: border-box;
		min-width: 0%;
		max-width: 100%;
		display: if($inners, flex, block);
		padding: 0;
		margin: 0;
		background-clip: padding-box !important;
		border: 0 solid transparent;

		$canGrow: $resize == true or $align == stretch or
			($stretch == true and $resize == default);
		$canShrink: $resize == true or ($shrink == true and $resize == default);
		flex-grow: if($canGrow, 1, 0);
		flex-shrink: if($canShrink, 1, 0);

		@if ($inners) {
			align-items: stretch;

			//grid inner styling
			> * {
				-gutter-grid-: inner;
				display: block;
				width: 100%;
				box-sizing: border-box;
			}
		}

		//column widths
		@if (type-of($cols) == number) {
			$breaks: '';

			@if ($breakpoints == default) {
				$breaks: if(
					length($grid-bp-list) < $cols,
					false,
					map-get($grid-bp-list, $cols)
				);
			} @else {
				$breaks: $breakpoints;
			}

			width: column-width($cols);

			//Applies the media queries for the break points
			@if ($MQs or $breakpoints != default) {
				@include generate-column-breakpoints($breaks);
			}
		}
	}

	//allows IE to use floats instead of display table without affecting modern browsers
	@if (
		$blockDisplayMode and
			($align == default or $align == stretch) and not
			$vAlign and not
			$space
	) {
		@include ieFloat;
	}

	@if ($grid-legacy-support) {
		//tabular backup for IE9 and below
		.no-flexbox &,
		.no-flexwrap & {
			display: if($blockDisplayMode, block, table) !important;

			> * {
				display: if(
					$blockDisplayMode,
					if($vAlign, inline-block, block),
					table-cell
				);
				vertical-align: top;

				@if ($vAlign) {
					margin-right: -4px;
				}

				@if ($inners) {
					> * {
						display: block;
					}
				}
			}

			@if ($vAlign) {
				@if ($vAlign == 'top') {
					> * {
						vertical-align: top;
					}
				} @else if ($vAlign == 'center') {
					> * {
						vertical-align: middle;
					}
				} @else if ($vAlign == 'bottom') {
					> * {
						vertical-align: bottom;
					}
				}
			}

			@if ($vertical) {
				> * {
					width: 100%;
				}
			}
		}
	}

	//quick access to left,center and right alignments
	@if (
		($align != 'default' and $align != 'stretch' and $stretch == false) or
			$space
	) {
		> * {
			flex-grow: 0;
		}

		@if (
			$align != 'default' and $align != 'stretch' and $stretch == false
		) {
			@if ($align == 'left') {
				justify-content: flex-start;
			} @else if ($align == 'center') {
				justify-content: center;
			} @else if ($align == 'right') {
				justify-content: flex-end;
			} @else {
				@warn 'invalid value for $align: "#{$align}". Valid values: left, center, right, stretch.';
			}
		}

		//quick access to space-between and space-around
		@if ($space) {
			@if ($space == 'between') {
				justify-content: space-between;
			} @else if ($space == 'around') {
				justify-content: space-around;
			} @else if ($space == 'evenly') {
				//backup for browsers that don't support "space-evenly"
				justify-content: space-around;
				justify-content: space-evenly;
			} @else {
				@warn 'invalid value for $space: "#{$space}". Valid values: between, around.';
			}
		}

		@if ($grid-legacy-support) {
			.no-flexbox &,
			.no-flexwrap & {
				@if ($space or $align == 'center') {
					text-align: center;
				} @else if ($align == 'right') {
					text-align: right;
				} @else {
					text-align: left;
				}
				> * {
					display: inline-block;
					float: none;
					margin-right: -4px; //removes space bar space
				}
			}
		}
	}

	//vertical alignment of cells
	@if ($vAlign) {
		@if ($vAlign == 'center') {
			align-items: center;
		} @else if ($vAlign == 'top') {
			align-items: flex-start;
		} @else if ($vAlign == 'bottom') {
			align-items: flex-end;
		} @else {
			@warn 'invalid value for $vAlign: "#{$vAlign}". Valid values: top, center, bottom.';
		}
	}

	//grid--gutter-# styling
	@if ($gutter != false) {
		border-style: solid;
		> *,
		& {
			@if ($grid-legacy-support) {
				.lt-ie9 & {
					border-color: $grid-gutter-ie-fallback;
				}
			}
		}

		@if (type-of($gutter) == 'string') {
			@if (map-get($grid-cell-gutters, $gutter)) {
				$gutter: map-get($grid-cell-gutters, $gutter);
			} @else {
				@warn '"#{$gutter}" was not found in the $grid-cell-gutters variable';
			}
		}

		@include parse-gutter-data($gutter, 'mixin', $outerGutters);
	}

	//outer gutters
	@if ($outerGutters != false) {
		$possibleMargins: (
			true: margin,
			v: margin-top margin-bottom,
			h: margin-left margin-right,
			top: margin-top,
			bottom: margin-bottom,
			left: margin-left,
			right: margin-right,
		);
		$marginSet: map-get($possibleMargins, $outerGutters);
		@each $margin in $marginSet {
			#{$margin}: 0;
		}
	}
}