@net7/components 3.0.2-rc.2

package/src/lib/styles/utilities/_grids.scss

@@ -0,0 +1,361 @@
+/**
+ * GRIDS
+ *
+ * Helper class to display items feed in grids.
+ * Apply the class to the container of the griddable elements (like cards). Direct
+ * descendants will be gridded.
+ */
+
+/* ------------------------------------ *\
+   #GRIDS
+\* ------------------------------------ */
+/* General grid setting */
+[class*="n7-grid-"],
+[class^="n7-grid-"] {
+    display: flex;
+    flex-wrap: wrap;
+
+    > * {
+        margin-bottom: $grid-gutter-v;
+        box-sizing: border-box;
+    }
+}
+
+/* 6 */
+.n7-grid-6 {
+    > * {
+        width: calc( ( (100% - 6px) - ( #{$grid-gutter-h} * 5) ) / 6 );
+        margin-right: $grid-gutter-h;
+        
+        &:nth-of-type(6n+6) {
+            margin-right: 0;
+        }
+    }
+
+    // display: grid;
+    // grid-template-columns: repeat(6, 1fr);
+    // grid-column-gap: $grid-gutter-h;
+    // grid-row-gap: $grid-gutter-v;
+}
+
+/* 5 */
+.n7-grid-5 {
+    > * {
+        width: calc( ( (100% - 5px) - ( #{$grid-gutter-h} * 4) ) / 5 );
+        margin-right: $grid-gutter-h;
+        
+        &:nth-of-type(5n+5) {
+            margin-right: 0;
+        }
+    }
+
+    // display: grid;
+    // grid-template-columns: repeat(5, 1fr);
+    // grid-column-gap: $grid-gutter-h;
+    // grid-row-gap: $grid-gutter-v;
+}
+
+/* 4 */
+.n7-grid-4 {
+    > * {
+        width: calc( ( (100% - 4px) - ( #{$grid-gutter-h} * 3) ) / 4 );
+        margin-right: $grid-gutter-h;
+        
+        &:nth-of-type(4n+4) {
+            margin-right: 0;
+        }
+    }
+
+    // display: grid;
+    // grid-template-columns: repeat(4, 1fr);
+    // grid-column-gap: $grid-gutter-h;
+    // grid-row-gap: $grid-gutter-v;
+}
+
+/* 3 */
+.n7-grid-3 {
+    > * {
+        width: calc( ( (100% - 3px) - ( #{$grid-gutter-h} * 2) ) / 3 );
+        margin-right: $grid-gutter-h;
+
+        &:nth-of-type(3n+3) {
+            margin-right: 0;
+        }
+    }
+
+    // display: grid;
+    // grid-template-columns: repeat(3, 1fr);
+    // grid-column-gap: $grid-gutter-h;
+    // grid-row-gap: $grid-gutter-v;
+}
+
+/* 2 */
+.n7-grid-2 {
+    > * {
+        width: calc( ( (100% - 2px) - ( #{$grid-gutter-h} * 1) ) / 2 );
+        margin-right: $grid-gutter-h;
+
+        &:nth-of-type(2n+2) {
+            margin-right: 0;
+        }
+    }
+
+    // display: grid;
+    // grid-template-columns: repeat(2, 1fr);
+    // grid-column-gap: $grid-gutter-h;
+    // grid-row-gap: $grid-gutter-v;
+}
+
+/* 1 */
+.n7-grid-1 {
+    > * {
+        width: 100%;
+        margin-right: 0;
+
+        &:nth-of-type(1n) {
+            margin-right: 0;
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@media all and (max-width: $breakpoint-laptop) {
+}
+
+@media all and (max-width: $breakpoint-ipad-portrait) {
+
+    /* 6 */
+    .n7-grid-6 {
+        > * {
+            width: calc( ( (100% - 3px) - ( #{$grid-gutter-h} * 2) ) / 3 );
+            margin-right: $grid-gutter-h;
+            
+            &:nth-of-type(1n) {
+                margin-right: $grid-gutter-h;
+            }
+    
+            &:nth-of-type(3n+3) {
+                margin-right: 0;
+            }
+        }
+    }
+
+    /* 5 */
+    .n7-grid-5 {
+        > * {
+            width: calc( ( (100% - 3px) - ( #{$grid-gutter-h} * 2) ) / 3 );
+            margin-right: $grid-gutter-h;
+            
+            &:nth-of-type(1n) {
+                margin-right: $grid-gutter-h;
+            }
+    
+            &:nth-of-type(3n+3) {
+                margin-right: 0;
+            }
+        }
+    }
+    
+    /* 4 */
+    .n7-grid-4 {
+        > * {
+            width: calc( ( (100% - 3px) - ( #{$grid-gutter-h} * 2) ) / 3 );
+            margin-right: $grid-gutter-h;
+            
+            &:nth-of-type(1n) {
+                margin-right: $grid-gutter-h;
+            }
+    
+            &:nth-of-type(3n+3) {
+                margin-right: 0;
+            }
+        }
+    }
+
+    /* 3 */
+    .n7-grid-3 {
+        > * {
+            width: calc( ( (100% - 2px) - ( #{$grid-gutter-h} * 1) ) / 2 );
+            margin-right: $grid-gutter-h;
+
+            &:nth-of-type(1n) {
+                margin-right: $grid-gutter-h;
+            }
+
+            &:nth-of-type(2n+2) {
+                margin-right: 0;
+            }
+        }
+    }
+
+}
+
+@media all and (max-width: $breakpoint-smartphone-landscape) {
+
+    /* 6 */
+    .n7-grid-6 {
+        > * {
+            width: calc( ( (100% - 2px) - ( #{$grid-gutter-h} * 1) ) / 2 );
+            margin-right: $grid-gutter-h;
+
+            &:nth-of-type(1n) {
+                margin-right: $grid-gutter-h;
+            }
+
+            &:nth-of-type(2n+2) {
+                margin-right: 0;
+            }
+        }
+    }
+
+    /* 5 */
+    .n7-grid-5 {
+        > * {
+            width: calc( ( (100% - 2px) - ( #{$grid-gutter-h} * 1) ) / 2 );
+            margin-right: $grid-gutter-h;
+
+            &:nth-of-type(1n) {
+                margin-right: $grid-gutter-h;
+            }
+
+            &:nth-of-type(2n+2) {
+                margin-right: 0;
+            }
+        }
+    }
+
+    /* 4 */
+    .n7-grid-4 {
+        > * {
+            width: calc( ( (100% - 2px) - ( #{$grid-gutter-h} * 1) ) / 2 );
+            margin-right: $grid-gutter-h;
+
+            &:nth-of-type(1n) {
+                margin-right: $grid-gutter-h;
+            }
+
+            &:nth-of-type(2n+2) {
+                margin-right: 0;
+            }
+        }
+    }
+
+    /* 3 */
+    .n7-grid-3 {
+        > * {
+            width: 100%;
+            margin-right: 0;
+
+            &:nth-of-type(1n) {
+                margin-right: 0;
+            }
+        }
+    }
+
+    /* 2 */
+    .n7-grid-2 {
+        > * {
+            width: 100%;
+            margin-right: 0;
+
+            &:nth-of-type(1n) {
+                margin-right: 0;
+            }
+        }
+    }
+
+}
+
+@media all and (max-width: $breakpoint-smartphone-portrait) {
+
+    /* 6 */
+    .n7-grid-6 {
+        > * {
+            width: 100%;
+            margin-right: 0;
+
+            &:nth-of-type(1n) {
+                margin-right: 0;
+            }
+        }
+    }
+
+    /* 5 */
+    .n7-grid-5 {
+        > * {
+            width: 100%;
+            margin-right: 0;
+
+            &:nth-of-type(1n) {
+                margin-right: 0;
+            }
+        }
+    }
+
+    /* 4 */
+    .n7-grid-4 {
+        > * {
+            width: 100%;
+            margin-right: 0;
+
+            &:nth-of-type(1n) {
+                margin-right: 0;
+            }
+        }
+    }
+
+}
+
+/* Retina */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+}
+
+
+/* ------------------------------------ *\
+   #PRINT
+\* ------------------------------------ */
+@media print {
+
+    [class*="n7-grid-"],
+    [class^="n7-grid-"] {
+        display: block;
+        float: none;
+        clear: both;
+        @include consistent;
+    }
+    
+    /* 4 */
+    .n7-grid-4 > * {
+        float: left;
+        width: calc( ( (100% - 1mm) - ( #{$grid-gutter-h} * 3) ) / 4 );
+        margin-right: $grid-gutter-h !important;
+        
+        &:nth-of-type(4n+4) {
+            margin-right: 0 !important;
+        }
+    }
+
+    .n7-grid-3 > * {
+        float: left;
+        width: calc( ( (100% - 1mm) - ( #{$grid-gutter-h} * 2) ) / 3 );
+        margin-right: $grid-gutter-h !important;
+        
+        &:nth-of-type(3n+3) {
+            margin-right: 0 !important;
+        }
+    }
+    
+    .n7-grid-2 > * {
+        float: left;
+        width: calc( ( (100% - 1mm) - ( #{$grid-gutter-h} * 1) ) / 2 );
+        margin-right: $grid-gutter-h !important;
+    
+        &:nth-of-type(2n+2) {
+            margin-right: 0 !important;
+        }
+    }
+
+}