<commit_before>/*
* SDN Framework: Grid
*
* Grid classes with responsive conditions
*
* .cf - Micro Clearfix by <NAME> http://nicolasgallagher.com/micro-clearfix-hack/
*
* .row - container for columns, columns should always be placed inside a .row
*
* .row-inverted or .row-flip
*	- Represents an inverted row
*	- In an inverted row, the first element on the DOM will start from the right,
*	where in a normal row, it starts from the left
*
* .col-* - Column, the number represents the width of the column (1 to 12)
*
* .m-col-* - Apply to medium resolution screens
* .s-col-* - Apply to small resolution screens
*
* .*-hidden - Hidden on the specified size (l, m, and s)
* .*-visible - Visible on the specified size (l, m, and s)
*
* Examples
*
* class="col-5" - Column with 5 out of 12 width
* class="col-3 m-col-6 s-col-12" - Column 5 on normal screens, column 6 on medium screens and column 12 on small screens
* class="s-hidden" - Hidden only in small resolution screens
* class="l-visible" - Visible only on large/normal resolution screens
*
* You must define the following variables with values of your choosing
*
* @gridRefWidth:		972;	// 16 - 976 / 12 - 972
* @gridRefGutter:		22;		// 16 - 16 / 12 - 12
* @gridRefColumn:		59;		// 16 - 45 / 12 - 69
* @gridColumns:			12;		// 16 - 16 / 12 - 12
*
* @gridViewportSmall:	480px;
* @gridViewportMedium:	800px; // 768px ??
*
*/

// Grid width (960) + (1 * gutter)

//@gridRefColumnWidth: (@gridRefWidth + @gridRefGutter) / @gridColumns;
@gridRefColumnWidth:	@gridRefColumn + @gridRefGutter;

//@gridWidth: @gridRefWidth;
//@gridGutter: @gridRefGutter;
//@gridColumnWidth: @gridRefColumnWidth;

@gridWidth:				100;
@gridGutter:			(@gridRefGutter * @gridWidth) / @gridRefWidth;
@gridColumnWidth:		(@gridRefColumnWidth * @gridWidth) / @gridRefWidth;

//@gridUnit: 1px;
@gridUnit:				1%;

// Calculate column width
.column(@column) {
	width: ((@gridColumnWidth * @column) - @gridGutter) * @gridUnit;
}

// Breakpoints
//@gridViewportSmall:		480px;
@gridViewportSmallMax:	(@gridViewportSmall - 1);

//@gridViewportMedium:	800px; // 768px ??
@gridViewportMediumMax:	(@gridViewportMedium - 1);

//Clearfixing Elements
.cf {
	zoom: 1;
	&:before,
	&:after {
		content:'';
		display:table;
	}
	&:after {
		clear: both;
	}
}

.container {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

//.column,
.col {

	&-1   { .column(1); }
	&-2   { .column(2); }
	&-3   { .column(3); }
	&-4   { .column(4); }
	&-5   { .column(5); }
	&-6   { .column(6); }
	&-7   { .column(7); }
	&-8   { .column(8); }
	&-9   { .column(9); }
	&-10  { .column(10); }
	&-11  { .column(11); }
	&-12  { .column(12); }

}

//.column,
.col {

	&-1,
	&-2,
	&-3,
	&-4,
	&-5,
	&-6,
	&-7,
	&-8,
	&-9,
	&-10,
	&-11,
	&-12 {
		float: left;
		position: relative;
		margin-left: @gridGutter * @gridUnit;
	}
}

.row {
	.cf;
//	position: relative;
//	overflow: hidden;
	margin-left: @gridGutter * -@gridUnit;
	width: (@gridWidth + @gridGutter) * @gridUnit;
}
.row-inverted,
.row-flip {
	.cf;
	margin-right: @gridGutter * -@gridUnit;
	width: (@gridWidth + @gridGutter) * @gridUnit;

	//> .column,
	> .col {

		&-1,
		&-2,
		&-3,
		&-4,
		&-5,
		&-6,
		&-7,
		&-8,
		&-9,
		&-10,
		&-11,
		&-12 {
			float: right;
			margin-left: 0;
			margin-right: @gridGutter * @gridUnit;
		}
	}
}
ul {
	&.row,
	&.row-inverted,
	&.row-flip {
		padding: 0;
		list-style: none;
	}
}

// Make all elements visible
.grid-debug * {
	background-color: rgba(0,0,0,0.05);
}

@media only screen and (max-width: @gridViewportMediumMax) {

	//.tablet-column,
	//.medium-column,
	.m-col {

		&-1		{ .column(1); }
		&-2		{ .column(2); }
		&-3		{ .column(3); }
		&-4		{ .column(4); }
		&-5		{ .column(5); }
		&-6		{ .column(6); }
		&-7		{ .column(7); }
		&-8		{ .column(8); }
		&-9		{ .column(9); }
		&-10	{ .column(10); }
		&-11	{ .column(11); }
		&-12	{ .column(12); }

	}
}

@media only screen and (max-width: @gridViewportSmallMax) {

	//.mobile-column,
	//.small-column,
	.s-col {

		&-1		{ .column(1); }
		&-2		{ .column(2); }
		&-3		{ .column(3); }
		&-4		{ .column(4); }
		&-5		{ .column(5); }
		&-6		{ .column(6); }
		&-7		{ .column(7); }
		&-8		{ .column(8); }
		&-9		{ .column(9); }
		&-10	{ .column(10); }
		&-11	{ .column(11); }
		&-12	{ .column(12); }

	}
}

// Large only
@media only screen and (min-width: @gridViewportMedium) {

	.s,
	.m {
		&-visible {
			display: none;
		}
	}
	.l {
		&-hidden {
			display: none;
		}
	}

	.grid-debug {

		body&,
		body {
			background-color: #bfd9bf;
		}

		.s,
		.m {
			&-visible {
				display: block;
				background: red !important;
			}
		}
		.l {
			&-hidden {
				display: block;
				background: red !important;
			}
		}
	}
}

// Medium only
@media only screen and (min-width: @gridViewportSmall) and (max-width: @gridViewportMediumMax) {

	.s {
		&-visible {
			display: none;
		}
	}
	.m {
		&-hidden {
			display: none;
		}
	}

	.grid-debug {

		body&,
		body {
			background-color: #c5ce87;
		}

		.s {
			&-visible {
				display: block;
				background: red !important;
			}
		}
		.m {
			&-hidden {
				display: block;
				background: red !important;
			}
		}
	}
}

// Small only
@media only screen and (min-width: 0px) and (max-width: @gridViewportSmallMax) {

	.s {
		&-hidden {
			display: none;
		}
	}
	.m,
	.l {
		&-visible {
			display: none;
		}
	}

	.grid-debug {

		body&,
		body {
			background-color: #e0b6b6;
		}

		.s {
			&-hidden {
				display: block;
				background: red !important;
			}
		}
		.m,
		.l {
			&-visible {
				display: block;
				background: red !important;
			}
		}
	}
}

@import 'spacing.less';<commit_msg>Don't import spacing here<commit_after>/*
* SDN Framework: Grid
*
* Grid classes with responsive conditions
*
* .cf - Micro Clearfix by <NAME> http://nicolasgallagher.com/micro-clearfix-hack/
*
* .row - container for columns, columns should always be placed inside a .row
*
* .row-inverted or .row-flip
*	- Represents an inverted row
*	- In an inverted row, the first element on the DOM will start from the right,
*	where in a normal row, it starts from the left
*
* .col-* - Column, the number represents the width of the column (1 to 12)
*
* .m-col-* - Apply to medium resolution screens
* .s-col-* - Apply to small resolution screens
*
* .*-hidden - Hidden on the specified size (l, m, and s)
* .*-visible - Visible on the specified size (l, m, and s)
*
* Examples
*
* class="col-5" - Column with 5 out of 12 width
* class="col-3 m-col-6 s-col-12" - Column 5 on normal screens, column 6 on medium screens and column 12 on small screens
* class="s-hidden" - Hidden only in small resolution screens
* class="l-visible" - Visible only on large/normal resolution screens
*
* You must define the following variables with values of your choosing
*
* @gridRefWidth:		972;	// 16 - 976 / 12 - 972
* @gridRefGutter:		22;		// 16 - 16 / 12 - 12
* @gridRefColumn:		59;		// 16 - 45 / 12 - 69
* @gridColumns:			12;		// 16 - 16 / 12 - 12
*
* @gridViewportSmall:	480px;
* @gridViewportMedium:	800px; // 768px ??
*
*/

// Grid width (960) + (1 * gutter)

//@gridRefColumnWidth: (@gridRefWidth + @gridRefGutter) / @gridColumns;
@gridRefColumnWidth:	@gridRefColumn + @gridRefGutter;

//@gridWidth: @gridRefWidth;
//@gridGutter: @gridRefGutter;
//@gridColumnWidth: @gridRefColumnWidth;

@gridWidth:				100;
@gridGutter:			(@gridRefGutter * @gridWidth) / @gridRefWidth;
@gridColumnWidth:		(@gridRefColumnWidth * @gridWidth) / @gridRefWidth;

//@gridUnit: 1px;
@gridUnit:				1%;

// Calculate column width
.column(@column) {
	width: ((@gridColumnWidth * @column) - @gridGutter) * @gridUnit;
}

// Breakpoints
//@gridViewportSmall:		480px;
@gridViewportSmallMax:	(@gridViewportSmall - 1);

//@gridViewportMedium:	800px; // 768px ??
@gridViewportMediumMax:	(@gridViewportMedium - 1);

//Clearfixing Elements
.cf {
	zoom: 1;
	&:before,
	&:after {
		content:'';
		display:table;
	}
	&:after {
		clear: both;
	}
}

.container {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

//.column,
.col {

	&-1   { .column(1); }
	&-2   { .column(2); }
	&-3   { .column(3); }
	&-4   { .column(4); }
	&-5   { .column(5); }
	&-6   { .column(6); }
	&-7   { .column(7); }
	&-8   { .column(8); }
	&-9   { .column(9); }
	&-10  { .column(10); }
	&-11  { .column(11); }
	&-12  { .column(12); }

}

//.column,
.col {

	&-1,
	&-2,
	&-3,
	&-4,
	&-5,
	&-6,
	&-7,
	&-8,
	&-9,
	&-10,
	&-11,
	&-12 {
		float: left;
		position: relative;
		margin-left: @gridGutter * @gridUnit;
	}
}

.row {
	.cf;
//	position: relative;
//	overflow: hidden;
	margin-left: @gridGutter * -@gridUnit;
	width: (@gridWidth + @gridGutter) * @gridUnit;
}
.row-inverted,
.row-flip {
	.cf;
	margin-right: @gridGutter * -@gridUnit;
	width: (@gridWidth + @gridGutter) * @gridUnit;

	//> .column,
	> .col {

		&-1,
		&-2,
		&-3,
		&-4,
		&-5,
		&-6,
		&-7,
		&-8,
		&-9,
		&-10,
		&-11,
		&-12 {
			float: right;
			margin-left: 0;
			margin-right: @gridGutter * @gridUnit;
		}
	}
}
ul {
	&.row,
	&.row-inverted,
	&.row-flip {
		padding: 0;
		list-style: none;
	}
}

// Make all elements visible
.grid-debug * {
	background-color: rgba(0,0,0,0.05);
}

@media only screen and (max-width: @gridViewportMediumMax) {

	//.tablet-column,
	//.medium-column,
	.m-col {

		&-1		{ .column(1); }
		&-2		{ .column(2); }
		&-3		{ .column(3); }
		&-4		{ .column(4); }
		&-5		{ .column(5); }
		&-6		{ .column(6); }
		&-7		{ .column(7); }
		&-8		{ .column(8); }
		&-9		{ .column(9); }
		&-10	{ .column(10); }
		&-11	{ .column(11); }
		&-12	{ .column(12); }

	}
}

@media only screen and (max-width: @gridViewportSmallMax) {

	//.mobile-column,
	//.small-column,
	.s-col {

		&-1		{ .column(1); }
		&-2		{ .column(2); }
		&-3		{ .column(3); }
		&-4		{ .column(4); }
		&-5		{ .column(5); }
		&-6		{ .column(6); }
		&-7		{ .column(7); }
		&-8		{ .column(8); }
		&-9		{ .column(9); }
		&-10	{ .column(10); }
		&-11	{ .column(11); }
		&-12	{ .column(12); }

	}
}

// Large only
@media only screen and (min-width: @gridViewportMedium) {

	.s,
	.m {
		&-visible {
			display: none;
		}
	}
	.l {
		&-hidden {
			display: none;
		}
	}

	.grid-debug {

		body&,
		body {
			background-color: #bfd9bf;
		}

		.s,
		.m {
			&-visible {
				display: block;
				background: red !important;
			}
		}
		.l {
			&-hidden {
				display: block;
				background: red !important;
			}
		}
	}
}

// Medium only
@media only screen and (min-width: @gridViewportSmall) and (max-width: @gridViewportMediumMax) {

	.s {
		&-visible {
			display: none;
		}
	}
	.m {
		&-hidden {
			display: none;
		}
	}

	.grid-debug {

		body&,
		body {
			background-color: #c5ce87;
		}

		.s {
			&-visible {
				display: block;
				background: red !important;
			}
		}
		.m {
			&-hidden {
				display: block;
				background: red !important;
			}
		}
	}
}

// Small only
@media only screen and (min-width: 0px) and (max-width: @gridViewportSmallMax) {

	.s {
		&-hidden {
			display: none;
		}
	}
	.m,
	.l {
		&-visible {
			display: none;
		}
	}

	.grid-debug {

		body&,
		body {
			background-color: #e0b6b6;
		}

		.s {
			&-hidden {
				display: block;
				background: red !important;
			}
		}
		.m,
		.l {
			&-visible {
				display: block;
				background: red !important;
			}
		}
	}
}

{'fraction_non_alphanumeric': 0.18420384322356725, 'fraction_numerical': 0.038432235672564125, 'mean_word_length': 2.055871702017589, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3537511', 'n_tokens_mistral': 5599, 'n_tokens_neox': 4816, 'n_words': 1094}