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 (file)
index 0000000..0cad8b9
--- /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;
+       }
+}