From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 26 Feb 2016 12:48:17 +0000 (+0100)
Subject: Added basic grid layout classes
X-Git-Tag: 3.0.0_Beta_1~2030^2~79
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=f22ac31f27e0edeefb502bb8c7edfe764d7ba326;p=GitHub%2FWoltLab%2FWCF.git

Added basic grid layout classes

CSS classes pulled from Twitter Bootstrap 4.0 Alpha 2
---

diff --git a/wcfsetup/install/files/style/layout/grid.scss b/wcfsetup/install/files/style/layout/grid.scss
new file mode 100644
index 0000000000..0cad8b927f
--- /dev/null
+++ b/wcfsetup/install/files/style/layout/grid.scss
@@ -0,0 +1,337 @@
+/*!
+ * 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: -.9375rem;
+	margin-left: -.9375rem;
+	
+	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: .9375rem;
+	padding-left: .9375rem;
+}
+
+.col-xs-1 {
+	flex: 0 0 8.333333%;
+}
+
+.col-xs-2 {
+	flex: 0 0 16.666667%;
+}
+
+.col-xs-3 {
+	flex: 0 0 25%;
+}
+
+.col-xs-4 {
+	flex: 0 0 33.333333%;
+}
+
+.col-xs-5 {
+	flex: 0 0 41.666667%;
+}
+
+.col-xs-6 {
+	flex: 0 0 50%;
+}
+
+.col-xs-7 {
+	flex: 0 0 58.333333%;
+}
+
+.col-xs-8 {
+	flex: 0 0 66.666667%;
+}
+
+.col-xs-9 {
+	flex: 0 0 75%;
+}
+
+.col-xs-10 {
+	flex: 0 0 83.333333%;
+}
+
+.col-xs-11 {
+	flex: 0 0 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%;
+}
+
+@media (min-width: 768px) {
+	.col-md-1 {
+		flex: 0 0 8.333333%;
+	}
+	.col-md-2 {
+		flex: 0 0 16.666667%;
+	}
+	.col-md-3 {
+		flex: 0 0 25%;
+	}
+	.col-md-4 {
+		flex: 0 0 33.333333%;
+	}
+	.col-md-5 {
+		flex: 0 0 41.666667%;
+	}
+	.col-md-6 {
+		flex: 0 0 50%;
+	}
+	.col-md-7 {
+		flex: 0 0 58.333333%;
+	}
+	.col-md-8 {
+		flex: 0 0 66.666667%;
+	}
+	.col-md-9 {
+		flex: 0 0 75%;
+	}
+	.col-md-10 {
+		flex: 0 0 83.333333%;
+	}
+	.col-md-11 {
+		flex: 0 0 91.666667%;
+	}
+	.col-md-12 {
+		flex: 0 0 100%;
+	}
+	.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;
+}
+
+@media (min-width: 768px) {
+	.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;
+}
+
+@media (min-width: 768px) {
+	.col-md-top {
+		align-self: flex-start;
+	}
+	.col-md-center {
+		align-self: center;
+	}
+	.col-md-bottom {
+		align-self: flex-end;
+	}
+}