real-world-css-libraries 1.0.3 → 1.0.4

package/libs/waffle-grid-v1.3.6.css

@@ -0,0 +1,544 @@
+/* https://github.com/pr1mer-tech/waffle-grid/blob/master/dist/waffle-grid.css */
+/*!
+ * waffle-grid - v1.3.6 - (https://lucasgruwez.github.io/waffle-grid)
+ * Copyright 2017 Lucas Gruwez.
+ * Licensed under MIT
+ * https://lucasgruwez.github.io/waffle-grid
+ */.container,.grid {
+  width: 960px;
+  max-width: 80%;
+  margin: 0 auto;
+}
+
+.grid,.row {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.grid {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+.grid.full-width {
+  width: 100%;
+  max-width: 100%;
+}
+
+.row {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  width: 100%;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+
+.col {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  margin: 10px;
+  vertical-align: top;
+}
+
+.center,.left {
+  margin-right: auto;
+}
+
+.center,.right {
+  margin-left: auto;
+}
+
+.w-auto {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+
+.col-1-of-4,.col-2-of-8,.col-3-of-12 {
+  width: calc(25% - 20px);
+}
+
+.push-1-of-4,.push-2-of-8,.push-3-of-12 {
+  margin-left: calc(25% + 20px / 2);
+}
+
+.pull-1-of-4,.pull-2-of-8,.pull-3-of-12 {
+  margin-right: calc(25% + 20px / 2);
+}
+
+.col-2-of-4,.col-4-of-8,.col-6-of-12 {
+  width: calc(50% - 20px);
+}
+
+.push-2-of-4,.push-4-of-8,.push-6-of-12 {
+  margin-left: calc(50% + 20px / 2);
+}
+
+.pull-2-of-4,.pull-4-of-8,.pull-6-of-12 {
+  margin-right: calc(50% + 20px / 2);
+}
+
+.col-3-of-4,.col-6-of-8,.col-9-of-12 {
+  width: calc(75% - 20px);
+}
+
+.push-3-of-4,.push-6-of-8,.push-9-of-12 {
+  margin-left: calc(75% + 20px / 2);
+}
+
+.pull-3-of-4,.pull-6-of-8,.pull-9-of-12 {
+  margin-right: calc(75% + 20px / 2);
+}
+
+.col-12-of-12,.col-4-of-4,.col-8-of-8 {
+  width: calc(100% - 20px);
+}
+
+.push-12-of-12,.push-4-of-4,.push-8-of-8 {
+  margin-left: calc(100% + 20px / 2);
+}
+
+.pull-12-of-12,.pull-4-of-4,.pull-8-of-8 {
+  margin-right: calc(100% + 20px / 2);
+}
+
+.col-1-of-8 {
+  width: calc(12.5% - 20px);
+}
+
+.push-1-of-8 {
+  margin-left: calc(12.5% + 20px / 2);
+}
+
+.pull-1-of-8 {
+  margin-right: calc(12.5% + 20px / 2);
+}
+
+.col-3-of-8 {
+  width: calc(37.5% - 20px);
+}
+
+.push-3-of-8 {
+  margin-left: calc(37.5% + 20px / 2);
+}
+
+.pull-3-of-8 {
+  margin-right: calc(37.5% + 20px / 2);
+}
+
+.col-5-of-8 {
+  width: calc(62.5% - 20px);
+}
+
+.push-5-of-8 {
+  margin-left: calc(62.5% + 20px / 2);
+}
+
+.pull-5-of-8 {
+  margin-right: calc(62.5% + 20px / 2);
+}
+
+.col-7-of-8 {
+  width: calc(87.5% - 20px);
+}
+
+.push-7-of-8 {
+  margin-left: calc(87.5% + 20px / 2);
+}
+
+.pull-7-of-8 {
+  margin-right: calc(87.5% + 20px / 2);
+}
+
+.col-1-of-12 {
+  width: calc(8.33333% - 20px);
+}
+
+.push-1-of-12 {
+  margin-left: calc(8.33333% + 20px / 2);
+}
+
+.pull-1-of-12 {
+  margin-right: calc(8.33333% + 20px / 2);
+}
+
+.col-2-of-12 {
+  width: calc(16.66667% - 20px);
+}
+
+.push-2-of-12 {
+  margin-left: calc(16.66667% + 20px / 2);
+}
+
+.pull-2-of-12 {
+  margin-right: calc(16.66667% + 20px / 2);
+}
+
+.col-4-of-12 {
+  width: calc(33.33333% - 20px);
+}
+
+.push-4-of-12 {
+  margin-left: calc(33.33333% + 20px / 2);
+}
+
+.pull-4-of-12 {
+  margin-right: calc(33.33333% + 20px / 2);
+}
+
+.col-5-of-12 {
+  width: calc(41.66667% - 20px);
+}
+
+.push-5-of-12 {
+  margin-left: calc(41.66667% + 20px / 2);
+}
+
+.pull-5-of-12 {
+  margin-right: calc(41.66667% + 20px / 2);
+}
+
+.col-7-of-12 {
+  width: calc(58.33333% - 20px);
+}
+
+.push-7-of-12 {
+  margin-left: calc(58.33333% + 20px / 2);
+}
+
+.pull-7-of-12 {
+  margin-right: calc(58.33333% + 20px / 2);
+}
+
+.col-8-of-12 {
+  width: calc(66.66667% - 20px);
+}
+
+.push-8-of-12 {
+  margin-left: calc(66.66667% + 20px / 2);
+}
+
+.pull-8-of-12 {
+  margin-right: calc(66.66667% + 20px / 2);
+}
+
+.col-10-of-12 {
+  width: calc(83.33333% - 20px);
+}
+
+.push-10-of-12 {
+  margin-left: calc(83.33333% + 20px / 2);
+}
+
+.pull-10-of-12 {
+  margin-right: calc(83.33333% + 20px / 2);
+}
+
+.col-11-of-12 {
+  width: calc(91.66667% - 20px);
+}
+
+.push-11-of-12 {
+  margin-left: calc(91.66667% + 20px / 2);
+}
+
+.pull-11-of-12 {
+  margin-right: calc(91.66667% + 20px / 2);
+}
+
+@media (max-width:840px) {
+  .m-hide {
+    display: none;
+  }
+
+  .w-m-auto {
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+  }
+
+  .m-un-push {
+    margin-left: 10px;
+  }
+
+  .m-un-pull {
+    margin-right: 10px;
+  }
+
+  .col-m-1-of-4,.col-m-2-of-8 {
+    width: calc(25% - 20px);
+  }
+
+  .push-m-1-of-4,.push-m-2-of-8 {
+    margin-left: calc(25% + 20px / 2);
+  }
+
+  .pull-m-1-of-4,.pull-m-2-of-8 {
+    margin-right: calc(25% + 20px / 2);
+  }
+
+  .col-m-2-of-4,.col-m-3-of-6,.col-m-4-of-8 {
+    width: calc(50% - 20px);
+  }
+
+  .push-m-2-of-4,.push-m-3-of-6,.push-m-4-of-8 {
+    margin-left: calc(50% + 20px / 2);
+  }
+
+  .pull-m-2-of-4,.pull-m-3-of-6,.pull-m-4-of-8 {
+    margin-right: calc(50% + 20px / 2);
+  }
+
+  .col-m-3-of-4,.col-m-6-of-8 {
+    width: calc(75% - 20px);
+  }
+
+  .push-m-3-of-4,.push-m-6-of-8 {
+    margin-left: calc(75% + 20px / 2);
+  }
+
+  .pull-m-3-of-4,.pull-m-6-of-8 {
+    margin-right: calc(75% + 20px / 2);
+  }
+
+  .col-m-4-of-4,.col-m-6-of-6,.col-m-8-of-8 {
+    width: calc(100% - 20px);
+  }
+
+  .push-m-4-of-4,.push-m-6-of-6,.push-m-8-of-8 {
+    margin-left: calc(100% + 20px / 2);
+  }
+
+  .pull-m-4-of-4,.pull-m-6-of-6,.pull-m-8-of-8 {
+    margin-right: calc(100% + 20px / 2);
+  }
+
+  .col-m-1-of-6 {
+    width: calc(16.66667% - 20px);
+  }
+
+  .push-m-1-of-6 {
+    margin-left: calc(16.66667% + 20px / 2);
+  }
+
+  .pull-m-1-of-6 {
+    margin-right: calc(16.66667% + 20px / 2);
+  }
+
+  .col-m-2-of-6 {
+    width: calc(33.33333% - 20px);
+  }
+
+  .push-m-2-of-6 {
+    margin-left: calc(33.33333% + 20px / 2);
+  }
+
+  .pull-m-2-of-6 {
+    margin-right: calc(33.33333% + 20px / 2);
+  }
+
+  .col-m-4-of-6 {
+    width: calc(66.66667% - 20px);
+  }
+
+  .push-m-4-of-6 {
+    margin-left: calc(66.66667% + 20px / 2);
+  }
+
+  .pull-m-4-of-6 {
+    margin-right: calc(66.66667% + 20px / 2);
+  }
+
+  .col-m-5-of-6 {
+    width: calc(83.33333% - 20px);
+  }
+
+  .push-m-5-of-6 {
+    margin-left: calc(83.33333% + 20px / 2);
+  }
+
+  .pull-m-5-of-6 {
+    margin-right: calc(83.33333% + 20px / 2);
+  }
+
+  .col-m-1-of-8 {
+    width: calc(12.5% - 20px);
+  }
+
+  .push-m-1-of-8 {
+    margin-left: calc(12.5% + 20px / 2);
+  }
+
+  .pull-m-1-of-8 {
+    margin-right: calc(12.5% + 20px / 2);
+  }
+
+  .col-m-3-of-8 {
+    width: calc(37.5% - 20px);
+  }
+
+  .push-m-3-of-8 {
+    margin-left: calc(37.5% + 20px / 2);
+  }
+
+  .pull-m-3-of-8 {
+    margin-right: calc(37.5% + 20px / 2);
+  }
+
+  .col-m-5-of-8 {
+    width: calc(62.5% - 20px);
+  }
+
+  .push-m-5-of-8 {
+    margin-left: calc(62.5% + 20px / 2);
+  }
+
+  .pull-m-5-of-8 {
+    margin-right: calc(62.5% + 20px / 2);
+  }
+
+  .col-m-7-of-8 {
+    width: calc(87.5% - 20px);
+  }
+
+  .push-m-7-of-8 {
+    margin-left: calc(87.5% + 20px / 2);
+  }
+
+  .pull-m-7-of-8 {
+    margin-right: calc(87.5% + 20px / 2);
+  }
+}
+
+@media (max-width:480px) {
+  .s-hide {
+    display: none;
+  }
+
+  .w-s-auto {
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+  }
+
+  .s-un-push {
+    margin-left: 10px;
+  }
+
+  .s-un-pull {
+    margin-right: 10px;
+  }
+
+  .col-s-1-of-4 {
+    width: calc(25% - 20px);
+  }
+
+  .push-s-1-of-4 {
+    margin-left: calc(25% + 20px / 2);
+  }
+
+  .pull-s-1-of-4 {
+    margin-right: calc(25% + 20px / 2);
+  }
+
+  .col-s-2-of-4,.col-s-3-of-6 {
+    width: calc(50% - 20px);
+  }
+
+  .push-s-2-of-4,.push-s-3-of-6 {
+    margin-left: calc(50% + 20px / 2);
+  }
+
+  .pull-s-2-of-4,.pull-s-3-of-6 {
+    margin-right: calc(50% + 20px / 2);
+  }
+
+  .col-s-3-of-4 {
+    width: calc(75% - 20px);
+  }
+
+  .push-s-3-of-4 {
+    margin-left: calc(75% + 20px / 2);
+  }
+
+  .pull-s-3-of-4 {
+    margin-right: calc(75% + 20px / 2);
+  }
+
+  .col-s-4-of-4,.col-s-6-of-6 {
+    width: calc(100% - 20px);
+  }
+
+  .push-s-4-of-4,.push-s-6-of-6 {
+    margin-left: calc(100% + 20px / 2);
+  }
+
+  .pull-s-4-of-4,.pull-s-6-of-6 {
+    margin-right: calc(100% + 20px / 2);
+  }
+
+  .col-s-1-of-6 {
+    width: calc(16.66667% - 20px);
+  }
+
+  .push-s-1-of-6 {
+    margin-left: calc(16.66667% + 20px / 2);
+  }
+
+  .pull-s-1-of-6 {
+    margin-right: calc(16.66667% + 20px / 2);
+  }
+
+  .col-s-2-of-6 {
+    width: calc(33.33333% - 20px);
+  }
+
+  .push-s-2-of-6 {
+    margin-left: calc(33.33333% + 20px / 2);
+  }
+
+  .pull-s-2-of-6 {
+    margin-right: calc(33.33333% + 20px / 2);
+  }
+
+  .col-s-4-of-6 {
+    width: calc(66.66667% - 20px);
+  }
+
+  .push-s-4-of-6 {
+    margin-left: calc(66.66667% + 20px / 2);
+  }
+
+  .pull-s-4-of-6 {
+    margin-right: calc(66.66667% + 20px / 2);
+  }
+
+  .col-s-5-of-6 {
+    width: calc(83.33333% - 20px);
+  }
+
+  .push-s-5-of-6 {
+    margin-left: calc(83.33333% + 20px / 2);
+  }
+
+  .pull-s-5-of-6 {
+    margin-right: calc(83.33333% + 20px / 2);
+  }
+}
+
+@media (min-width:480px) {
+  .s-and-lower {
+    display: none;
+  }
+}
+
+@media (min-width:840px) {
+  .m-and-lower {
+    display: none;
+  }
+}