From: Geoff Kimball <geoff@zurb.com>
Date: Mon, 7 Mar 2016 17:50:06 +0000 (-0800)
Subject: Consolidate all media queries into one variable, closes #206
X-Git-Tag: v2.0.0-rc.3~10^2~4
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=3b33a8c918da47e4aa16c22e91177bd37a7f566c;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

Consolidate all media queries into one variable, closes #206
---

diff --git a/scss/_global.scss b/scss/_global.scss
index 1522ab46..2fcad294 100755
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -65,3 +65,7 @@ $global-radius: 3px !default;
 /// Global rounded radius of rounded-corners.
 /// @type Number
 $global-rounded: 500px !default;
+
+/// Global media query to switch from desktop to mobile styles.
+/// @type String
+$global-breakpoint: '(max-width: 580px)';
diff --git a/scss/components/_media-query.scss b/scss/components/_media-query.scss
index 23760505..94420a12 100755
--- a/scss/components/_media-query.scss
+++ b/scss/components/_media-query.scss
@@ -10,11 +10,7 @@
 /// @type Length
 $container-width-small: 95% !default;
 
-/// Small breakpoint.
-/// @type Length
-$small-range: $container-width !default;
-
-@media only screen and (max-width: #{$small-range}) {
+@media only screen and #{$global-breakpoint} {
 
   table.body img {
     width: auto !important;
diff --git a/scss/components/_visibility.scss b/scss/components/_visibility.scss
index 99a38310..b1810103 100644
--- a/scss/components/_visibility.scss
+++ b/scss/components/_visibility.scss
@@ -12,17 +12,16 @@
   mso-hide:all;
   overflow:hidden;
 
-  @media (max-width: 600px) {
+  @media only screen and #{$global-breakpoint} {
     display: block;
   }
 }
 
 .show-for-large {
-  @media (max-width: 600px) {
+  @media only screen and #{$global-breakpoint} {
     display: none;
     width:0;
     mso-hide:all;
     overflow:hidden;
   }
 }
-
diff --git a/testing/src/assets/scss/app.scss b/testing/src/assets/scss/app.scss
index f3f48cb7..00eb7f06 100644
--- a/testing/src/assets/scss/app.scss
+++ b/testing/src/assets/scss/app.scss
@@ -1,7 +1,7 @@
 @import 'settings';
 @import '../../../../scss/foundation';
 
-@media only screen and (max-width: #{$small-range}) {
+@media only screen and #{$global-breakpoint} {
   .small-float-center {
     margin: 0 auto;
     float: none;
@@ -11,7 +11,7 @@
   .small-text-center {
     text-align: center;
   }
-  
+
   .up-3 td {
     width: 45% !important;
   }
@@ -23,4 +23,4 @@
       display: block !important;
     }
   }
-}
\ No newline at end of file
+}