From: Geoff Kimball <geoff@zurb.com>
Date: Mon, 7 Mar 2016 17:57:37 +0000 (-0800)
Subject: Rename $container-width to $global-width to be consistent with Foundation for Sites... 
X-Git-Tag: v2.0.0-rc.3~10^2~2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=c4b7e256b9701f00879dd69cbf4d8a8611303d16;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

Rename $container-width to $global-width to be consistent with Foundation for Sites, and move variables out of the media queyr file
---

diff --git a/scss/_global.scss b/scss/_global.scss
index 2fcad294..5907042b 100755
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -50,9 +50,13 @@ $white: #fefefe !default;
 /// @type Color
 $pre-color: #ff6908 !default;
 
-/// Global width of the container.
+/// Width of the container.
 /// @type Number
-$container-width: 580px !default;
+$global-width: 580px !default;
+
+/// Width of the container on small screens.
+/// @type Length
+$global-width-small: 95% !default;
 
 /// Color for the container background
 /// @type Color
diff --git a/scss/components/_media-query.scss b/scss/components/_media-query.scss
index 94420a12..9d625476 100755
--- a/scss/components/_media-query.scss
+++ b/scss/components/_media-query.scss
@@ -6,12 +6,7 @@
 /// @group media-query
 ////
 
-/// Container width for small screens.
-/// @type Length
-$container-width-small: 95% !default;
-
 @media only screen and #{$global-breakpoint} {
-
   table.body img {
     width: auto !important;
     height: auto !important;
@@ -22,7 +17,7 @@ $container-width-small: 95% !default;
   }
 
   table.body .container {
-    width: $container-width-small !important;
+    width: $global-width-small !important;
   }
 
   //If it supports border-box, why not? Am I right?
diff --git a/scss/components/_normalize.scss b/scss/components/_normalize.scss
index 4df3508d..925ac173 100755
--- a/scss/components/_normalize.scss
+++ b/scss/components/_normalize.scss
@@ -65,7 +65,7 @@ img {
 
 center {
   width: 100%;
-  min-width: $container-width;
+  min-width: $global-width;
 }
 
 a img {
diff --git a/scss/grid/_block-grid.scss b/scss/grid/_block-grid.scss
index b1c24646..b46c749f 100755
--- a/scss/grid/_block-grid.scss
+++ b/scss/grid/_block-grid.scss
@@ -16,7 +16,7 @@ $block-grid-gutter: $grid-column-gutter !default;
 
 .block-grid {
   width: 100%;
-  max-width: $container-width;
+  max-width: $global-width;
 
   td {
     display: inline-block;
@@ -27,6 +27,6 @@ $block-grid-gutter: $grid-column-gutter !default;
 // Sizing classes
 @for $i from 2 through $block-grid-max {
   .up-#{$i} td {
-    width: floor(($container-width - $i * $block-grid-gutter) / $i) !important;
+    width: floor(($global-width - $i * $block-grid-gutter) / $i) !important;
   }
 }
diff --git a/scss/grid/_grid.scss b/scss/grid/_grid.scss
index 02d61c78..9417b570 100755
--- a/scss/grid/_grid.scss
+++ b/scss/grid/_grid.scss
@@ -46,7 +46,7 @@ table {
   &.container {
     background: $container-background-color;
 
-    width: $container-width;
+    width: $global-width;
     margin: 0 auto;
     text-align: inherit;
   }
@@ -90,7 +90,7 @@ th.column {
 @for $i from 1 through $grid-column-count {
   td.large-#{$i},
   th.large-#{$i} {
-    width: -zf-grid-calc-px($i, $grid-column-count, $container-width);
+    width: -zf-grid-calc-px($i, $grid-column-count, $global-width);
     padding-left: $grid-column-gutter / 2;
     padding-right: $grid-column-gutter / 2;
   }
@@ -111,7 +111,7 @@ th.column {
     th.large-#{$i} {
       padding-right: 0;
       padding-left: 0;
-      width: -zf-grid-calc-px($i, $grid-column-count, $container-width) + $grid-column-gutter;
+      width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $grid-column-gutter;
     }
 
     //Gotta give it that extra love for the first and last columns.
@@ -119,14 +119,14 @@ th.column {
     th.large-#{$i}.first,
     td.large-#{$i}.last,
     th.large-#{$i}.last {
-      width: -zf-grid-calc-px($i, $grid-column-count, $container-width) + ($grid-column-gutter * 1.5);
+      width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + ($grid-column-gutter * 1.5);
     }
   }
 }
 
 @for $i from 1 through $grid-column-count {
   td.large-#{$i} center {
-    min-width: -zf-grid-calc-px($i, $grid-column-count, $container-width);
+    min-width: -zf-grid-calc-px($i, $grid-column-count, $global-width);
   }
 }
 
@@ -147,7 +147,7 @@ th.column {
   th.large-offset-#{$i}.first,
   th.large-offset-#{$i}.last {
     //1.5 takes in effect a whole empty cell.
-    padding-left: -zf-grid-calc-px($i, $grid-column-count, $container-width) + $grid-column-gutter * 2;
+    padding-left: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $grid-column-gutter * 2;
   }
 }
 
diff --git a/testing/src/assets/scss/_settings.scss b/testing/src/assets/scss/_settings.scss
index 5076628c..8d6d0e7c 100644
--- a/testing/src/assets/scss/_settings.scss
+++ b/testing/src/assets/scss/_settings.scss
@@ -6,13 +6,12 @@
 //   1. Global
 //   2. Grid
 //   3. Block Grid
-//   4. Media Query
+//   4. Thumbnial
 //   5. Typography
 //   6. Button
 //   7. Callout
 //   8. Inline List
 //   9. Normalize
-//  10. Thumbnial
 
 
 // 1. Global
@@ -29,10 +28,12 @@ $dark-gray: #8a8a8a;
 $black: #0a0a0a;
 $white: #fefefe;
 $pre-color: #ff6908;
-$container-width: 580px;
+$global-width: 580px;
+$global-width-small: 95%;
 $container-background-color: $white;
 $global-radius: 3px;
 $global-rounded: 500px;
+$global-breakpoint: '(max-width: 580px)';
 
 // 2. Grid
 // -------
@@ -50,11 +51,10 @@ $body-background-color: $light-gray;
 $block-grid-max: 8;
 $block-grid-gutter: $grid-column-gutter;
 
-// 4. Media Query
-// --------------
+// 4. Thumbnial
+// ------------
 
-$container-width-small: 95%;
-$small-range: $container-width;
+$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
 
 // 5. Typography
 // -------------
@@ -128,8 +128,3 @@ $menu-simple-item-spacing: 10px;
 $hr-background: $medium-gray;
 $hr-height: 1px;
 
-// 10. Thumbnial
-// -------------
-
-$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
-