locomotivecms_wagon 2.4.0.rc2 → 2.4.0

data/generators/foundation/public/stylesheets/foundation6/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)
+  }
+}