layout.scss

/*
*  Responsive attributes
*
*  References:
*  1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex
*  2) https://css-tricks.com/almanac/properties/f/flex/
*  3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*  4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
*  5) http://godban.com.ua/projects/flexgrid
*/
@mixin flex-order-for-name($sizes:null) {
  @if $sizes == null {
    $sizes : '';

    .flex-order {
     order : 0;
    }
  }

  @for $i from -20 through 20 {
    $order : '';
    $suffix : '';

    @each $s in $sizes {
      @if $s != '' { $suffix : '#{$s}-#{$i}'; }
      @else        { $suffix : '#{$i}';       }

      $order : '.flex-order-#{$suffix}';
    }

    #{$order} {
      order: #{$i};
    }
  }
}

@mixin offset-for-name($sizes:null) {
  @if $sizes == null { $sizes : ''; }

  @for $i from 0 through 19 {
    $offsets : '';
    $suffix : '';

    @each $s in $sizes {
      @if $s != '' { $suffix : '#{$s}-#{$i * 5}'; }
      @else        { $suffix : '#{$i * 5}';       }

      $offsets : '.offset-#{$suffix}, .flex-offset-#{$suffix}, .layout-margin .flex-offset-#{$suffix}, .layout-margin .offset-#{$suffix}';
    }

    #{$offsets} {
      @if $i != 0 { @include rtl-prop(margin-left, margin-right, #{$i * 5 + '%'}, auto); }
      @else { @include rtl-prop(margin-left, margin-right, 0, auto); }
    }
  }

  @each $i in 33 {
    $offsets : '';
    $suffix : '';

    @each $s in $sizes {
      @if $s != '' {  $suffix : '#{$s}-#{$i}';   }
      @else        {  $suffix : '#{$i}';         }

      $offsets : '.offset-#{$suffix}, .flex-offset-#{$suffix}, .layout-margin .flex-offset-#{$suffix}, .layout-margin .offset-#{$suffix}';
    }

    #{$offsets} {
      margin-left: calc(100% / 3);
    }
  }

  @each $i in 66 {
    $offsets : '';
    $suffix : '';

    @each $s in $sizes {
      @if $s != '' {  $suffix : '#{$s}-#{$i}';   }
      @else        {  $suffix : '#{$i}';         }

      $offsets : '.offset-#{$suffix}, .flex-offset-#{$suffix}, .layout-margin .flex-offset-#{$suffix}, .layout-margin .offset-#{$suffix}';
    }

    #{$offsets} {
      @include rtl-prop(margin-left, margin-right, calc(200% / 3), auto);
    }
  }
}

@mixin layout-for-name($name: null) {
  @if $name == null { $name : '';          }
  @if $name != ''   { $name : '-#{$name}'; }

  .layout#{$name}, .layout#{$name}-column, .layout#{$name}-row {
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
  }
  .layout#{$name}-column {  flex-direction: column;     }
  .layout#{$name}-row    {  flex-direction: row;        }
}

@mixin flex-properties-for-name($name: null) {
  $flexName: 'flex';
  @if $name != null {
    $flexName: 'flex-#{$name}';
    $name : '-#{$name}';
  } @else {
    $name : '';
  }

  .#{$flexName}             { flex: 1;         box-sizing: border-box; }  // === flex: 1 1 0%;

  .#{$flexName}-grow        { flex: 1 1 100%;  box-sizing: border-box; }
  .#{$flexName}-initial     { flex: 0 1 auto;  box-sizing: border-box; }
  .#{$flexName}-auto        { flex: 1 1 auto;  box-sizing: border-box; }
  .#{$flexName}-none        { flex: 0 0 auto;  box-sizing: border-box; }
  .#{$flexName}-noshrink    { flex: 1 0 auto;  box-sizing: border-box; }
  .#{$flexName}-nogrow      { flex: 0 1 auto;  box-sizing: border-box; }

  .layout-row > .#{$flexName}-grow        { flex: 1 1 100%;  box-sizing: border-box; }
  .layout-row > .#{$flexName}-initial     { flex: 0 1 auto;  box-sizing: border-box; }
  .layout-row > .#{$flexName}-auto        { flex: 1 1 auto;  box-sizing: border-box; }
  .layout-row > .#{$flexName}-none        { flex: 0 0 auto;  box-sizing: border-box; }
  .layout-row > .#{$flexName}-noshrink    { flex: 1 0 auto;  box-sizing: border-box; }
  .layout-row > .#{$flexName}-nogrow      { flex: 0 1 auto; box-sizing: border-box; }

  .layout-column > .#{$flexName}-grow        { flex: 1 1 100%;  box-sizing: border-box; }
  .layout-column > .#{$flexName}-initial     { flex: 0 1 auto;  box-sizing: border-box; }
  .layout-column > .#{$flexName}-auto        { flex: 1 1 auto;  box-sizing: border-box; }
  .layout-column > .#{$flexName}-none        { flex: 0 0 auto;  box-sizing: border-box; }
  .layout-column > .#{$flexName}-noshrink    { flex: 1 0 auto;  box-sizing: border-box; }
  .layout-column > .#{$flexName}-nogrow      { flex: 0 1 auto; box-sizing: border-box; }

  // (1-20) * 5 = 0-100%
  @for $i from 0 through 20 {
    $value : #{$i * 5 + '%'};

    .#{$flexName}-#{$i * 5} {
      flex: 1 1 100%;
      max-width: #{$value};
      max-height: 100%;
      box-sizing: border-box;
    }

    .layout-row > .#{$flexName}-#{$i * 5} {
      flex: 1 1 100%;
      max-width: #{$value};
      max-height: 100%;
      box-sizing: border-box;

      // Required by Chrome M48+ due to http://crbug.com/546034
      @if $i == 0 {  min-width: 0;  }
    }

    .layout-column > .#{$flexName}-#{$i * 5} {
      flex: 1 1 100%;
      max-width: 100%;
      max-height: #{$value};
      box-sizing: border-box;
    }

    .layout#{$name}-row > .#{$flexName}-#{$i * 5} {
      flex: 1 1 100%;
      max-width: #{$value};
      max-height: 100%;
      box-sizing: border-box;

      // Required by Chrome M48+ due to http://crbug.com/546034
      @if $i == 0 {  min-width: 0;  }
    }

    .layout#{$name}-column > .#{$flexName}-#{$i * 5} {
      flex: 1 1 100%;
      max-width: 100%;
      max-height: #{$value};
      box-sizing: border-box;

      // Required by Chrome M48+ due to http://crbug.com/546034
      @if $i == 0 {  min-height: 0;  }
    }
  }

  @if ($name == '') {
    .flex-33 { flex: 1 1 100%;  max-width: 33.33%;  max-height: 100%; box-sizing: border-box; }
    .flex-66 { flex: 1 1 100%;  max-width: 66.66%;  max-height: 100%; box-sizing: border-box; }
   }

  .layout-row {
    > .#{$flexName}-33 { flex: 1 1 33.33%;  max-width: 33.33%;  max-height: 100%; box-sizing: border-box; }
    > .#{$flexName}-66 { flex: 1 1 66.66%;  max-width: 66.66%;  max-height: 100%; box-sizing: border-box; }
  }

  .layout-column {
    > .#{$flexName}-33 { flex: 1 1 33.33%;  max-width: 100%;  max-height: 33.33%; box-sizing: border-box; }
    > .#{$flexName}-66 { flex: 1 1 66.66%;  max-width: 100%;  max-height: 66.66%; box-sizing: border-box; }
  }

  .layout#{$name}-row {
    > .#{$flexName}-33 { flex: 1 1 100%;  max-width: 33.33%;  max-height: 100%; box-sizing: border-box; }
    > .#{$flexName}-66 { flex: 1 1 100%;  max-width: 66.66%;  max-height: 100%; box-sizing: border-box; }

    // Required by Chrome M48+ due to http://crbug.com/546034
    > .flex { min-width: 0;  }
  }

  .layout#{$name}-column {
    > .#{$flexName}-33 { flex: 1 1 100%;  max-width: 100%;  max-height: 33.33%; box-sizing: border-box; }
    > .#{$flexName}-66 { flex: 1 1 100%;  max-width: 100%;  max-height: 66.66%; box-sizing: border-box; }

    // Required by Chrome M48+ due to http://crbug.com/546034
    > .flex { min-height: 0; }
  }
}

@mixin layout-align-for-name($suffix: null) {

  // Alignment attributes for layout containers' children
  // Arrange on the Main Axis
  // center, start, end, space-between, space-around
  // flex-start is the default for justify-content
  // ------------------------------

  $name: 'layout-align';
  @if $suffix != null {
    $name: 'layout-align-#{$suffix}';
  }

  .#{$name},
  .#{$name}-start-stretch // defaults
  {
    justify-content : flex-start;
    align-content : stretch;
    align-items: stretch;
  }

  // Main Axis Center
  .#{$name}-start,
  .#{$name}-start-start,
  .#{$name}-start-center,
  .#{$name}-start-end,
  .#{$name}-start-stretch
  {
    justify-content: flex-start;
  }

  // Main Axis Center
  .#{$name}-center,           //stretch
  .#{$name}-center-start,
  .#{$name}-center-center,
  .#{$name}-center-end,
  .#{$name}-center-stretch
  {
    justify-content: center;
  }

  // Main Axis End
  .#{$name}-end, //stretch
  .#{$name}-end-start,
  .#{$name}-end-center,
  .#{$name}-end-end,
  .#{$name}-end-stretch
  {
    justify-content: flex-end;
  }

  // Main Axis Space Around
  .#{$name}-space-around, //stretch
  .#{$name}-space-around-center,
  .#{$name}-space-around-start,
  .#{$name}-space-around-end,
  .#{$name}-space-around-stretch
  {
    justify-content: space-around;
  }

  // Main Axis Space Between
  .#{$name}-space-between, //stretch
  .#{$name}-space-between-center,
  .#{$name}-space-between-start,
  .#{$name}-space-between-end,
  .#{$name}-space-between-stretch
  {
    justify-content: space-between;
  }


  // Arrange on the Cross Axis
  // center, start, end
  // stretch is the default for align-items
  // ------------------------------

  // Cross Axis Start
  .#{$name}-start-start,
  .#{$name}-center-start,
  .#{$name}-end-start,
  .#{$name}-space-between-start,
  .#{$name}-space-around-start
  {
    align-items: flex-start;
    align-content: flex-start;
  }

  // Cross Axis Center
  .#{$name}-start-center,
  .#{$name}-center-center,
  .#{$name}-end-center,
  .#{$name}-space-between-center,
  .#{$name}-space-around-center
  {
    align-items: center;
    align-content: center;
    max-width: 100%;
  }

  // Cross Axis Center IE overflow fix
  .#{$name}-start-center > *,
  .#{$name}-center-center > *,
  .#{$name}-end-center > *,
  .#{$name}-space-between-center > *,
  .#{$name}-space-around-center > *
  {
    max-width: 100%;
    box-sizing: border-box;
  }

  // Cross Axis End
  .#{$name}-start-end,
  .#{$name}-center-end,
  .#{$name}-end-end,
  .#{$name}-space-between-end,
  .#{$name}-space-around-end
  {
    align-items: flex-end;
    align-content: flex-end;
  }

  // Cross Axis Start
  .#{$name}-start-stretch,
  .#{$name}-center-stretch,
  .#{$name}-end-stretch,
  .#{$name}-space-between-stretch,
  .#{$name}-space-around-stretch
  {
    align-items: stretch;
    align-content: stretch;
  }
}

@mixin layout-padding-margin() {

  // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
  .layout-padding-sm > *,
  .layout-padding    > .flex-sm
  {
    padding: $layout-gutter-width / 4;
  }

  .layout-padding,
  .layout-padding-gt-sm,
  .layout-padding-md,

  // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
  .layout-padding        > *,
  .layout-padding-gt-sm  > *,
  .layout-padding-md     > *,

  .layout-padding        > .flex,
  .layout-padding        > .flex-gt-sm,
  .layout-padding        > .flex-md
  {
    padding: $layout-gutter-width / 2;
  }

  // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
  .layout-padding-gt-md  > *,
  .layout-padding-lg     > *,
  .layout-padding-gt-lg  > *,

  .layout-padding        > .flex-gt-md,
  .layout-padding        > .flex-lg,
  .layout-padding        > .flex-lg,
  .layout-padding        > .flex-gt-lg
  {
    padding: $layout-gutter-width / 1;
  }

  // Margin enhancements

  .layout-margin-sm      > *,
  .layout-margin         > .flex-sm
  {
    margin: $layout-gutter-width / 4;
  }

  .layout-margin,
  .layout-margin-gt-sm,
  .layout-margin-md,

  // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
  .layout-margin         > *,
  .layout-margin-gt-sm   > *,
  .layout-margin-md      > *,

  .layout-margin         > .flex,
  .layout-margin         > .flex-gt-sm,
  .layout-margin         > .flex-md
  {
    margin: $layout-gutter-width / 2;
  }

  // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
  .layout-margin-gt-md  > *,
  .layout-margin-lg     > *,
  .layout-margin-gt-lg  > *,

  .layout-margin        > .flex-gt-md,
  .layout-margin        > .flex-lg,
  .layout-margin        > .flex-gt-lg
  {
    margin: $layout-gutter-width / 1;
  }

  .layout-wrap {
    flex-wrap: wrap;
  }

  .layout-nowrap {
      flex-wrap: nowrap;
  }

  .layout-fill {
    margin: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
  }
}

@mixin layouts_for_breakpoint($name:null) {
    @include flex-order-for-name($name);
    @include offset-for-name($name);
    @include layout-align-for-name($name);

    @include flex-properties-for-name($name);
    @include layout-for-name($name);
}