<commit_before>/**
 *
 * Layout Mixins
 *
 * @author <NAME> @ Space-Time Inc.
 * @version 2019-05-29
 *
 */


// @mixin layout-side-margin($max-width, $side-margin: false) {
// 	$w: 100%;
// 	@if $side-margin != false {
// 		$w: calc(100% - #{$side-margin * 2});
// 	}
// 	margin: { left: auto; right: auto; }
// 	max-width: $max-width;  // must be max-width for Android Chrome
// 	width: $w;  // must be width for Android Chrome
// }

// @mixin layout-width-breakpoint($min-width, $breakpoint, $max-width) {
// 	min-width: $min-width;
// 	width: calc((#{$breakpoint} - 100%) * 1000);
// 	max-width: $max-width;
// }

// @mixin layout-full-width($side-margin: false) {
// 	$m: calc(50% - 50vw);
// 	@if $side-margin != false {
// 		$m: calc(#{$side-margin} + 50% - 50vw);
// 	}
// 	margin: { left: $m; right: $m; }
// }


// -----------------------------------------------------------------------------


// @mixin layout-centering($inline: false) {
// 	@if $inline == false {
// 		display: flex;
// 	} @else {
// 		display: inline-flex;
// 	}
// 	align-items: center;
// 	justify-content: center;
// }

// @mixin layout-centering-self($horizontal: true, $vertical: true, $position: absolute) {
// 	position: $position;
// 	@if $horizontal == true and $vertical == true {
// 		top: 50%;
// 		left: 50%;
// 		transform: translate(-50%, -50%);
// 	} @else if $horizontal == true {
// 		left: 50%;
// 		transform: translateX(-50%);
// 	} @else if $vertical == true {
// 		top: 50%;
// 		transform: translateY(-50%);
// 	}
// }

// @mixin layout-fill-self($position: absolute, $by-height: false) {
// 	position: $position;
// 	top: 0;
// 	left: 0;
// 	right: 0;

// 	@if $by-height == false {
// 		bottom: 0;
// 	} @else {
// 		min-height: 100%;
// 	}
// }


// -----------------------------------------------------------------------------


// @mixin layout-aspect($width, $height, $by-height: false) {
// 	position: relative;

// 	&:before {
// 		content: '';
// 		display: block;
// 		padding-top: ($height / $width * 100%);
// 	}

// 	> *:first-child {
// 		@include layout-fill-self(absolute, $by-height);
// 	}
// }

// @mixin layout-aspect-gold {
// 	@include layout-aspect(1.618, 1);
// }

// @mixin layout-minimum-aspect($width, $height) {
// 	position: relative;

// 	&::before, &::after {
// 		content: '';
// 		display: block;
// 	}
// 	&::before {
// 		padding-top: ($height / $width * 100%);
// 		float: right;
// 	}
// 	> * { clear: none; }
// 	&::after { clear: both; }
// }

// @mixin layout-minimum-aspect-gold {
// 	@include layout-minimum-aspect(1.618, 1);
// }


// -----------------------------------------------------------------------------


@mixin layout-gap-v2($gaps_or_gap_x, $gap_y: null) {
	$gap_x: $gaps_or_gap_x;
	$gap_y: if($gap_y != null, $gap_y, $gaps_or_gap_x);

	@if length($gaps_or_gap_x) == 2 {
		$gap_x: nth($gaps_or_gap_x, 1);
		$gap_y: nth($gaps_or_gap_x, 2);
	}
	margin-right: -$gap_x;
	@if $gap_y != false {
		margin-bottom: -$gap_y;
	}

	> *:not(:empty) {
		margin-right: $gap_x;
		@if $gap_y != false {
			margin-bottom: $gap_y;
		}
	}
}

@mixin layout-wrap-v2($gap: false, $align-left: true) {
	display: flex;
	flex-wrap: wrap;
	justify-content: if($align-left, left, center);

	@if $gap != false {
		@include layout-gap($gap);
	}
}


// -----------------------------------------------------------------------------


@mixin layout-wrap-responsive-v2($cont-width, $n, $gap: false) {
	$gap_x: if(length($gap) == 2, nth($gap, 1), $gap);
	$gap_y: if(length($gap) == 2, nth($gap, 2), $gap);

	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;

	@if $gap_y != false {
		margin-bottom: -$gap_y;
		> * { margin-bottom: $gap_y; }
	}

	@if 1 < length($n) {
		@include _layout-wrap-responsive-ratio($cont-width, $n, $gap_x);
	} @else {
		@include _layout-wrap-responsive-equal($cont-width, $n, $gap_x);
	}
	// &::after {
	// 	content: '';
	// 	display: block;
	// }
}

@mixin _layout-wrap-responsive-equal($cont-width, $n, $gap_x: false) {
	$mw: 100% / $n;
	@if $gap_x != false {
		$cg: $gap_x * ($n - 1) / $n;
		$mw: calc(#{$mw} - #{$cg});
	}
	> * {
		max-width: 100%;
		flex-basis: calc((#{$cont-width} - 100%) * 1000);
		min-width: $mw;
	}
}

@mixin _layout-wrap-responsive-ratio($cont-width, $rn, $gap_x: false) {
	$n: length($rs);
	$cg: if($gap_x == false, 0, $gap_x * ($n - 1) / $n);
	$sum: 0;
	@each $r in $rs { $sum: $sum + $r; }

	@for $i from 1 through $n {
		> *:nth-child(#{$i}) {
			$mw: percentage(nth($rs, $i) / $sum);
			@if $gap_x != false {
				$mw: calc(#{$mw} - #{$cg});
			}
			min-width: $mw;
		}
	}
	> * {
		max-width: 100%;
		flex-basis: calc((#{$cont-width} - 100%) * 1000);
	}
}


// -----------------------------------------------------------------------------


@mixin layout-column-v2($n, $gap: false) {
	display: flex;

	@if 1 < length($n) {
		@include _layout-column-ratio($n, $gap);
	} @else if 1 < $n {
		@include _layout-column-equal($n, $gap);
	} @else {
		@include _layout-column-cancel($gap);
	}
}

@mixin _layout-column-equal($n, $gap: false) {
	flex-direction: row;
	justify-content: space-between;

	$mw: 100% / $n;
	@if $gap != false {
		$cg: $gap * ($n - 1) / $n;
		$mw: calc(#{$mw} - #{$cg});
	}
	> * {
		width: 100%;
		max-width: $mw;
		margin-top: 0;  // For canceling _layout-column-cancel
	}
}

@mixin _layout-column-ratio($rs, $gap: false) {
	flex-direction: row;
	justify-content: space-between;

	> * {
		width: 100%;
		margin-top: 0;  // For canceling _layout-column-cancel
	}
	$n: length($rs);
	$cg: if($gap == false, 0, $gap * ($n - 1) / $n);
	$sum: 0;
	@each $r in $rs { $sum: $sum + $r; }

	@for $i from 1 through $n {
		> *:nth-child(#{$i}) {
			$mw: percentage(nth($rs, $i) / $sum);
			@if $gap != false {
				$mw: calc(#{$mw} - #{$cg});
			}
			max-width: $mw;
		}
	}
}

@mixin _layout-column-cancel($gap: false) {
	flex-direction: column;

	> * { max-width: 100%; }
	@if $gap != false {
		> * + * { margin-top: $gap; }
	}
}


// -----------------------------------------------------------------------------


@mixin layout-card-v2($n, $gap: false, $align-left: true) {
	$gap_x: if(length($gap) == 2, nth($gap, 1), $gap);
	$gap_y: if(length($gap) == 2, nth($gap, 2), $gap);

	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;

	$mw: 100% / $n;
	@if $gap != false and 1 < $n {
		$cg: $gap * ($n - 1) / $n;
		$mw: calc(#{$mw} - #{$cg});
	}

	> * {
		width: 100%;
		max-width: $mw;
	
		@if $gap != false {
			&:not(:nth-child(#{$n}n + 1)) {
				margin-left: calc(#{$gap_x} - 1px);  // For reducing calculation error on IE11 and Edge
			}
			&:nth-child(n + #{$n + 1}) {
				margin-top: $gap_y;
			}
		}
	}
	@if $align-left and 1 < $n {
		@include _layout-card-tail-margin($n, $gap_x);
	}
}<commit_msg>Implement layout v2<commit_after>/**
 *
 * Layout Mixins v2
 *
 * @author <NAME> @ Space-Time Inc.
 * @version 2019-05-31
 *
 */


@mixin layout-side-margin-v2($max-width, $side-margin: false) {
	$w: 100%;
	@if $side-margin != false {
		$w: calc(100% - #{$side-margin * 2});
	}
	margin: { left: auto; right: auto; }
	max-width: $max-width;  // must be max-width for Android Chrome
	width: $w;  // must be width for Android Chrome
}

@mixin layout-width-responsive-v2($cont-width, $min-width, $max-width) {
	min-width: $min-width;
	width: calc((#{$cont-width} - 100%) * 1000);
	max-width: $max-width;
}

@mixin layout-full-width-v2($side-margin: false) {
	$m: calc(50% - 50vw);
	@if $side-margin != false {
		$m: calc(#{$m} + #{$side-margin});
	}
	margin: { left: $m; right: $m; }
}


// -----------------------------------------------------------------------------


@mixin layout-centering-v2($inline: false) {
	display: if($inline == false, flex, inline-flex);
	align-items: center;
	justify-content: center;
}

@mixin layout-centering-self-v2($horizontal: true, $vertical: true, $position: absolute) {
	position: $position;
	@if $horizontal == true { left: 50%; }
	@if $vertical   == true { top : 50%; }

	@if $horizontal == true and $vertical == true {
		transform: translate(-50%, -50%);
	} @else if $horizontal == true {
		transform: translateX(-50%);
	} @else if $vertical == true {
		transform: translateY(-50%);
	}
}

@mixin layout-fill-self-v2() {
	position: $position;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}


// -----------------------------------------------------------------------------


@mixin layout-aspect-v2($width, $height, $expandable: false) {
	@if ($expandable) {
		@include _layout-aspect-expandable($width, $height);
	} @else {
		@include _layout-aspect-fixed($width, $height);
	}
}

@mixin _layout-aspect-fixed($width, $height) {
	&:before {
		content: '';
		display: block;
		padding-top: percentage($height / $width);
	}
	position: relative;
	> *:first-child { @include layout-fill-self; }
}

@mixin _layout-aspect-expandable($width, $height) {
	&::before, &::after {
		content: '';
		display: block;
	}
	&::before {
		padding-top: percentage($height / $width);
		float: right;
	}
	&::after { clear: both; }
	> * {
		clear: none;
		width: 100%;
	}
	display: flex;
	align-items: stretch;
}


// -----------------------------------------------------------------------------


@mixin layout-gap-v2($gaps_or_gap_x, $gap_y: null) {
	$gap_x: $gaps_or_gap_x;
	$gap_y: if($gap_y != null, $gap_y, $gaps_or_gap_x);

	@if length($gaps_or_gap_x) == 2 {
		$gap_x: nth($gaps_or_gap_x, 1);
		$gap_y: nth($gaps_or_gap_x, 2);
	}
	@if $gap_x != false { margin-right : -$gap_x; }
	@if $gap_y != false { margin-bottom: -$gap_y; }

	> *:not(:empty) {
		@if $gap_x != false { margin-right : $gap_x; }
		@if $gap_y != false { margin-bottom: $gap_y; }
	}
}

@mixin layout-wrap-v2($gap: false, $align-left: true) {
	display: flex;
	flex-wrap: wrap;
	justify-content: if($align-left, left, center);

	@if $gap != false {
		@include layout-gap-v2($gap);
	}
}


// -----------------------------------------------------------------------------


@mixin layout-wrap-responsive-v2($cont-width, $n, $gap: false) {
	$gap_x: if(length($gap) == 2, nth($gap, 1), $gap);
	$gap_y: if(length($gap) == 2, nth($gap, 2), $gap);

	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;

	@if $gap_y != false {
		margin-bottom: -$gap_y;
		> * { margin-bottom: $gap_y; }
	}

	@if 1 < length($n) {
		@include _layout-wrap-responsive-ratio($cont-width, $n, $gap_x);
	} @else {
		@include _layout-wrap-responsive-equal($cont-width, $n, $gap_x);
	}
}

@mixin _layout-wrap-responsive-equal($cont-width, $n, $gap_x: false) {
	$mw: 100% / $n;
	@if $gap_x != false {
		$cg: $gap_x * ($n - 1) / $n;
		$mw: calc(#{$mw} - #{$cg});
	}
	> * {
		max-width: 100%;
		flex-basis: calc((#{$cont-width} - 100%) * 1000);
		min-width: $mw;
	}
}

@mixin _layout-wrap-responsive-ratio($cont-width, $rn, $gap_x: false) {
	$n: length($rs);
	$cg: if($gap_x == false, 0, $gap_x * ($n - 1) / $n);
	$sum: 0;
	@each $r in $rs { $sum: $sum + $r; }

	@for $i from 1 through $n {
		> *:nth-child(#{$i}) {
			$mw: percentage(nth($rs, $i) / $sum);
			@if $gap_x != false {
				$mw: calc(#{$mw} - #{$cg});
			}
			min-width: $mw;
		}
	}
	> * {
		max-width: 100%;
		flex-basis: calc((#{$cont-width} - 100%) * 1000);
	}
}


// -----------------------------------------------------------------------------


@mixin layout-column-v2($n, $gap: false) {
	display: flex;

	@if 1 < length($n) {
		@include _layout-column-ratio($n, $gap);
	} @else if 1 < $n {
		@include _layout-column-equal($n, $gap);
	} @else {
		@include _layout-column-cancel($gap);
	}
}

@mixin _layout-column-equal($n, $gap: false) {
	flex-direction: row;
	justify-content: space-between;

	$mw: 100% / $n;
	@if $gap != false {
		$cg: $gap * ($n - 1) / $n;
		$mw: calc(#{$mw} - #{$cg});
	}
	> * {
		width: 100%;
		max-width: $mw;
		margin-top: 0;  // For canceling _layout-column-cancel
	}
}

@mixin _layout-column-ratio($rs, $gap: false) {
	flex-direction: row;
	justify-content: space-between;

	> * {
		width: 100%;
		margin-top: 0;  // For canceling _layout-column-cancel
	}
	$n: length($rs);
	$cg: if($gap == false, 0, $gap * ($n - 1) / $n);
	$sum: 0;
	@each $r in $rs { $sum: $sum + $r; }

	@for $i from 1 through $n {
		> *:nth-child(#{$i}) {
			$mw: percentage(nth($rs, $i) / $sum);
			@if $gap != false {
				$mw: calc(#{$mw} - #{$cg});
			}
			max-width: $mw;
		}
	}
}

@mixin _layout-column-cancel($gap: false) {
	flex-direction: column;

	> * { max-width: 100%; }
	@if $gap != false {
		> * + * { margin-top: $gap; }
	}
}


// -----------------------------------------------------------------------------


@mixin layout-card-v2($n, $gap: false, $align-left: true) {
	$gap_x: if(length($gap) == 2, nth($gap, 1), $gap);
	$gap_y: if(length($gap) == 2, nth($gap, 2), $gap);

	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;

	$mw: 100% / $n;
	@if $gap != false and 1 < $n {
		$cg: $gap * ($n - 1) / $n;
		$mw: calc(#{$mw} - #{$cg});
	}

	> * {
		width: 100%;
		max-width: $mw;

		@if $gap != false {
			&:not(:nth-child(#{$n}n + 1)) {
				margin-left: calc(#{$gap_x} - 1px);  // For reducing calculation error on IE11 and Edge
			}
			&:nth-child(n + #{$n + 1}) {
				margin-top: $gap_y;
			}
		}
	}
	@if $align-left and 1 < $n {
		@include _layout-card-tail-margin($n, $gap_x);
	}
}
{'fraction_non_alphanumeric': 0.290853889943074, 'fraction_numerical': 0.02155597722960152, 'mean_word_length': 2.278427469519781, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 31, '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': '1982860', 'n_tokens_mistral': 6111, 'n_tokens_neox': 5382, 'n_words': 1131}