_patterns_grid.scss

@import 'settings';

@mixin vf-p-grid-modifications {
  @include deprecate('3.0.0', 'vf-p-grid-modifications mixin will be removed') {
    .row {
      width: 100%;
    }
  }
}

// CSS grid implementation of columns for all screens sizes
@mixin vf-grid-column($col) {
  @supports (display: grid) {
    grid-column-end: span #{$col};

    // reset flex box fallback styles
    margin-left: 0;
    width: auto;

    //nesting
    @if $col > 1 {
      & .row {
        grid-template-columns: repeat($col, minmax(0, 1fr));
      }
    }
  }
}

@mixin vf-p-grid {
  %span-full-grid-on-mobile {
    @media (max-width: $threshold-4-6-col) {
      grid-column: 1 / span $grid-columns-small;
    }
  }

  %span-full-grid-on-tablet {
    @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col) {
      grid-column: 1 / span $grid-columns-medium;
    }
  }

  %span-full-grid-on-desktop {
    @media (min-width: $threshold-6-12-col) {
      grid-column: 1 / span $grid-columns;
    }
  }

  .grid-demo [class*='#{$grid-column-prefix}'] {
    background: transparentize($color-negative, 0.9);
    margin-bottom: $spv-outer--small;
  }

  %display-block {
    // make columns explicitly display:block; the use of a placeholder is to ensure the rule appears only once in the compiled css
    display: block;
  }

  .row {
    @extend %vf-row;
  }

  // mobile grid
  @media (max-width: $threshold-4-6-col) {
    @for $i from $grid-columns-small through 1 {
      .#{$grid-small-col-prefix}#{$i} {
        @include vf-grid-column($i);
        width: 100%;
      }
    }
  }

  // tablet grid
  @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col) {
    @for $i from $grid-columns-medium through 1 {
      .#{$grid-medium-col-prefix}#{$i} {
        @include vf-grid-column($i);
        width: 100%;
      }
    }
  }

  // desktop grid
  @media (min-width: $threshold-6-12-col) {
    @for $i from $grid-columns through 1 {
      // set col-* to span respective number of columns on desktop
      .#{$grid-large-col-prefix}#{$i} {
        // on large screens provide flex box column implementation for IE
        // on smaller screens let them display full width one under another
        @include vf-grid-flex-column;
        @include vf-grid-column($i);
      }
    }
  }

  // span full grid on other breakpoints; (to match block level element behaviour)
  @for $i from 1 through $grid-columns-small {
    .#{$grid-small-col-prefix}#{$i} {
      @extend %span-full-grid-on-tablet;
      @extend %span-full-grid-on-desktop;
      @extend %display-block;
    }
  }

  @for $i from 1 through $grid-columns-medium {
    .#{$grid-medium-col-prefix}#{$i} {
      @extend %span-full-grid-on-mobile;
      @extend %span-full-grid-on-desktop;
      @extend %display-block;
    }
  }

  @for $i from 1 through $grid-columns {
    .#{$grid-large-col-prefix}#{$i} {
      @extend %span-full-grid-on-mobile;
      @extend %span-full-grid-on-tablet;
      @extend %display-block;
    }
  }

  // column reordering
  $offsets: (
    (small, 0, $threshold-4-6-col, $grid-columns-small - 1),
    (medium, $threshold-4-6-col, $threshold-6-12-col, $grid-columns-medium - 1),
    (large, $threshold-6-12-col, -1, $grid-columns - 1)
  );

  @each $label, $breakpoint-min, $breakpoint-max, $col-count in $offsets {
    $query: null;
    @if $breakpoint-min == 0 {
      $query: '(max-width: #{$breakpoint-max})';
    } @else if $breakpoint-max == -1 {
      $query: '(min-width: #{$breakpoint-min})';
    } @else {
      $query: '(min-width: #{$breakpoint-min}) and (max-width: #{$breakpoint-max})';
    }

    @media #{$query} {
      @for $i from 1 through $col-count {
        .row [class*='#{$grid-column-prefix}'].#{$grid-column-prefix}start-#{$label}-#{$i} {
          grid-column-start: #{$i};
        }

        .#{$grid-column-prefix}order-#{$label}-#{$i} {
          order: #{$i};
        }
      }
    }
  }

  // variants

  .row.is-bordered {
    position: relative;

    &::before {
      background: $color-mid-light;
      content: '';
      height: 1px;
      margin-bottom: calc(#{$spv-inner--scaleable} - 1px);
      position: absolute;

      @media (max-width: $threshold-4-6-col) {
        left: map-get($grid-margin-widths, small);
        right: map-get($grid-margin-widths, small);
      }

      @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col) {
        left: map-get($grid-margin-widths, medium);
        right: map-get($grid-margin-widths, medium);
      }

      @media (min-width: $threshold-6-12-col) {
        left: map-get($grid-margin-widths, large);
        right: map-get($grid-margin-widths, large);
      }
    }
  }
}