ionic-framework/ionic/components/grid/grid.scss

@import "../../globals.core";

// Grid
// --------------------------------------------------
// Using flexbox for the grid, inspired by Philip Walton:
// http://philipwalton.github.io/solved-by-flexbox/demos/grids/
// By default each .col within a .row will evenly take up
// available width, and the height of each .col with take
// up the height of the tallest .col in the same .row.


$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

@mixin responsive-grid-break($selector, $max-width) {
  @media (max-width: $max-width) {
    #{$selector} {
      flex-direction: column;

      ion-col {
        &[width-10], &[width-20], &[width-25], &[width-33], &[width-34], &[width-50], &[width-66], &[width-67], &[width-75], &[width-80], &[width-90] {
          flex: 1;
          margin-bottom: ($grid-padding-width * 3) / 2;
          margin-left: 0;
          max-width: 100%;
          width: 100%;
        }
      }

    }
  }
}


ion-row {
  display: flex;
  padding: ($grid-padding-width / 2);
  width: 100%;

  &[wrap] {
    flex-wrap: wrap;
  }

  &[flush] {
    padding: 0;
  }

  &[top] {
    align-items: flex-start;
  }
  &[bottom] {
    align-items: flex-end;
  }

  &[center] {
    align-items: center;
  }
  &[stretch] {
    align-items: stretch;
  }
  &[baseline] {
    align-items: baseline;
  }
}

ion-row + ion-row {
  margin-top: ($grid-padding-width / 2) * -1;
  padding-top: 0;
}

ion-col {
  flex: 1;
  display: block;
  padding: ($grid-padding-width / 2);
  width: 100%;

  &[top] {
    align-self: flex-start;
  }
  &[bottom] {
    align-self: flex-end;
  }

  &[center] {
    align-self: center;
  }
  &[stretch] {
    align-self: stretch;
  }
  &[baseline] {
    align-self: baseline;
  }
}


/* Column Offsets */
ion-col {
  &[offset-10] {
    margin-left: 10%;
  }
  &[offset-20] {
    margin-left: 20%;
  }
  &[offset-25] {
    margin-left: 25%;
  }
  &[offset-33], &[offset-34] {
    margin-left: 33.3333%;
  }
  &[offset-50] {
    margin-left: 50%;
  }
  &[offset-66], &[offset-67] {
    margin-left: 66.6666%;
  }
  &[offset-75] {
    margin-left: 75%;
  }
  &[offset-80] {
    margin-left: 80%;
  }
  &[offset-90] {
    margin-left: 90%;
  }
}


/* Explicit Column Percent Sizes */
/* By default each grid column will evenly distribute */
/* across the grid. However, you can specify individual */
/* columns to take up a certain size of the available area */
ion-col {
  &[width-10] {
    flex: 0 0 10%;
    max-width: 10%;
  }
  &[width-20] {
    flex: 0 0 20%;
    max-width: 20%;
  }
  &[width-25] {
    flex: 0 0 25%;
    max-width: 25%;
  }
  &[width-33], &[width-34] {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  &[width-50] {
    flex: 0 0 50%;
    max-width: 50%;
  }
  &[width-66], &[width-67] {
    flex: 0 0 66.6666%;
    max-width: 66.6666%;
  }
  &[width-75] {
    flex: 0 0 75%;
    max-width: 75%;
  }
  &[width-80] {
    flex: 0 0 80%;
    max-width: 80%;
  }
  &[width-90] {
    flex: 0 0 90%;
    max-width: 90%;
  }
}


/* Responsive Grid Classes */
/* Adding a class of responsive-X to a row */
/* will trigger the width-direction to */
/* change to column and add some margin */
/* to any columns in the row for clearity */

@include responsive-grid-break('[responsive-sm]', $grid-responsive-sm-break);
@include responsive-grid-break('[responsive-md]', $grid-responsive-md-break);
@include responsive-grid-break('[responsive-lg]', $grid-responsive-lg-break);