Bugfix: zen-grid-item-width() returns wrong width when box-sizing is …

…content-box
JohnAlbin · May 30, 2012 · bfe88ec · bfe88ec
1 parent abd583b
commit bfe88ec
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 24 deletions.
diff --git a/stylesheets/zen/_grids.scss b/stylesheets/zen/_grids.scss
@@ -95,6 +95,9 @@ $zen-reverse-all-floats: false !default;
   // Calculate the unit width.
   $unit-width: zen-unit-width($column-count, $grid-width);
 
+  // Calculate the item's width.
+  $width: zen-grid-item-width($column-span, $column-count, $gutter-width, $grid-width, $box-sizing);
+
   // Determine the float direction and its reverse.
   $dir: $float-direction;
   @if $reverse-all-floats {
@@ -103,15 +106,6 @@ $zen-reverse-all-floats: false !default;
   $rev: zen-direction-flip($dir);
 
   float: $dir;
-  $width: $column-span * $unit-width;
-  @if $box-sizing == content-box {
-    @if not comparable($width, $gutter-width) {
-      $units-gutter: unit($gutter-width);
-      $units-grid: unit($grid-width);
-      @warn "The layout cannot be calculated correctly; when using box-sizing: content-box, the units of the gutter (#{$units-gutter} did not match the units of the grid width (#{$units-grid}).";
-    }
-    $width: $width - $gutter-width;
-  }
   width: $width;
   margin: {
     #{$dir}: ($column-position - 1) * $unit-width;
@@ -266,15 +260,7 @@ $zen-reverse-all-floats: false !default;
   $rev: zen-direction-flip($dir);
 
   // Calculate the item's width.
-  $width: zen-grid-item-width($column-span, $columns, $grid-width);
-  @if $box-sizing == content-box {
-    @if not comparable($width, $gutter-width) {
-      $units-gutter: unit($gutter-width);
-      $units-grid: unit($grid-width);
-      @warn "The layout cannot be calculated correctly; when using box-sizing: content-box, the units of the gutter (#{$units-gutter} did not match the units of the grid width (#{$units-grid}).";
-    }
-    $width: $width - $gutter-width;
-  }
+  $width: zen-grid-item-width($column-span, $columns, $gutter-width, $grid-width, $box-sizing);
   width: $width;
 
   // Auto-apply the unit base mixin.
@@ -337,9 +323,20 @@ $zen-reverse-all-floats: false !default;
 @function zen-grid-item-width (
   $column-span,
   $column-count: $zen-column-count,
-  $grid-width: $zen-grid-width
+  $gutter-width: $zen-gutter-width,
+  $grid-width: $zen-grid-width,
+  $box-sizing: $zen-box-sizing
 ) {
-  @return $column-span * zen-unit-width($column-count, $grid-width);
+  $width: $column-span * zen-unit-width($column-count, $grid-width);
+  @if $box-sizing == content-box {
+    @if not comparable($width, $gutter-width) {
+      $units-gutter: unit($gutter-width);
+      $units-grid: unit($grid-width);
+      @warn "The layout cannot be calculated correctly; when using box-sizing: content-box, the units of the gutter (#{$units-gutter} did not match the units of the grid width (#{$units-grid}).";
+    }
+    $width: $width - $gutter-width;
+  }
+  @return $width;
 }
 
 // Returns the opposite direction, given "left" or "right".

diff --git a/templates/unit-tests/sass/function-zen-grid-item-width.scss b/templates/unit-tests/sass/function-zen-grid-item-width.scss
@@ -27,6 +27,12 @@
   width: zen-grid-item-width(2, 5);
   $zen-grid-width: 100%;
 
-  /* Test zen-grid-item-width(2, 5, 100px) */
-  width: zen-grid-item-width(2, 5, 100px);
+  /* Test zen-grid-item-width(2, 5, $grid-width: 1000px) */
+  width: zen-grid-item-width(2, 5, $grid-width: 1000px);
+
+  /* Test zen-grid-item-width(2, 5, $grid-width: 1000px, $box-sizing: content-box) */
+  width: zen-grid-item-width(2, 5, $grid-width: 1000px, $box-sizing: content-box);
+
+  /* Test zen-grid-item-width(2, 5, $gutter-width: 10px, $grid-width: 1000px, $box-sizing: content-box) */
+  width: zen-grid-item-width(2, 5, $gutter-width: 10px, $grid-width: 1000px, $box-sizing: content-box);
 }
diff --git a/templates/unit-tests/test-results/function-zen-grid-item-width.css b/templates/unit-tests/test-results/function-zen-grid-item-width.css
@@ -14,6 +14,10 @@
   width: 100px;
   /* Test zen-grid-item-width(2, 5) with $zen-grid-width: 100px */
   width: 40px;
-  /* Test zen-grid-item-width(2, 5, 100px) */
-  width: 40px;
+  /* Test zen-grid-item-width(2, 5, $grid-width: 1000px) */
+  width: 400px;
+  /* Test zen-grid-item-width(2, 5, $grid-width: 1000px, $box-sizing: content-box) */
+  width: 380px;
+  /* Test zen-grid-item-width(2, 5, $gutter-width: 10px, $grid-width: 1000px, $box-sizing: content-box) */
+  width: 390px;
 }