- 1
- convention: '0'
+ # Turning this off since it break if/else statements
brace-style:
- - 1
+ - 0
- style: stroustrup
- allow-single-line: true
leading-underscore: false
empty-line-between-blocks:
- - 1
+ - 0
- ignore-single-line-rulesets: true
extends-before-declarations: 1
no-qualifying-elements:
- 1
- - allow-element-with-attribute: false
- allow-element-with-class: false
+ - allow-element-with-attribute: true
+ allow-element-with-class: true
allow-element-with-id: false
no-trailing-zero: 1
- 1
- convention: '([a-z0-9]+-?)+'
+ # Disabling this for now. Remembering some arbitrary custom sort order is not sustainable
property-sort-order:
- - 1
+ - 0
-
ignore-custom-properties: true
order:
- 'speak'
quotes:
- - 1
+ - 0
- style: single
shorthand-values: 1
@mixin foundation-close-button {
.close-button {
+ // Use by default the placeholder of the default size
+ @extend %zf-close-button--#{$closebutton-default-size};
+
@include close-button;
// Generate a placeholder and a class for each size
@extend %zf-close-button--#{$name};
}
}
-
- // Use by default the placeholder of the default size
- @extend %zf-close-button--#{$closebutton-default-size};
}
}
/// Adds styles that reveal an off-canvas panel.
@mixin off-canvas-reveal(
-$position: left,
-$zindex: $offcanvas-reveal-zindex,
-$content: $maincontent-class,
-$breakpoint: small
+ $position: left,
+ $zindex: $offcanvas-reveal-zindex,
+ $content: $maincontent-class,
+ $breakpoint: small
) {
transform: none;
z-index: $zindex;
@include off-canvas-base;
// Force position absolute for nested off-canvas because fixed doesn't work for push transition within the transform scope.
- @at-root .#{$maincontent-class} & {
- // NOTE: since overlap transition is currently forced if nested, there's no need to force position absolute until nested push transition is supported.
- // position: absolute;
- }
+ // @at-root .#{$maincontent-class} & {
+ // // NOTE: since overlap transition is currently forced if nested, there's no need to force position absolute until nested push transition is supported.
+ // position: absolute;
+ // }
}
// Off-canvas container with absolute position
.flex-video {
@include responsive-embed($ratio: default);
- $ratios: map-remove($responsive-embed-ratios,default);
+ $ratios: map-remove($responsive-embed-ratios, default);
@each $name, $ratio in $ratios {
&.#{$name} {
/// Opacity of a disabled switch.
/// @type Number
-$switch-opacity-disabled: .5 !default;
+$switch-opacity-disabled: 0.5 !default;
/// Cursor for a disabled switch.
/// @type Cursor
@mixin foundation-switch {
// Container class
.switch {
- height: $switch-height;
@include switch-container;
+ height: $switch-height;
}
// <input> element
@mixin -zf-table-unstripe() {
tr {
- border-bottom: 0;
border-bottom: $table-border;
background-color: $table-background;
}
// Max value is 0.2px under the next breakpoint (0.02 / 16 = 0.00125).
// Use a precision under 1px to support browser zoom, but not to low to avoid rounding.
// See https://github.com/foundation/foundation-sites/issues/11313
- $size: -zf-bp-to-em($size) - .00125;
+ $size: -zf-bp-to-em($size) - 0.00125;
@include breakpoint($size down) {
display: none !important;
$upper-bound-size: -zf-map-next($breakpoints, $size);
// more often than not this will be correct, just one time round the loop it won't so set in scope here
- $lower-bound: -zf-bp-to-em($lower-bound-size) - .00125;
+ $lower-bound: -zf-bp-to-em($lower-bound-size) - 0.00125;
// test actual lower-bound-size, if 0 set it to 0em
@if strip-unit($lower-bound-size) == 0 {
$lower-bound: -zf-bp-to-em($lower-bound-size);
$columns: $grid-column-count,
$gutters: $grid-column-gutter
) {
- @include grid-column-size($columns);
- float: $global-left;
-
// Gutters
@include grid-column-gutter($gutters: $gutters);
-
// Position
@include grid-col-pos(auto);
+
+ @include grid-column-size($columns);
+ float: $global-left;
}
/// Creates a grid column row. This is the equivalent of adding `.row` and `.column` to the same element.
/// Border none utility
@mixin border-none {
- border: none !important;
+ border: 0 !important;
}
@mixin foundation-prototype-border-none {
}
@mixin foundation-prototype-font-styling {
- .font-wide{
+ .font-wide {
@include font-wide;
}
@each $size in $breakpoint-classes {
@include breakpoint($size) {
@if $size != $-zf-zero-breakpoint {
- .#{$size}-font-wide{
+ .#{$size}-font-wide {
@include font-wide;
}
// https://get.foundation
// Licensed under MIT Open Source
+// sass-lint:disable mixin-name-format
+
////
/// @group prototype-rotate
////
/// Rotate Mixin: Rotate an element to a certain deg
/// @param {Number} $deg[] Degree of rotation
@mixin rotate($deg) {
- transform:rotate($deg + deg);
+ transform: rotate($deg + deg);
}
/// RotateX Mixin: Rotate an element to a certain deg on X-Axis
/// @param {Number} $deg[] Degree of rotation
@mixin rotateX($deg) {
- transform:rotateX($deg + deg);
+ transform: rotateX($deg + deg);
}
/// RotateY Mixin: Rotate an element to a certain deg on Y-Axis
/// @param {Number} $deg[] Degree of rotation
@mixin rotateY($deg) {
- transform:rotateY($deg + deg);
+ transform: rotateY($deg + deg);
}
/// RotateZ Mixin: Rotate an element to a certain deg on Z-Axis
/// @param {Number} $deg[] Degree of rotation
@mixin rotateZ($deg) {
- transform:rotateZ($deg + deg);
-}
\ No newline at end of file
+ transform: rotateZ($deg + deg);
+}
$background: $prototype-separator-background,
$top: $prototype-separator-margin-top
) {
+ @include clearfix;
text-align: $align !important;
- @include clearfix;
&::after {
@include position(relative);
}
@mixin foundation-prototype-separator {
- .separator-center {
- @include separator(center);
- }
+ .separator-center {
+ @include separator(center);
+ }
.separator-left {
@include separator(left);
@include separator(right);
}
- @if ($prototype-separator-breakpoints) {
+ @if ($prototype-separator-breakpoints) {
// Loop through Responsive Breakpoints
@each $size in $breakpoint-classes {
@include breakpoint($size) {
/// Default value for `prototype-box-shadow`
/// @type Number
-$prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),
- 0 2px 10px 0 rgba(0,0,0,.12) !default;
+$prototype-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !default;
/// Shadow Utility: Adds a light box shadow to an element by default.
/// @param {Number} $shadow [$prototype-box-shadow] Box Shadow of a component
/// @param {String} $dir [] Direction
/// @param {Number} $spacer [] Spacer
@mixin margin-direction($dir, $spacer) {
- @if ($dir == top) {
- @include margin($top: $spacer);
+ @if ($dir == top) {
+ @include margin($top: $spacer);
}
- @else if ($dir == right) {
- @include margin($right: $spacer);
+ @else if ($dir == right) {
+ @include margin($right: $spacer);
}
- @else if ($dir == bottom) {
- @include margin($bottom: $spacer);
+ @else if ($dir == bottom) {
+ @include margin($bottom: $spacer);
}
- @else if ($dir == left) {
- @include margin($left: $spacer);
+ @else if ($dir == left) {
+ @include margin($left: $spacer);
}
- @else if ($dir == horizontal) {
- @include margin($right: $spacer, $left: $spacer);
+ @else if ($dir == horizontal) {
+ @include margin($right: $spacer, $left: $spacer);
}
- @else if ($dir == vertical) {
- @include margin($top: $spacer, $bottom: $spacer);
+ @else if ($dir == vertical) {
+ @include margin($top: $spacer, $bottom: $spacer);
}
}
/// @param {String} $dir [] Direction
/// @param {Number} $spacer [] Spacer
@mixin padding-direction($dir, $spacer) {
- @if ($dir == top) {
- @include padding($top: $spacer);
+ @if ($dir == top) {
+ @include padding($top: $spacer);
}
- @else if ($dir == right) {
- @include padding($right: $spacer);
+ @else if ($dir == right) {
+ @include padding($right: $spacer);
}
- @else if ($dir == bottom) {
- @include padding($bottom: $spacer);
+ @else if ($dir == bottom) {
+ @include padding($bottom: $spacer);
}
- @else if ($dir == left) {
- @include padding($left: $spacer);
+ @else if ($dir == left) {
+ @include padding($left: $spacer);
}
- @else if ($dir == horizontal) {
- @include padding($right: $spacer, $left: $spacer);
+ @else if ($dir == horizontal) {
+ @include padding($right: $spacer, $left: $spacer);
}
- @else if ($dir == vertical) {
- @include padding($top: $spacer, $bottom: $spacer);
+ @else if ($dir == vertical) {
+ @include padding($top: $spacer, $bottom: $spacer);
}
}
@mixin foundation-prototype-spacing {
@for $spacer from 0 through $prototype-spacers-count {
-
+
@each $prop in (margin, padding) {
// All Sides
.#{$prop}-#{$spacer} {
- @if ($prop == margin) {
+ @if ($prop == margin) {
margin: $spacer * $global-margin !important;
}
- @else if ($prop == padding) {
+ @else if ($prop == padding) {
padding: $spacer * $global-padding !important;
}
}
@each $dir in (top, right, bottom, left, horizontal, vertical) {
// Top Side
.#{$prop}-#{$dir}-#{$spacer} {
- @if ($prop == margin) {
+ @if ($prop == margin) {
@include margin-direction($dir, $spacer);
}
@else if ($prop == padding) {
@if ($prototype-spacing-breakpoints) {
@for $spacer from 0 through $prototype-spacers-count {
- // Loop through Responsive Breakpoints
+ // Loop through Responsive Breakpoints
@each $size in $breakpoint-classes {
@include breakpoint($size) {
@if $size != $-zf-zero-breakpoint {
@each $prop in (margin, padding) {
// All Sides
&-#{$prop}-#{$spacer} {
- @if ($prop == margin) {
+ @if ($prop == margin) {
margin: $spacer * $global-margin !important;
}
- @else if ($prop == padding) {
+ @else if ($prop == padding) {
padding: $spacer * $global-padding !important;
}
}
@each $dir in (top, right, bottom, left, horizontal, vertical) {
// Top Side
&-#{$prop}-#{$dir}-#{$spacer} {
- @if ($prop == margin) {
+ @if ($prop == margin) {
@include margin-direction($dir, $spacer);
}
- @else if ($prop == padding) {
+ @else if ($prop == padding) {
@include padding-direction($dir, $spacer);
}
}
@if ($prototype-transformation-breakpoints) {
// Loop through Responsive Breakpoints
- @each $size in $breakpoint-classes {
+ @each $size in $breakpoint-classes {
@include breakpoint($size) {
@each $transformation in $prototype-text-transformation {
@if $size != $-zf-zero-breakpoint {
.#{$size}-text-#{$transformation} {
- @include text-transform($transformation);
- }
+ @include text-transform($transformation);
+ }
}
}
}
// --------------------
$prototype-shadow-breakpoints: $global-prototype-breakpoints;
-$prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),
- 0 2px 10px 0 rgba(0,0,0,.12);
+$prototype-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
// 41. Prototype Sizing
// --------------------
$switch-paddle-offset: 0.25rem;
$switch-paddle-radius: $global-radius;
$switch-paddle-transition: all 0.25s ease-out;
-$switch-opacity-disabled: .5;
+$switch-opacity-disabled: 0.5;
$switch-cursor-disabled: not-allowed;
// 50. Table
// $header-styles map is built from $header-sizes in order to ensure downward compatibility
// when $header-sizes is depreciated, $header-styles needs to get !default values like settings.scss
-@function build_from_header-sizes($header-sizes) {
+@function build-from-header-sizes($header-sizes) {
@warn 'Note, that $header-sizes has been replaced with $header-styles. $header-sizes still works, but it is going to be depreciated.';
$header-styles: ();
@each $size, $headers in $header-sizes {
// If it exists $headers-sizes is used to build $header-styles. See the documentation.
@if variable-exists(header-sizes) {
- $header-styles: build_from_header-sizes($header-sizes);
+ $header-styles: build-from-header-sizes($header-sizes);
}
/// Text rendering method of headers.
cite {
// Extending a class is not recommended.
// TODO: Break the typography-base/typography-helpers separation
- @extend .cite-block;
+ @extend %cite-block;
}
}
// Code
@if ($enable-code-inline == true) {
code {
- @extend .code-inline;
+ @extend %code-inline;
}
}
}
}
- .cite-block {
+ %cite-block {
@include cite-block;
}
- .code-inline {
+ .cite-block {
+ @extend %cite-block;
+ }
+
+ %code-inline {
@include code-style;
@include code-inline;
}
+ .code-inline {
+ @extend %code-inline;
+ }
+
.code-block {
@include code-style;
@include code-block;
/// @returns {Mixed} The number following `$number`, if `$number` was found. If `$number` was not found, or `$number` was the biggest number in the map, returns `null`.
@function -zf-map-next-number($map, $number) {
- $next_number: null;
+ $next-number: null;
@each $k, $v in $map {
- @if type-of($v) == 'number' and $v > $number and ($next_number == null or $v < $next_number) {
- $next_number: $v;
+ @if type-of($v) == 'number' and $v > $number and ($next-number == null or $v < $next-number) {
+ $next-number: $v;
}
}
- @return $next_number;
+ @return $next-number;
}
/// Return a list of our named breakpoints less than $key. Useful for dealing with
/// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero
@function -zf-breakpoints-less-than($key) {
$list: ();
- $found_key: false;
+ $found-key: false;
@each $name in $-zf-breakpoints-keys {
@if ($name == $key) {
- $found_key: true;
+ $found-key: true;
}
- @if not $found_key {
+ @if not $found-key {
$list: append($list, $name);
}
}
////
/// Patch to fix issue #12080
-$primary-color : null !default;
-$secondary-color : null !default;
-$warning-color : null !default;
-$alert-color : null !default;
-$success-color : null !default;
+$primary-color: null !default;
+$secondary-color: null !default;
+$warning-color: null !default;
+$alert-color: null !default;
+$success-color: null !default;
////
////
}
@if ($contrast-warnings and $contrast < 3) {
- @warn "Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}";
+ @warn 'Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}';
}
@return $best;
-@function -zf-flex-justify($text-direction){
+@function -zf-flex-justify($text-direction) {
$-zf-flex-justify: (
'left': if($text-direction == rtl, flex-end, flex-start),
'right': if($text-direction == rtl, flex-start, flex-end),
/// @returns {Number} The product of the exponentiation.
@function pow($base, $exponent, $prec: 16) {
@if (floor($exponent) != $exponent) {
- $prec2 : pow(10, $prec);
+ $prec2: pow(10, $prec);
$exponent: round($exponent * $prec2);
$denominator: gcd($exponent, $prec2);
@return nth-root(pow($base, divide($exponent, $denominator)), divide($prec2, $denominator), $prec);
@else if type-of($fraction) == 'list' {
// "50 of 100", "50/100"...
@if length($fraction) == 3
- and type-of(nth($fraction, 1) == 'number')
- and type-of(nth($fraction, 3) == 'number') {
+ and type-of(nth($fraction, 1) == 'number')
+ and type-of(nth($fraction, 3) == 'number') {
@return (nth($fraction, 1), nth($fraction, 3));
}
}
@return 0;
}
@if $divisor == 0 {
- @error "Cannot divide by 0";
+ @error 'Cannot divide by 0';
}
$remainder: $dividend;
$result: 0;
$quotient: $quotient + 1;
}
$result: $result * 10 + $quotient;
- $factor: $factor * .1;
+ $factor: $factor * 0.1;
$remainder: $remainder * 10;
$precision: $precision - 1;
@if ($precision < 0 and $remainder >= $divisor * 5) {
$dividend-unit: unit($dividend);
$divisor-unit: unit($divisor);
$unit-map: (
- "px": 1px,
- "rem": 1rem,
- "em": 1em,
- "%": 1%
+ 'px': 1px,
+ 'rem': 1rem,
+ 'em': 1em,
+ '%': 1%
);
@if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
$result: $result * map-get($unit-map, $dividend-unit);
@mixin background-triangle($color: $black) {
$rgb: 'rgb%28#{round(red($color))}, #{round(green($color))}, #{round(blue($color))}%29';
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #{$rgb}'></polygon></svg>");
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: #{$rgb}"></polygon></svg>');
- @media screen and (min-width:0\0) {
+ @media screen and (min-width: 0\0) {
@if lightness($color) < 60% {
// White triangle
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg==');
height: 1px #{$important};
padding: 0 #{$important};
overflow: hidden #{$important};
- clip: rect(0,0,0,0) #{$important};
+ clip: rect(0, 0, 0, 0) #{$important};
white-space: nowrap #{$important};
border: 0 #{$important};
}
}
$-zf-size: $bp !global;
- @if ($media-queries == true
- or ($media-queries == 'for-lists' and $-breakpoints-is-a-list)) {
+ @if ($media-queries == true or ($media-queries == 'for-lists' and $-breakpoints-is-a-list)) {
@include breakpoint($bp) {
@content;
}
@function text-inputs($types: (), $modifier: '') {
$return: ();
- $all-types:
- text
- password
- date
- datetime
- datetime-local
- month
- week
- email
- number
- search
- tel
- time
- url
- color;
+ $all-types: text password date datetime datetime-local month week email number search tel time url color;
@if not has-value($types) {
$types: $all-types;
////
$-zf-font-stack: (
- 'georgia': (Georgia, "URW Bookman L", serif),
- 'helvetica': (Helvetica, Arial, "Nimbus Sans L", sans-serif),
- 'lucida-grande': ("Lucida Grande", "Lucida Sans Unicode", "Bitstream Vera Sans", sans-serif),
- 'monospace': ("Courier New", Courier, "Nimbus Sans L", monospace),
- 'system': (-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif),
- 'verdana': (Verdana, Geneva, "DejaVu Sans", sans-serif),
+ 'georgia': (Georgia, 'URW Bookman L', serif),
+ 'helvetica': (Helvetica, Arial, 'Nimbus Sans L', sans-serif),
+ 'lucida-grande': ('Lucida Grande', 'Lucida Sans Unicode', 'Bitstream Vera Sans', sans-serif),
+ 'monospace': ('Courier New', Courier, 'Nimbus Sans L', monospace),
+ 'system': (-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif),
+ 'verdana': (Verdana, Geneva, 'DejaVu Sans', sans-serif),
);
/// Return a font stack list from a map. Equivalent to `map-safe-get($name, $-zf-font-stack)`.
@return $val;
}
@if $length == 2 {
- @return map-get((
- top: nth($val, 1),
- bottom: nth($val, 1),
- left: nth($val, 2),
- right: nth($val, 2),
- ), $side);
+ @return map-get((top: nth($val, 1), bottom: nth($val, 1), left: nth($val, 2), right: nth($val, 2), ), $side);
}
@if $length == 3 {
- @return map-get((
- top: nth($val, 1),
- left: nth($val, 2),
- right: nth($val, 2),
- bottom: nth($val, 3),
- ), $side);
+ @return map-get((top: nth($val, 1), left: nth($val, 2), right: nth($val, 2), bottom: nth($val, 3), ), $side);
}
@if $length == 4 {
- @return map-get((
- top: nth($val, 1),
- right: nth($val, 2),
- bottom: nth($val, 3),
- left: nth($val, 4),
- ), $side);
+ @return map-get((top: nth($val, 1), right: nth($val, 2), bottom: nth($val, 3), left: nth($val, 4), ), $side);
}
}
+// sass-lint:disable no-vendor-prefixes
+
@mixin foundation-normalize() {
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
abbr[title] {
- border-bottom: none; // 1
- text-decoration: underline; // 2
+ border-bottom: 0; // 1
text-decoration: underline dotted; // 2
}
/// @returns {List} The cell flex property value.
@function xy-cell-base($size: full) {
@if ($size == 'auto') {
- @return 1 1 0px;
+ @return 1 1 0;
}
@else if ($size == 'grow') {
@return 1 0 auto;
// Set base styles for "full" only
@if($size == 'full') {
- min-height: 0px;
- min-width: 0px;
+ min-height: 0;
+ min-width: 0;
}
}
.grid-x {
$str: "> .#{$-zf-size}-shrink, > .#{$-zf-size}-full";
@for $i from 1 through $grid-columns {
- $str: $str + ", > .#{$-zf-size}-#{$i}"
+ $str: $str + ", > .#{$-zf-size}-#{$i}";
}
#{$str} {
flex-basis: auto;
$padding-grid: true
) {
- @include -zf-each-breakpoint() {
- @if not($-zf-size == $-zf-zero-breakpoint) {
- }
- }
+ // @include -zf-each-breakpoint() {
+ // @if not($-zf-size == $-zf-zero-breakpoint) {
+ // }
+ // }
.grid-y {
@include xy-grid(vertical, false);
// https://github.com/foundation/foundation-sites/pull/10164
$str: "> .#{$-zf-size}-shrink, > .#{$-zf-size}-full";
@for $i from 1 through $grid-columns {
- $str: $str + ", > .#{$-zf-size}-#{$i}"
+ $str: $str + ", > .#{$-zf-size}-#{$i}";
}
#{$str} {
flex-basis: auto;
@if $vertical-grid {
.grid-y {
&.grid-frame {
- width: auto;
@include xy-grid-frame(true);
+ width: auto;
}
@include -zf-each-breakpoint(false) {
&.#{$-zf-size}-grid-frame {
- width: auto;
@include xy-grid-frame(true);
+ width: auto;
}
}
+// sass-lint:disable no-vendor-prefixes
+
/// Modifies a grid to give it "frame" behavior (no overflow, no wrap, stretch behavior)
///
/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.
/// @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,
- $gutters: $grid-margin-gutters,
- $gutter-type: margin,
- $breakpoint: null,
- $vertical: false
+ $n,
+ $gutters: $grid-margin-gutters,
+ $gutter-type: margin,
+ $breakpoint: null,
+ $vertical: false
) {
$breakpoint: -zf-current-breakpoint($breakpoint, $default: $-zf-zero-breakpoint);
$direction: if($vertical, 'top', $global-left);