@elliemae/ds-basic 3.51.0-next.0 → 3.51.0-next.1

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

@@ -0,0 +1,158 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group xy-grid
+////
+
+/// 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) {
+  // Parsing percents, decimals, n of n and number counts
+  @if type-of($size) == 'number' {
+    @if unit($size) == '%' {
+      $size: $size;
+    } @else if $size < 1 {
+      $size: percentage($size);
+    } @else {
+      $size: percentage($size / $grid-columns);
+    }
+  }
+
+  // Parsing "n of n" or "n/n" expressions
+  @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 {
+      $size: percentage(nth($size, 1) / nth($size, 3));
+    }
+  }
+  // Anything else is incorrect
+  @else {
+    @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or "n of n" / "n/n".';
+  }
+
+  @return $size;
+}
+
+/// Sets base flex properties for cells.
+///
+/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink` or `grow`.
+@mixin xy-cell-base($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') {
+    flex: 1 1 0px; // sass-lint:disable-line zero-unit
+  } @else if ($size == 'shrink') {
+    flex: 0 0 auto;
+  } @else if ($size == 'grow') {
+    flex: 1 0 auto;
+  }
+}
+
+/// Resets a cells width (or height if vertical is true) as well as strips its gutters.
+///
+/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
+@mixin xy-cell-reset($vertical: true) {
+  $direction: if($vertical == true, width, height);
+  #{$direction}: auto;
+  max-#{$direction}: none;
+}
+
+// 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') {
+    $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));
+    #{$direction}: $val;
+  } @else if ($size == 'auto') {
+    #{$direction}: auto;
+    $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));
+  } @else if ($size == 'shrink') {
+    #{$direction}: auto;
+  } @else {
+    $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)}));
+    #{$direction}: $val;
+  }
+}
+
+/// Creates a cell for your grid.
+///
+/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.
+/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters
+/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.
+/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
+/// @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.
+/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
+@mixin xy-cell(
+  $size: full,
+  $gutter-output: true,
+  $gutters: $grid-margin-gutters,
+  $gutter-type: margin,
+  $gutter-position: right left,
+  $breakpoint: null,
+  $vertical: false
+) {
+  @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 {
+      $breakpoint: $-zf-size;
+    } @else {
+      $breakpoint: $-zf-zero-breakpoint;
+    }
+  }
+
+  // Get our gutters from map if available, if not map just return the value.
+  $gutter: -zf-get-bp-val($gutters, $breakpoint);
+
+  // Base flex properties
+  @include xy-cell-base($size);
+
+  @if ($gutter-type == 'margin') {
+    @include -xy-cell-properties($size, $gutter, $vertical);
+  } @else {
+    @include -xy-cell-properties($size, 0, $vertical);
+  }
+
+  @if $gutter-output {
+    @include xy-gutters($gutter, $gutter-type, $gutter-position);
+  }
+}
+
+/// Creates a single breakpoint sized grid. Used to generate our grid classes.
+///
+/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.
+/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters
+/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+/// @param {Keyword} $gutter-type [margin] - 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. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
+/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
+@mixin xy-cell-static(
+  $size: full,
+  $gutter-output: true,
+  $gutters: $grid-margin-gutters,
+  $gutter-type: margin,
+  $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') {
+    @include -xy-cell-properties($size, $gutter, $vertical);
+  } @else {
+    @include -xy-cell-properties($size, 0, $vertical);
+  }
+
+  // If we want to output the gutters
+  @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/base/grid/xy-grid/_classes.scss

@@ -0,0 +1,460 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group xy-grid
+////
+
+// Margin Grid classes
+@mixin xy-base-grid-classes {
+  // Grid Container
+  .grid-container {
+    @include xy-grid-container;
+
+    &.fluid {
+      @include xy-grid-container(100%);
+    }
+
+    &.full {
+      @include xy-grid-container(100%, 0);
+    }
+  }
+
+  // Base grid styles
+  .grid-x {
+    @include xy-grid;
+  }
+
+  .cell {
+    @include xy-cell-base();
+    @include xy-cell-static($grid-columns, false, $gutter-type: padding);
+
+    &.auto {
+      @include xy-cell-base(auto);
+    }
+
+    &.shrink {
+      @include xy-cell-base(shrink);
+    }
+  }
+  .grid-x {
+    > .auto {
+      @include xy-cell-static(auto, false);
+    }
+
+    > .shrink {
+      @include xy-cell-static(shrink, false);
+    }
+  }
+
+  // Auto width
+  @include -zf-each-breakpoint() {
+    // This is a bit of a hack/workaround, see these issues & 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
+    .grid-x {
+      $str: '> .#{$-zf-size}-shrink, > .#{$-zf-size}-full';
+      @for $i from 1 through $grid-columns {
+        $str: $str + ', > .#{$-zf-size}-#{$i}';
+      }
+      #{$str} {
+        flex-basis: auto;
+      }
+    }
+  }
+
+  @include -zf-each-breakpoint() {
+    @if not($-zf-size == small) {
+      .grid-x > .#{$-zf-size}-auto {
+        @include xy-cell-base(auto);
+        @include xy-cell-static(auto, false);
+      }
+
+      .grid-x > .#{$-zf-size}-shrink {
+        @include xy-cell-base(shrink);
+        @include xy-cell-static(shrink, false);
+      }
+    }
+
+    @for $i from 1 through $grid-columns {
+      // Sizing (percentage)
+      .grid-x > .#{$-zf-size}-#{$i} {
+        @include xy-cell-static($i, false, $gutter-type: padding);
+      }
+    }
+  }
+
+  // Reset width when using `.grid-margin-x` not on `.grid-x`
+  .grid-margin-x:not(.grid-x) > .cell {
+    width: auto;
+  }
+
+  // Reset height when using `.grid-margin-y` not on `.grid-y`
+  .grid-margin-y:not(.grid-y) > .cell {
+    height: auto;
+  }
+}
+
+@mixin -xy-breakpoint-cell-classes($class-breakpoint, $gutter-breakpoint, $vertical) {
+  $prefix: if($class-breakpoint == $-zf-zero-breakpoint, '', '#{$class-breakpoint}-');
+  > .#{$prefix}auto {
+    @include xy-cell-static(auto, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
+  }
+
+  > .#{$prefix}shrink {
+    @include xy-cell-static(shrink, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
+  }
+
+  @for $i from 1 through $grid-columns {
+    // Sizing (percentage)
+    $classname: if($vertical, '.#{$class-breakpoint}-#{$i}', '.#{$class-breakpoint}-#{$i}');
+
+    > #{$classname} {
+      @include xy-cell-static($i, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
+    }
+  }
+}
+
+// Margin Grid classes
+@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);
+
+    // Base cell styles
+    > .cell {
+      @include xy-cell-static($vertical: $vertical);
+    }
+
+    // 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
+      ) {
+        > .cell {
+          @include xy-cell-static($breakpoint: $-zf-size, $vertical: $vertical);
+        }
+      }
+    }
+
+    @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)) {
+        @each $bp in -zf-breakpoints-less-than($-zf-size) {
+          @if (map-has-key($grid-margin-gutters, $bp)) {
+            @include -xy-breakpoint-cell-classes($bp, $-zf-size, $vertical);
+          }
+        }
+      }
+
+      @include -xy-breakpoint-cell-classes($-zf-size, $-zf-size, $vertical);
+    }
+  }
+}
+
+// Padding Grid classes
+@mixin xy-padding-grid-classes {
+  .grid-padding-x {
+    // Negative margin for nested grids
+    .grid-padding-x {
+      @include xy-gutters($negative: true);
+    }
+
+    // Negative margin for grids within `grid-container/grid-container.fluid`
+    // This allows margin and padding grids to line up with eachother
+    .grid-container:not(.full) > & {
+      @include xy-gutters($negative: true);
+    }
+
+    // Base cell styles
+    > .cell {
+      @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding);
+    }
+  }
+}
+
+// Block Grid classes
+@mixin xy-block-grid-classes($margin-grid: true, $padding-grid: true) {
+  @if $padding-grid {
+    @include -zf-each-breakpoint {
+      @for $i from 1 through $xy-block-grid-max {
+        .#{$-zf-size}-up-#{$i} {
+          @include xy-grid-layout($i, '.cell', false, $gutter-type: padding);
+        }
+      }
+    }
+  }
+
+  @if $margin-grid {
+    @include -zf-each-breakpoint {
+      @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)) {
+          @each $bp in -zf-breakpoints-less-than($-zf-size) {
+            @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);
+              }
+            }
+          }
+        }
+      }
+      @for $i from 1 through $xy-block-grid-max {
+        .grid-margin-x.#{$-zf-size}-up-#{$i} {
+          @include xy-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $-zf-size);
+        }
+      }
+    }
+  }
+}
+
+// Collapse classes
+@mixin xy-collapse-grid-classes($margin-grid: true, $padding-grid: true) {
+  @each $bp in $breakpoint-classes {
+    @if $margin-grid {
+      .#{$bp}-margin-collapse {
+        @include xy-grid-collapse($gutter-type: margin, $min-breakpoint: $bp);
+      }
+    }
+
+    @if $padding-grid {
+      .#{$bp}-padding-collapse {
+        @include xy-grid-collapse($gutter-type: padding, $min-breakpoint: $bp);
+      }
+    }
+  }
+}
+
+// Offset classes
+@mixin xy-offset-cell-classes {
+  @include -zf-each-breakpoint {
+    @for $i from 1 through $grid-columns {
+      // Offsets
+      $o: $i - 1;
+
+      .#{$-zf-size}-offset-#{$o} {
+        @include xy-cell-offset($o, $gutters: $grid-padding-gutters, $gutter-type: padding, $breakpoint: $-zf-size);
+      }
+
+      .grid-margin-x > .#{$-zf-size}-offset-#{$o} {
+        @include xy-cell-offset($o, $breakpoint: $-zf-size);
+      }
+    }
+  }
+}
+
+// Vertical Grid classes
+@mixin xy-vertical-grid-classes($margin-grid: true, $padding-grid: true) {
+  @include -zf-each-breakpoint() {
+    @if not($-zf-size == small) {
+    }
+  }
+
+  .grid-y {
+    @include xy-grid(vertical, false);
+
+    > .cell {
+      @include xy-cell-reset();
+    }
+
+    > .auto {
+      @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);
+    }
+
+    > .shrink {
+      @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';
+      @for $i from 1 through $grid-columns {
+        $str: $str + ', > .#{$-zf-size}-#{$i}';
+      }
+      #{$str} {
+        flex-basis: auto;
+      }
+    }
+
+    @include -zf-each-breakpoint() {
+      @if not($-zf-size == small) {
+        > .#{$-zf-size}-auto {
+          @include xy-cell-base(auto);
+          @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);
+        }
+
+        > .#{$-zf-size}-shrink {
+          @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
+        }
+      }
+
+      @for $i from 1 through $grid-columns {
+        // Sizing (percentage)
+        > .#{$-zf-size}-#{$i} {
+          @include xy-cell-static($i, false, $vertical: true, $gutter-type: padding);
+        }
+      }
+    }
+  }
+
+  @if $padding-grid {
+    .grid-padding-y {
+      // Negative margin for nested grids
+      .grid-padding-y {
+        @include xy-gutters($negative: true, $gutter-position: top bottom);
+      }
+
+      // Base cell styles
+      > .cell {
+        @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding, $gutter-position: top bottom);
+      }
+    }
+  }
+
+  @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) {
+  // Framed grid styles
+  .grid-frame {
+    @include xy-grid-frame;
+  }
+
+  .cell .grid-frame {
+    width: 100%; // Same as include with $nested, but with less css
+  }
+
+  .cell-block {
+    @include xy-cell-block();
+  }
+
+  .cell-block-y {
+    @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;
+    }
+
+    .cell .#{$-zf-size}-grid-frame {
+      width: 100%; // Same as include with $nested, but with less css
+    }
+
+    .#{$-zf-size}-cell-block {
+      @include xy-cell-block();
+    }
+
+    .#{$-zf-size}-cell-block-container {
+      @include xy-cell-block-container();
+    }
+
+    .#{$-zf-size}-cell-block-y {
+      @include xy-cell-block(true);
+    }
+  }
+
+  @if $vertical-grid {
+    .grid-y {
+      &.grid-frame {
+        width: auto;
+        @include xy-grid-frame(true);
+      }
+
+      @include -zf-each-breakpoint(false) {
+        &.#{$-zf-size}-grid-frame {
+          width: auto;
+          @include xy-grid-frame(true);
+        }
+      }
+    }
+    .cell {
+      .grid-y.grid-frame {
+        height: 100%; // Same as include with $nested, but with less css
+      }
+      @include -zf-each-breakpoint(false) {
+        .grid-y.#{$-zf-size}-grid-frame {
+          height: 100%; // Same as include with $nested, but with less css
+        }
+      }
+    }
+  }
+  @if $margin-grid {
+    @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y');
+    .grid-frame.grid-margin-y {
+      @include xy-grid-frame(true, false, $grid-margin-gutters, $include-base: false);
+    }
+    @include -zf-each-breakpoint(false) {
+      .grid-margin-y.#{$-zf-size}-grid-frame {
+        @include xy-grid-frame(true, false, $grid-margin-gutters, $-zf-size, false);
+      }
+    }
+  }
+}
+
+// Final classes
+@mixin foundation-xy-grid-classes(
+  $base-grid: true,
+  $margin-grid: true,
+  $padding-grid: true,
+  $block-grid: true,
+  $collapse: true,
+  $offset: true,
+  $vertical-grid: true,
+  $frame-grid: true
+) {
+  // Base grid styles
+  @if ($base-grid) {
+    @include xy-base-grid-classes();
+  }
+
+  // Margin grid
+  @if ($margin-grid) {
+    @include xy-margin-grid-classes();
+  }
+
+  // Padding grid
+  @if ($padding-grid) {
+    @include xy-padding-grid-classes();
+  }
+
+  // Block grid
+  @if ($block-grid) {
+    @include xy-block-grid-classes($margin-grid, $padding-grid);
+  }
+
+  // Collapse gutters
+  @if ($collapse) {
+    @include xy-collapse-grid-classes($margin-grid, $padding-grid);
+  }
+
+  // Offset gutters
+  @if ($offset) {
+    @include xy-offset-cell-classes();
+  }
+
+  // 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);
+  }
+}

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

@@ -0,0 +1,71 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group xy-grid
+////
+
+/// Collapses the grid a cells within it.
+///
+/// @param {String} $selector [.cell] - The child element to remove the gutter from.
+/// @param {Keyword} $gutter-type [margin] - The type of gutter to remove.
+/// @param {List} $gutter-position [right left] - The positions to remove gutters from. Accepts `top`, `bottom`, `left`, `right` in any combination.
+@mixin xy-grid-collapse(
+  $selector: '.cell',
+  $gutter-type: margin,
+  $gutter-position: right left,
+  $min-breakpoint: $-zf-zero-breakpoint
+) {
+  // 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;
+      }
+
+      > #{$selector} {
+        @each $value in $gutter-position {
+          margin-#{$value}: 0;
+        }
+      }
+    }
+
+    $excluded-bps: -zf-breakpoints-less-than($min-breakpoint);
+
+    // Output new widths to not include gutters
+    @each $bp in $breakpoint-classes {
+      @if (sl-contain($excluded-bps, $bp)) {
+        @include breakpoint($min-breakpoint) {
+          @for $i from 1 through $grid-columns {
+            // Sizing (percentage)
+            > .#{$bp}-#{$i} {
+              @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);
+            }
+          }
+        }
+      } @else {
+        @include breakpoint($bp) {
+          @for $i from 1 through $grid-columns {
+            // Sizing (percentage)
+            > .#{$bp}-#{$i} {
+              @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);
+            }
+          }
+        }
+      }
+    }
+  } @else {
+    @include breakpoint($min-breakpoint) {
+      @each $value in $gutter-position {
+        margin-#{$value}: 0;
+      }
+
+      > #{$selector} {
+        @each $value in $gutter-position {
+          padding-#{$value}: 0;
+        }
+      }
+    }
+  }
+}