autoprefixer

gulpfile.js

@@ -12,6 +12,7 @@ var del = require('del');
 var gulpif = require('gulp-if');
 var rename = require('gulp-rename');
 var sass = require('gulp-sass');
+var autoprefixer = require('gulp-autoprefixer');
 var through2 = require('through2');
 var runSequence = require('run-sequence');
 var watch = require('gulp-watch');
@@ -98,6 +99,7 @@ gulp.task('sass', function() {
         console.log(err)
       }
     }))
+    .pipe(autoprefixer(buildConfig.autoprefixer))
     .pipe(gulp.dest('../angular-ionic/dist/js/dev/es5/css'));
 });
 

ionic/components/action-menu/extensions/ios.scss

@@ -32,9 +32,9 @@ $action-menu-ios-icon-font-size:           1.4em !default;
   .action-menu-label,
   .action-menu-button {
     position: relative;
-    @include flex-display();
+    display: flex;
-    @include flex-justify-content(center);
+    justify-content: center;
-    @include flex-align-items(center);
+    align-items: center;
 
     margin: 0;
     border: 0;
@@ -71,8 +71,8 @@ $action-menu-ios-icon-font-size:           1.4em !default;
   }
 
   .action-menu-container icon {
-    @include flex-display();
+    display: flex;
-    @include flex-align-items(center);
+    align-items: center;
     position: absolute;
     top: 0;
     left: 0;

ionic/components/alert/alert.scss

@@ -9,9 +9,9 @@ $alert-content-margin:              24px !default;
 
 
 .alert .overlay-container {
-  @include flex-display();
+  display: flex;
-  @include flex-justify-content(center);
+  justify-content: center;
-  @include flex-align-items(center);
+  align-items: center;
 }
 
 .alert-container {
@@ -37,6 +37,6 @@ $alert-content-margin:              24px !default;
 }
 
 .alert-actions {
-  @include flex-display();
+  display: flex;
-  @include flex-justify-content(flex-end);
+  justify-content: flex-end;
 }

ionic/components/alert/extensions/ios.scss

@@ -36,7 +36,7 @@ $alert-ios-button-font-size:         2rem !default;
     min-height: 44px;
 
     .button {
-      @include flex(1);
+      flex: 1;
       border: 0;
       background: transparent;
       font-size: $alert-ios-button-font-size;

ionic/components/app/globals.scss

@@ -4,20 +4,15 @@
 
 
 ion-app {
-
   -webkit-user-drag: none;
   -ms-content-zooming: none;
 
   -webkit-tap-highlight-color: rgba(0,0,0,0);
 
-  -ms-touch-action: manipulation;
   touch-action: manipulation;
 
-  -webkit-font-smoothing: antialiased;
   font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 
-  -webkit-text-size-adjust: none;
   text-size-adjust: none;
-
 }

ionic/components/app/mixins/animation.scss

@@ -1,39 +0,0 @@
-
-// Animation Mixins
-// --------------------------------------------------
-
-
-@mixin animation($animation) {
- -webkit-animation: $animation;
-         animation: $animation;
-}
-
-@mixin animation-duration($duration) {
- -webkit-animation-duration: $duration;
-         animation-duration: $duration;
-}
-
-@mixin animation-direction($direction) {
- -webkit-animation-direction: $direction;
-         animation-direction: $direction;
-}
-
-@mixin animation-timing-function($animation-timing) {
- -webkit-animation-timing-function: $animation-timing;
-         animation-timing-function: $animation-timing;
-}
-
-@mixin animation-fill-mode($fill-mode) {
- -webkit-animation-fill-mode: $fill-mode;
-         animation-fill-mode: $fill-mode;
-}
-
-@mixin animation-name($name...) {
- -webkit-animation-name: $name;
-         animation-name: $name;
-}
-
-@mixin animation-iteration-count($count) {
- -webkit-animation-iteration-count: $count;
-         animation-iteration-count: $count;
-}

ionic/components/app/mixins/flex.scss

@@ -1,147 +0,0 @@
-
-// Flexbox Mixins
-// --------------------------------------------------
-// http://philipwalton.github.io/solved-by-flexbox/
-// https://github.com/philipwalton/solved-by-flexbox
-
-
-@mixin flex-display {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -moz-box;
-  display: -moz-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-@mixin flex-display-inline {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -moz-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-@mixin flex-direction($value: row) {
-  @if $value == row-reverse {
-    -webkit-box-direction: reverse;
-    -webkit-box-orient: horizontal;
-  } @else if $value == column {
-    -webkit-box-direction: normal;
-    -webkit-box-orient: vertical;
-  } @else if $value == column-reverse {
-    -webkit-box-direction: reverse;
-    -webkit-box-orient: vertical;
-  } @else {
-    -webkit-box-direction: normal;
-    -webkit-box-orient: horizontal;
-  }
-  -webkit-flex-direction: $value;
-  -moz-flex-direction: $value;
-  -ms-flex-direction: $value;
-  flex-direction: $value;
-}
-
-@mixin flex-wrap($value: nowrap) {
-  // No Webkit Box fallback.
-  -webkit-flex-wrap: $value;
-  -moz-flex-wrap: $value;
-  @if $value == nowrap {
-      -ms-flex-wrap: none;
-  } @else {
-      -ms-flex-wrap: $value;
-  }
-  flex-wrap: $value;
-}
-
-@mixin flex($flex-grow: 1, $flex-shrink: null, $flex-basis: null) {
-  -webkit-box-flex: $flex-grow;
-  -webkit-flex: $flex-grow $flex-shrink $flex-basis;
-  -moz-box-flex: $flex-grow;
-  -moz-flex: $flex-grow $flex-shrink $flex-basis;
-  -ms-flex: $flex-grow $flex-shrink $flex-basis;
-  flex: $flex-grow $flex-shrink $flex-basis;
-}
-
-@mixin flex-shrink($value: 1) {
-  -webkit-flex-shrink: $value;
-  -moz-flex-shrink: $value;
-  -ms-flex-negative: $value;
-  flex-shrink: $value;
-}
-
-@mixin flex-flow($values: (row nowrap)) {
-  // No Webkit Box fallback.
-  -webkit-flex-flow: $values;
-  -moz-flex-flow: $values;
-  -ms-flex-flow: $values;
-  flex-flow: $values;
-}
-
-@mixin flex-align-items($value: stretch) {
-  @if $value == flex-start {
-    -webkit-box-align: start;
-    -ms-flex-align: start;
-  } @else if $value == flex-end {
-    -webkit-box-align: end;
-    -ms-flex-align: end;
-  } @else {
-    -webkit-box-align: $value;
-    -ms-flex-align: $value;
-  }
-  -webkit-align-items: $value;
-  -moz-align-items: $value;
-  align-items: $value;
-}
-
-@mixin flex-align-self($value: auto) {
-  -webkit-align-self: $value;
-  -moz-align-self: $value;
-  @if $value == flex-start {
-    -ms-flex-item-align: start;
-  } @else if $value == flex-end {
-    -ms-flex-item-align: end;
-  } @else {
-    -ms-flex-item-align: $value;
-  }
-  align-self: $value;
-}
-
-@mixin flex-align-content($value: stretch) {
-  -webkit-align-content: $value;
-  -moz-align-content: $value;
-  @if $value == flex-start {
-    -ms-flex-line-pack: start;
-  } @else if $value == flex-end {
-    -ms-flex-line-pack: end;
-  } @else {
-    -ms-flex-line-pack: $value;
-  }
-  align-content: $value;
-}
-
-@mixin flex-justify-content($value: stretch) {
-  @if $value == flex-start {
-    -webkit-box-pack: start;
-    -ms-flex-pack: start;
-  } @else if $value == flex-end {
-    -webkit-box-pack: end;
-    -ms-flex-pack: end;
-  } @else if $value == space-between {
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-  } @else {
-    -webkit-box-pack: $value;
-    -ms-flex-pack: $value;
-  }
-  -webkit-justify-content: $value;
-  -moz-justify-content: $value;
-  justify-content: $value;
-}
-
-@mixin flex-order($n) {
-  -webkit-order: $n;
-  -ms-flex-order: $n;
-  order: $n;
-  -webkit-box-ordinal-group: $n;
-}

ionic/components/app/mixins/transform.scss

@@ -1,39 +0,0 @@
-
-// Transform Mixins
-// --------------------------------------------------
-
-
-@mixin transform($val) {
-  -webkit-transform: $val;
-          transform: $val;
-}
-
-@mixin translate($x, $y) {
-  @include transform( translate($x, $y) );
-}
-
-@mixin translate3d($x, $y, $z) {
-  @include transform( translate3d($x, $y, $z) );
-}
-
-@mixin translateZ($z) {
-  @include transform( translateZ($z) );
-}
-
-@mixin rotate($degrees) {
-  @include transform( rotate($degrees) );
-}
-
-@mixin scale($ratio) {
-  @include transform( scale($ratio) );
-}
-
-@mixin skew($x, $y) {
-  @include transform( skew($x, $y) );
-  -webkit-backface-visibility: hidden;
-}
-
-@mixin transform-origin($left, $top) {
-  -webkit-transform-origin: $left $top;
-          transform-origin: $left $top;
-}

ionic/components/app/mixins/transition.scss

@@ -1,35 +0,0 @@
-
-// Transition Mixins
-// --------------------------------------------------
-
-
-@mixin transition($transition...) {
-  -webkit-transition: $transition;
-          transition: $transition;
-}
-
-@mixin transition-delay($transition-delay) {
-  -webkit-transition-delay: $transition-delay;
-          transition-delay: $transition-delay;
-}
-
-@mixin transition-duration($transition-duration) {
-  -webkit-transition-duration: $transition-duration;
-          transition-duration: $transition-duration;
-}
-
-@mixin transition-timing-function($transition-timing) {
-   -webkit-transition-timing-function: $transition-timing;
-           transition-timing-function: $transition-timing;
-}
-
-@mixin transition-property($property) {
-  -webkit-transition-property: $property;
-          transition-property: $property;
-}
-
-@mixin transition-transform($properties...) {
-  // special case cuz of transform vendor prefixes
-  -webkit-transition: -webkit-transform $properties;
-          transition: transform $properties;
-}

ionic/components/app/mixins/typography.scss

@@ -1,34 +1,25 @@
+
 // Font Mixins
 // --------------------------------------------------
 
-@mixin font-family-serif() {
+
-  font-family: $serif-font-family;
-}
-@mixin font-family-sans-serif() {
-  font-family: $sans-font-family;
-}
-@mixin font-family-monospace() {
-  font-family: $mono-font-family;
-}
 @mixin font-shorthand($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
   font-weight: $weight;
   font-size: $size;
   line-height: $line-height;
 }
+
 @mixin font-serif($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
-  @include font-family-serif();
+  font-family: $serif-font-family;
   @include font-shorthand($size, $weight, $line-height);
 }
-@mixin font-sans-serif($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
-  @include font-family-sans-serif();
-  @include font-shorthand($size, $weight, $line-height);
-}
-@mixin font-monospace($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
-  @include font-family-monospace();
-  @include font-shorthand($size, $weight, $line-height);
-}
-@mixin font-smoothing($font-smoothing) {
-  -webkit-font-smoothing: $font-smoothing;
-          font-smoothing: $font-smoothing;
-}
 
+@mixin font-sans-serif($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
+  font-family: $sans-font-family;
+  @include font-shorthand($size, $weight, $line-height);
+}
+
+@mixin font-monospace($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
+  font-family: $mono-font-family;
+  @include font-shorthand($size, $weight, $line-height);
+}

ionic/components/app/mixins/util.scss

@@ -2,38 +2,6 @@
 // Util Mixins/Functions
 
 
-
-// Appearance Mixin
-// --------------------------------------------------
-
-@mixin appearance($val) {
-  -webkit-appearance: $val;
-  -moz-appearance: $val;
-  -ms-appearance: $val;
-  appearance: $val;
-}
-
-
-// User Select Mixin
-// --------------------------------------------------
-
-@mixin user-select($select) {
-  -webkit-user-select: $select;
-  -moz-user-select: $select;
-  -ms-user-select: $select;
-  user-select: $select;
-}
-
-
-// Background Sizing Mixin
-// --------------------------------------------------
-
-@mixin background-size($size) {
-  -webkit-background-size: $size;
-  background-size: $size;
-}
-
-
 // String Replace Function
 // --------------------------------------------------
 
@@ -88,7 +56,7 @@
         display: block;
         width: 100%;
         height: 1px;
-        @include transform-origin(50%, 0%);
+        transform-origin: 50% 0%;
         background-color: $line-color;
         content: '';
       }
@@ -110,7 +78,7 @@
         display: block;
         width: 100%;
         height: 1px;
-        @include transform-origin(50%, 0%);
+        transform-origin: 50% 0%;
         background-color: $line-color;
         content: '';
       }
@@ -118,5 +86,4 @@
 
   }
 
-
 }

ionic/components/app/structure.scss

@@ -13,8 +13,8 @@ body {
 }
 
 ion-app {
-  @include flex-display();
+  display: flex;
-  @include flex-direction(column);
+  flex-direction: column;
 
   overflow: hidden;
   height: 100%;
@@ -34,8 +34,8 @@ ion-nav {
   width: 100%;
   height: 100%;
 
-  @include flex-display();
+  display: flex;
-  @include flex-direction(column);
+  flex-direction: column;
 }
 
 .toolbar-container {
@@ -43,11 +43,11 @@ ion-nav {
   position: relative;
   width: 100%;
   min-height: 4.4rem;
-  @include flex-order($flex-order-toolbar-top);
+  order: $flex-order-toolbar-top;
 }
 
 footer.toolbar-container {
-  @include flex-order($flex-order-toolbar-bottom);
+  order: $flex-order-toolbar-bottom;
 }
 
 ion-toolbar {
@@ -62,16 +62,16 @@ ion-toolbar {
 .nav-item-container {
   // container of many .nav-item's, each one containing one view
   position: relative;
-  @include flex(1);
+  flex: 1;
-  @include flex-order($flex-order-view-content);
+  order: $flex-order-view-content;
 }
 
 .tab-pane-container {
   // container of each content for each tab component within a tabs component
-  @include flex(1);
+  flex: 1;
   position: relative;
   width: 100%;
-  @include flex-order($flex-order-view-content);
+  order: $flex-order-view-content;
 }
 
 .nav-item {

ionic/components/app/util.scss

@@ -80,12 +80,12 @@ $content-padding:    10px !default;
   left: 0;
   opacity: 0;
   z-index: $z-index-click-block;
-  @include translate3d(-9999px, 0px, 0px);
+  transform: translate3d(-9999px, 0px, 0px);
   overflow: hidden;
 }
 
 .click-block-active {
-  @include translate3d(0px, 0px, 0px);
+  transform: translate3d(0px, 0px, 0px);
 }
 
 
@@ -94,10 +94,6 @@ $content-padding:    10px !default;
 // Used by the toolbar to know when the title has been rendered
 // http://davidwalsh.name/detect-node-insertion
 
-@-webkit-keyframes nodeInserted {
-  from { opacity: 0.99; }
-  to { opacity: 1; }
-}
 @keyframes nodeInserted {
   from { opacity: 0.99; }
   to { opacity: 1; }

ionic/components/button/button.scss

@@ -27,16 +27,16 @@ $button-small-icon-size:          2.1rem !default;
 .button {
   position: relative;
 
-  @include flex-display-inline();
+  display: inline-flex;
-  @include flex-shrink(0);
+  flex-shrink: 0;
-  @include flex-flow(row nowrap);
+  flex-flow: row nowrap;
-  @include flex-align-items(center);
+  align-items: center;
-  @include flex-justify-content(center);
+  justify-content: center;
 
   margin: $button-margin;
   line-height: 1;
 
-  @include appearance(none);
+  appearance: none;
 
   vertical-align: top; // the better option for most scenarios
   vertical-align: -webkit-baseline-middle; // the best for those that support it
@@ -50,7 +50,7 @@ $button-small-icon-size:          2.1rem !default;
   overflow: hidden;
 
   cursor: pointer;
-  @include user-select(none);
+  user-select: none;
 
   &:after {
     // used to create a larger button "hit" area
@@ -123,7 +123,7 @@ $button-small-icon-size:          2.1rem !default;
 }
 
 .button-block {
-  @include flex-display();
+  display: flex;
   clear: both;
   margin-right: 0;
   margin-left: 0;
@@ -135,7 +135,7 @@ $button-small-icon-size:          2.1rem !default;
 
 .button-full,
 .button-full > .button {
-  @include flex-display();
+  display: flex;
   margin-right: 0;
   margin-left: 0;
   border-radius: 0;
@@ -164,7 +164,7 @@ input.button.button-block  {
 }
 
 .icon-right:before {
-  @include flex-order(2);
+  order: 2;
   font-size: 1.5em;
   margin-top: -0.1em;
   margin-left: 0.25em;

ionic/components/checkbox/checkbox.scss

@@ -6,7 +6,7 @@
 .checkbox {
   display: block;
   cursor: pointer;
-  @include user-select(none);
+  user-select: none;
 }
 
 .checkbox-on {

ionic/components/form/form.scss

@@ -39,23 +39,23 @@ textarea {
 // -------------------------------
 
 .item-input {
-  @include flex-display();
+  display: flex;
-  @include flex-align-items(center);
+  align-items: center;
   position: relative;
   overflow: hidden;
   padding: 6px 0 5px 16px;
 
   input {
     border-radius: 0;
-    @include flex(1, 220px);
+    flex: 1 220px;
-    @include appearance(none);
+    appearance: none;
     margin: 0;
     padding-right: 24px;
     background-color: transparent;
   }
 
   .button .icon {
-    @include flex(0, 0, 24px);
+    flex: 0 0 24px;
     position: static;
     display: inline-block;
     height: auto;
@@ -65,8 +65,8 @@ textarea {
 
   .button-bar {
     border-radius: 0;
-    @include flex(1, 0, 220px);
+    flex: 1 0 220px;
-    @include appearance(none);
+    appearance: none;
   }
 
   .icon {
@@ -75,17 +75,17 @@ textarea {
 }
 
 .item-input-inset {
-  @include flex-display();
+  display: flex;
-  @include flex-align-items(center);
+  align-items: center;
   position: relative;
   overflow: hidden;
   padding: ($item-padding / 3) * 2;
 }
 
 .item-input-wrapper {
-  @include flex-display();
+  display: flex;
-  @include flex(1, 0);
+  flex: 1 0;
-  @include flex-align-items(center);
+  align-items: center;
   border-radius: 4px;
   padding-right: 8px;
   padding-left: 8px;
@@ -156,12 +156,12 @@ textarea {
     padding: 5px 0 0 0;
     opacity: 0;
     top: 10px;
-    @include transition(opacity .15s ease-in, top .2s linear);
+    transition: opacity .15s ease-in, top .2s linear;
 
     &.has-input {
       opacity: 1;
       top: 0;
-      @include transition(opacity .15s ease-in, top .2s linear);
+      transition: opacity .15s ease-in, top .2s linear;
     }
   }
 }

ionic/components/form/input/input.scss

@@ -7,8 +7,8 @@ ion-input {
   position: relative;
   overflow: hidden;
 
-  @include flex-display();
+  display: flex;
-  @include flex-align-items(center);
+  align-items: center;
 
   .item-label {
     padding: $item-input-padding;
@@ -20,8 +20,8 @@ ion-input {
 
     border-radius: 0;
 
-    @include flex(1, 220px);
+    flex: 1 220px;
-    @include appearance(none);
+    appearance: none;
 
     margin: 0;
     padding-right: 24px;

ionic/components/item/item.scss

@@ -9,9 +9,9 @@ $item-padding:            15px !default;
 .item {
   position: relative;
 
-  @include flex-display();
+  display: flex;
-  @include flex-justify-content(space-between);
+  justify-content: space-between;
-  @include flex-align-items(center);
+  align-items: center;
 
   width: 100%;
   min-height: $item-min-height;
@@ -53,10 +53,10 @@ ion-primary-swipe-buttons {
 
   position: relative;
 
-  @include flex-display();
+  display: flex;
-  @include flex(1);
+  flex: 1;
-  @include flex-justify-content(space-between);
+  justify-content: space-between;
-  @include flex-align-items(center);
+  align-items: center;
 
   width: 100%;
   min-height: $item-min-height;
@@ -67,9 +67,9 @@ ion-primary-swipe-buttons {
 .item-label {
   position: relative;
 
-  @include flex-display();
+  display: flex;
-  @include flex(1);
+  flex: 1;
-  @include flex-shrink(1);
+  flex-shrink: 1;
 
   max-width: 100%;
 
@@ -90,10 +90,10 @@ ion-primary-swipe-buttons {
 // --------------------------------------------------
 
 .item-media {
-  @include flex-display();
+  display: flex;
-  @include flex-shrink(0);
+  flex-shrink: 0;
-  @include flex-wrap(nowrap);
+  flex-wrap: nowrap;
-  @include flex-align-items(center);
+  align-items: center;
 
   min-height: $item-min-height;
   padding: 0;

ionic/components/layout/layout.scss

@@ -2,7 +2,7 @@
 layout,
 [layout] {
   position: relative;
-  @include flex-display();
+  display: flex;
 }
 
 [flex] {

ionic/components/modal/modal.scss

@@ -91,7 +91,7 @@ modal {
   }
 
   .modal-backdrop-bg {
-    @include transition(opacity 300ms ease-in-out);
+    transition: opacity 300ms ease-in-out;
     background-color: $modal-backdrop-bg-active;
     opacity: 0;
   }

ionic/components/search-bar/extensions/ios.scss

@@ -29,7 +29,7 @@ $search-bar-ios-background-size:      13px 13px !default;
     background-position: 8px center;
 
     @include svg-background-image($search-bar-ios-background-svg);
-    @include background-size($search-bar-ios-background-size);
+    background-size: $search-bar-ios-background-size;
   }
 
 }

ionic/components/search-bar/search-bar.scss

@@ -7,8 +7,8 @@ $search-bar-min-height:         44px !default;
 
 .search-bar {
   position: relative;
-  @include flex-display();
+  display: flex;
-  @include flex-align-items(center);
+  align-items: center;
   width: 100%;
   min-height: $search-bar-min-height;
 }
@@ -16,7 +16,7 @@ $search-bar-min-height:         44px !default;
 .search-bar-input-container {
   position: relative;
   display: block;
-  @include flex-shrink(1);
+  flex-shrink: 1;
   width: 100%;
 }
 
@@ -26,7 +26,7 @@ $search-bar-min-height:         44px !default;
   height: 100%;
   border: none;
   font-family: inherit;
-  @include appearance(none);
+  appearance: none;
 }
 
 .search-bar-cancel {

ionic/components/segment/extensions/ios.scss

@@ -5,7 +5,7 @@
     > .button {
       border-width: 1px;
 
-      @include transition(100ms all linear);
+      transition: 100ms all linear;
 
       color: get-color(primary, base);
 

ionic/components/segment/segment.scss

@@ -1,13 +1,13 @@
 ion-segment { display: block; }
 
 .ion-segment {
-  @include flex-display();
+  display: flex;
-  @include flex(1);
+  flex: 1;
   width: 100%;
 
   > .button {
 
-    @include flex(1);
+    flex: 1;
     display: block;
 
     overflow: hidden;

ionic/components/switch/extensions/ios.scss

@@ -32,7 +32,7 @@ $switch-ios-toggle-on-background:       #fff !default;
   }
 
   &[aria-checked=true] .switch-toggle:before {
-    @include scale(0);
+    transform: scale(0);
   }
 
 }

ionic/components/switch/switch.scss

@@ -34,7 +34,7 @@ $switch-toggle-on-background:      #fff !default;
   height: $switch-height - ($switch-border-width * 2);
   border-radius: $switch-height / 2;
 
-  @include transition-duration(300ms);
+  transition-duration: 300ms;
   content: ' ';
 }
 
@@ -53,13 +53,13 @@ $switch-toggle-on-background:      #fff !default;
   border-radius: $switch-height - ($switch-border-width * 2);
   background: $switch-toggle-on-background;
 
-  @include transition-duration(300ms);
+  transition-duration: 300ms;
 
   content: ' ';
 }
 
 .switch[aria-checked=true] .switch-toggle:after {
-  @include translate3d(20px,0,0);
+  transform: translate3d(20px,0,0);
 }
 
 .switch[aria-disabled=true] {

ionic/components/tabs/tabs.scss

@@ -10,33 +10,33 @@ $tab-bar-item-max-width:           160px !default;
 
 
 .tabs {
-  @include flex-display();
+  display: flex;
-  @include flex-direction(column);
+  flex-direction: column;
   height: 100%;
 }
 
 [tab-bar-placement="top"] > .tab-bar-container {
-  @include flex-order($flex-order-tab-bar-top);
+  order: $flex-order-tab-bar-top;
 }
 
 [tab-bar-placement="bottom"] > .tab-bar-container {
-  @include flex-order($flex-order-tab-bar-bottom);
+  order: $flex-order-tab-bar-bottom;
 }
 
 .tab-bar {
-  @include flex-display();
+  display: flex;
-  @include flex-justify-content(center);
+  justify-content: center;
   overflow: hidden;
   background: $tab-bar-background-color;
 }
 
 .tab-bar-item {
-  @include flex-display();
+  display: flex;
-  @include flex-justify-content(center);
+  flex-direction: column;
-  @include flex-direction(column);
+  justify-content: center;
-  @include flex(1);
+  flex: 1;
-  @include flex-align-self(center);
+  align-self: center;
-  @include flex-align-items(center);
+  align-items: center;
 
   padding: $tab-bar-item-padding;
   min-width: $tab-bar-item-min-width;
@@ -44,7 +44,7 @@ $tab-bar-item-max-width:           160px !default;
 
   text-align: center;
   cursor: pointer;
-  @include user-select(none);
+  user-select: none;
 
   border: 0;
   background: none;
@@ -52,12 +52,12 @@ $tab-bar-item-max-width:           160px !default;
 
 [tab-bar-icons="bottom"] > .tab-bar-container .tab-bar-item {
   .tab-bar-item-icon {
-    @include flex-order(10);
+    order: 10;
   }
 }
 
 [tab-bar-icons="left"] > .tab-bar-container .tab-bar-item {
-  @include flex-direction(row);
+  flex-direction: row;
 
   .tab-bar-item-icon {
     text-align: right;
@@ -66,10 +66,10 @@ $tab-bar-item-max-width:           160px !default;
 }
 
 [tab-bar-icons="right"] > .tab-bar-container .tab-bar-item {
-  @include flex-direction(row);
+  flex-direction: row;
 
   .tab-bar-item-icon {
-    @include flex-order(10);
+    order: 10;
     text-align: left;
     padding-left: 5px;
   }
@@ -77,7 +77,7 @@ $tab-bar-item-max-width:           160px !default;
 
 .tab-bar-item-text,
 .tab-bar-item-icon {
-  @include flex-align-self(center);
+  align-self: center;
 
   min-width: 26px;
   max-width: 100%;

ionic/components/toolbar/extensions/ios.scss

@@ -37,22 +37,22 @@ $toolbar-ios-button-background-color:       transparent !default;
 .toolbar-ios {
 
   .toolbar [side="primary"] {
-    @include flex-order(map-get($toolbar-order-ios, 'primary'));
+    order: map-get($toolbar-order-ios, 'primary');
   }
 
   .toolbar [side="secondary"] {
-    @include flex-order(map-get($toolbar-order-ios, 'secondary'));
+    order: map-get($toolbar-order-ios, 'secondary');
   }
 
   ion-title {
-    @include flex-order(map-get($toolbar-order-ios, 'title'));
+    order: map-get($toolbar-order-ios, 'title');
     font-size: $toolbar-ios-title-font-size;
     font-weight: 500;
     text-align: center;
   }
 
   .toolbar-back-button {
-    @include flex-order(map-get($toolbar-order-ios, 'back-button'));
+    order: map-get($toolbar-order-ios, 'back-button');
   }
 
   .button {

ionic/components/toolbar/toolbar.scss

@@ -20,16 +20,16 @@ $toolbar-secondary-flex-order: 10;
 }
 
 ion-toolbar {
-  @include flex-direction(row);
+  flex-direction: row;
-  @include flex-align-items(center);
+  align-items: center;
-  @include flex-justify-content(space-between);
+  justify-content: space-between;
 
   // by default ion-toolbar is display:none and
   // the transition animation will add the show class
   display: none;
 
   &.show-toolbar {
-    @include flex-display();
+    display: flex;
   }
 }
 
@@ -40,11 +40,11 @@ ion-toolbar {
 // buttons are primary by default
 ion-toolbar .button,
 ion-toolbar [side="primary"] {
-  @include flex-order(map-get($toolbar-order-core, 'primary'));
+  order: map-get($toolbar-order-core, 'primary');
 }
 
 ion-toolbar [side="secondary"] {
-  @include flex-order(map-get($toolbar-order-core, 'secondary'));
+  order: map-get($toolbar-order-core, 'secondary');
 }
 
 ion-title {
@@ -64,7 +64,7 @@ ion-title {
 }
 
 .toolbar-back-button {
-  @include flex-order(map-get($toolbar-order-core, 'back-button'));
+  order: map-get($toolbar-order-core, 'back-button');
 }
 
 .toolbar .button {

ionic/ionic.scss

@@ -3,10 +3,7 @@
 
 // Mixins
 @import
-  "components/app/mixins/flex",
   "components/app/mixins/form",
-  "components/app/mixins/transform",
-  "components/app/mixins/transition",
   "components/app/mixins/typography",
   "components/app/mixins/util";
 

package.json

@@ -7,6 +7,7 @@
     "del": "~1.1.1",
     "es6-module-loader": "^0.16.5",
     "gulp": "~3.8.10",
+    "gulp-autoprefixer": "^2.3.0",
     "gulp-babel": "^5.1.0",
     "gulp-cached": "^1.0.4",
     "gulp-concat": "~2.5.0",

scripts/build/config.js

@@ -46,5 +46,17 @@ module.exports = {
     modules: 'instantiate',
   },
 
-  protractorPort: 8876
+  protractorPort: 8876,
+
+  autoprefixer: {
+    browsers: [
+      'last 2 versions',
+      'iOS >= 7',
+      'Android >= 4',
+      'Explorer >= 10',
+      'ExplorerMobile >= 11'
+    ],
+    cascade: false
+  }
+
 };