18F/18f.gsa.gov

/* stylelint-disable */

$namespace-grid: ns("grid");

// basic container
.#{$namespace-grid}container {
  $props: append-important($grid-global, $theme-grid-container-max-width);
  @include grid-container($props);
}

// container with custom widths
@each $width-key, $width-value in $system-breakpoints {
  .#{$namespace-grid}container-#{$width-key} {
    $props: append-important($grid-global, $width-key);
    @include grid-container($props);
  }
}

// responsive containers...
@each $mq-key, $mq-value in $system-breakpoints {
  @if map-get($theme-utility-breakpoints, $mq-key) {
    @include at-media($mq-key) {
      .#{$mq-key}\:#{$namespace-grid}container {
        $props: append-important($grid-global, desktop);
        @include grid-container($props);
      }

      // ...with custom widths
      @each $width-key, $width-value in $system-breakpoints {
        .#{$mq-key}\:#{$namespace-grid}container-#{$width-key} {
          $props: append-important($grid-global, $width-key);
          @include grid-container($props);
        }
      }
    }
  }
}

// basic row...
.#{$namespace-grid}row {
  @include grid-row;

  // ...that includes column gaps
  &.#{$namespace-grid}gap {
    @include grid-gap-responsive;
  }
  @each $gap-key, $gap-val in map-deep-get($system-properties, gap, standard) {
    &.#{$namespace-grid}gap-#{$gap-key} {
      $props: append-important($grid-global, $gap-key);
      @include grid-gap($props);
    }
  }

  // responsive column gaps
  @each $mq-key, $mq-value in $system-breakpoints {
    @if map-get($theme-utility-breakpoints, $mq-key) {
      @include at-media($mq-key) {
        @each $gap-key,
          $gap-val in map-deep-get($system-properties, gap, standard)
        {
          &.#{$mq-key}\:#{$namespace-grid}gap-#{$gap-key} {
            $props: append-important($grid-global, $gap-key);
            @include grid-gap($props);
          }
        }
      }
    }
  }
}

// basic columns...
[class*="#{$namespace-grid}col"] {
  @include u-position(relative);
  @include u-width(full);
  box-sizing: border-box;
}

.#{$namespace-grid}col {
  $props: append-important($grid-global, fill);
  @include grid-col($props);
}

.#{$namespace-grid}col-auto {
  $props: append-important($grid-global, auto);
  @include grid-col($props);
}

.#{$namespace-grid}col-fill {
  $props: append-important($grid-global, fill);
  @include grid-col($props);
}

// ...with widths
@each $width-key, $width-value in $system-layout-grid-widths {
  .#{$namespace-grid}col-#{$width-key} {
    $props: append-important($grid-global, $width-key);
    @include grid-col($props);
  }
}

// responsive columns
@each $mq-key, $mq-value in $system-breakpoints {
  @if map-get($theme-utility-breakpoints, $mq-key) {
    @include at-media($mq-key) {
      .#{$mq-key}\:#{$namespace-grid}col {
        $props: append-important($grid-global, fill);
        @include grid-col($props);
      }
      .#{$mq-key}\:#{$namespace-grid}col-fill {
        $props: append-important($grid-global, fill);
        @include grid-col($props);
      }
      .#{$mq-key}\:#{$namespace-grid}col-auto {
        $props: append-important($grid-global, auto);
        @include grid-col($props);
      }

      @each $width-key, $width-value in $system-layout-grid-widths {
        .#{$mq-key}\:#{$namespace-grid}col-#{$width-key} {
          $props: append-important($grid-global, $width-key);
          @include grid-col($props);
        }
      }
    }
  }
}

// basic offsets
@each $width-key, $width-value in $system-layout-grid-widths {
  .#{$namespace-grid}offset-#{$width-key} {
    $props: append-important($grid-global, $width-key);
    @include grid-offset($props);
  }
}
.#{$namespace-grid}offset-none {
  $props: append-important($grid-global, none);
  @include grid-offset($props);
}

// responsive offsets
@each $mq-key, $mq-value in $system-breakpoints {
  @if map-get($theme-utility-breakpoints, $mq-key) {
    @each $width-key, $width-value in $system-layout-grid-widths {
      @include at-media($mq-key) {
        .#{$mq-key}\:#{$namespace-grid}offset-#{$width-key} {
          $props: append-important($grid-global, $width-key);
          @include grid-offset($props);
        }
      }
    }
    @include at-media($mq-key) {
      .#{$mq-key}\:#{$namespace-grid}offset-none {
        $props: append-important($grid-global, none);
        @include grid-offset($props);
      }
    }
  }
}
/* stylelint-enable */