@medyll/cssfabric 0.2.5 → 0.2.7

package/src/lib/styles/grid/grid.responsive.css

@@ -1,35 +1,35 @@
-@media only screen and (max-width: 1300px) {
-  .grid {
+@media only screen and (min-width: 640px) {
+  .grid-sm {
     display: grid;
   }
-  .grid-auto-flow-cols {
+  .grid-sm-auto-flow-cols {
     grid-auto-flow: column;
   }
-  .grid-auto-cols-auto {
+  .grid-sm-auto-cols-auto {
     grid-auto-columns: auto;
   }
-  .grid-auto-cols-min {
+  .grid-sm-auto-cols-min {
     grid-auto-columns: min-content;
   }
-  .grid-auto-cols-max {
+  .grid-sm-auto-cols-max {
     grid-auto-columns: max-content;
   }
-  .grid-auto-cols {
+  .grid-sm-auto-cols {
     grid-auto-columns: minmax(0, 1fr);
   }
-  .grid-auto-flow-rows {
+  .grid-sm-auto-flow-rows {
     grid-auto-flow: row;
   }
-  .grid-auto-rows-auto {
+  .grid-sm-auto-rows-auto {
     grid-auto-rows: auto;
   }
-  .grid-auto-rows-min {
+  .grid-sm-auto-rows-min {
     grid-auto-rows: min-content;
   }
-  .grid-auto-rows-max {
+  .grid-sm-auto-rows-max {
     grid-auto-rows: max-content;
   }
-  .grid-auto-rows {
+  .grid-sm-auto-rows {
     grid-auto-rows: minmax(0, 1fr);
   }
 
@@ -38,119 +38,119 @@
   }
 
   /* template-columns */
-  .grid-cols-1 {
+  .grid-sm-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
 
-  .grid-cols-2 {
+  .grid-sm-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .grid-cols-3 {
+  .grid-sm-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
-  .grid-cols-4 {
+  .grid-sm-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
-  .grid-cols-5 {
+  .grid-sm-cols-5 {
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }
 
-  .grid-cols-6 {
+  .grid-sm-cols-6 {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 
-  .grid-cols-7 {
+  .grid-sm-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
 
-  .grid-cols-8 {
+  .grid-sm-cols-8 {
     grid-template-columns: repeat(8, minmax(0, 1fr));
   }
 
-  .grid-cols-9 {
+  .grid-sm-cols-9 {
     grid-template-columns: repeat(9, minmax(0, 1fr));
   }
 
-  .grid-cols-10 {
+  .grid-sm-cols-10 {
     grid-template-columns: repeat(10, minmax(0, 1fr));
   }
 
-  .grid-cols-11 {
+  .grid-sm-cols-11 {
     grid-template-columns: repeat(11, minmax(0, 1fr));
   }
 
-  .grid-cols-12 {
+  .grid-sm-cols-12 {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
 
   /* template-rows */
-  .grid-rows-1 {
+  .grid-sm-rows-1 {
     grid-template-rows: repeat(1, minmax(0, 1fr));
   }
 
-  .grid-rows-2 {
+  .grid-sm-rows-2 {
     grid-template-rows: repeat(2, minmax(0, 1fr));
   }
 
-  .grid-rows-3 {
+  .grid-sm-rows-3 {
     grid-template-rows: repeat(3, minmax(0, 1fr));
   }
 
-  .grid-rows-4 {
+  .grid-sm-rows-4 {
     grid-template-rows: repeat(4, minmax(0, 1fr));
   }
 
-  .grid-rows-5 {
+  .grid-sm-rows-5 {
     grid-template-rows: repeat(5, minmax(0, 1fr));
   }
 
-  .grid-rows-6 {
+  .grid-sm-rows-6 {
     grid-template-rows: repeat(6, minmax(0, 1fr));
   }
 
-  .grid-rows-7 {
+  .grid-sm-rows-7 {
     grid-template-rows: repeat(7, minmax(0, 1fr));
   }
 
-  .grid-rows-8 {
+  .grid-sm-rows-8 {
     grid-template-rows: repeat(8, minmax(0, 1fr));
   }
 }
-@media only screen and (max-width: 1200px) {
-  .grid {
+@media only screen and (min-width: 768px) {
+  .grid-md {
     display: grid;
   }
-  .grid-auto-flow-cols {
+  .grid-md-auto-flow-cols {
     grid-auto-flow: column;
   }
-  .grid-auto-cols-auto {
+  .grid-md-auto-cols-auto {
     grid-auto-columns: auto;
   }
-  .grid-auto-cols-min {
+  .grid-md-auto-cols-min {
     grid-auto-columns: min-content;
   }
-  .grid-auto-cols-max {
+  .grid-md-auto-cols-max {
     grid-auto-columns: max-content;
   }
-  .grid-auto-cols {
+  .grid-md-auto-cols {
     grid-auto-columns: minmax(0, 1fr);
   }
-  .grid-auto-flow-rows {
+  .grid-md-auto-flow-rows {
     grid-auto-flow: row;
   }
-  .grid-auto-rows-auto {
+  .grid-md-auto-rows-auto {
     grid-auto-rows: auto;
   }
-  .grid-auto-rows-min {
+  .grid-md-auto-rows-min {
     grid-auto-rows: min-content;
   }
-  .grid-auto-rows-max {
+  .grid-md-auto-rows-max {
     grid-auto-rows: max-content;
   }
-  .grid-auto-rows {
+  .grid-md-auto-rows {
     grid-auto-rows: minmax(0, 1fr);
   }
 
@@ -159,119 +159,119 @@
   }
 
   /* template-columns */
-  .grid-cols-1 {
+  .grid-md-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
 
-  .grid-cols-2 {
+  .grid-md-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .grid-cols-3 {
+  .grid-md-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
-  .grid-cols-4 {
+  .grid-md-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
-  .grid-cols-5 {
+  .grid-md-cols-5 {
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }
 
-  .grid-cols-6 {
+  .grid-md-cols-6 {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 
-  .grid-cols-7 {
+  .grid-md-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
 
-  .grid-cols-8 {
+  .grid-md-cols-8 {
     grid-template-columns: repeat(8, minmax(0, 1fr));
   }
 
-  .grid-cols-9 {
+  .grid-md-cols-9 {
     grid-template-columns: repeat(9, minmax(0, 1fr));
   }
 
-  .grid-cols-10 {
+  .grid-md-cols-10 {
     grid-template-columns: repeat(10, minmax(0, 1fr));
   }
 
-  .grid-cols-11 {
+  .grid-md-cols-11 {
     grid-template-columns: repeat(11, minmax(0, 1fr));
   }
 
-  .grid-cols-12 {
+  .grid-md-cols-12 {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
 
   /* template-rows */
-  .grid-rows-1 {
+  .grid-md-rows-1 {
     grid-template-rows: repeat(1, minmax(0, 1fr));
   }
 
-  .grid-rows-2 {
+  .grid-md-rows-2 {
     grid-template-rows: repeat(2, minmax(0, 1fr));
   }
 
-  .grid-rows-3 {
+  .grid-md-rows-3 {
     grid-template-rows: repeat(3, minmax(0, 1fr));
   }
 
-  .grid-rows-4 {
+  .grid-md-rows-4 {
     grid-template-rows: repeat(4, minmax(0, 1fr));
   }
 
-  .grid-rows-5 {
+  .grid-md-rows-5 {
     grid-template-rows: repeat(5, minmax(0, 1fr));
   }
 
-  .grid-rows-6 {
+  .grid-md-rows-6 {
     grid-template-rows: repeat(6, minmax(0, 1fr));
   }
 
-  .grid-rows-7 {
+  .grid-md-rows-7 {
     grid-template-rows: repeat(7, minmax(0, 1fr));
   }
 
-  .grid-rows-8 {
+  .grid-md-rows-8 {
     grid-template-rows: repeat(8, minmax(0, 1fr));
   }
 }
-@media only screen and (max-width: 960px) {
-  .grid {
+@media only screen and (min-width: 1024px) {
+  .grid-lg {
     display: grid;
   }
-  .grid-auto-flow-cols {
+  .grid-lg-auto-flow-cols {
     grid-auto-flow: column;
   }
-  .grid-auto-cols-auto {
+  .grid-lg-auto-cols-auto {
     grid-auto-columns: auto;
   }
-  .grid-auto-cols-min {
+  .grid-lg-auto-cols-min {
     grid-auto-columns: min-content;
   }
-  .grid-auto-cols-max {
+  .grid-lg-auto-cols-max {
     grid-auto-columns: max-content;
   }
-  .grid-auto-cols {
+  .grid-lg-auto-cols {
     grid-auto-columns: minmax(0, 1fr);
   }
-  .grid-auto-flow-rows {
+  .grid-lg-auto-flow-rows {
     grid-auto-flow: row;
   }
-  .grid-auto-rows-auto {
+  .grid-lg-auto-rows-auto {
     grid-auto-rows: auto;
   }
-  .grid-auto-rows-min {
+  .grid-lg-auto-rows-min {
     grid-auto-rows: min-content;
   }
-  .grid-auto-rows-max {
+  .grid-lg-auto-rows-max {
     grid-auto-rows: max-content;
   }
-  .grid-auto-rows {
+  .grid-lg-auto-rows {
     grid-auto-rows: minmax(0, 1fr);
   }
 
@@ -280,119 +280,119 @@
   }
 
   /* template-columns */
-  .grid-cols-1 {
+  .grid-lg-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
 
-  .grid-cols-2 {
+  .grid-lg-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .grid-cols-3 {
+  .grid-lg-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
-  .grid-cols-4 {
+  .grid-lg-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
-  .grid-cols-5 {
+  .grid-lg-cols-5 {
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }
 
-  .grid-cols-6 {
+  .grid-lg-cols-6 {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 
-  .grid-cols-7 {
+  .grid-lg-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
 
-  .grid-cols-8 {
+  .grid-lg-cols-8 {
     grid-template-columns: repeat(8, minmax(0, 1fr));
   }
 
-  .grid-cols-9 {
+  .grid-lg-cols-9 {
     grid-template-columns: repeat(9, minmax(0, 1fr));
   }
 
-  .grid-cols-10 {
+  .grid-lg-cols-10 {
     grid-template-columns: repeat(10, minmax(0, 1fr));
   }
 
-  .grid-cols-11 {
+  .grid-lg-cols-11 {
     grid-template-columns: repeat(11, minmax(0, 1fr));
   }
 
-  .grid-cols-12 {
+  .grid-lg-cols-12 {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
 
   /* template-rows */
-  .grid-rows-1 {
+  .grid-lg-rows-1 {
     grid-template-rows: repeat(1, minmax(0, 1fr));
   }
 
-  .grid-rows-2 {
+  .grid-lg-rows-2 {
     grid-template-rows: repeat(2, minmax(0, 1fr));
   }
 
-  .grid-rows-3 {
+  .grid-lg-rows-3 {
     grid-template-rows: repeat(3, minmax(0, 1fr));
   }
 
-  .grid-rows-4 {
+  .grid-lg-rows-4 {
     grid-template-rows: repeat(4, minmax(0, 1fr));
   }
 
-  .grid-rows-5 {
+  .grid-lg-rows-5 {
     grid-template-rows: repeat(5, minmax(0, 1fr));
   }
 
-  .grid-rows-6 {
+  .grid-lg-rows-6 {
     grid-template-rows: repeat(6, minmax(0, 1fr));
   }
 
-  .grid-rows-7 {
+  .grid-lg-rows-7 {
     grid-template-rows: repeat(7, minmax(0, 1fr));
   }
 
-  .grid-rows-8 {
+  .grid-lg-rows-8 {
     grid-template-rows: repeat(8, minmax(0, 1fr));
   }
 }
-@media only screen and (max-width: 760px) {
-  .grid {
+@media only screen and (min-width: 1280px) {
+  .grid-xl {
     display: grid;
   }
-  .grid-auto-flow-cols {
+  .grid-xl-auto-flow-cols {
     grid-auto-flow: column;
   }
-  .grid-auto-cols-auto {
+  .grid-xl-auto-cols-auto {
     grid-auto-columns: auto;
   }
-  .grid-auto-cols-min {
+  .grid-xl-auto-cols-min {
     grid-auto-columns: min-content;
   }
-  .grid-auto-cols-max {
+  .grid-xl-auto-cols-max {
     grid-auto-columns: max-content;
   }
-  .grid-auto-cols {
+  .grid-xl-auto-cols {
     grid-auto-columns: minmax(0, 1fr);
   }
-  .grid-auto-flow-rows {
+  .grid-xl-auto-flow-rows {
     grid-auto-flow: row;
   }
-  .grid-auto-rows-auto {
+  .grid-xl-auto-rows-auto {
     grid-auto-rows: auto;
   }
-  .grid-auto-rows-min {
+  .grid-xl-auto-rows-min {
     grid-auto-rows: min-content;
   }
-  .grid-auto-rows-max {
+  .grid-xl-auto-rows-max {
     grid-auto-rows: max-content;
   }
-  .grid-auto-rows {
+  .grid-xl-auto-rows {
     grid-auto-rows: minmax(0, 1fr);
   }
 
@@ -401,84 +401,205 @@
   }
 
   /* template-columns */
-  .grid-cols-1 {
+  .grid-xl-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
 
-  .grid-cols-2 {
+  .grid-xl-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .grid-cols-3 {
+  .grid-xl-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
-  .grid-cols-4 {
+  .grid-xl-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
-  .grid-cols-5 {
+  .grid-xl-cols-5 {
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }
 
-  .grid-cols-6 {
+  .grid-xl-cols-6 {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 
-  .grid-cols-7 {
+  .grid-xl-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
 
-  .grid-cols-8 {
+  .grid-xl-cols-8 {
     grid-template-columns: repeat(8, minmax(0, 1fr));
   }
 
-  .grid-cols-9 {
+  .grid-xl-cols-9 {
     grid-template-columns: repeat(9, minmax(0, 1fr));
   }
 
-  .grid-cols-10 {
+  .grid-xl-cols-10 {
     grid-template-columns: repeat(10, minmax(0, 1fr));
   }
 
-  .grid-cols-11 {
+  .grid-xl-cols-11 {
     grid-template-columns: repeat(11, minmax(0, 1fr));
   }
 
-  .grid-cols-12 {
+  .grid-xl-cols-12 {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
 
   /* template-rows */
-  .grid-rows-1 {
+  .grid-xl-rows-1 {
     grid-template-rows: repeat(1, minmax(0, 1fr));
   }
 
-  .grid-rows-2 {
+  .grid-xl-rows-2 {
     grid-template-rows: repeat(2, minmax(0, 1fr));
   }
 
-  .grid-rows-3 {
+  .grid-xl-rows-3 {
     grid-template-rows: repeat(3, minmax(0, 1fr));
   }
 
-  .grid-rows-4 {
+  .grid-xl-rows-4 {
     grid-template-rows: repeat(4, minmax(0, 1fr));
   }
 
-  .grid-rows-5 {
+  .grid-xl-rows-5 {
     grid-template-rows: repeat(5, minmax(0, 1fr));
   }
 
-  .grid-rows-6 {
+  .grid-xl-rows-6 {
     grid-template-rows: repeat(6, minmax(0, 1fr));
   }
 
-  .grid-rows-7 {
+  .grid-xl-rows-7 {
     grid-template-rows: repeat(7, minmax(0, 1fr));
   }
 
-  .grid-rows-8 {
+  .grid-xl-rows-8 {
+    grid-template-rows: repeat(8, minmax(0, 1fr));
+  }
+}
+@media only screen and (min-width: 1540px) {
+  .grid-xxl {
+    display: grid;
+  }
+  .grid-xxl-auto-flow-cols {
+    grid-auto-flow: column;
+  }
+  .grid-xxl-auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+  .grid-xxl-auto-cols-min {
+    grid-auto-columns: min-content;
+  }
+  .grid-xxl-auto-cols-max {
+    grid-auto-columns: max-content;
+  }
+  .grid-xxl-auto-cols {
+    grid-auto-columns: minmax(0, 1fr);
+  }
+  .grid-xxl-auto-flow-rows {
+    grid-auto-flow: row;
+  }
+  .grid-xxl-auto-rows-auto {
+    grid-auto-rows: auto;
+  }
+  .grid-xxl-auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+  .grid-xxl-auto-rows-max {
+    grid-auto-rows: max-content;
+  }
+  .grid-xxl-auto-rows {
+    grid-auto-rows: minmax(0, 1fr);
+  }
+
+  .grid-inline {
+    display: inline-grid;
+  }
+
+  /* template-columns */
+  .grid-xxl-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  .grid-xxl-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .grid-xxl-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .grid-xxl-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .grid-xxl-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  .grid-xxl-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
+  .grid-xxl-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+
+  .grid-xxl-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+
+  .grid-xxl-cols-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+
+  .grid-xxl-cols-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+
+  .grid-xxl-cols-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+
+  .grid-xxl-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+
+  /* template-rows */
+  .grid-xxl-rows-1 {
+    grid-template-rows: repeat(1, minmax(0, 1fr));
+  }
+
+  .grid-xxl-rows-2 {
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+  }
+
+  .grid-xxl-rows-3 {
+    grid-template-rows: repeat(3, minmax(0, 1fr));
+  }
+
+  .grid-xxl-rows-4 {
+    grid-template-rows: repeat(4, minmax(0, 1fr));
+  }
+
+  .grid-xxl-rows-5 {
+    grid-template-rows: repeat(5, minmax(0, 1fr));
+  }
+
+  .grid-xxl-rows-6 {
+    grid-template-rows: repeat(6, minmax(0, 1fr));
+  }
+
+  .grid-xxl-rows-7 {
+    grid-template-rows: repeat(7, minmax(0, 1fr));
+  }
+
+  .grid-xxl-rows-8 {
     grid-template-rows: repeat(8, minmax(0, 1fr));
   }
 }