@elliemae/ds-basic 3.50.1-next.8 → 3.51.0-beta.1

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

@@ -1,460 +0,0 @@
-// 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/components/packages/ds-basic/static-build/styles/base/grid/xy-grid/_collapse.scss

@@ -1,71 +0,0 @@
-// 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/static-build/styles/components/packages/ds-basic/static-build/styles/base/grid/xy-grid/_frame.scss

@@ -1,76 +0,0 @@
-/// 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/static-build/styles/components/packages/ds-basic/static-build/styles/base/grid/xy-grid/_grid.scss

@@ -1,29 +0,0 @@
-// 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/static-build/styles/components/packages/ds-basic/static-build/styles/base/grid/xy-grid/_gutters.scss

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