@elliemae/ds-basic 3.22.0-rc.7 → 3.22.0-rc.8

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/grid/xy-grid/_cell.scss

@@ -9,14 +9,18 @@
 /// Calculate the percentage size of a cell.
 ///
 /// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2 or 1/3.
-@function xy-cell-size($size: $grid-columns) {
+@function xy-cell-size(
+  $size: $grid-columns
+) {
   // Parsing percents, decimals, n of n and number counts
   @if type-of($size) == 'number' {
     @if unit($size) == '%' {
       $size: $size;
-    } @else if $size < 1 {
+    }
+    @else if $size < 1 {
       $size: percentage($size);
-    } @else {
+    }
+    @else {
       $size: percentage($size / $grid-columns);
     }
   }
@@ -25,7 +29,8 @@
   @else if type-of($size) == 'list' {
     @if length($size) != 3 {
       @error 'Wrong syntax for xy-cell-size(). Use the format "n of n" or "n/n".';
-    } @else {
+    }
+    @else {
       $size: percentage(nth($size, 1) / nth($size, 3));
     }
   }
@@ -41,16 +46,19 @@
 ///
 /// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink` or `grow`.
 @mixin xy-cell-base($size: full) {
-  @if ($size == 'full') {
+  @if($size == 'full') {
     // This is the base style, all others inherit from it
     flex: 0 0 auto;
     min-height: 0px;
     min-width: 0px;
-  } @else if ($size == 'auto') {
+  }
+  @else if ($size == 'auto') {
     flex: 1 1 0px; // sass-lint:disable-line zero-unit
-  } @else if ($size == 'shrink') {
+  }
+  @else if ($size == 'shrink') {
     flex: 0 0 auto;
-  } @else if ($size == 'grow') {
+  }
+  @else if ($size == 'grow') {
     flex: 1 0 auto;
   }
 }
@@ -67,15 +75,18 @@
 // Sets our cell widths or heights depending on gutter type.
 @mixin -xy-cell-properties($size, $margin-gutter, $vertical) {
   $direction: if($vertical == true, height, width);
-  @if ($size == 'full') {
+  @if($size == 'full') {
     $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));
     #{$direction}: $val;
-  } @else if ($size == 'auto') {
+  }
+  @else if ($size == 'auto') {
     #{$direction}: auto;
     $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));
-  } @else if ($size == 'shrink') {
+  }
+  @else if ($size == 'shrink') {
     #{$direction}: auto;
-  } @else {
+  }
+  @else {
     $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)}));
     #{$direction}: $val;
   }
@@ -99,11 +110,12 @@
   $breakpoint: null,
   $vertical: false
 ) {
-  @if ($breakpoint == null) {
+  @if($breakpoint == null) {
     // If `$bp-size` is available then use this, otherwise revert to the smallest bp.
-    @if (variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {
+    @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {
       $breakpoint: $-zf-size;
-    } @else {
+    }
+    @else {
       $breakpoint: $-zf-zero-breakpoint;
     }
   }
@@ -114,9 +126,10 @@
   // Base flex properties
   @include xy-cell-base($size);
 
-  @if ($gutter-type == 'margin') {
+  @if($gutter-type == 'margin') {
     @include -xy-cell-properties($size, $gutter, $vertical);
-  } @else {
+  }
+  @else {
     @include -xy-cell-properties($size, 0, $vertical);
   }
 
@@ -141,17 +154,19 @@
   $breakpoint: $-zf-zero-breakpoint,
   $vertical: false
 ) {
+
   $gutter: -zf-get-bp-val($gutters, $breakpoint);
   $gutter-position: if($vertical == true, top bottom, left right);
 
-  @if ($gutter-type == 'margin') {
+  @if($gutter-type == 'margin') {
     @include -xy-cell-properties($size, $gutter, $vertical);
-  } @else {
+  }
+  @else {
     @include -xy-cell-properties($size, 0, $vertical);
   }
 
   // If we want to output the gutters
-  @if ($gutter-output) {
+  @if($gutter-output) {
     // TODO: Figure out if we need to pass breakpoint in here too.
     @include xy-gutters($gutter, $gutter-type, $gutter-position);
   }

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/grid/xy-grid/_classes.scss

@@ -8,6 +8,7 @@
 
 // Margin Grid classes
 @mixin xy-base-grid-classes {
+
   // Grid Container
   .grid-container {
     @include xy-grid-container;
@@ -37,6 +38,7 @@
     &.shrink {
       @include xy-cell-base(shrink);
     }
+
   }
   .grid-x {
     > .auto {
@@ -55,9 +57,9 @@
     // https://github.com/zurb/foundation-sites/pull/10222 and
     // https://github.com/zurb/foundation-sites/pull/10164
     .grid-x {
-      $str: '> .#{$-zf-size}-shrink, > .#{$-zf-size}-full';
+      $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;
@@ -118,7 +120,11 @@
 }
 
 // Margin Grid classes
-@mixin xy-margin-grid-classes($gutter-position: left right, $vertical: false, $wrapping-selector: '.grid-margin-x') {
+@mixin xy-margin-grid-classes(
+  $gutter-position: left right,
+  $vertical: false,
+  $wrapping-selector: '.grid-margin-x'
+){
   #{$wrapping-selector} {
     @include xy-gutters($negative: true, $gutter-position: $gutter-position);
 
@@ -129,13 +135,7 @@
 
     // base styles need to all be before the auto and shrink styles
     @include -zf-each-breakpoint() {
-      @if (
-        type-of($grid-margin-gutters) ==
-          'map' and
-          map-has-key($grid-margin-gutters, $-zf-size) and
-          $-zf-size !=
-          $-zf-zero-breakpoint
-      ) {
+      @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size) and $-zf-size != $-zf-zero-breakpoint) {
         > .cell {
           @include xy-cell-static($breakpoint: $-zf-size, $vertical: $vertical);
         }
@@ -143,11 +143,12 @@
     }
 
     @include -zf-each-breakpoint() {
+
       // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)
       // for prior breakpoints based on the responsive gutter.
-      @if (type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
+      @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
         @each $bp in -zf-breakpoints-less-than($-zf-size) {
-          @if (map-has-key($grid-margin-gutters, $bp)) {
+          @if(map-has-key($grid-margin-gutters, $bp)) {
             @include -xy-breakpoint-cell-classes($bp, $-zf-size, $vertical);
           }
         }
@@ -161,6 +162,7 @@
 // Padding Grid classes
 @mixin xy-padding-grid-classes {
   .grid-padding-x {
+
     // Negative margin for nested grids
     .grid-padding-x {
       @include xy-gutters($negative: true);
@@ -196,9 +198,9 @@
       @for $i from 1 through $xy-block-grid-max {
         // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)
         // for prior breakpoints based on the responsive gutter.
-        @if (type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
+        @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
           @each $bp in -zf-breakpoints-less-than($-zf-size) {
-            @if (map-has-key($grid-margin-gutters, $bp)) {
+            @if(map-has-key($grid-margin-gutters, $bp)) {
               .grid-margin-x.#{$bp}-up-#{$i} {
                 @include xy-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $bp);
               }
@@ -251,7 +253,11 @@
 }
 
 // Vertical Grid classes
-@mixin xy-vertical-grid-classes($margin-grid: true, $padding-grid: true) {
+@mixin xy-vertical-grid-classes(
+  $margin-grid: true,
+  $padding-grid: true
+) {
+
   @include -zf-each-breakpoint() {
     @if not($-zf-size == small) {
     }
@@ -260,6 +266,7 @@
   .grid-y {
     @include xy-grid(vertical, false);
 
+
     > .cell {
       @include xy-cell-reset();
     }
@@ -272,14 +279,15 @@
       @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
     }
 
+
     @include -zf-each-breakpoint() {
       // This is a bit of a hack/workaround, see these issues and PRs for the backstory:
       // https://github.com/zurb/foundation-sites/issues/10244
       // https://github.com/zurb/foundation-sites/pull/10222 and
       // https://github.com/zurb/foundation-sites/pull/10164
-      $str: '> .#{$-zf-size}-shrink, > .#{$-zf-size}-full';
+      $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;
@@ -296,6 +304,7 @@
         > .#{$-zf-size}-shrink {
           @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
         }
+
       }
 
       @for $i from 1 through $grid-columns {
@@ -304,6 +313,7 @@
           @include xy-cell-static($i, false, $vertical: true, $gutter-type: padding);
         }
       }
+
     }
   }
 
@@ -324,6 +334,7 @@
   @if $margin-grid {
     @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y');
   }
+
 }
 
 @mixin xy-frame-grid-classes($vertical-grid: true, $margin-grid: true) {
@@ -344,11 +355,14 @@
     @include xy-cell-block(true);
   }
 
+
   .cell-block-container {
     @include xy-cell-block-container();
   }
 
+
   @include -zf-each-breakpoint(false) {
+
     .#{$-zf-size}-grid-frame {
       @include xy-grid-frame;
     }
@@ -382,6 +396,7 @@
           width: auto;
           @include xy-grid-frame(true);
         }
+
       }
     }
     .cell {
@@ -419,42 +434,43 @@
   $vertical-grid: true,
   $frame-grid: true
 ) {
+
   // Base grid styles
-  @if ($base-grid) {
+  @if($base-grid) {
     @include xy-base-grid-classes();
   }
 
   // Margin grid
-  @if ($margin-grid) {
+  @if($margin-grid) {
     @include xy-margin-grid-classes();
   }
 
   // Padding grid
-  @if ($padding-grid) {
+  @if($padding-grid) {
     @include xy-padding-grid-classes();
   }
 
   // Block grid
-  @if ($block-grid) {
+  @if($block-grid) {
     @include xy-block-grid-classes($margin-grid, $padding-grid);
   }
 
   // Collapse gutters
-  @if ($collapse) {
+  @if($collapse) {
     @include xy-collapse-grid-classes($margin-grid, $padding-grid);
   }
 
   // Offset gutters
-  @if ($offset) {
+  @if($offset) {
     @include xy-offset-cell-classes();
   }
 
   // Vertical grid
-  @if ($vertical-grid) {
+  @if($vertical-grid) {
     @include xy-vertical-grid-classes($margin-grid, $padding-grid);
   }
 
   @if ($frame-grid) {
-    @include xy-frame-grid-classes($vertical-grid, $margin-grid);
+    @include xy-frame-grid-classes($vertical-grid, $margin-grid)
   }
 }

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/grid/xy-grid/_collapse.scss

@@ -19,6 +19,7 @@
 ) {
   // First, lets negate any margins on the top level
   @if ($gutter-type == 'margin') {
+
     @include breakpoint($min-breakpoint) {
       @each $value in $gutter-position {
         margin-#{$value}: 0;
@@ -35,7 +36,7 @@
 
     // Output new widths to not include gutters
     @each $bp in $breakpoint-classes {
-      @if (sl-contain($excluded-bps, $bp)) {
+      @if(sl-contain($excluded-bps, $bp)) {
         @include breakpoint($min-breakpoint) {
           @for $i from 1 through $grid-columns {
             // Sizing (percentage)
@@ -53,9 +54,11 @@
             }
           }
         }
-      }
+      } 
     }
-  } @else {
+  }
+  @else {
+
     @include breakpoint($min-breakpoint) {
       @each $value in $gutter-position {
         margin-#{$value}: 0;

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/grid/xy-grid/_frame.scss

@@ -5,7 +5,14 @@
 /// @param {Number|Map} $gutters [null] - Map or single value for gutters.
 /// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from.
 /// @param {Boolean} $include-base [true] - Include the base styles that don't vary per breakpoint.
-@mixin xy-grid-frame($vertical: false, $nested: false, $gutters: null, $breakpoint: null, $include-base: true) {
+@mixin xy-grid-frame(
+  $vertical: false,
+  $nested: false,
+  $gutters: null,
+  $breakpoint: null,
+  $include-base: true
+) {
+
   @if $include-base {
     overflow: hidden;
     position: relative;
@@ -32,7 +39,8 @@
         $gutter: rem-calc($gutter);
         width: calc(#{$unit} + #{$gutter});
       }
-    } @else {
+    }
+    @else {
       @if $vertical == true {
         height: if($nested == true, 100%, 100vh);
       } @else {
@@ -45,7 +53,9 @@
 /// Modifies a cell to give it "block" behavior (overflow auto, inertial scrolling)
 ///
 /// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.
-@mixin xy-cell-block($vertical: false) {
+@mixin xy-cell-block(
+  $vertical: false
+) {
   $property: if($vertical == true, 'overflow-y', 'overflow-x');
 
   @if $vertical == true {

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/grid/xy-grid/_grid.scss

@@ -9,7 +9,10 @@
 /// Creates a max width container, designed to house your grid content.
 ///
 /// @param {Number} $width [$grid-container] - a width to limit the container to.
-@mixin xy-grid-container($width: $grid-container, $padding: $grid-container-padding) {
+@mixin xy-grid-container(
+  $width: $grid-container,
+  $padding: $grid-container-padding
+) {
   @include xy-gutters($gutters: $padding, $gutter-type: padding);
 
   max-width: $width;
@@ -20,7 +23,10 @@
 ///
 /// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within.
 /// @param {Boolean} $wrap [true] - If the cells within should wrap or not.
-@mixin xy-grid($direction: horizontal, $wrap: true) {
+@mixin xy-grid(
+  $direction: horizontal,
+  $wrap: true
+) {
   $direction: if($direction == 'horizontal', row, column);
   $wrap: if($wrap, wrap, nowrap);
 

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/grid/xy-grid/_gutters.scss

@@ -30,15 +30,16 @@
 
       // Loop through each gutter position
       @each $value in $gutter-position {
-        #{$gutter-type}-#{$value}: unquote('#{$operator}#{$gutter}');
+        #{$gutter-type}-#{$value}: unquote("#{$operator}#{$gutter}");
       }
     }
-  } @else if (type-of($gutters) == 'number') {
+  }
+  @else if (type-of($gutters) == 'number') {
     $gutter: rem-calc($gutters) / 2;
 
     // Loop through each gutter position
     @each $value in $gutter-position {
-      #{$gutter-type}-#{$value}: unquote('#{$operator}#{$gutter}');
+      #{$gutter-type}-#{$value}: unquote("#{$operator}#{$gutter}");
     }
   }
 }

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/grid/xy-grid/_layout.scss

@@ -25,7 +25,7 @@
   $breakpoint: $-zf-zero-breakpoint,
   $vertical: false
 ) {
-  $size: percentage(1 / $n);
+  $size: percentage(1/$n);
 
   & > #{$selector} {
     @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/grid/xy-grid/_position.scss

@@ -11,11 +11,11 @@
 /// @param {Number|List} $n - Size to offset by. You can pass in any value accepted by the `zf-cell()` mixin, such as `6`, `50%`, or `1 of 2`.
 /// @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: $-zf-zero-breakpoint,
-  $vertical: false
+ $n,
+ $gutters: $grid-margin-gutters,
+ $gutter-type: margin,
+ $breakpoint: $-zf-zero-breakpoint,
+ $vertical: false
 ) {
   $direction: if($vertical, 'top', $global-left);
 

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/grid/xy-grid/_xy-grid.scss

@@ -22,7 +22,7 @@ $grid-columns: 12 !default;
 /// @type Map | Length
 $grid-margin-gutters: (
   small: 20px,
-  medium: 30px,
+  medium: 30px
 ) !default;
 
 /// The amount of padding in cells at different screen sizes when using the padding grid. To use just one size, set the variable to a number instead of a map.

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/grid.scss

@@ -5,4 +5,4 @@
 
 @import './grid/grid';
 
-@include foundation-xy-grid-classes;
+@include foundation-xy-grid-classes;

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/iconography.scss

@@ -1,39 +1,12 @@
 $icon-unit: 8px !default;
 
 $icon-data: (
-  none: 0,
-  xxs: (
-    $icon-unit / 2,
-  ),
-  // 4px
-  xs:
-    (
-      $icon-unit,
-    ),
-  // 8px
-  s:
-    (
-      $icon-unit * 2,
-    ),
-  // 16px
-  m:
-    (
-      $icon-unit * 3,
-    ),
-  // 24px
-  l:
-    (
-      $icon-unit * 4,
-    ),
-  // 32px
-  xl:
-    (
-      $icon-unit * 6,
-    ),
-  // 48px
-  xxl:
-    (
-      $icon-unit * 8,
-    )
-    // 64px,
-) !default;
+  none: 0,                           
+  xxs:  ($icon-unit / 2), // 4px
+  xs:   ($icon-unit),     // 8px
+  s:    ($icon-unit * 2), // 16px
+  m:    ($icon-unit * 3), // 24px
+  l:    ($icon-unit * 4), // 32px
+  xl:   ($icon-unit * 6), // 48px
+  xxl:  ($icon-unit * 8)  // 64px
+) !default;

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/index.scss

@@ -16,7 +16,8 @@
 // include iconography data
 @import './iconography.scss';
 
+
 // include scss functions
 @import './utility-functions/_functions-base.scss';
 // base mixins
-@import './utility-mixins/_mixins-base.scss';
+@import './utility-mixins/_mixins-base.scss';

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/motion.scss

@@ -16,3 +16,4 @@ $easing-data: (
   overshoot: cubic-bezier(0.07, 0.28, 0.32, 1.22),
   anticipate: cubic-bezier(0.38, -0.4, 0.88, 0.65),
 ) !default;
+

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/spacing.scss

@@ -17,7 +17,7 @@ $spacing-data: (
   // 32px
   xl: rem($point-unit * 6),
   // 48px
-  xxl: rem($point-unit * 8) // 64px,,,,,,,,
+  xxl: rem($point-unit * 8) // 64px,,,,,,,
 ) !default;
 
 /// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries.

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/typography.scss

@@ -1,21 +1,13 @@
 $font-size-data: (
-  900: 2.7692rem,
-  // 36px
-  800: 1.8461rem,
-  // 24px
-  700: 1.3846rem,
-  // 18px
-  600: 1.2307rem,
-  // 16px
-  500: 1.0769rem,
-  // 14px
-  400: 1rem,
-  // 13px
-  300: 0.923rem,
-  // 12px
-  200: 0.8461rem,
-  // 11px
-  100: 0.75rem,
+  900: 2.7692rem, // 36px
+  800: 1.8461rem, // 24px
+  700: 1.3846rem, // 18px
+  600: 1.2307rem, // 16px
+  500: 1.0769rem, // 14px
+  400: 1rem,      // 13px
+  300: 0.9230rem, // 12px
+  200: 0.8461rem,  // 11px
+  100: 0.75rem
 ) !default;
 
 $line-height-data: (
@@ -25,13 +17,13 @@ $line-height-data: (
   500: 1.2,
   400: 1.5,
   300: 1.5,
-  200: 1.5,
+  200: 1.5
 ) !default;
-
+  
 $font-weight-data: (
   bold: 900,
   semibold: 600,
   regular: 400,
   light: 300,
-  thin: 100,
-) !default;
+  thin: 100
+) !default;

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/utility-functions/_functions-base.scss

@@ -4,4 +4,4 @@
 @import './motion-functions.scss';
 @import './depth-functions.scss';
 @import './border-functions.scss';
-@import './iconography-functions';
+@import './iconography-functions';

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/styles/base/utility-functions/border-functions.scss

@@ -10,4 +10,4 @@
   } @else {
     @error 'Border size `#{$size}` not found. Available variants: #{$border-size-data}';
   }
-}
+}