1/**
  2 * Grid
  3 * --------------------------------------------------
  4 * Using flexbox for the grid, inspired by Philip Walton:
  5 * http://philipwalton.github.io/solved-by-flexbox/demos/grids/
  6 * By default each .col within a .row will evenly take up
  7 * available width, and the height of each .col with take
  8 * up the height of the tallest .col in the same .row.
  9 */
 10
 11.row {
 12  @include display-flex();
 13  padding: ($grid-padding-width / 2);
 14  width: 100%;
 15}
 16
 17.row-wrap {
 18  @include flex-wrap(wrap);
 19}
 20
 21.row-no-padding {
 22  padding: 0;
 23
 24  > .col {
 25    padding: 0;
 26  }
 27}
 28
 29.row + .row {
 30  margin-top: ($grid-padding-width / 2) * -1;
 31  padding-top: 0;
 32}
 33
 34.col {
 35  @include flex(1);
 36  display: block;
 37  padding: ($grid-padding-width / 2);
 38  width: 100%;
 39}
 40
 41
 42/* Vertically Align Columns */
 43/* .row-* vertically aligns every .col in the .row */
 44.row-top {
 45  @include align-items(flex-start);
 46}
 47.row-bottom {
 48  @include align-items(flex-end);
 49}
 50.row-center {
 51  @include align-items(center);
 52}
 53.row-stretch {
 54  @include align-items(stretch);
 55}
 56.row-baseline {
 57  @include align-items(baseline);
 58}
 59
 60/* .col-* vertically aligns an individual .col */
 61.col-top {
 62  @include align-self(flex-start);
 63}
 64.col-bottom {
 65  @include align-self(flex-end);
 66}
 67.col-center {
 68  @include align-self(center);
 69}
 70
 71/* Column Offsets */
 72.col-offset-10 {
 73  margin-left: 10%;
 74}
 75.col-offset-20 {
 76  margin-left: 20%;
 77}
 78.col-offset-25 {
 79  margin-left: 25%;
 80}
 81.col-offset-33, .col-offset-34 {
 82  margin-left: 33.3333%;
 83}
 84.col-offset-50 {
 85  margin-left: 50%;
 86}
 87.col-offset-66, .col-offset-67 {
 88  margin-left: 66.6666%;
 89}
 90.col-offset-75 {
 91  margin-left: 75%;
 92}
 93.col-offset-80 {
 94  margin-left: 80%;
 95}
 96.col-offset-90 {
 97  margin-left: 90%;
 98}
 99
100
101/* Explicit Column Percent Sizes */
102/* By default each grid column will evenly distribute */
103/* across the grid. However, you can specify individual */
104/* columns to take up a certain size of the available area */
105.col-10 {
106  @include flex(0, 0, 10%);
107  max-width: 10%;
108}
109.col-20 {
110  @include flex(0, 0, 20%);
111  max-width: 20%;
112}
113.col-25 {
114  @include flex(0, 0, 25%);
115  max-width: 25%;
116}
117.col-33, .col-34 {
118  @include flex(0, 0, 33.3333%);
119  max-width: 33.3333%;
120}
121.col-40 {
122  @include flex(0, 0, 40%);
123  max-width: 40%;
124}
125.col-50 {
126  @include flex(0, 0, 50%);
127  max-width: 50%;
128}
129.col-60 {
130  @include flex(0, 0, 60%);
131  max-width: 60%;
132}
133.col-66, .col-67 {
134  @include flex(0, 0, 66.6666%);
135  max-width: 66.6666%;
136}
137.col-75 {
138  @include flex(0, 0, 75%);
139  max-width: 75%;
140}
141.col-80 {
142  @include flex(0, 0, 80%);
143  max-width: 80%;
144}
145.col-90 {
146  @include flex(0, 0, 90%);
147  max-width: 90%;
148}
149
150
151/* Responsive Grid Classes */
152/* Adding a class of responsive-X to a row */
153/* will trigger the flex-direction to */
154/* change to column and add some margin */
155/* to any columns in the row for clearity */
156
157@include responsive-grid-break('.responsive-sm', $grid-responsive-sm-break);
158@include responsive-grid-break('.responsive-md', $grid-responsive-md-break);
159@include responsive-grid-break('.responsive-lg', $grid-responsive-lg-break);