@elliemae/ds-basic 3.50.1-next.9 → 3.51.0-next.0

package/dist/styles/base/grid/xy-grid/_cell.scss

@@ -1,173 +0,0 @@
-// 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/base/grid/xy-grid/_classes.scss

@@ -1,476 +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)
-  }
-}