Use prettier for SCSS (#3895)

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / layout / grid.scss

/*!
 * Bootstrap v4.0.0-alpha.2 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/*
 * Heads up! This is a modified version containing only the sizes
 * "xs" (mobile) and "md" (desktop). Additionally the "push", "pull",
 * "first" and "last" classes have been left out.
 */

.row {
	display: flex;
	margin-right: -10px;
	margin-left: -10px;

	flex-wrap: wrap;
}

.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
	position: relative;
	min-height: 1px;
	padding-right: 10px;
	padding-left: 10px;
}

.col-xs-1 {
	flex: 0 0 8.333333%;
	max-width: 8.333333%;
}

.col-xs-2 {
	flex: 0 0 16.666667%;
	max-width: 16.666667%;
}

.col-xs-3 {
	flex: 0 0 25%;
	max-width: 25%;
}

.col-xs-4 {
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}

.col-xs-5 {
	flex: 0 0 41.666667%;
	max-width: 41.666667%;
}

.col-xs-6 {
	flex: 0 0 50%;
	max-width: 50%;
}

.col-xs-7 {
	flex: 0 0 58.333333%;
	max-width: 58.333333%;
}

.col-xs-8 {
	flex: 0 0 66.666667%;
	max-width: 66.666667%;
}

.col-xs-9 {
	flex: 0 0 75%;
	max-width: 75%;
}

.col-xs-10 {
	flex: 0 0 83.333333%;
	max-width: 83.333333%;
}

.col-xs-11 {
	flex: 0 0 91.666667%;
	max-width: 91.666667%;
}

.col-xs-12 {
	flex: 0 0 100%;
}

.col-xs-offset-0 {
	margin-left: 0;
}

.col-xs-offset-1 {
	margin-left: 8.333333%;
}

.col-xs-offset-2 {
	margin-left: 16.666667%;
}

.col-xs-offset-3 {
	margin-left: 25%;
}

.col-xs-offset-4 {
	margin-left: 33.333333%;
}

.col-xs-offset-5 {
	margin-left: 41.666667%;
}

.col-xs-offset-6 {
	margin-left: 50%;
}

.col-xs-offset-7 {
	margin-left: 58.333333%;
}

.col-xs-offset-8 {
	margin-left: 66.666667%;
}

.col-xs-offset-9 {
	margin-left: 75%;
}

.col-xs-offset-10 {
	margin-left: 83.333333%;
}

.col-xs-offset-11 {
	margin-left: 91.666667%;
}

.col-xs-offset-12 {
	margin-left: 100%;
}

@include screen-md-up {
	.col-md-1 {
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}
	.col-md-2 {
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}
	.col-md-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}
	.col-md-4 {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
	.col-md-5 {
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}
	.col-md-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}
	.col-md-7 {
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}
	.col-md-8 {
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}
	.col-md-9 {
		flex: 0 0 75%;
		max-width: 75%;
	}
	.col-md-10 {
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}
	.col-md-11 {
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}
	.col-md-12 {
		flex: 0 0 100%;
		max-width: none;
	}
	.col-md-pull-0 {
		right: auto;
	}
	.col-md-pull-1 {
		right: 8.333333%;
	}
	.col-md-pull-2 {
		right: 16.666667%;
	}
	.col-md-pull-3 {
		right: 25%;
	}
	.col-md-pull-4 {
		right: 33.333333%;
	}
	.col-md-pull-5 {
		right: 41.666667%;
	}
	.col-md-pull-6 {
		right: 50%;
	}
	.col-md-pull-7 {
		right: 58.333333%;
	}
	.col-md-pull-8 {
		right: 66.666667%;
	}
	.col-md-pull-9 {
		right: 75%;
	}
	.col-md-pull-10 {
		right: 83.333333%;
	}
	.col-md-pull-11 {
		right: 91.666667%;
	}
	.col-md-pull-12 {
		right: 100%;
	}
	.col-md-push-0 {
		left: auto;
	}
	.col-md-push-1 {
		left: 8.333333%;
	}
	.col-md-push-2 {
		left: 16.666667%;
	}
	.col-md-push-3 {
		left: 25%;
	}
	.col-md-push-4 {
		left: 33.333333%;
	}
	.col-md-push-5 {
		left: 41.666667%;
	}
	.col-md-push-6 {
		left: 50%;
	}
	.col-md-push-7 {
		left: 58.333333%;
	}
	.col-md-push-8 {
		left: 66.666667%;
	}
	.col-md-push-9 {
		left: 75%;
	}
	.col-md-push-10 {
		left: 83.333333%;
	}
	.col-md-push-11 {
		left: 91.666667%;
	}
	.col-md-push-12 {
		left: 100%;
	}
	.col-md-offset-0 {
		margin-left: 0;
	}
	.col-md-offset-1 {
		margin-left: 8.333333%;
	}
	.col-md-offset-2 {
		margin-left: 16.666667%;
	}
	.col-md-offset-3 {
		margin-left: 25%;
	}
	.col-md-offset-4 {
		margin-left: 33.333333%;
	}
	.col-md-offset-5 {
		margin-left: 41.666667%;
	}
	.col-md-offset-6 {
		margin-left: 50%;
	}
	.col-md-offset-7 {
		margin-left: 58.333333%;
	}
	.col-md-offset-8 {
		margin-left: 66.666667%;
	}
	.col-md-offset-9 {
		margin-left: 75%;
	}
	.col-md-offset-10 {
		margin-left: 83.333333%;
	}
	.col-md-offset-11 {
		margin-left: 91.666667%;
	}
	.col-md-offset-12 {
		margin-left: 100%;
	}
}

.row-xs-top {
	-ms-grid-row-align: flex-start;
	align-items: flex-start;
}

.row-xs-center {
	-ms-grid-row-align: center;
	align-items: center;
}

.row-xs-bottom {
	-ms-grid-row-align: flex-end;
	align-items: flex-end;
}

@include screen-md-up {
	.row-md-top {
		-ms-grid-row-align: flex-start;
		align-items: flex-start;
	}
	.row-md-center {
		-ms-grid-row-align: center;
		align-items: center;
	}
	.row-md-bottom {
		-ms-grid-row-align: flex-end;
		align-items: flex-end;
	}
}

.col-xs-top {
	align-self: flex-start;
}

.col-xs-center {
	align-self: center;
}

.col-xs-bottom {
	align-self: flex-end;
}

@include screen-md-up {
	.col-md-top {
		align-self: flex-start;
	}
	.col-md-center {
		align-self: center;
	}
	.col-md-bottom {
		align-self: flex-end;
	}
}

// WoltLab's custom definitions below

/* vertical gap between wrapped columns */
.rowColGap {
	margin-bottom: -20px;

	> .col-xs-1,
	> .col-xs-2,
	> .col-xs-3,
	> .col-xs-4,
	> .col-xs-5,
	> .col-xs-6,
	> .col-xs-7,
	> .col-xs-8,
	> .col-xs-9,
	> .col-xs-10,
	> .col-xs-11,
	> .col-xs-12,
	> .col-md-1,
	> .col-md-2,
	> .col-md-3,
	> .col-md-4,
	> .col-md-5,
	> .col-md-6,
	> .col-md-7,
	> .col-md-8,
	> .col-md-9,
	> .col-md-10,
	> .col-md-11,
	> .col-md-12 {
		margin-bottom: 20px !important;
	}

	&:not(:first-child) {
		margin-top: 20px;
	}
}