Option for responsive gutters

Added $global-gutter-small var to settings and media-query to allow for
different gutter sizes on mobile and desktop

diff --git a/scss/_global.scss b/scss/_global.scss
index 4f2288a1667c5112237a3d070eb7322b71c9370c..971533e2fd04bd7447a62e57837a89c39c348a34 100755 (executable)
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -62,6 +62,10 @@ $global-width-small: 95% !default;
 /// @type length
 $global-gutter: 16px !default;
 
+/// Gutter for grid elements on small screens.
+/// @type length
+$global-gutter-small: $global-gutter !default;
+
 /// Body background color.
 /// @type Length
 $body-background: $light-gray !default;

diff --git a/scss/components/_media-query.scss b/scss/components/_media-query.scss
index 52c94fad18c389aba9c975294bf940a09b37121b..983df61b7df012f8cea3b41ff6c8e0c200c3aeee 100755 (executable)
--- a/scss/components/_media-query.scss
+++ b/scss/components/_media-query.scss
@@ -28,8 +28,8 @@
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    padding-left: $global-gutter !important;
-    padding-right: $global-gutter !important;
+    padding-left: $global-gutter-small !important;
+    padding-right: $global-gutter-small !important;
 
     // Nested columns won't double the padding
     .column,

diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss
index c990c5e4f8466cb77168269b75b506164ed685e6..d1a8006abe69bbd44a21a8ea6bddfda2d7592853 100644 (file)
--- a/scss/settings/_settings.scss
+++ b/scss/settings/_settings.scss
@@ -30,6 +30,7 @@ $pre-color: #ff6908;
 $global-width: 580px;
 $global-width-small: 95%;
 $global-gutter: 16px;
+$global-gutter-small: $global-gutter;
 $body-background: $light-gray;
 $container-background: $white;
 $global-padding: 16px;