lucid-ui/src/components/Grid/Grid.less

A UI component library from Xandr.

@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';

.@{prefix}-Grid {
	.box-sizing();

	display: flex;
	flex-wrap: nowrap;

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

		.@{prefix}-Grid-Cell {
			display: flex;
			padding: 0 @size-grid-padding @size-grid-padding 0;

			// overwrite for IE Flex bugs (solved in IE12)
			&-is-full,
			&-is-half,
			&-is-third,
			&-is-quarter,
			&-is-2,
			&-is-3,
			&-is-4,
			&-is-5,
			&-is-6,
			&-is-7,
			&-is-8,
			&-is-9,
			&-is-10,
			&-is-11 {
				max-width: 100%;
			}
		}
	}

	&-is-horizontal {
		flex-direction: row;
	}

	&-is-multiline {
		flex-wrap: wrap;
	}

	&-is-gutterless {
		.@{prefix}-Grid-Cell {
			padding: 0;
		}
	}

	.@{prefix}-Grid {
		flex: 1;
	}
}

.@{prefix}-Grid-Cell {
	.box-sizing();

	position: relative;
	flex: 1 1 auto;
	padding: @size-grid-padding @size-grid-padding 0 0;

	&:first-child {
		padding-left: 0;
	}

	&-is-full {
		.flex(0, 0, 100%);
	}

	&-is-half {
		.flex(0, 0, 50%);
	}

	&-is-third {
		.flex(0, 0, 33.333%);
	}

	&-is-quarter {
		.flex(0, 0, 25%);
	}

	&-is-2 {
		.flex(0, 0, (100%/12*2));
	}
	&-is-3 {
		.flex(0, 0, (100%/12*3));
	}
	&-is-4 {
		.flex(0, 0, (100%/12*4));
	}
	&-is-5 {
		.flex(0, 0, (100%/12*5));
	}
	&-is-6 {
		.flex(0, 0, (100%/12*6));
	}
	&-is-7 {
		.flex(0, 0, (100%/12*7));
	}
	&-is-8 {
		.flex(0, 0, (100%/12*8));
	}
	&-is-9 {
		.flex(0, 0, (100%/12*9));
	}
	&-is-10 {
		.flex(0, 0, (100%/12*10));
	}
	&-is-11 {
		.flex(0, 0, (100%/12*11));
	}

	&-is-offset-quarter {
		margin-left: 25%;
	}
	&-is-offset-third {
		margin-left: 33.3333%;
	}
	&-is-offset-half {
		margin-left: 50%;
	}
}