From: Joe Workman <joe@workmanmail.com>
Date: Wed, 17 Nov 2021 20:44:16 +0000 (-0800)
Subject: fix: calc() in 0px gutters
X-Git-Tag: v6.7.5^2~26
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=1d30bf3189b6cf9ebf51a0d87f87ad314a77cdec;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

fix: calc() in 0px gutters

closes #12326
closes #12325
---

diff --git a/scss/xy-grid/_cell.scss b/scss/xy-grid/_cell.scss
index 626f430ef..ddafb3d8a 100644
--- a/scss/xy-grid/_cell.scss
+++ b/scss/xy-grid/_cell.scss
@@ -100,7 +100,11 @@
     $responsive-css-sizes: ();
 
     @each $bp, $mg in $margin-gutter {
-      $size-css: if($mg == 0, $size-raw, calc(#{$size-raw} - #{rem-calc($mg)}));
+      $mgc: rem-calc($mg);
+      @if $mgc == 0 {
+        $mgc: 0rem;
+      }
+      $size-css: if($mg == 0, $size-raw, calc(#{$size-raw} - #{$mg}));
       $responsive-css-sizes: map-merge($responsive-css-sizes, ($bp: $size-css));
     }
 
@@ -108,7 +112,12 @@
   }
   // Otherwise, return a single CSS size.
   @else {
-    $css-size: if($margin-gutter == 0, $size-raw, calc(#{$size-raw} - #{rem-calc($margin-gutter)}));
+    // Make sure that 0 is translated in 0rem for calc()
+    $mgc: rem-calc($margin-gutter);
+    @if $mgc == 0 {
+      $mgc: 0rem;
+    }
+    $css-size: if($margin-gutter == 0, $size-raw, calc(#{$size-raw} - #{$mgc}));
     @return $css-size;
   }
 }
diff --git a/scss/xy-grid/_frame.scss b/scss/xy-grid/_frame.scss
index b0e802abf..d0269b399 100644
--- a/scss/xy-grid/_frame.scss
+++ b/scss/xy-grid/_frame.scss
@@ -35,10 +35,18 @@
       @if $vertical == true {
         $unit: if($nested == true, 100%, 100vh);
         $gutter: rem-calc($gutter);
+        // Make sure that 0 is translated in 0rem for calc()
+        @if $gutter == 0 {
+          $gutter: 0rem;
+        }
         height: calc(#{$unit} + #{$gutter});
       } @else {
         $unit: if($nested == true, 100%, 100vw);
         $gutter: rem-calc($gutter);
+        // Make sure that 0 is translated in 0rem for calc()
+        @if $gutter == 0 {
+          $gutter: 0rem;
+        }
         width: calc(#{$unit} + #{$gutter});
       }
     }
diff --git a/scss/xy-grid/_position.scss b/scss/xy-grid/_position.scss
index e52e6d5c0..145cafde2 100644
--- a/scss/xy-grid/_position.scss
+++ b/scss/xy-grid/_position.scss
@@ -25,7 +25,11 @@
 
   $offset: $size;
   @if ($gutter-type == 'margin') {
+    // Make sure that 0 is translated in 0rem for calc()
     $gutter: rem-calc(xy-cell-gutters($gutters, $breakpoint));
+    @if $gutter == 0 {
+      $gutter: 0rem;
+    }
     $offset: if($gutter == 0, $size, calc(#{$size} + #{$gutter} / 2));
   }
   @return $offset;