stop using the mixin for transform transitions. mixin breaks

13 files changed, 89 insertions, 63 deletions

diff --git a/dist/ratchet-theme-android.css b/dist/ratchet-theme-android.css
index 7903478..571b459 100644
--- a/dist/ratchet-theme-android.css
+++ b/dist/ratchet-theme-android.css
@@ -448,14 +448,14 @@ textarea,
   margin-left: 0;
   border: 1px solid #9b9b9b;
   border-radius: 0;
+  -webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out;
+  -moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out;
+  transition: transform .1s ease-in-out, opacity .2s ease-in-out;
   -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   -webkit-transform: scale(0.75);
   -ms-transform: scale(0.75);
   transform: scale(0.75);
-  -webkit-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  -moz-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
 .popover:before {
   display: none;
diff --git a/dist/ratchet-theme-ios.css b/dist/ratchet-theme-ios.css
index 3f7fc41..eaa9958 100644
--- a/dist/ratchet-theme-ios.css
+++ b/dist/ratchet-theme-ios.css
@@ -361,9 +361,12 @@ textarea,
 
 .popover {
   border-radius: 12px;
-  -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  -moz-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
+  -moz-transition: -moz-transform .2s ease-in-out, opacity .2s ease-in-out;
+  transition: transform .2s ease-in-out, opacity .2s ease-in-out;
+  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  -moz-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
 .popover:before {
   border-bottom: 15px solid rgba(247, 247, 247, 0.98);
@@ -408,11 +411,11 @@ textarea,
 }
 .toggle .toggle-handle {
   border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-transition-property: -webkit-transform, border, width;
+  -moz-transition-property: -moz-transform, border, width;
+  transition-property: transform, border, width;
   -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
-  -webkit-transition-property: -webkit-transform, border, width;
-  -moz-transition-property: -webkit-transform, border, width;
-  transition-property: -webkit-transform, border, width;
 }
 .toggle:before {
   display: none;
diff --git a/dist/ratchet.css b/dist/ratchet.css
index 6c19afa..b83e3bc 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -1072,22 +1072,22 @@ select {
   min-height: 100%;
   overflow: hidden;
   background-color: #fff;
+  -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
+  -moz-transition: -moz-transform .25s, opacity 1ms .25s;
+  transition: transform .25s, opacity 1ms .25s;
   -webkit-transform: translate3d(0, 100%, 0);
   -ms-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
-  -webkit-transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
-  -moz-transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
-  transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
 }
 .modal.active {
   opacity: 1;
   height: 100%;
+  -webkit-transition: -webkit-transform .25s;
+  -moz-transition: -moz-transform .25s;
+  transition: transform .25s;
   -webkit-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
-  -webkit-transition: -webkit-transform 0.25s;
-  -moz-transition: -webkit-transform 0.25s;
-  transition: -webkit-transform 0.25s;
 }
 
 .slider {
@@ -1140,8 +1140,8 @@ select {
   border: 1px solid #ddd;
   border-radius: 100px;
   -webkit-transition-property: -webkit-transform, border, width;
-  -moz-transition-property: -webkit-transform, border, width;
-  transition-property: -webkit-transform, border, width;
+  -moz-transition-property: -moz-transform, border, width;
+  transition-property: transform, border, width;
   -webkit-transition-duration: 0.2s;
   -moz-transition-duration: 0.2s;
   transition-duration: 0.2s;
@@ -1184,9 +1184,9 @@ select {
 }
 .content.sliding {
   z-index: 2;
-  -webkit-transition: -webkit-transform 0.4s;
-  -moz-transition: -webkit-transform 0.4s;
-  transition: -webkit-transform 0.4s;
+  -webkit-transition: -webkit-transform .4s;
+  -moz-transition: -moz-transform .4s;
+  transition: transform .4s;
   -webkit-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 71a1c3a..39378fe 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -355,12 +355,12 @@ body {
   height: 44px;
   background-color: #fff;
   border-bottom: 1px solid #ddd;
+  -webkit-transition: -webkit-transform .5s;
+  -moz-transition: -moz-transform .5s;
+  transition: transform .5s;
   -webkit-transform: translate3d(0, -55px, 0);
   -ms-transform: translate3d(0, -55px, 0);
   transform: translate3d(0, -55px, 0);
-  -webkit-transition: -webkit-transform 0.5s;
-  -moz-transition: -webkit-transform 0.5s;
-  transition: -webkit-transform 0.5s;
 }
 .docs-component-toolbar.visible {
   -webkit-transform: translateY(0);
@@ -379,7 +379,7 @@ body {
 }
 
 .docs-examples {
-  margin-top: 30px;
+  margin-top: 50px;
   margin-bottom: 50px;
 }
 
@@ -1439,9 +1439,12 @@ hr {
 }
 .platform-ios .popover {
   border-radius: 12px;
-  -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  -moz-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
+  -moz-transition: -moz-transform .2s ease-in-out, opacity .2s ease-in-out;
+  transition: transform .2s ease-in-out, opacity .2s ease-in-out;
+  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  -moz-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
 .platform-ios .popover:before {
   border-bottom: 15px solid rgba(247, 247, 247, 0.98);
@@ -1481,11 +1484,11 @@ hr {
 }
 .platform-ios .toggle .toggle-handle {
   border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-transition-property: -webkit-transform, border, width;
+  -moz-transition-property: -moz-transform, border, width;
+  transition-property: transform, border, width;
   -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
-  -webkit-transition-property: -webkit-transform, border, width;
-  -moz-transition-property: -webkit-transform, border, width;
-  transition-property: -webkit-transform, border, width;
 }
 .platform-ios .toggle:before {
   display: none;
@@ -1940,14 +1943,14 @@ hr {
   margin-left: 0;
   border: 1px solid #9b9b9b;
   border-radius: 0;
+  -webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out;
+  -moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out;
+  transition: transform .1s ease-in-out, opacity .2s ease-in-out;
   -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   -webkit-transform: scale(0.75);
   -ms-transform: scale(0.75);
   transform: scale(0.75);
-  -webkit-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  -moz-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
 .platform-android .popover:before {
   display: none;
diff --git a/docs/dist/ratchet-theme-android.css b/docs/dist/ratchet-theme-android.css
index 7903478..571b459 100644
--- a/docs/dist/ratchet-theme-android.css
+++ b/docs/dist/ratchet-theme-android.css
@@ -448,14 +448,14 @@ textarea,
   margin-left: 0;
   border: 1px solid #9b9b9b;
   border-radius: 0;
+  -webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out;
+  -moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out;
+  transition: transform .1s ease-in-out, opacity .2s ease-in-out;
   -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   -webkit-transform: scale(0.75);
   -ms-transform: scale(0.75);
   transform: scale(0.75);
-  -webkit-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  -moz-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
 .popover:before {
   display: none;
diff --git a/docs/dist/ratchet-theme-ios.css b/docs/dist/ratchet-theme-ios.css
index 3f7fc41..eaa9958 100644
--- a/docs/dist/ratchet-theme-ios.css
+++ b/docs/dist/ratchet-theme-ios.css
@@ -361,9 +361,12 @@ textarea,
 
 .popover {
   border-radius: 12px;
-  -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  -moz-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
+  -moz-transition: -moz-transform .2s ease-in-out, opacity .2s ease-in-out;
+  transition: transform .2s ease-in-out, opacity .2s ease-in-out;
+  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  -moz-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
 .popover:before {
   border-bottom: 15px solid rgba(247, 247, 247, 0.98);
@@ -408,11 +411,11 @@ textarea,
 }
 .toggle .toggle-handle {
   border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-transition-property: -webkit-transform, border, width;
+  -moz-transition-property: -moz-transform, border, width;
+  transition-property: transform, border, width;
   -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
-  -webkit-transition-property: -webkit-transform, border, width;
-  -moz-transition-property: -webkit-transform, border, width;
-  transition-property: -webkit-transform, border, width;
 }
 .toggle:before {
   display: none;
diff --git a/docs/dist/ratchet.css b/docs/dist/ratchet.css
index 6c19afa..b83e3bc 100644
--- a/docs/dist/ratchet.css
+++ b/docs/dist/ratchet.css
@@ -1072,22 +1072,22 @@ select {
   min-height: 100%;
   overflow: hidden;
   background-color: #fff;
+  -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
+  -moz-transition: -moz-transform .25s, opacity 1ms .25s;
+  transition: transform .25s, opacity 1ms .25s;
   -webkit-transform: translate3d(0, 100%, 0);
   -ms-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
-  -webkit-transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
-  -moz-transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
-  transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
 }
 .modal.active {
   opacity: 1;
   height: 100%;
+  -webkit-transition: -webkit-transform .25s;
+  -moz-transition: -moz-transform .25s;
+  transition: transform .25s;
   -webkit-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
-  -webkit-transition: -webkit-transform 0.25s;
-  -moz-transition: -webkit-transform 0.25s;
-  transition: -webkit-transform 0.25s;
 }
 
 .slider {
@@ -1140,8 +1140,8 @@ select {
   border: 1px solid #ddd;
   border-radius: 100px;
   -webkit-transition-property: -webkit-transform, border, width;
-  -moz-transition-property: -webkit-transform, border, width;
-  transition-property: -webkit-transform, border, width;
+  -moz-transition-property: -moz-transform, border, width;
+  transition-property: transform, border, width;
   -webkit-transition-duration: 0.2s;
   -moz-transition-duration: 0.2s;
   transition-duration: 0.2s;
@@ -1184,9 +1184,9 @@ select {
 }
 .content.sliding {
   z-index: 2;
-  -webkit-transition: -webkit-transform 0.4s;
-  -moz-transition: -webkit-transform 0.4s;
-  transition: -webkit-transform 0.4s;
+  -webkit-transition: -webkit-transform .4s;
+  -moz-transition: -moz-transform .4s;
+  transition: transform .4s;
   -webkit-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
diff --git a/sass/docs.scss b/sass/docs.scss
index aaed9ac..8956ac2 100644
--- a/sass/docs.scss
+++ b/sass/docs.scss
@@ -352,8 +352,10 @@ body {
   height: 44px;
   background-color: #fff;
   border-bottom: 1px solid #ddd;
+  -webkit-transition: -webkit-transform .5s;
+     -moz-transition: -moz-transform .5s;
+          transition: transform .5s;
   @include transform(translate3d(0, -55px, 0));
-  @include transition(-webkit-transform .5s);
 
   &.visible {
     @include transform(translateY(0));
@@ -374,7 +376,7 @@ body {
 // --------------------------------------------------
 
 .docs-examples {
-  margin-top: 30px;
+  margin-top: 50px;
   margin-bottom: 50px;
 }
 .docs-example-group {
diff --git a/sass/modals.scss b/sass/modals.scss
index 5951e45..23fc391 100644
--- a/sass/modals.scss
+++ b/sass/modals.scss
@@ -10,15 +10,19 @@
   width: 100%;
   min-height: 100%;
   overflow: hidden;
-  background-color: #fff;  
+  background-color: #fff;
+  -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
+     -moz-transition: -moz-transform .25s, opacity 1ms .25s;
+          transition: transform .25s, opacity 1ms .25s;
   @include transform(translate3d(0, 100%, 0));
-  @include transition(-webkit-transform .25s, opacity 1ms .25s);
 
   // Active modal
   &.active {
     opacity: 1;
     height: 100%;
+    -webkit-transition: -webkit-transform .25s;
+       -moz-transition: -moz-transform .25s;
+            transition: transform .25s;
     @include transform(translate3d(0, 0, 0));
-    @include transition(-webkit-transform .25s);
   }
 }
diff --git a/sass/push.scss b/sass/push.scss
index 47df443..828178d 100644
--- a/sass/push.scss
+++ b/sass/push.scss
@@ -16,7 +16,9 @@
   // Slide animation
   &.sliding {
     z-index: 2;
-    @include transition(-webkit-transform .4s);
+    -webkit-transition: -webkit-transform .4s;
+       -moz-transition: -moz-transform .4s;
+            transition: transform .4s;
     @include transform(translate3d(0, 0, 0));
 
     &.left {
diff --git a/sass/theme-android.scss b/sass/theme-android.scss
index 9de299d..f5f1672 100644
--- a/sass/theme-android.scss
+++ b/sass/theme-android.scss
@@ -607,9 +607,11 @@ textarea,
   margin-left: 0;
   border: 1px solid #9b9b9b;
   border-radius: 0;
+  -webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out;
+     -moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out;
+          transition: transform .1s ease-in-out, opacity .2s ease-in-out;
   @include box-shadow(0 0 3px rgba(0,0,0,.2));
   @include transform(scale(.75));
-  @include transition(-webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
 
   &:before {
     display: none;
diff --git a/sass/theme-ios.scss b/sass/theme-ios.scss
index b3fc014..d81737e 100644
--- a/sass/theme-ios.scss
+++ b/sass/theme-ios.scss
@@ -479,7 +479,10 @@ textarea,
 
 .popover {
   border-radius: 12px;
-  @include transition(-webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
+  -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
+     -moz-transition: -moz-transform .2s ease-in-out, opacity .2s ease-in-out;
+          transition: transform .2s ease-in-out, opacity .2s ease-in-out;
+  @include transition(-webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
 
   &:before {
     border-bottom: 15px solid $chrome-color;
@@ -528,8 +531,10 @@ textarea,
   // Sliding handle
   .toggle-handle {
     border: 1px solid rgba(0, 0, 0, .2);
+    -webkit-transition-property: -webkit-transform, border, width;
+       -moz-transition-property: -moz-transform, border, width;
+            transition-property: transform, border, width;
     @include box-shadow(0 3px 3px rgba(0,0,0,.08));
-    @include transition-property(-webkit-transform, border, width);
   }
   &:before {
     display: none;
diff --git a/sass/toggles.scss b/sass/toggles.scss
index a5908d9..d726757 100644
--- a/sass/toggles.scss
+++ b/sass/toggles.scss
@@ -24,7 +24,9 @@
     background-color: #fff;
     border: 1px solid #ddd;
     border-radius: 100px;
-    @include transition-property(-webkit-transform, border, width);
+    -webkit-transition-property: -webkit-transform, border, width;
+       -moz-transition-property: -moz-transform, border, width;
+            transition-property: transform, border, width;
     @include transition-duration(.2s);
   }
   &:before {