Add reset utils

arnars · Mar 30, 2021 · 40b4ead · 40b4ead
1 parent b2a7dc2
commit 40b4ead
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -153,6 +153,12 @@ module.exports = {
 .indent-right-half {
     /* Indentation for columns - Half width of all columns */
 }
+.indent-left-0 {
+    /* Indentation for columns - Reset indentation */
+}
+.indent-right-0 {
+    /* Indentation for columns - Reset indentation */
+}
 ```
 
 ### Additional classes - tooling

diff --git a/index.js b/index.js
@@ -7,7 +7,7 @@ const remInPx = (num, name = false) => ({
 const defaultOptions = {
     screens: [null, 'md', 'lg', '2xl'],
     columns: [4, 6, 12, 12],
-    pageWidths: ['100vw', '100vw', '100vw', 1440],
+    pageWidths: ['100vw', '100vw', '98vw', 1440],
     columnGaps: [12, 12, 12, 12],
     pageGaps: [12, 12, 12, 12],
     pageMaxWidth: 1440,
@@ -72,6 +72,29 @@ module.exports = plugin.withOptions(
                             {}
                         ),
                     },
+                    '.nested-row': {
+                        display: 'flex',
+                        ...mediaQueries.reduce(
+                            (acc, item, index) => ({
+                                ...acc,
+                                [item]: {
+                                    marginLeft: `-${
+                                        options.columnGaps[index] / 16
+                                    }rem`,
+                                    marginRight: `-${
+                                        options.columnGaps[index] / 16
+                                    }rem`,
+                                },
+                            }),
+                            {}
+                        ),
+                    },
+                    '.indent-right-0': {
+                        marginRight: 0,
+                    },
+                    '.indent-left-0': {
+                        marginLeft: 0,
+                    },
                 },
                 { variants: ['responsive'] }
             );