MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 444: / Line 444: @@
     margin-top : 0;
     padding-top:0;
+}
+/* Base Grid Container */
+.ab-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -15px;
+  margin-right: -15px;
+}
+.ab-col {
+  padding-left: 15px;
+  padding-right: 15px;
+  flex: 1 0 0%;
+}
+/* Column Sizes - Mobile First */
+[class*="ab-col-"] {
+  flex: 0 0 auto;
+}
+.ab-col-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
+.ab-col-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
+.ab-col-3  { flex: 0 0 25%;      max-width: 25%; }
+.ab-col-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
+.ab-col-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
+.ab-col-6  { flex: 0 0 50%;      max-width: 50%; }
+.ab-col-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
+.ab-col-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
+.ab-col-9  { flex: 0 0 75%;      max-width: 75%; }
+.ab-col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
+.ab-col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
+.ab-col-12 { flex: 0 0 100%;     max-width: 100%; }
+/* Responsive Breakpoints */
+/* Small devices (≥576px) */
+@media (min-width: 576px) {
+  .ab-col-sm-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
+  .ab-col-sm-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
+  .ab-col-sm-3  { flex: 0 0 25%;      max-width: 25%; }
+  .ab-col-sm-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
+  .ab-col-sm-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
+  .ab-col-sm-6  { flex: 0 0 50%;      max-width: 50%; }
+  .ab-col-sm-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
+  .ab-col-sm-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
+  .ab-col-sm-9  { flex: 0 0 75%;      max-width: 75%; }
+  .ab-col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
+  .ab-col-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
+  .ab-col-sm-12 { flex: 0 0 100%;     max-width: 100%; }
+}
+/* Medium devices (≥768px) */
+@media (min-width: 768px) {
+  .ab-col-md-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
+  .ab-col-md-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
+  .ab-col-md-3  { flex: 0 0 25%;      max-width: 25%; }
+  .ab-col-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
+  .ab-col-md-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
+  .ab-col-md-6  { flex: 0 0 50%;      max-width: 50%; }
+  .ab-col-md-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
+  .ab-col-md-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
+  .ab-col-md-9  { flex: 0 0 75%;      max-width: 75%; }
+  .ab-col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
+  .ab-col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
+  .ab-col-md-12 { flex: 0 0 100%;     max-width: 100%; }
+}
+/* Large devices (≥992px) */
+@media (min-width: 992px) {
+  .ab-col-lg-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
+  .ab-col-lg-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
+  .ab-col-lg-3  { flex: 0 0 25%;      max-width: 25%; }
+  .ab-col-lg-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
+  .ab-col-lg-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
+  .ab-col-lg-6  { flex: 0 0 50%;      max-width: 50%; }
+  .ab-col-lg-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
+  .ab-col-lg-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
+  .ab-col-lg-9  { flex: 0 0 75%;      max-width: 75%; }
+  .ab-col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
+  .ab-col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
+  .ab-col-lg-12 { flex: 0 0 100%;     max-width: 100%; }
 }