flexiblegs-scss.scss

/*! Flexible Grid System 5.6.0 | Scss | MIT License | dnomak.com/flexiblegs */

@mixin wrap($prop: null, $val: null) {
  @if $prop == null {
    display: block;
    width: 100%;
    font-size: 0;
    letter-spacing: 0;
    text-align: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    > * {
      display: inline-block;
      vertical-align: top;
    }
  }
  @else if $prop == "table" {
    display: table;
    table-layout: fixed;
    -webkit-flex-direction: initial;
    -ms-flex-direction: initial;
    flex-direction: initial;
    -webkit-flex-wrap: initial;
    -ms-flex-wrap: initial;
    flex-wrap: initial;
    -webkit-justify-content: initial;
    -ms-justify-content: initial;
    justify-content: initial;
    -webkit-align-content: initial;
    -ms-align-content: initial;
    align-content: initial;
    -webkit-align-items: initial;
    -ms-align-items: initial;
    align-items: initial;
    -webkit-column-count: auto;
    -moz-column-count: auto;
    column-count: auto;
    > * {
      display: table-cell;
    }
  }
  @else if $prop == "flexbox" {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    table-layout: auto;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-content: center;
    -ms-align-content: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-column-count: auto;
    -moz-column-count: auto;
    column-count: auto;
    > * {
      display: inline-block;
    }
  }
  @else if $prop == "normal" {
    display: block;
    table-layout: auto;
    -webkit-flex-direction: initial;
    -ms-flex-direction: initial;
    flex-direction: initial;
    -webkit-flex-wrap: initial;
    -ms-flex-wrap: initial;
    flex-wrap: initial;
    -webkit-justify-content: initial;
    -ms-justify-content: initial;
    justify-content: initial;
    -webkit-align-content: initial;
    -ms-align-content: initial;
    align-content: initial;
    -webkit-align-items: initial;
    -ms-align-items: initial;
    align-items: initial;
    -webkit-column-count: auto;
    -moz-column-count: auto;
    column-count: auto;
    > * {
      display: inline-block;
    }
  }
  @else if $prop == "left" {
    -webkit-justify-content: flex-start;
    -ms-justify-content: flex-start;
    justify-content: flex-start;
    text-align: left;
  }
  @else if $prop == "center" {
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    text-align: center;
  }
  @else if $prop == "right" {
    -webkit-justify-content: flex-end;
    -ms-justify-content: flex-end;
    justify-content: flex-end;
    text-align: right;
  }
  @else if $prop == "top" {
    -webkit-align-items: flex-start;
    -ms-align-items: flex-start;
    align-items: flex-start;
    > * {
      vertical-align: top;
    }
  }
  @else if $prop == "middle" {
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    > * {
      vertical-align: middle;
    }
  }
  @else if $prop == "bottom" {
    -webkit-align-items: flex-end;
    -ms-align-items: flex-end;
    align-items: flex-end;
    > * {
      vertical-align: bottom;
    }
  }
  @else if $prop == "stretch" {
    -webkit-align-content: stretch;
    -ms-align-content: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-align-items: stretch;
    align-items: stretch;
  }
  @else if $prop == "between" {
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-content: space-between;
    -ms-align-content: space-between;
    align-content: space-between;
  }
  @else if $prop == "around" {
    -webkit-justify-content: space-around;
    -ms-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-content: space-around;
    -ms-align-content: space-around;
    align-content: space-around;
  }
  @else if $prop == "baseline" {
    -webkit-align-items: baseline;
    -ms-align-items: baseline;
    align-items: baseline;
  }
  @else if $prop == "reverse" {
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-flex-wrap: wrap-reverse;
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
  }
  @else if $prop == "not-reverse" {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  @else if $prop == "gutter" {
    width: calc(100% + #{$val}#{"px"});
    margin-left: -#{$val / 2}#{"px"};
    margin-right: -#{$val / 2}#{"px"};
    padding-left: 0;
    padding-right: 0;
    > * {
      padding-left: #{$val / 2}#{"px"};
      padding-right: #{$val / 2}#{"px"};
    }
  }
  @else if $prop == "outside" {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: #{$val / 2}#{"px"};
    padding-right: #{$val / 2}#{"px"};
  }
  @else {
    > * {
      @if $prop == "auto" {
        width: auto;
      }
      @else {
        width: #{100% / $prop};
      }
    }
  }
}

@mixin col($prop: null, $val: null) {
  @if $prop == null {
    min-height: 1px;
    font-size: 1rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  @else if $prop == "width" {
    width: #{$val}#{"px"};
  }
  @else if $prop == "hidden" {
    display: none;
  }
  @else if $prop == "not-hidden" {
    display: inline-block;
  }
  @else if $prop == "first" {
    -ms-flex-order: -1;
    -webkit-order: -1;
    order: -1;
  }
  @else if $prop == "not-first" {
    -ms-flex-order: 0;
    -webkit-order: 0;
    order: 0;
  }
  @else if $prop == "last" {
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
  @else if $prop == "not-last" {
    -ms-flex-order: 0;
    -webkit-order: 0;
    order: 0;
  }
  @else {
    width: #{100% / $val * $prop};
  }
}