blame: source/misc/embedded_libs/fmt-8.1.1/doc/bootstrap/mixins/grid.less

normal view · raw

f8deb5b9	Poul Sander	2022-01-15 13:55	1	// Grid system
f8deb5b9	Poul Sander	2022-01-15 13:55	2	//
f8deb5b9	Poul Sander	2022-01-15 13:55	3	// Generate semantic grid columns with these mixins.
f8deb5b9	Poul Sander	2022-01-15 13:55	4
f8deb5b9	Poul Sander	2022-01-15 13:55	5	// Centered container element
f8deb5b9	Poul Sander	2022-01-15 13:55	6	.container-fixed(@gutter: @grid-gutter-width) {
f8deb5b9	Poul Sander	2022-01-15 13:55	7	margin-right: auto;
f8deb5b9	Poul Sander	2022-01-15 13:55	8	margin-left: auto;
f8deb5b9	Poul Sander	2022-01-15 13:55	9	padding-left: (@gutter / 2);
f8deb5b9	Poul Sander	2022-01-15 13:55	10	padding-right: (@gutter / 2);
f8deb5b9	Poul Sander	2022-01-15 13:55	11	&:extend(.clearfix all);
f8deb5b9	Poul Sander	2022-01-15 13:55	12	}
f8deb5b9	Poul Sander	2022-01-15 13:55	13
f8deb5b9	Poul Sander	2022-01-15 13:55	14	// Creates a wrapper for a series of columns
f8deb5b9	Poul Sander	2022-01-15 13:55	15	.make-row(@gutter: @grid-gutter-width) {
f8deb5b9	Poul Sander	2022-01-15 13:55	16	margin-left: (@gutter / -2);
f8deb5b9	Poul Sander	2022-01-15 13:55	17	margin-right: (@gutter / -2);
f8deb5b9	Poul Sander	2022-01-15 13:55	18	&:extend(.clearfix all);
f8deb5b9	Poul Sander	2022-01-15 13:55	19	}
f8deb5b9	Poul Sander	2022-01-15 13:55	20
f8deb5b9	Poul Sander	2022-01-15 13:55	21	// Generate the extra small columns
f8deb5b9	Poul Sander	2022-01-15 13:55	22	.make-xs-column(@columns; @gutter: @grid-gutter-width) {
f8deb5b9	Poul Sander	2022-01-15 13:55	23	position: relative;
f8deb5b9	Poul Sander	2022-01-15 13:55	24	float: left;
f8deb5b9	Poul Sander	2022-01-15 13:55	25	width: percentage((@columns / @grid-columns));
f8deb5b9	Poul Sander	2022-01-15 13:55	26	min-height: 1px;
f8deb5b9	Poul Sander	2022-01-15 13:55	27	padding-left: (@gutter / 2);
f8deb5b9	Poul Sander	2022-01-15 13:55	28	padding-right: (@gutter / 2);
f8deb5b9	Poul Sander	2022-01-15 13:55	29	}
f8deb5b9	Poul Sander	2022-01-15 13:55	30	.make-xs-column-offset(@columns) {
f8deb5b9	Poul Sander	2022-01-15 13:55	31	margin-left: percentage((@columns / @grid-columns));
f8deb5b9	Poul Sander	2022-01-15 13:55	32	}
f8deb5b9	Poul Sander	2022-01-15 13:55	33	.make-xs-column-push(@columns) {
f8deb5b9	Poul Sander	2022-01-15 13:55	34	left: percentage((@columns / @grid-columns));
f8deb5b9	Poul Sander	2022-01-15 13:55	35	}
f8deb5b9	Poul Sander	2022-01-15 13:55	36	.make-xs-column-pull(@columns) {
f8deb5b9	Poul Sander	2022-01-15 13:55	37	right: percentage((@columns / @grid-columns));
f8deb5b9	Poul Sander	2022-01-15 13:55	38	}
f8deb5b9	Poul Sander	2022-01-15 13:55	39
f8deb5b9	Poul Sander	2022-01-15 13:55	40	// Generate the small columns
f8deb5b9	Poul Sander	2022-01-15 13:55	41	.make-sm-column(@columns; @gutter: @grid-gutter-width) {
f8deb5b9	Poul Sander	2022-01-15 13:55	42	position: relative;
f8deb5b9	Poul Sander	2022-01-15 13:55	43	min-height: 1px;
f8deb5b9	Poul Sander	2022-01-15 13:55	44	padding-left: (@gutter / 2);
f8deb5b9	Poul Sander	2022-01-15 13:55	45	padding-right: (@gutter / 2);
f8deb5b9	Poul Sander	2022-01-15 13:55	46
f8deb5b9	Poul Sander	2022-01-15 13:55	47	@media (min-width: @screen-sm-min) {
f8deb5b9	Poul Sander	2022-01-15 13:55	48	float: left;
f8deb5b9	Poul Sander	2022-01-15 13:55	49	width: percentage((@columns / @grid-columns));
f8deb5b9	Poul Sander	2022-01-15 13:55	50	}
f8deb5b9	Poul Sander	2022-01-15 13:55	51	}
f8deb5b9	Poul Sander	2022-01-15 13:55	52	.make-sm-column-offset(@columns) {
f8deb5b9	Poul Sander	2022-01-15 13:55	53	@media (min-width: @screen-sm-min) {
f8deb5b9	Poul Sander	2022-01-15 13:55	54	margin-left: percentage((@columns / @grid-columns));
f8deb5b9	Poul Sander	2022-01-15 13:55	55	}
f8deb5b9	Poul Sander	2022-01-15 13:55	56	}
f8deb5b9	Poul Sander	2022-01-15 13:55	57	.make-sm-column-push(@columns) {
f8deb5b9	Poul Sander	2022-01-15 13:55	58	@media (min-width: @screen-sm-min) {
f8deb5b9	Poul Sander	2022-01-15 13:55	59	left: percentage((@columns / @grid-columns));
f8deb5b9	Poul Sander	2022-01-15 13:55	60	}
f8deb5b9	Poul Sander	2022-01-15 13:55	61	}
f8deb5b9	Poul Sander	2022-01-15 13:55	62	.make-sm-column-pull(@columns) {
f8deb5b9	Poul Sander	2022-01-15 13:55	63	@media (min-width: @screen-sm-min) {
f8deb5b9	Poul Sander	2022-01-15 13:55	64	right: percentage((@columns / @grid-columns));
f8deb5b9	Poul Sander	2022-01-15 13:55	65	}
f8deb5b9	Poul Sander	2022-01-15 13:55	66	}
f8deb5b9	Poul Sander	2022-01-15 13:55	67
f8deb5b9	Poul Sander	2022-01-15 13:55	68	// Generate the medium columns
f8deb5b9	Poul Sander	2022-01-15 13:55	69	.make-md-column(@columns; @gutter: @grid-gutter-width) {
f8deb5b9	Poul Sander	2022-01-15 13:55	70	position: relative;
f8deb5b9	Poul Sander	2022-01-15 13:55	71	min-height: 1px;
f8deb5b9	Poul Sander	2022-01-15 13:55	72	padding-left: (@gutter / 2);
f8deb5b9	Poul Sander	2022-01-15 13:55	73	padding-right: (@gutter / 2);
f8deb5b9	Poul Sander	2022-01-15 13:55	74
f8deb5b9	Poul Sander	2022-01-15 13:55	75	@media (min-width: @screen-md-min) {
f8deb5b9	Poul Sander	2022-01-15 13:55	76	float: left;
f8deb5b9	Poul Sander	2022-01-15 13:55	77	width: percentage((@columns / @grid-columns));
f8deb5b9	Poul Sander	2022-01-15 13:55	78	}
f8deb5b9	Poul Sander	2022-01-15 13:55	79	}
f8deb5b9	Poul Sander	2022-01-15 13:55	80	.make-md-column-offset(@columns) {
f8deb5b9	Poul Sander	2022-01-15 13:55	81	@media (min-width: @screen-md-min) {
f8deb5b9	Poul Sander	2022-01-15 13:55	82	margin-left: percentage((@columns / @grid-columns));
f8deb5b9	Poul Sander	2022-01-15 13:55	83	}
f8deb5b9	Poul Sander	2022-01-15 13:55	84	}
f8deb5b9	Poul Sander	2022-01-15 13:55	85	.make-md-column-push(@columns) {
f8deb5b9	Poul Sander	2022-01-15 13:55	86	@media (min-width: @screen-md-min) {
f8deb5b9	Poul Sander	2022-01-15 13:55	87	left: percentage((@columns / @grid-columns));
f8deb5b9	Poul Sander	2022-01-15 13:55	88	}
f8deb5b9	Poul Sander	2022-01-15 13:55	89	}
f8deb5b9	Poul Sander	2022-01-15 13:55	90	.make-md-column-pull(@columns) {
f8deb5b9	Poul Sander	2022-01-15 13:55	91	@media (min-width: @screen-md-min) {
f8deb5b9	Poul Sander	2022-01-15 13:55	92	right: percentage((@columns / @grid-columns));
f8deb5b9	Poul Sander	2022-01-15 13:55	93	}
f8deb5b9	Poul Sander	2022-01-15 13:55	94	}
f8deb5b9	Poul Sander	2022-01-15 13:55	95
f8deb5b9	Poul Sander	2022-01-15 13:55	96	// Generate the large columns
f8deb5b9	Poul Sander	2022-01-15 13:55	97	.make-lg-column(@columns; @gutter: @grid-gutter-width) {
f8deb5b9	Poul Sander	2022-01-15 13:55	98	position: relative;
f8deb5b9	Poul Sander	2022-01-15 13:55	99	min-height: 1px;
f8deb5b9	Poul Sander	2022-01-15 13:55	100	padding-left: (@gutter / 2);
f8deb5b9	Poul Sander	2022-01-15 13:55	101	padding-right: (@gutter / 2);
f8deb5b9	Poul Sander	2022-01-15 13:55	102
f8deb5b9	Poul Sander	2022-01-15 13:55	103	@media (min-width: @screen-lg-min) {
f8deb5b9	Poul Sander	2022-01-15 13:55	104	float: left;
f8deb5b9	Poul Sander	2022-01-15 13:55	105	width: percentage((@columns / @grid-columns));
f8deb5b9	Poul Sander	2022-01-15 13:55	106	}
f8deb5b9	Poul Sander	2022-01-15 13:55	107	}
f8deb5b9	Poul Sander	2022-01-15 13:55	108	.make-lg-column-offset(@columns) {
f8deb5b9	Poul Sander	2022-01-15 13:55	109	@media (min-width: @screen-lg-min) {
f8deb5b9	Poul Sander	2022-01-15 13:55	110	margin-left: percentage((@columns / @grid-columns));
f8deb5b9	Poul Sander	2022-01-15 13:55	111	}
f8deb5b9	Poul Sander	2022-01-15 13:55	112	}
f8deb5b9	Poul Sander	2022-01-15 13:55	113	.make-lg-column-push(@columns) {
f8deb5b9	Poul Sander	2022-01-15 13:55	114	@media (min-width: @screen-lg-min) {
f8deb5b9	Poul Sander	2022-01-15 13:55	115	left: percentage((@columns / @grid-columns));
f8deb5b9	Poul Sander	2022-01-15 13:55	116	}
f8deb5b9	Poul Sander	2022-01-15 13:55	117	}
f8deb5b9	Poul Sander	2022-01-15 13:55	118	.make-lg-column-pull(@columns) {
f8deb5b9	Poul Sander	2022-01-15 13:55	119	@media (min-width: @screen-lg-min) {
f8deb5b9	Poul Sander	2022-01-15 13:55	120	right: percentage((@columns / @grid-columns));
f8deb5b9	Poul Sander	2022-01-15 13:55	121	}
f8deb5b9	Poul Sander	2022-01-15 13:55	122	}
		1970-01-01 00:00	123