grid-classes.scss

//================================================*\
//*	GRID STYLING FILE						*/
//----------------------------------------------------
//	This file holds the code that generates the
//	classes for the grid system.
//
//	DO NOT EDIT THIS FILE UNLESS YOU REALLY KNOW
//	WHAT YOU'RE DOING!
//================================================*/

//Default settings
@import 'grid-settings';

@import 'grid-shared-mixins';

$fullPrefix: if($grid-prefix != '', $grid-prefix + '-', '');

//================================================*\
//*				GRID WIDTHS						*/
//----------------------------------------------------
//	Quickly and easily apply standard percentage
//	widths to grid cells based on fractions.
//
//	step 1: give container the width modifier class.
//			eg: grid--thirds
//	step 2: give extra wide grid span classes
//			eg. grid__cell--span2
//	WARNING: using a span class will likely require additional
//			 styling for tablets and smaller devices
//
//	EXAMPLE HTML:
//	<ul class="grid grid--cols-3">
//		<li class="grid__cell">Column is 1/3 wide on desktop</li>
//		<li class="grid__cell grid__cell--span-2">column is 2/3 wide on desktop</li>
//	</ul>
//================================================*/

@for $i from 1 through length($grid-bp-list) {
	$columnWidth: column-width($i);
	$breaks: map-get($grid-bp-list, $i);

	//sets the default grid__cell widths
	.#{$fullPrefix}grid--cols-#{$i} {
		> * {
			width: $columnWidth;
		}

		//.grid__cell--span-# styling
		@if ($i > 1) {
			@for $x from 2 through $i {
				> .#{$fullPrefix}grid__cell--span-#{$x} {
					@if ($grid-calc-support) {
						width: calc(#{$x} / #{$i} * 100%);
					} @else {
						width: $x / $i * 100%;
					}
				}
			}
		}

		//Applies the media queries for the break points
		&:not(.#{$fullPrefix}grid--noMQs) {
			> *:not([class*='cell--span-']) {
				@include generate-column-breakpoints($breaks);
			}
		}
	}
}

//base grid styling
.#{$fullPrefix}grid {
	$grid: &;

	-gutter-grid-: grid;
	box-sizing: border-box;
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 100%;
	border: 0 solid transparent;
	display: flex;
	align-content: stretch;

	@if (not $grid-legacy-support) {
		//By default grids will not wrap unless there is a column setting
		&[class*='grid--cols']:not(#{$grid}--noWrap) {
			flex-wrap: wrap;
		}
	}

	// grid__wrapper styling... really only necessary for use with grid--gutter-#
	// fixes
	&__wrapper {
		padding-bottom: 0.1px;
	}

	$stretch-grid-parameters: ':not([class*="grid--cols"]):not(#{&}--noStretch):not([class*="grid--align-"]):not([class*="grid--space-"]):not(#{&}--noResize)';
	$stretch-cell-parameters: '#{&}__cell:not(#{&}__cell--noStretch):not(#{&}__cell--noResize)';

	&#{$stretch-grid-parameters} > #{$stretch-cell-parameters} {
		flex-grow: 1;
	}

	//base grid__cell styling
	&__cell {
		-gutter-grid-: cell;
		box-sizing: border-box;
		min-width: 0%;
		max-width: 100%;
		display: block;
		padding: 0;
		margin: 0;
		background-clip: padding-box !important;
		border: 0 solid transparent;

		&[class*='cell--span-'] {
			flex-grow: 1;
		}

		&.#{$fullPrefix}grid {
			display: flex;
		}

		&,
		* > {
			//helps fix IE10 word-wrap bug (elements need to not be display:inline for the fix to work though)
			max-width: 100%;
			flex-shrink: 1;
		}
	}

	//base grid__inner styling
	&__inner {
		-gutter-grid-: inner;
		display: block;
		box-sizing: border-box;
	}

	@each $class, $gutter in $grid-cell-gutters {
		&--gutter-#{$class} {
			@include parse-gutter-data($gutter, 'classes');
		}
	}

	//grid--outerGutters-# styling
	&--outerGutters {
		margin: 0;
		&-v {
			margin-top: 0;
			margin-bottom: 0;
		}
		&-h {
			margin-left: 0;
			margin-right: 0;
		}
		&-top {
			margin-top: 0;
		}
		&-bottom {
			margin-bottom: 0;
		}
		&-left {
			margin-left: 0;
		}
		&-right {
			margin-right: 0;
		}

		@if ($grid-legacy-support) {
			.lt-ie9 & {
				> *,
				& {
					border-color: $grid-gutter-ie-fallback;
				}
			}
		}
	}

	//hasInners makes grid__inner elements take up the full height of the grid cell
	&--hasInners {
		//grid__cell
		> * {
			display: flex;
			align-items: stretch;

			//grid__inner
			> * {
				display: block;
				width: 100%;

				&.#{$fullPrefix}grid {
					display: flex;
				}
			}
		}
	}

	&--vAlign {
		&-center {
			align-items: center;
		}
		&-top {
			align-items: flex-start;
		}
		&-bottom {
			align-items: flex-end;
		}
	}

	&--vertical {
		flex-direction: column;
	}

	&--stretch {
		> * {
			flex-grow: 1;
		}
	}
	&--noStretch {
		> * {
			flex-grow: 0;
		}
	}
	&--noShrink {
		> * {
			flex-shrink: 0;
		}
	}
	&--noResize {
		> * {
			flex-shrink: 0;
			flex-grow: 0;
		}
	}

	//allows a grid to be set at something other than 100% of it's parents width
	&--mini {
		min-width: 0;
	}

	//allows columns to wrap after screen hits the edge of the design
	@include mq(max, $grid-page-width) {
		flex-wrap: wrap;
	}

	//Unfortunately this is a necessity for IE compatibility
	//allows wrapping at all screen widths
	&--wrap {
		flex-wrap: wrap;
		// @include ieFloat;
	}
	//disables wrapping at all screen widths
	&--noWrap {
		flex-wrap: if($grid-legacy-support, nowrap !important, nowrap);
	}

	//quick access to space-between and space-around
	&--space {
		&-between,
		&-around {
			> * {
				flex-grow: 0;
			}
		}
		&-between {
			justify-content: space-between;
		}
		&-around {
			justify-content: space-around;
		}
		&-evenly {
			//backup for browsers that don't support "space-evenly"
			justify-content: space-around;
			justify-content: space-evenly;
		}
	}

	//quick access to left,center and right alignments
	&--align {
		&-left,
		&-center,
		&-right {
			> * {
				flex-grow: 0;
			}
		}
		&-left {
			justify-content: flex-start;
		}
		&-center {
			justify-content: center;
		}
		&-right {
			justify-content: flex-end;
		}
		&-stretch {
			> * {
				flex-grow: 1;
			}
		}
	}

	&__cell {
		//cell vertical alignment
		&--vAlign {
			&-center {
				align-self: center;
			}
			&-top {
				align-self: flex-start;
			}
			&-bottom {
				align-self: flex-end;
			}
		}

		//Stretch and shrink
		&--stretch {
			flex-grow: 1;
		}
		&--noStretch {
			flex-grow: 0;
		}
		&--noShrink {
			flex-shrink: 0;
		}
		&--noResize {
			flex-shrink: 0;
			flex-grow: 0;
		}
	}

	//tabular/float:left backup for IE9 and below
	@if ($grid-legacy-support) {
		&[class*='grid--align'],
		&[class*='grid--space'],
		#{$grid}--noStretch,
		#{$grid}--noResize,
		&[class*='grid--vAlign'][class*='grid--cols'] {
			flex-wrap: wrap;
		}

		.no-flexbox &,
		.no-flexwrap & {
			display: table;
			width: auto;
			> * {
				display: table-cell;
				vertical-align: top;
			}

			&--wrap:not([class*='grid--vAlign']):not([class*='grid--space-']) {
				display: block;
				> * {
					display: block;
					float: left;
				}

				&:after {
					content: '';
					display: block;
					clear: both;
				}
			}

			&[class*='grid--vAlign'][class*='grid--cols'] {
				display: block;

				> * {
					display: inline-block;
					margin-right: -4px;
				}
			}

			&--vAlign {
				&-top {
					> * {
						vertical-align: top;
					}
				}
				&-center {
					> * {
						vertical-align: middle;
					}
				}
				&-bottom {
					> * {
						vertical-align: bottom;
					}
				}
			}
			&__cell {
				&--vAlign {
					&-top {
						vertical-align: top;
					}
					&-center {
						vertical-align: middle;
					}
					&-bottom {
						vertical-align: bottom;
					}
				}
			}

			&--align {
				&-stretch,
				&-left,
				&-center,
				&-right {
					display: block;
					> * {
						display: inline-block;
						float: none;
						margin-right: -4px;
					}
				}
				&-left {
					text-align: left;
				}
				&-center {
					text-align: center;
				}
				&-right {
					text-align: right;
				}
			}

			&--space {
				&-between,
				&-around,
				&-evenly {
					display: block;
					text-align: center;
					> * {
						display: inline-block;
						float: none;
						margin-right: -4px;
					}
				}
			}

			&--vertical {
				display: block;
				&:after {
					content: '';
					display: block;
					clear: both;
				}
				& > * {
					float: left;
					display: block;
					width: 100%;
				}
			}
		}

		//allows IE to use floats instead of display table without affecting modern browsers
		&--ieFloat,
		&--noStretch,
		&--noResize {
			@include ieFloat;
		}
	}
}