fix: calc() in 0px gutters

closes #12326
closes #12325

diff --git a/scss/xy-grid/_cell.scss b/scss/xy-grid/_cell.scss
index 626f430efad4ecfcdff941e0ee0bf8154b29ed07..ddafb3d8aa8b5faea65cf3de1e6f9d5f331ac5af 100644 (file)
--- 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 b0e802abf31935c2a455d7e6099e6f85445f470d..d0269b399ba2b16395b9d65b599b72194530ec20 100644 (file)
--- 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 e52e6d5c08141901dbfe119b9026df5f9759ae85..145cafde2a12483e3af0f4e701ea30923495cedb 100644 (file)
--- 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;