_ionic-extra-grid.scss

// Grids
// -------------------------------

$grid-padding-width:              10px !default;
$grid-responsive-sm-break:        567px !default;  // smaller than landscape phone
$grid-responsive-md-break:        767px !default;  // smaller than portrait tablet
$grid-responsive-lg-break:        1023px !default; // smaller than landscape tablet

$list:();
$classList:();
// create an bigger offset
@for $i from 1 through 100 {
  @if ($i <= 70) {
    @if ($i != 10 or $i != 20 or $i != 25 or $i != 33 or $i != 50 or $i != 66 or $i != 67 or $i != 75 or $i != 80 or $i != 90) {
      $quote: $i/100;
      $percent: percentage($quote);
      $col : col-#{$i};
      .col-offset-#{$i} {
        margin-left: $percent;
      }
      @if $i % 10 == 0 {
        $classList: append($list, unquote(".#{$col}"),comma);
        .#{$col}{
//          @include flex(0, 0, $percent);
          max-width: $percent;
        }
      }
    }
  }
}
//@debug $list;
$max : length($list);

@mixin responsive-grid-extra-break($selector, $max-width) {
  @media (max-width: $max-width) {
    #{$selector} {
        #{$classList}{
//          @include flex(1);
          margin-bottom: ($grid-padding-width * 3) / 2;
          margin-left: 0;
          max-width: 100%;
          width: 100%;
      }
    }
  }
}



@include responsive-grid-extra-break('.responsive-sm', $grid-responsive-sm-break);
@include responsive-grid-extra-break('.responsive-md', $grid-responsive-md-break);
@include responsive-grid-extra-break('.responsive-lg', $grid-responsive-lg-break);