feat: refactor mixin "xy-cell-offset()" and add corresponding function

Changes:
- Add function `xy-cell-offset()`: Returns the appropriate CSS value to offset a cell.
- Refactor mixin `xy-cell-offset()` to use its corresponding function.

**BREAKING CHANGE**: The `$breakpoint` argument in the `xy-cell-offset()` mixin does not support raw value anymore. Use `$gutters` instead.

diff --git a/scss/xy-grid/_classes.scss b/scss/xy-grid/_classes.scss
index 5638ceb0bca9c0760faa0c987475e27d7d38ecfe..7d0ada778258ca342f62052e9a0d36a1795d1228 100644 (file)
--- a/scss/xy-grid/_classes.scss
+++ b/scss/xy-grid/_classes.scss
@@ -250,11 +250,11 @@
       $o: $i - 1;
 
       .#{$-zf-size}-offset-#{$o} {
-        @include xy-cell-offset($o, $gutters: $grid-padding-gutters, $gutter-type: padding, $breakpoint: $-zf-size);
+        @include xy-cell-offset($o, $gutters: $grid-padding-gutters, $gutter-type: padding);
       }
 
       .grid-margin-x > .#{$-zf-size}-offset-#{$o} {
-        @include xy-cell-offset($o, $breakpoint: $-zf-size);
+        @include xy-cell-offset($o);
       }
     }
   }

diff --git a/scss/xy-grid/_position.scss b/scss/xy-grid/_position.scss
index 1d4222228b4e037be99800c3fa7bb8850139d168..8acd7918ae0df4beb8f074601e50c2bf67dd8b7b 100644 (file)
--- a/scss/xy-grid/_position.scss
+++ b/scss/xy-grid/_position.scss
@@ -6,12 +6,37 @@
 /// @group xy-grid
 ////
 
+/// Returns the appropriate CSS value to offset a cell.
+///
+/// @param {Number|List} $n - Size to offset by. You can pass in any value accepted by the `xy-cell()` mixin, such as `6`, `50%`, or `1 of 2`.
+/// @param {Number|Map} $gutters [$grid-margin-gutters] Map of gutters or single value to use for responsive gutters.
+/// @param {Keyword} $gutter-type [margin] The type of gutter to use. Can be `margin` or `padding`
+/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
+///
+/// @returns {Number|String} The cell offset property value.
+@function xy-cell-offset(
+  $n,
+  $gutters: $grid-margin-gutters,
+  $gutter-type: margin,
+  $breakpoint: null
+) {
+  $breakpoint: -zf-current-breakpoint($breakpoint, $default: $-zf-zero-breakpoint);
+  $size: xy-cell-size($n);
+
+  $offset: $size;
+  @if ($gutter-type == 'margin') {
+    $gutter: rem-calc(xy-cell-gutters($gutters, $breakpoint) / 2);
+    $offset: calc(#{$size} + #{$gutter});
+  }
+  @return $offset;
+}
+
 /// Offsets a column to the right/bottom by `$n` columns.
 ///
 /// @param {Number|List} $n - Size to offset by. You can pass in any value accepted by the `xy-cell()` mixin, such as `6`, `50%`, or `1 of 2`.
 /// @param {Number|Map} $gutters [$grid-margin-gutters] Map of gutters or single value to use for responsive gutters.
 /// @param {Keyword} $gutter-type [margin] The type of gutter to use. Can be `margin` or `padding`
-/// @param {Number|Array|Keyword} $breakpoint [null] - Single value, breakpoint name, or list of breakpoint names to use for `$gutters` (see `-zf-breakpoint-value()`). If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
+/// @param {Number|Array|Keyword} $breakpoint [null] - Breakpoint to use for `$gutters`. It can be a breakpoint name, list of breakpoints or `auto` for all breakpoints. If a list is given, media-queries will be generated. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
 /// @param {Boolean} $vertical [false] Sets the direction of the offset. If set to true will apply margin-top instead.
 @mixin xy-cell-offset(
  $n,
@@ -20,13 +45,11 @@
  $breakpoint: null,
  $vertical: false
 ) {
-  $direction: if($vertical, 'top', $global-left);
   $breakpoint: -zf-current-breakpoint($breakpoint, $default: $-zf-zero-breakpoint);
+  $direction: if($vertical, 'top', $global-left);
 
-  @include -zf-breakpoint-value($breakpoint, $gutters) {
-    $gutter: rem-calc($-zf-bp-value) / 2;
-    $size: if($gutter-type == 'margin', calc(#{xy-cell-size($n)} + #{$gutter}), #{xy-cell-size($n)});
-
-    margin-#{$direction}: #{$size};
+  @include -zf-each-breakpoint-in($breakpoint, $media-queries: 'for-lists') {
+    $offset: xy-cell-offset($n, $gutters, $gutter-type);
+    margin-#{$direction}: #{$offset};
   }
 }