From: Rob Kirby <robkirby@live.co.uk>
Date: Mon, 8 May 2017 21:14:21 +0000 (+0100)
Subject: Option for responsive gutters
X-Git-Tag: v2.3.0~7^2~6^2
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=refs%2Fpull%2F765%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

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 4f2288a1..971533e2 100755
--- 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 52c94fad..983df61b 100755
--- 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 c990c5e4..d1a8006a 100644
--- 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;