From 19c36deea30f4134b6c7f9d22429e3d5794aef57 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Thu, 23 Mar 2017 14:42:19 -0400
Subject: [PATCH] refactor(grid): remove the old grid system

BREAKING CHANGES:

Removed the deprecated (old) grid. See the blog post for more
information including steps to migrate:
http://blog.ionic.io/build-awesome-desktop-apps-with-ionics-new-responsi
ve-grid/
---
 src/components/grid/grid.old.scss | 212 ------------------------------
 src/themes/ionic.components.scss  |   1 -
 2 files changed, 213 deletions(-)
 delete mode 100644 src/components/grid/grid.old.scss

diff --git a/src/components/grid/grid.old.scss b/src/components/grid/grid.old.scss
deleted file mode 100644
index d924af03c05..00000000000
--- a/src/components/grid/grid.old.scss
+++ /dev/null
@@ -1,212 +0,0 @@
-@import "../../themes/ionic.globals";
-
-// 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.
-
-// TODO: Deprecated 2017/02/14: convert to new grid system
-
-$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 {
-        flex: 1;
-
-        &[width-10],
-        &[width-20],
-        &[width-25],
-        &[width-33],
-        &[width-34],
-        &[width-50],
-        &[width-66],
-        &[width-67],
-        &[width-75],
-        &[width-80],
-        &[width-90] {
-          margin-bottom: ($grid-padding-width * 3) / 2;
-          margin-left: 0;
-
-          width: 100%;
-          max-width: 100%;
-        }
-      }
-
-    }
-  }
-}
-
-ion-grid {
-  display: flex;
-
-  flex-direction: column;
-
-  width: 100%;
-}
-
-ion-row {
-  &[top] {
-    align-items: flex-start;
-  }
-
-  &[bottom] {
-    align-items: flex-end;
-  }
-
-  &[center] {
-    align-items: center;
-  }
-
-  &[stretch] {
-    align-items: stretch;
-  }
-
-  &[baseline] {
-    align-items: baseline;
-  }
-}
-
-ion-col {
-  // Column Alignment
-
-  &[top] {
-    align-self: flex-start;
-  }
-
-  &[bottom] {
-    align-self: flex-end;
-  }
-
-  &[center] {
-    align-self: center;
-  }
-
-  &[stretch] {
-    align-self: stretch;
-  }
-
-  &[baseline] {
-    align-self: baseline;
-  }
-
-  // Column Offsets
-
-  &[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
-
-  &[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);
diff --git a/src/themes/ionic.components.scss b/src/themes/ionic.components.scss
index 3477a394ce0..9fb15921aff 100644
--- a/src/themes/ionic.components.scss
+++ b/src/themes/ionic.components.scss
@@ -72,7 +72,6 @@
 "../components/fab/fab.wp";
 
 @import
-"../components/grid/grid.old",
 "../components/grid/grid";
 
 @import