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

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

@@ -0,0 +1,476 @@
+// 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/styles/base/grid/xy-grid/_collapse.scss

@@ -0,0 +1,74 @@
+// 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;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,86 @@
+/// 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 {Boolean} $nested [false] - Is grid nested or not. If nested is true this sets the frame to 100% height, otherwise will be 100vh.
+/// @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
+) {
+
+  @if $include-base {
+    overflow: hidden;
+    position: relative;
+    flex-wrap: nowrap;
+    align-items: stretch;
+  }
+
+  @if $breakpoint == null and type-of($gutters) == 'map' {
+    @include -zf-each-breakpoint() {
+      @include xy-grid-frame($vertical, $nested, $gutters, $-zf-size, false);
+    }
+  } @else {
+    // Get our gutters if applicable
+    $gutter: -zf-get-bp-val($gutters, $breakpoint);
+
+    // If we have a gutter, add it to the width/height
+    @if $gutter {
+      @if $vertical == true {
+        $unit: if($nested == true, 100%, 100vh);
+        $gutter: rem-calc($gutter);
+        height: calc(#{$unit} + #{$gutter});
+      } @else {
+        $unit: if($nested == true, 100%, 100vw);
+        $gutter: rem-calc($gutter);
+        width: calc(#{$unit} + #{$gutter});
+      }
+    }
+    @else {
+      @if $vertical == true {
+        height: if($nested == true, 100%, 100vh);
+      } @else {
+        width: if($nested == true, 100%, 100vw);
+      }
+    }
+  }
+}
+
+/// 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
+) {
+  $property: if($vertical == true, 'overflow-y', 'overflow-x');
+
+  @if $vertical == true {
+    overflow-y: auto;
+    max-height: 100%;
+    height: 100%;
+  } @else {
+    overflow-x: auto;
+    max-width: 100%;
+  }
+
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-stype: -ms-autohiding-scrollbar;
+}
+
+/// Container for inside a grid frame containing multiple blocks. Typically used
+/// as a modifier for a `.cell` to allow the cell to pass along flex sizing
+/// constraints / from parents to children.
+@mixin xy-cell-block-container() {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+
+  > .grid-x {
+    max-height: 100%;
+    flex-wrap: nowrap;
+  }
+}

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

@@ -0,0 +1,35 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group xy-grid
+////
+
+/// 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
+) {
+  @include xy-gutters($gutters: $padding, $gutter-type: padding);
+
+  max-width: $width;
+  margin: 0 auto;
+}
+
+/// Creates a container for your flex cells.
+///
+/// @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
+) {
+  $direction: if($direction == 'horizontal', row, column);
+  $wrap: if($wrap, wrap, nowrap);
+
+  display: flex;
+  flex-flow: $direction $wrap;
+}

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

@@ -0,0 +1,45 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group xy-grid
+////
+
+/// Create gutters for a cell/container.
+///
+/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts either margin or padding.
+/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
+/// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nested grids.
+@mixin xy-gutters(
+  $gutters: $grid-margin-gutters,
+  $gutter-type: margin,
+  $gutter-position: right left,
+  $negative: false
+) {
+  $operator: if($negative, '-', '');
+
+  // If we have declared negative gutters, force type to `margin.
+  $gutter-type: if($negative, 'margin', $gutter-type);
+
+  // Output our margin gutters.
+  @if (type-of($gutters) == 'map') {
+    @include -zf-breakpoint-value(auto, $gutters) {
+      $gutter: rem-calc($-zf-bp-value) / 2;
+
+      // Loop through each gutter position
+      @each $value in $gutter-position {
+        #{$gutter-type}-#{$value}: unquote("#{$operator}#{$gutter}");
+      }
+    }
+  }
+  @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}");
+    }
+  }
+}