bsw/jbe@1309: /**
bsw/jbe@1309:  * Copyright 2015 Google Inc. All Rights Reserved.
bsw/jbe@1309:  *
bsw/jbe@1309:  * Licensed under the Apache License, Version 2.0 (the "License");
bsw/jbe@1309:  * you may not use this file except in compliance with the License.
bsw/jbe@1309:  * You may obtain a copy of the License at
bsw/jbe@1309:  *
bsw/jbe@1309:  *      http://www.apache.org/licenses/LICENSE-2.0
bsw/jbe@1309:  *
bsw/jbe@1309:  * Unless required by applicable law or agreed to in writing, software
bsw/jbe@1309:  * distributed under the License is distributed on an "AS IS" BASIS,
bsw/jbe@1309:  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
bsw/jbe@1309:  * See the License for the specific language governing permissions and
bsw/jbe@1309:  * limitations under the License.
bsw/jbe@1309:  */
bsw/jbe@1309: 
bsw/jbe@1309: /*
bsw/jbe@1309: * NOTE: Some rules here are applied using duplicate selectors.
bsw/jbe@1309: * This is on purpose to increase their specificity when applied.
bsw/jbe@1309: * For example: `.mdl-cell--1-col-phone.mdl-cell--1-col-phone`
bsw/jbe@1309: */
bsw/jbe@1309: 
bsw/jbe@1309: @import "../variables";
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-grid {
bsw/jbe@1309:   display: flex;
bsw/jbe@1309:   flex-flow: row wrap;
bsw/jbe@1309:   margin: 0 auto 0 auto;
bsw/jbe@1309:   align-items: stretch;
bsw/jbe@1309: 
bsw/jbe@1309:   &.mdl-grid--no-spacing {
bsw/jbe@1309:     padding: 0;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-cell {
bsw/jbe@1309:   box-sizing: border-box;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-cell--top {
bsw/jbe@1309:   align-self: flex-start;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-cell--middle {
bsw/jbe@1309:   align-self: center;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-cell--bottom {
bsw/jbe@1309:   align-self: flex-end;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-cell--stretch {
bsw/jbe@1309:   align-self: stretch;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-grid.mdl-grid--no-spacing > .mdl-cell {
bsw/jbe@1309:   margin: 0;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: // Define order override classes.
bsw/jbe@1309: @for $i from 1 through $grid-max-columns {
bsw/jbe@1309:   .mdl-cell--order-#{$i} {
bsw/jbe@1309:     order: $i;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: // Mixins for width calculation.
bsw/jbe@1309: @mixin partial-size($size, $columns, $gutter) {
bsw/jbe@1309:   width: calc(#{(($size / $columns) * 100)+"%"} - #{$gutter});
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-grid--no-spacing > & {
bsw/jbe@1309:     width: #{(($size / $columns) * 100)+"%"};
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: @mixin full-size($gutter) {
bsw/jbe@1309:   @include partial-size(1, 1, $gutter);
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: @mixin offset-size($size, $columns, $gutter) {
bsw/jbe@1309:   margin-left: calc(#{(($size / $columns) * 100)+"%"} + #{$gutter / 2});
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-grid.mdl-grid--no-spacing > & {
bsw/jbe@1309:     margin-left: #{(($size / $columns) * 100)+"%"};
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: ////////// Phone //////////
bsw/jbe@1309: 
bsw/jbe@1309: @media (max-width: $grid-tablet-breakpoint - 1) {
bsw/jbe@1309:   .mdl-grid {
bsw/jbe@1309:     padding: $grid-phone-margin - ($grid-phone-gutter / 2);
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-cell {
bsw/jbe@1309:     margin: $grid-phone-gutter / 2;
bsw/jbe@1309:     @include partial-size($grid-cell-default-columns, $grid-phone-columns,
bsw/jbe@1309:         $grid-phone-gutter);
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-cell--hide-phone {
bsw/jbe@1309:     display: none !important;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   // Define order override classes.
bsw/jbe@1309:   @for $i from 1 through $grid-max-columns {
bsw/jbe@1309:     .mdl-cell--order-#{$i}-phone.mdl-cell--order-#{$i}-phone {
bsw/jbe@1309:       order: $i;
bsw/jbe@1309:     }
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   // Define partial sizes for columnNumber < totalColumns.
bsw/jbe@1309:   @for $i from 1 through ($grid-phone-columns - 1) {
bsw/jbe@1309:     .mdl-cell--#{$i}-col,
bsw/jbe@1309:     .mdl-cell--#{$i}-col-phone.mdl-cell--#{$i}-col-phone {
bsw/jbe@1309:       @include partial-size($i, $grid-phone-columns, $grid-phone-gutter);
bsw/jbe@1309:     }
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   // Define 100% for everything else.
bsw/jbe@1309:   @for $i from $grid-phone-columns through $grid-desktop-columns {
bsw/jbe@1309:     .mdl-cell--#{$i}-col,
bsw/jbe@1309:     .mdl-cell--#{$i}-col-phone.mdl-cell--#{$i}-col-phone {
bsw/jbe@1309:       @include full-size($grid-phone-gutter);
bsw/jbe@1309:     }
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   // Define valid phone offsets.
bsw/jbe@1309:   @for $i from 1 through ($grid-phone-columns - 1) {
bsw/jbe@1309:     .mdl-cell--#{$i}-offset,
bsw/jbe@1309:     .mdl-cell--#{$i}-offset-phone.mdl-cell--#{$i}-offset-phone {
bsw/jbe@1309:       @include offset-size($i, $grid-phone-columns, $grid-phone-gutter);
bsw/jbe@1309:     }
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: ////////// Tablet //////////
bsw/jbe@1309: 
bsw/jbe@1309: @media (min-width: $grid-tablet-breakpoint) and (max-width: $grid-desktop-breakpoint - 1) {
bsw/jbe@1309:   .mdl-grid {
bsw/jbe@1309:     padding: $grid-tablet-margin - ($grid-tablet-gutter / 2);
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-cell {
bsw/jbe@1309:     margin: $grid-tablet-gutter / 2;
bsw/jbe@1309:     @include partial-size($grid-cell-default-columns, $grid-tablet-columns,
bsw/jbe@1309:         $grid-tablet-gutter);
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-cell--hide-tablet {
bsw/jbe@1309:     display: none !important;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   // Define order override classes.
bsw/jbe@1309:   @for $i from 1 through $grid-max-columns {
bsw/jbe@1309:     .mdl-cell--order-#{$i}-tablet.mdl-cell--order-#{$i}-tablet {
bsw/jbe@1309:       order: $i;
bsw/jbe@1309:     }
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   // Define partial sizes for columnNumber < totalColumns.
bsw/jbe@1309:   @for $i from 1 through ($grid-tablet-columns - 1) {
bsw/jbe@1309:     .mdl-cell--#{$i}-col,
bsw/jbe@1309:     .mdl-cell--#{$i}-col-tablet.mdl-cell--#{$i}-col-tablet {
bsw/jbe@1309:       @include partial-size($i, $grid-tablet-columns, $grid-tablet-gutter);
bsw/jbe@1309:     }
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   // Define 100% for everything else.
bsw/jbe@1309:   @for $i from $grid-tablet-columns through $grid-desktop-columns {
bsw/jbe@1309:     .mdl-cell--#{$i}-col,
bsw/jbe@1309:     .mdl-cell--#{$i}-col-tablet.mdl-cell--#{$i}-col-tablet {
bsw/jbe@1309:       @include full-size($grid-tablet-gutter);
bsw/jbe@1309:     }
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   // Define valid tablet offsets.
bsw/jbe@1309:   @for $i from 1 through ($grid-tablet-columns - 1) {
bsw/jbe@1309:     .mdl-cell--#{$i}-offset,
bsw/jbe@1309:     .mdl-cell--#{$i}-offset-tablet.mdl-cell--#{$i}-offset-tablet {
bsw/jbe@1309:       @include offset-size($i, $grid-tablet-columns, $grid-tablet-gutter);
bsw/jbe@1309:     }
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: ////////// Desktop //////////
bsw/jbe@1309: 
bsw/jbe@1309: @media (min-width: $grid-desktop-breakpoint) {
bsw/jbe@1309:   .mdl-grid {
bsw/jbe@1309:     padding: $grid-desktop-margin - ($grid-desktop-gutter / 2);
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-cell {
bsw/jbe@1309:     margin: $grid-desktop-gutter / 2;
bsw/jbe@1309:     @include partial-size($grid-cell-default-columns, $grid-desktop-columns,
bsw/jbe@1309:         $grid-desktop-gutter);
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-cell--hide-desktop {
bsw/jbe@1309:     display: none !important;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   // Define order override classes.
bsw/jbe@1309:   @for $i from 1 through $grid-max-columns {
bsw/jbe@1309:     .mdl-cell--order-#{$i}-desktop.mdl-cell--order-#{$i}-desktop {
bsw/jbe@1309:       order: $i;
bsw/jbe@1309:     }
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   // Define partial sizes for all numbers of columns.
bsw/jbe@1309:   @for $i from 1 through $grid-desktop-columns {
bsw/jbe@1309:     .mdl-cell--#{$i}-col,
bsw/jbe@1309:     .mdl-cell--#{$i}-col-desktop.mdl-cell--#{$i}-col-desktop {
bsw/jbe@1309:       @include partial-size($i, $grid-desktop-columns, $grid-desktop-gutter);
bsw/jbe@1309:     }
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   // Define valid desktop offsets.
bsw/jbe@1309:   @for $i from 1 through ($grid-desktop-columns - 1) {
bsw/jbe@1309:     .mdl-cell--#{$i}-offset,
bsw/jbe@1309:     .mdl-cell--#{$i}-offset-desktop.mdl-cell--#{$i}-offset-desktop {
bsw/jbe@1309:       @include offset-size($i, $grid-desktop-columns, $grid-desktop-gutter);
bsw/jbe@1309:     }
bsw/jbe@1309:   }
bsw/jbe@1309: }