diff --git a/gulpfile.js b/gulpfile.js index 6d3a54c419..80113c5b70 100644 --- a/gulpfile.js +++ b/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')); }); diff --git a/ionic/components/action-menu/extensions/ios.scss b/ionic/components/action-menu/extensions/ios.scss index c2ca3eb8c2..35fb347799 100644 --- a/ionic/components/action-menu/extensions/ios.scss +++ b/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(); - @include flex-justify-content(center); - @include flex-align-items(center); + display: flex; + justify-content: 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(); - @include flex-align-items(center); + display: flex; + align-items: center; position: absolute; top: 0; left: 0; diff --git a/ionic/components/alert/alert.scss b/ionic/components/alert/alert.scss index 0e201198f2..cbdb89ce3f 100644 --- a/ionic/components/alert/alert.scss +++ b/ionic/components/alert/alert.scss @@ -9,9 +9,9 @@ $alert-content-margin: 24px !default; .alert .overlay-container { - @include flex-display(); - @include flex-justify-content(center); - @include flex-align-items(center); + display: flex; + justify-content: center; + align-items: center; } .alert-container { @@ -37,6 +37,6 @@ $alert-content-margin: 24px !default; } .alert-actions { - @include flex-display(); - @include flex-justify-content(flex-end); + display: flex; + justify-content: flex-end; } diff --git a/ionic/components/alert/extensions/ios.scss b/ionic/components/alert/extensions/ios.scss index e8e45121da..a9112976bc 100644 --- a/ionic/components/alert/extensions/ios.scss +++ b/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; diff --git a/ionic/components/app/globals.scss b/ionic/components/app/globals.scss index c6713c2847..5cf28c3f3b 100644 --- a/ionic/components/app/globals.scss +++ b/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; - } diff --git a/ionic/components/app/mixins/animation.scss b/ionic/components/app/mixins/animation.scss deleted file mode 100644 index 4e8f5c475e..0000000000 --- a/ionic/components/app/mixins/animation.scss +++ /dev/null @@ -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; -} diff --git a/ionic/components/app/mixins/flex.scss b/ionic/components/app/mixins/flex.scss deleted file mode 100644 index b15f0dd859..0000000000 --- a/ionic/components/app/mixins/flex.scss +++ /dev/null @@ -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; -} diff --git a/ionic/components/app/mixins/transform.scss b/ionic/components/app/mixins/transform.scss deleted file mode 100644 index 71c764331e..0000000000 --- a/ionic/components/app/mixins/transform.scss +++ /dev/null @@ -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; -} diff --git a/ionic/components/app/mixins/transition.scss b/ionic/components/app/mixins/transition.scss deleted file mode 100644 index 233a2ade87..0000000000 --- a/ionic/components/app/mixins/transition.scss +++ /dev/null @@ -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; -} diff --git a/ionic/components/app/mixins/typography.scss b/ionic/components/app/mixins/typography.scss index 35f04a5dd1..cac79e9358 100644 --- a/ionic/components/app/mixins/typography.scss +++ b/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); +} diff --git a/ionic/components/app/mixins/util.scss b/ionic/components/app/mixins/util.scss index e4cc83b504..aff8701216 100644 --- a/ionic/components/app/mixins/util.scss +++ b/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 @@ } - } diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss index 3a12a757f7..91190fffe3 100644 --- a/ionic/components/app/structure.scss +++ b/ionic/components/app/structure.scss @@ -13,8 +13,8 @@ body { } ion-app { - @include flex-display(); - @include flex-direction(column); + display: flex; + flex-direction: column; overflow: hidden; height: 100%; @@ -34,8 +34,8 @@ ion-nav { width: 100%; height: 100%; - @include flex-display(); - @include flex-direction(column); + display: flex; + 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); - @include flex-order($flex-order-view-content); + flex: 1; + 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 { diff --git a/ionic/components/app/util.scss b/ionic/components/app/util.scss index e8a59e06a8..dceacc0671 100644 --- a/ionic/components/app/util.scss +++ b/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; } diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss index f709f75ffe..cb8bc7592b 100644 --- a/ionic/components/button/button.scss +++ b/ionic/components/button/button.scss @@ -27,16 +27,16 @@ $button-small-icon-size: 2.1rem !default; .button { position: relative; - @include flex-display-inline(); - @include flex-shrink(0); - @include flex-flow(row nowrap); - @include flex-align-items(center); - @include flex-justify-content(center); + display: inline-flex; + flex-shrink: 0; + flex-flow: row nowrap; + align-items: 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; diff --git a/ionic/components/checkbox/checkbox.scss b/ionic/components/checkbox/checkbox.scss index c72ca501fd..c41e4d0029 100644 --- a/ionic/components/checkbox/checkbox.scss +++ b/ionic/components/checkbox/checkbox.scss @@ -6,7 +6,7 @@ .checkbox { display: block; cursor: pointer; - @include user-select(none); + user-select: none; } .checkbox-on { diff --git a/ionic/components/form/form.scss b/ionic/components/form/form.scss index 29b42aa601..e7a11c5486 100644 --- a/ionic/components/form/form.scss +++ b/ionic/components/form/form.scss @@ -39,23 +39,23 @@ textarea { // ------------------------------- .item-input { - @include flex-display(); - @include flex-align-items(center); + display: flex; + align-items: center; position: relative; overflow: hidden; padding: 6px 0 5px 16px; input { border-radius: 0; - @include flex(1, 220px); - @include appearance(none); + flex: 1 220px; + 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); - @include appearance(none); + flex: 1 0 220px; + appearance: none; } .icon { @@ -75,17 +75,17 @@ textarea { } .item-input-inset { - @include flex-display(); - @include flex-align-items(center); + display: flex; + align-items: center; position: relative; overflow: hidden; padding: ($item-padding / 3) * 2; } .item-input-wrapper { - @include flex-display(); - @include flex(1, 0); - @include flex-align-items(center); + display: flex; + flex: 1 0; + 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; } } } diff --git a/ionic/components/form/input/input.scss b/ionic/components/form/input/input.scss index 02c1bfc958..949cf88867 100644 --- a/ionic/components/form/input/input.scss +++ b/ionic/components/form/input/input.scss @@ -7,8 +7,8 @@ ion-input { position: relative; overflow: hidden; - @include flex-display(); - @include flex-align-items(center); + display: flex; + align-items: center; .item-label { padding: $item-input-padding; @@ -20,8 +20,8 @@ ion-input { border-radius: 0; - @include flex(1, 220px); - @include appearance(none); + flex: 1 220px; + appearance: none; margin: 0; padding-right: 24px; diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss index 7efcd3bff9..4001d74364 100644 --- a/ionic/components/item/item.scss +++ b/ionic/components/item/item.scss @@ -9,9 +9,9 @@ $item-padding: 15px !default; .item { position: relative; - @include flex-display(); - @include flex-justify-content(space-between); - @include flex-align-items(center); + display: flex; + justify-content: space-between; + align-items: center; width: 100%; min-height: $item-min-height; @@ -53,10 +53,10 @@ ion-primary-swipe-buttons { position: relative; - @include flex-display(); - @include flex(1); - @include flex-justify-content(space-between); - @include flex-align-items(center); + display: flex; + flex: 1; + justify-content: space-between; + 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(); - @include flex(1); - @include flex-shrink(1); + display: flex; + flex: 1; + flex-shrink: 1; max-width: 100%; @@ -90,10 +90,10 @@ ion-primary-swipe-buttons { // -------------------------------------------------- .item-media { - @include flex-display(); - @include flex-shrink(0); - @include flex-wrap(nowrap); - @include flex-align-items(center); + display: flex; + flex-shrink: 0; + flex-wrap: nowrap; + align-items: center; min-height: $item-min-height; padding: 0; diff --git a/ionic/components/layout/layout.scss b/ionic/components/layout/layout.scss index c257521054..b013739021 100644 --- a/ionic/components/layout/layout.scss +++ b/ionic/components/layout/layout.scss @@ -2,7 +2,7 @@ layout, [layout] { position: relative; - @include flex-display(); + display: flex; } [flex] { diff --git a/ionic/components/modal/modal.scss b/ionic/components/modal/modal.scss index 148cc03d02..264214e227 100644 --- a/ionic/components/modal/modal.scss +++ b/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; } diff --git a/ionic/components/search-bar/extensions/ios.scss b/ionic/components/search-bar/extensions/ios.scss index 32ac6804ee..2c4f767a10 100644 --- a/ionic/components/search-bar/extensions/ios.scss +++ b/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; } } diff --git a/ionic/components/search-bar/search-bar.scss b/ionic/components/search-bar/search-bar.scss index 1b43aa14b4..a7fd54f96a 100644 --- a/ionic/components/search-bar/search-bar.scss +++ b/ionic/components/search-bar/search-bar.scss @@ -7,8 +7,8 @@ $search-bar-min-height: 44px !default; .search-bar { position: relative; - @include flex-display(); - @include flex-align-items(center); + display: flex; + 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 { diff --git a/ionic/components/segment/extensions/ios.scss b/ionic/components/segment/extensions/ios.scss index 7d4e6bc017..37725b009a 100644 --- a/ionic/components/segment/extensions/ios.scss +++ b/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); diff --git a/ionic/components/segment/segment.scss b/ionic/components/segment/segment.scss index a9bbab2e3c..a987424e9c 100644 --- a/ionic/components/segment/segment.scss +++ b/ionic/components/segment/segment.scss @@ -1,13 +1,13 @@ ion-segment { display: block; } .ion-segment { - @include flex-display(); - @include flex(1); + display: flex; + flex: 1; width: 100%; > .button { - @include flex(1); + flex: 1; display: block; overflow: hidden; diff --git a/ionic/components/switch/extensions/ios.scss b/ionic/components/switch/extensions/ios.scss index de8a5f3074..460cc872b8 100644 --- a/ionic/components/switch/extensions/ios.scss +++ b/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); } } diff --git a/ionic/components/switch/switch.scss b/ionic/components/switch/switch.scss index cc8652c2ac..8f18ea5b23 100644 --- a/ionic/components/switch/switch.scss +++ b/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] { diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss index 2d75e89fef..42c0a0ce42 100644 --- a/ionic/components/tabs/tabs.scss +++ b/ionic/components/tabs/tabs.scss @@ -10,33 +10,33 @@ $tab-bar-item-max-width: 160px !default; .tabs { - @include flex-display(); - @include flex-direction(column); + display: flex; + 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(); - @include flex-justify-content(center); + display: flex; + justify-content: center; overflow: hidden; background: $tab-bar-background-color; } .tab-bar-item { - @include flex-display(); - @include flex-justify-content(center); - @include flex-direction(column); - @include flex(1); - @include flex-align-self(center); - @include flex-align-items(center); + display: flex; + flex-direction: column; + justify-content: center; + flex: 1; + align-self: 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%; diff --git a/ionic/components/toolbar/extensions/ios.scss b/ionic/components/toolbar/extensions/ios.scss index b7dbdb48d0..a7b220d3df 100644 --- a/ionic/components/toolbar/extensions/ios.scss +++ b/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 { diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss index 3f7dfa48ca..a4361af4f6 100644 --- a/ionic/components/toolbar/toolbar.scss +++ b/ionic/components/toolbar/toolbar.scss @@ -20,16 +20,16 @@ $toolbar-secondary-flex-order: 10; } ion-toolbar { - @include flex-direction(row); - @include flex-align-items(center); - @include flex-justify-content(space-between); + flex-direction: row; + align-items: center; + 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 { diff --git a/ionic/ionic.scss b/ionic/ionic.scss index 2bc1b221a1..ddcca5e31a 100644 --- a/ionic/ionic.scss +++ b/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"; diff --git a/package.json b/package.json index c5f00ba50d..f8d1fcc29e 100644 --- a/package.json +++ b/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", diff --git a/scripts/build/config.js b/scripts/build/config.js index de784df509..d5d74dd2ec 100644 --- a/scripts/build/config.js +++ b/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 + } + };