Consolidate all media queries into one variable, closes #206

diff --git a/scss/_global.scss b/scss/_global.scss
index 1522ab46455c02e508a0dd06b09925a5f0986f97..2fcad294222226ecdc8fb0d32580f22077fcaef2 100755 (executable)
--- 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 23760505e7590fea1a89775b804cd09224d3cb12..94420a12e9da629706de9850155a03e7df89d240 100755 (executable)
--- 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 99a38310911e8d46417ed07569c88907a2236693..b1810103900f99004139100356c1609f0cf1d646 100644 (file)
--- 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 f3f48cb79e0b7567a063c3d5e2f8f808b06e66c7..00eb7f06dd7cde020b18161289c1609da647bd14 100644 (file)
--- 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
+}