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

A UI component library from AppNexus.

@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-standard @size-standard 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-standard @size-standard 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%; }
}