beta-scss/src/flex.scss

@import "variables";

@each $name, $value in $flex-directions {
  .flex\:#{$name} {
    flex-direction: $value;
  }
}

@each $name, $value in $flex-wraps {
  .flex\:#{$name} {
    flex-wrap: $value;
  }
}

@each $name, $value in $align-items {
  .items\:#{$name} {
    align-items: $value;
  }
}

@each $name, $value in $align-contents {
  .content\:#{$name} {
    align-content: $value;
  }
}

@each $name, $value in $align-selfs {
  .self\:#{$name} {
    align-self: $value;
  }
}

@each $name, $value in $justify-contents {
  .justify\:#{$name} {
    justify-content: $value;
  }
}

@each $name, $value in $flexs {
  .flex\:#{$name} {
    flex: $value;
  }
}

@each $name, $value in $orders {
  .order\:#{$name} {
    order: $value;
  }
}

@each $name, $value in $grows {
  .flex\:#{$name} {
    flex-grow: $value;
  }
}

@each $name, $value in $shrinks {
  .flex\:#{$name} {
    flex-shrink: $value;
  }
}

// Responsive flex items

// ie : flex:1/12
@each $name, $value in $twelve-columns {
  .flex\:#{$name} {
    flex-basis: $value;
  }
}

@each $bpName, $bpValue in $breakpoints {
  // ie : sm:flex:3/12
  @each $name, $value in $twelve-columns {
    @media (min-width: #{$bpValue}) {
      .#{$bpName}\:flex\:#{$name} {
        flex-basis: $value;
      }
    }
  }

  @each $name, $value in $align-items {
    @media (min-width: #{$bpValue}) {
      .#{$bpName}\:items\:#{$name} {
        align-items: $value;
      }
    }
  }

  @each $name, $value in $align-contents {
    @media (min-width: #{$bpValue}) {
      .#{$bpName}\:content\:#{$name} {
        align-content: $value;
      }
    }
  }

  @each $name, $value in $justify-contents {
    @media (min-width: #{$bpValue}) {
      .#{$bpName}\:justify\:#{$name} {
        justify-content: $value;
      }
    }
  }
}