diff --git a/gulpfile.js b/gulpfile.js
index ee4943a6e4..83297ca7f3 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -17,6 +17,7 @@ var config = {
src: {
js: ['src/**/*.js', '!src/**/*.spec.js'],
html: 'src/**/*.html',
+ scss: 'src/**/*.scss',
playgroundJs: 'playground/**/*.js',
playgroundFiles: ['playground/**/*', '!playground/**/*.js'],
},
@@ -29,7 +30,7 @@ var config = {
]
};
-gulp.task('default', ['js', 'html', 'libs', 'playgroundJs', 'playgroundFiles']);
+gulp.task('default', ['js', 'html', 'sass', 'libs', 'playgroundJs', 'playgroundFiles']);
gulp.task('watch', ['default'], function () {
var http = require('http');
@@ -40,6 +41,7 @@ gulp.task('watch', ['default'], function () {
gulp.watch(config.src.html, ['html']);
gulp.watch(config.src.js, ['js']);
+ gulp.watch(config.src.sass, ['sass']);
gulp.watch(config.src.playgroundJs, ['playgroundJs']);
gulp.watch(config.src.playgroundFiles, ['playgroundFiles']);
diff --git a/playground/basic-example/index.html b/playground/basic-example/index.html
index 965e013d5d..06f5a4c902 100644
--- a/playground/basic-example/index.html
+++ b/playground/basic-example/index.html
@@ -8,6 +8,10 @@
+
+
+
+
diff --git a/playground/basic-example/main.html b/playground/basic-example/main.html
index e7ec122ecc..6a499c107a 100644
--- a/playground/basic-example/main.html
+++ b/playground/basic-example/main.html
@@ -1,3 +1,5 @@
+
+
diff --git a/playground/basic-example/main.js b/playground/basic-example/main.js
index 8050f5b81b..baac365ffb 100644
--- a/playground/basic-example/main.js
+++ b/playground/basic-example/main.js
@@ -1,6 +1,7 @@
import {bootstrap} from 'angular2/core';
import {Component, Template} from 'angular2/angular2';
import {Tabbar} from 'ionic/components/tabbar/tabbar';
+import {Modal} from 'ionic/components/modal/modal';
// import {Hammer} from 'hammerjs';
import 'ionic/components/tabbar/mixins/android/android-tabbar';
@@ -8,7 +9,7 @@ import 'ionic/components/tabbar/mixins/android/android-tabbar';
@Component({ selector: '[playground-main]' })
@Template({
url: 'main.html',
- directives: [Tabbar]
+ directives: [Tabbar, Modal]
})
class PlaygroundMain {
constructor() {
diff --git a/src/core/styles/ionic.scss b/src/core/styles/ionic.scss
index c910a3a54b..1866ebe9e5 100644
--- a/src/core/styles/ionic.scss
+++ b/src/core/styles/ionic.scss
@@ -3,7 +3,8 @@
// Mixins
@import
- "mixins/flex";
+ "mixins/flex",
+ "mixins/transition";
// Globals
@@ -17,4 +18,5 @@
@import "components";
@import "../../components/button/button";
@import "../../components/tabbar/tabbar";
+@import "../../components/modal/modal";
diff --git a/src/core/styles/mixins/_transition.scss b/src/core/styles/mixins/_transition.scss
new file mode 100644
index 0000000000..573a5e7566
--- /dev/null
+++ b/src/core/styles/mixins/_transition.scss
@@ -0,0 +1,62 @@
+// 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;
+}
+
+
+// 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;
+}
+