foundation-sites/scss/xy-grid/_classes.scss

// 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)
  }
}