_columns.scss

// Columns

// Base column styles
*[class*="col-"],
*[class*="sm-col-"],
*[class*="md-col-"],
*[class*="flex-basis-"],
.col {
  flex: 0 1 $flex-basis;
  position: relative;
  box-sizing: border-box;
  padding-left: $col-padding;
  padding-right: $col-padding;
  min-width: 0;
}

// standard column sizing
@for $i from 1 through 12 {
  $flex-basis: 8.333333% * $i;
  .col-#{$i} {
    flex-basis: $flex-basis;
  }
}

// column sizing for IE10/11
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  @for $i from 1 through 12 {
    $width: 8.333333% * $i;
    .col-#{$i} {
      width: $width;
      flex-basis: auto;
    }
  }
}

// Col Grow Option
.col-grow {
  flex: 1 1 $flex-basis;
}

.col-no-pad {
  padding-left: 0;
  padding-right: 0;
}

// Medium Breakpoint Adjustments
@media screen and (max-width: $medium-breakpoint) {
  // Medium columns (.md-col-6, etc.)
  @for $i from 1 through 12 {
    $flex-basis: 8.333333% * $i;
    .md-col-#{$i} {
      flex-basis: $flex-basis;
    }
  }

  // Medium col-no-pad
  .md-col-no-pad {
    padding-left: 0;
    padding-right: 0;
  }
}

// Medium Breakpoint Adjustments for IE10/11
@media screen and (max-width: $medium-breakpoint) and (-ms-high-contrast: none),
  (-ms-high-contrast: active) {
  @for $i from 1 through 12 {
    $width: 8.333333% * $i;
    .md-col-#{$i} {
      width: $width;
      flex-basis: auto;
    }
  }
}

// Small Breakpoint Adjustments
@media screen and (max-width: $small-breakpoint) {
  // default columns go full width
  *[class*="col-"] {
    flex: 1 1 $flex-basis;
    flex-basis: 100%;
  }

  // small columns (.sm-col-6, etc.)
  @for $i from 1 through 12 {
    $flex-basis: 8.333333% * $i;
    .sm-col-#{$i} {
      flex-basis: $flex-basis;
      flex-grow: 0;
    }
  }

  // Small col-no-pad
  .sm-col-no-pad {
    padding-left: 0;
    padding-right: 0;
  }
}

// Small Breakpoint Adjustments for IE10/11
@media screen and (max-width: $small-breakpoint) and (-ms-high-contrast: none),
  (-ms-high-contrast: active) {
  @for $i from 1 through 12 {
    $width: 8.333333% * $i;
    .sm-col-#{$i} {
      width: $width;
      flex-basis: auto;
    }
  }
}