Merge pull request #464 from twbs/autoprefixer

Add Autoprefixer support

Gruntfile.js

@@ -68,13 +68,21 @@ module.exports = function (grunt) {
         style: 'expanded',
         unixNewlines: true
       },
-      dist: {
+      core: {
-        files: {
+        src: 'sass/ratchet.scss',
-          '<%= meta.distPath %>css/<%= pkg.name %>.css': 'sass/ratchet.scss',
+        dest: '<%= meta.distPath %>css/<%= pkg.name %>.css'
-          '<%= meta.distPath %>css/<%= pkg.name %>-theme-ios.css': 'sass/theme-ios.scss',
+      },
-          '<%= meta.distPath %>css/<%= pkg.name %>-theme-android.css': 'sass/theme-android.scss',
+      android: {
-          '<%= meta.docsAssetsPath %>css/docs.css': 'sass/docs.scss'
+        src: 'sass/theme-android.scss',
-        }
+        dest: '<%= meta.distPath %>css/<%= pkg.name %>-theme-android.css'
+      },
+      ios: {
+        src: 'sass/theme-ios.scss',
+        dest: '<%= meta.distPath %>css/<%= pkg.name %>-theme-ios.css'
+      },
+      docs: {
+        src: 'sass/docs.scss',
+        dest: '<%= meta.docsAssetsPath %>css/docs.css'
       }
     },
 
@@ -82,16 +90,24 @@ module.exports = function (grunt) {
       options: {
         config: 'sass/.csscomb.json'
       },
-      dist: {
+      core: {
         files: {
-          '<%= meta.distPath %>css/<%= pkg.name %>.css': '<%= meta.distPath %>css/<%= pkg.name %>.css',
+          '<%= sass.core.dest %>': '<%= sass.core.dest %>'
-          '<%= meta.distPath %>css/<%= pkg.name %>-theme-android.css': '<%= meta.distPath %>css/<%= pkg.name %>-theme-android.css',
+        }
-          '<%= meta.distPath %>css/<%= pkg.name %>-theme-ios.css': '<%= meta.distPath %>css/<%= pkg.name %>-theme-ios.css'
+      },
+      android: {
+        files: {
+          '<%= sass.android.dest %>': '<%= sass.android.dest %>'
+        }
+      },
+      ios: {
+        files: {
+          '<%= sass.ios.dest %>': '<%= sass.ios.dest %>'
         }
       },
       docs: {
         files: {
-          '<%= meta.docsAssetsPath %>css/docs.css': '<%= meta.docsAssetsPath %>css/docs.css'
+          '<%= sass.docs.dest %>': '<%= sass.docs.dest %>'
         }
       }
     },
@@ -112,6 +128,45 @@ module.exports = function (grunt) {
       }
     },
 
+    autoprefixer: {
+      options: {
+        browsers: [
+          'Android 2.3',
+          'Android >= 4',
+          'Chrome >= 20',
+          'Firefox >= 24', // Firefox 24 is the latest ESR
+          'Explorer >= 9',
+          'iOS >= 6',
+          'Opera >= 12',
+          'Safari >= 6'
+        ]
+      },
+      core: {
+        src: '<%= sass.core.dest %>'
+      },
+      android: {
+        options: {
+          browsers: [
+            'Android 2.3',
+            'Android >= 4',
+            'Chrome >= 20',
+            'Firefox >= 24', // Firefox 24 is the latest ESR
+            'Opera >= 12'
+          ]
+        },
+        src: '<%= sass.android.dest %>'
+      },
+      ios: {
+        options: {
+          browsers: ['iOS >= 6']
+        },
+        src: '<%= sass.ios.dest %>'
+      },
+      docs: {
+        src: '<%= sass.docs.dest %>'
+      }
+    },
+
     cssmin: {
       options: {
         keepSpecialComments: '*' // set to '*' because we already add the banner in sass
@@ -248,7 +303,7 @@ module.exports = function (grunt) {
   require('time-grunt')(grunt);
 
   // Default task(s).
-  grunt.registerTask('dist-css', ['sass', 'csscomb', 'cssmin']);
+  grunt.registerTask('dist-css', ['sass', 'autoprefixer', 'csscomb', 'cssmin']);
   grunt.registerTask('dist-js', ['concat', 'uglify']);
   grunt.registerTask('dist', ['clean', 'dist-css', 'dist-js', 'copy', 'build-ratchicons-data']);
   grunt.registerTask('validate-html', ['jekyll', 'validation']);

dist/css/ratchet-theme-android.css

@@ -494,10 +494,10 @@ textarea,
   -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .2);
           box-shadow: 0 0 3px rgba(0, 0, 0, .2);
   -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;
+       -o-transition:      -o-transform .1s ease-in-out, opacity .2s ease-in-out;
           transition:         transform .1s ease-in-out, opacity .2s ease-in-out;
   -webkit-transform: scale(.75);
-      -ms-transform: scale(.75);
+       -o-transform: scale(.75);
           transform: scale(.75);
 }
 .popover:before {
@@ -505,7 +505,7 @@ textarea,
 }
 .popover.visible {
   -webkit-transform: scale(1);
-      -ms-transform: scale(1);
+       -o-transform: scale(1);
           transform: scale(1);
 }
 
@@ -558,7 +558,6 @@ textarea,
   background-color: #33b5e5;
   border-color: #33b5e5;
   -webkit-transform: translate3d(50px, 0, 0);
-      -ms-transform: translate3d(50px, 0, 0);
           transform: translate3d(50px, 0, 0);
 }
 .toggle.active:before {

dist/css/ratchet-theme-ios.css

@@ -36,13 +36,10 @@ p {
   background-color: rgba(247, 247, 247, .98);
   border: 1px solid #929292;
   -webkit-transition: all;
-     -moz-transition: all;
           transition: all;
   -webkit-transition-timing-function: linear;
-     -moz-transition-timing-function: linear;
           transition-timing-function: linear;
   -webkit-transition-duration: .2s;
-     -moz-transition-duration: .2s;
           transition-duration: .2s;
 }
 .btn:active, .btn.active {
@@ -119,8 +116,7 @@ p {
 .bar {
   background-color: rgba(247, 247, 247, .98);
   border-bottom: 0;
-  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .85);
+  box-shadow: 0 0 1px rgba(0, 0, 0, .85);
-          box-shadow: 0 0 1px rgba(0, 0, 0, .85);
 }
 .bar.bar-header-secondary {
   top: 44px;
@@ -300,7 +296,6 @@ textarea,
   color: #929292;
   border-color: #929292;
   -webkit-transition: background-color .1s linear;
-     -moz-transition: background-color .1s linear;
           transition: background-color .1s linear;
 }
 .segmented-control .control-item:active {
@@ -359,7 +354,6 @@ textarea,
 .popover {
   border-radius: 12px;
   -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
-     -moz-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
           transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
 }
 .popover:before {
@@ -367,8 +361,7 @@ textarea,
 }
 
 .popover .bar {
-  -webkit-box-shadow: none;
+  box-shadow: none;
-          box-shadow: none;
 }
 
 .popover .bar-nav {
@@ -382,33 +375,26 @@ textarea,
 
 .modal {
   -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-     -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
           transition-timing-function: cubic-bezier(.1, .5, .1, 1);
 }
 .modal.active {
   -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-     -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
           transition-timing-function: cubic-bezier(.1, .5, .1, 1);
 }
 
 .toggle {
   width: 47px;
   border: 2px solid #e6e6e6;
-  -webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
+  box-shadow: inset 0 0 0 0 #e1e1e1;
-          box-shadow: inset 0 0 0 0 #e1e1e1;
   -webkit-transition-duration: .2s;
-     -moz-transition-duration: .2s;
           transition-duration: .2s;
   -webkit-transition-property: box-shadow, border;
-     -moz-transition-property: box-shadow, border;
           transition-property: box-shadow, border;
 }
 .toggle .toggle-handle {
   border: 1px solid rgba(0, 0, 0, .2);
-  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
+  box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
-          box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
   -webkit-transition-property: -webkit-transform, border, width;
-     -moz-transition-property:    -moz-transform, border, width;
           transition-property:         transform, border, width;
 }
 .toggle:before {
@@ -417,12 +403,10 @@ textarea,
 .toggle.active {
   background-color: transparent;
   border: 2px solid #4cd964;
-  -webkit-box-shadow: inset 0 0 0 13px #4cd964;
+  box-shadow: inset 0 0 0 13px #4cd964;
-          box-shadow: inset 0 0 0 13px #4cd964;
 }
 .toggle.active .toggle-handle {
   -webkit-transform: translate3d(17px, 0, 0);
-      -ms-transform: translate3d(17px, 0, 0);
           transform: translate3d(17px, 0, 0);
 }
 .toggle.active .toggle-handle {
@@ -431,40 +415,32 @@ textarea,
 
 .content.fade {
   -webkit-transition: opacity .2s ease-in-out;
-     -moz-transition: opacity .2s ease-in-out;
           transition: opacity .2s ease-in-out;
 }
 .content.sliding {
   -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-     -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
           transition-timing-function: cubic-bezier(.1, .5, .1, 1);
 }
 .content.sliding.sliding-in, .content.sliding.right:not([class*="sliding-in"]) {
   -webkit-animation-name: fadeOverlay;
-     -moz-animation-name: fadeOverlay;
           animation-name: fadeOverlay;
   -webkit-animation-duration: .4s;
-     -moz-animation-duration: .4s;
           animation-duration: .4s;
 }
 .content.sliding.right:not([class*="sliding-in"]) {
   -webkit-animation-direction: reverse;
-     -moz-animation-direction: reverse;
           animation-direction: reverse;
 }
 .content.sliding.left {
   -webkit-transform: translate3d(-20%, 0, 0);
-      -ms-transform: translate3d(-20%, 0, 0);
           transform: translate3d(-20%, 0, 0);
 }
 
 @-webkit-keyframes fadeOverlay {
   from {
-    -webkit-box-shadow: 0 0 10px transparent, -320px 0 0 transparent;
+    box-shadow: 0 0 10px transparent, -320px 0 0 transparent;
-            box-shadow: 0 0 10px transparent, -320px 0 0 transparent;
   }
   to {
-    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
+    box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
-            box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
   }
 }

dist/css/ratchet.css

@@ -119,8 +119,9 @@ figure {
 
 hr {
   height: 0;
-  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
-       box-sizing: content-box;
+     -moz-box-sizing: content-box;
+          box-sizing: content-box;
 }
 
 pre {
@@ -179,7 +180,9 @@ input {
 
 input[type="checkbox"],
 input[type="radio"] {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
   padding: 0;
 }
 
@@ -793,6 +796,7 @@ input[type="button"] {
   right: 15px;
   -webkit-transform: translateY(-50%);
       -ms-transform: translateY(-50%);
+       -o-transform: translateY(-50%);
           transform: translateY(-50%);
 }
 .table-view-cell .navigate-left > .btn,
@@ -1024,7 +1028,7 @@ select {
           box-shadow: 0 0 15px rgba(0, 0, 0, .1);
   opacity: 0;
   -webkit-transition: all .25s linear;
-     -moz-transition: all .25s linear;
+       -o-transition: all .25s linear;
           transition: all .25s linear;
   -webkit-transform: translate3d(0, -15px, 0);
       -ms-transform: translate3d(0, -15px, 0);
@@ -1098,7 +1102,7 @@ select {
   background-color: #fff;
   opacity: 0;
   -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
-     -moz-transition:    -moz-transform .25s, opacity 1ms .25s;
+       -o-transition:      -o-transform .25s, opacity 1ms .25s;
           transition:         transform .25s, opacity 1ms .25s;
   -webkit-transform: translate3d(0, 100%, 0);
       -ms-transform: translate3d(0, 100%, 0);
@@ -1108,7 +1112,7 @@ select {
   height: 100%;
   opacity: 1;
   -webkit-transition: -webkit-transform .25s;
-     -moz-transition:    -moz-transform .25s;
+       -o-transition:      -o-transform .25s;
           transition:         transform .25s;
   -webkit-transform: translate3d(0, 0, 0);
       -ms-transform: translate3d(0, 0, 0);
@@ -1128,7 +1132,7 @@ select {
   font-size: 0;
   white-space: nowrap;
   -webkit-transition: all 0s linear;
-     -moz-transition: all 0s linear;
+       -o-transition: all 0s linear;
           transition: all 0s linear;
 }
 .slider .slide-group .slide {
@@ -1148,10 +1152,10 @@ select {
   border: 2px solid #ddd;
   border-radius: 20px;
   -webkit-transition-duration: .2s;
-     -moz-transition-duration: .2s;
+       -o-transition-duration: .2s;
           transition-duration: .2s;
   -webkit-transition-property: background-color, border;
-     -moz-transition-property: background-color, border;
+       -o-transition-property: background-color, border;
           transition-property: background-color, border;
 }
 .toggle .toggle-handle {
@@ -1165,10 +1169,10 @@ select {
   border: 1px solid #ddd;
   border-radius: 100px;
   -webkit-transition-duration: .2s;
-     -moz-transition-duration: .2s;
+       -o-transition-duration: .2s;
           transition-duration: .2s;
   -webkit-transition-property: -webkit-transform, border, width;
-     -moz-transition-property:    -moz-transform, border, width;
+       -o-transition-property:      -o-transform, border, width;
           transition-property:         transform, border, width;
 }
 .toggle:before {
@@ -1210,7 +1214,7 @@ select {
 .content.sliding {
   z-index: 2;
   -webkit-transition: -webkit-transform .4s;
-     -moz-transition:    -moz-transform .4s;
+       -o-transition:      -o-transform .4s;
           transition:         transform .4s;
   -webkit-transform: translate3d(0, 0, 0);
       -ms-transform: translate3d(0, 0, 0);
@@ -1243,6 +1247,7 @@ select {
   text-decoration: none;
   -webkit-transform: translateY(-50%);
       -ms-transform: translateY(-50%);
+       -o-transform: translateY(-50%);
           transform: translateY(-50%);
 
   -webkit-font-smoothing: antialiased;

docs/assets/css/docs.css

@@ -60,8 +60,6 @@ body {
   background-color: #0a1855;
   background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #0a1855), color-stop(100%, #da0024));
   background-image: -webkit-linear-gradient(45deg, #0a1855 0%, #da0024 100%);
-  background-image:    -moz-linear-gradient(45deg, #0a1855 0%, #da0024 100%);
-  background-image:     -ms-linear-gradient(45deg, #0a1855 0%, #da0024 100%);
   background-image:      -o-linear-gradient(45deg, #0a1855 0%, #da0024 100%);
   background-image:         linear-gradient(45deg, #0a1855 0%, #da0024 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a1855', endColorstr='#da0024', GradientType=1 );
@@ -75,10 +73,10 @@ body {
   position: relative !important;
   margin-top: 0 !important;
   -webkit-animation-name: fadeintext;
-     -moz-animation-name: fadeintext;
+       -o-animation-name: fadeintext;
           animation-name: fadeintext;
   -webkit-animation-duration: 2s;
-     -moz-animation-duration: 2s;
+       -o-animation-duration: 2s;
           animation-duration: 2s;
 }
 .docs-header .version {
@@ -112,6 +110,7 @@ body {
     margin-top: 0 !important;
     -webkit-transform: translateY(-50%) !important;
         -ms-transform: translateY(-50%) !important;
+         -o-transform: translateY(-50%) !important;
             transform: translateY(-50%) !important;
   }
 }
@@ -131,6 +130,7 @@ body {
   font-weight: 400;
   -webkit-transform: translateX(-50%);
       -ms-transform: translateX(-50%);
+       -o-transform: translateX(-50%);
           transform: translateX(-50%);
 }
 
@@ -171,7 +171,7 @@ body {
 .docs-nav-item {
   color: #fff;
   -webkit-transition: opacity .2s linear;
-     -moz-transition: opacity .2s linear;
+       -o-transition: opacity .2s linear;
           transition: opacity .2s linear;
 }
 .docs-title a:active, .docs-title a:focus,
@@ -188,6 +188,7 @@ body {
     font-weight: 300;
     -webkit-transform: translateX(0);
         -ms-transform: translateX(0);
+         -o-transform: translateX(0);
             transform: translateX(0);
   }
 
@@ -218,7 +219,7 @@ body {
     color: #777;
     cursor: pointer;
     -webkit-transition: opacity .2 linear;
-       -moz-transition: opacity .2 linear;
+         -o-transition: opacity .2 linear;
             transition: opacity .2 linear;
   }
   .docs-jump-menu:hover {
@@ -244,7 +245,8 @@ body {
     padding-top: 10px;
     padding-bottom: 10px;
     background-color: #fff;
-    background-clip: padding-box;
+    -webkit-background-clip: padding-box;
+            background-clip: padding-box;
     border: 1px solid rgba(0, 0, 0, .2);
     border-radius: 3px;
     -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .05);
@@ -289,10 +291,10 @@ body {
   padding: 50px 10px;
   text-align: center;
   -webkit-animation-name: fadeintext;
-     -moz-animation-name: fadeintext;
+       -o-animation-name: fadeintext;
           animation-name: fadeintext;
   -webkit-animation-duration: 2s;
-     -moz-animation-duration: 2s;
+       -o-animation-duration: 2s;
           animation-duration: 2s;
 }
 .docs-header-content .btn {
@@ -304,7 +306,7 @@ body {
   background-color: #fff;
   border: 0;
   -webkit-transition: all .2s linear;
-     -moz-transition: all .2s linear;
+       -o-transition: all .2s linear;
           transition: all .2s linear;
 }
 .docs-header-content .btn:hover {
@@ -330,6 +332,7 @@ body {
     top: 30%;
     -webkit-transform: translateY(-50%);
         -ms-transform: translateY(-50%);
+         -o-transform: translateY(-50%);
             transform: translateY(-50%);
   }
   .docs-header-content .btn {
@@ -537,7 +540,7 @@ body {
   background-color: #fff;
   border-bottom: 1px solid #ddd;
   -webkit-transition: -webkit-transform .5s;
-     -moz-transition:    -moz-transform .5s;
+       -o-transition:      -o-transform .5s;
           transition:         transform .5s;
   -webkit-transform: translate3d(0, -55px, 0);
       -ms-transform: translate3d(0, -55px, 0);
@@ -713,7 +716,7 @@ code {
     padding-left: 0;
     opacity: .3;
     -webkit-transition: opacity .2s ease-in-out;
-       -moz-transition: opacity .2s ease-in-out;
+         -o-transition: opacity .2s ease-in-out;
             transition: opacity .2s ease-in-out;
   }
   .component.active {
@@ -863,9 +866,10 @@ code {
     background-image: url("../img/device-sprite.png");
     background-repeat: no-repeat;
     background-position: 0 0;
-    background-size: 300%;
+    -webkit-background-size: 300% 300%;
+            background-size: 300%;
     -webkit-transition: background-image .1s linear;
-       -moz-transition: background-image .1s linear;
+         -o-transition: background-image .1s linear;
             transition: background-image .1s linear;
   }
   .device.device-fixed {
@@ -997,13 +1001,13 @@ hr {
   background-color: rgba(247, 247, 247, .98);
   border: 1px solid #929292;
   -webkit-transition: all;
-     -moz-transition: all;
+       -o-transition: all;
           transition: all;
   -webkit-transition-timing-function: linear;
-     -moz-transition-timing-function: linear;
+       -o-transition-timing-function: linear;
           transition-timing-function: linear;
   -webkit-transition-duration: .2s;
-     -moz-transition-duration: .2s;
+       -o-transition-duration: .2s;
           transition-duration: .2s;
 }
 .platform-ios .btn:active, .platform-ios .btn.active {
@@ -1234,7 +1238,7 @@ hr {
   color: #929292;
   border-color: #929292;
   -webkit-transition: background-color .1s linear;
-     -moz-transition: background-color .1s linear;
+       -o-transition: background-color .1s linear;
           transition: background-color .1s linear;
 }
 .platform-ios .segmented-control .control-item:active {
@@ -1289,7 +1293,6 @@ hr {
 .platform-ios .popover {
   border-radius: 12px;
   -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
-     -moz-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
           transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
 }
 .platform-ios .popover:before {
@@ -1308,12 +1311,12 @@ hr {
 }
 .platform-ios .modal {
   -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-     -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
+       -o-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
           transition-timing-function: cubic-bezier(.1, .5, .1, 1);
 }
 .platform-ios .modal.active {
   -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-     -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
+       -o-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
           transition-timing-function: cubic-bezier(.1, .5, .1, 1);
 }
 .platform-ios .toggle {
@@ -1322,18 +1325,18 @@ hr {
   -webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
           box-shadow: inset 0 0 0 0 #e1e1e1;
   -webkit-transition-duration: .2s;
-     -moz-transition-duration: .2s;
+       -o-transition-duration: .2s;
           transition-duration: .2s;
-  -webkit-transition-property: box-shadow, border;
+  -webkit-transition-property: -webkit-box-shadow, border;
-     -moz-transition-property: box-shadow, border;
+       -o-transition-property:         box-shadow, border;
-          transition-property: box-shadow, border;
+          transition-property:         box-shadow, border;
 }
 .platform-ios .toggle .toggle-handle {
   border: 1px solid rgba(0, 0, 0, .2);
   -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
           box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
   -webkit-transition-property: -webkit-transform, border, width;
-     -moz-transition-property:    -moz-transform, border, width;
+       -o-transition-property:      -o-transform, border, width;
           transition-property:         transform, border, width;
 }
 .platform-ios .toggle:before {
@@ -1355,25 +1358,25 @@ hr {
 }
 .platform-ios .content.fade {
   -webkit-transition: opacity .2s ease-in-out;
-     -moz-transition: opacity .2s ease-in-out;
+       -o-transition: opacity .2s ease-in-out;
           transition: opacity .2s ease-in-out;
 }
 .platform-ios .content.sliding {
   -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-     -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
+       -o-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
           transition-timing-function: cubic-bezier(.1, .5, .1, 1);
 }
 .platform-ios .content.sliding.sliding-in, .platform-ios .content.sliding.right:not([class*="sliding-in"]) {
   -webkit-animation-name: fadeOverlay;
-     -moz-animation-name: fadeOverlay;
+       -o-animation-name: fadeOverlay;
           animation-name: fadeOverlay;
   -webkit-animation-duration: .4s;
-     -moz-animation-duration: .4s;
+       -o-animation-duration: .4s;
           animation-duration: .4s;
 }
 .platform-ios .content.sliding.right:not([class*="sliding-in"]) {
   -webkit-animation-direction: reverse;
-     -moz-animation-direction: reverse;
+       -o-animation-direction: reverse;
           animation-direction: reverse;
 }
 .platform-ios .content.sliding.left {
@@ -1841,10 +1844,11 @@ hr {
   -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .2);
           box-shadow: 0 0 3px rgba(0, 0, 0, .2);
   -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;
+       -o-transition:      -o-transform .1s ease-in-out, opacity .2s ease-in-out;
           transition:         transform .1s ease-in-out, opacity .2s ease-in-out;
   -webkit-transform: scale(.75);
       -ms-transform: scale(.75);
+       -o-transform: scale(.75);
           transform: scale(.75);
 }
 .platform-android .popover:before {
@@ -1853,6 +1857,7 @@ hr {
 .platform-android .popover.visible {
   -webkit-transform: scale(1);
       -ms-transform: scale(1);
+       -o-transform: scale(1);
           transform: scale(1);
 }
 .platform-android .backdrop {
@@ -1966,6 +1971,7 @@ hr {
 .platform-android .device .popover {
   -webkit-transform: scale(1);
       -ms-transform: scale(1);
+       -o-transform: scale(1);
           transform: scale(1);
 }
 .platform-android .bar ~ .content {

docs/dist/css/ratchet-theme-android.css

@@ -494,10 +494,10 @@ textarea,
   -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .2);
           box-shadow: 0 0 3px rgba(0, 0, 0, .2);
   -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;
+       -o-transition:      -o-transform .1s ease-in-out, opacity .2s ease-in-out;
           transition:         transform .1s ease-in-out, opacity .2s ease-in-out;
   -webkit-transform: scale(.75);
-      -ms-transform: scale(.75);
+       -o-transform: scale(.75);
           transform: scale(.75);
 }
 .popover:before {
@@ -505,7 +505,7 @@ textarea,
 }
 .popover.visible {
   -webkit-transform: scale(1);
-      -ms-transform: scale(1);
+       -o-transform: scale(1);
           transform: scale(1);
 }
 
@@ -558,7 +558,6 @@ textarea,
   background-color: #33b5e5;
   border-color: #33b5e5;
   -webkit-transform: translate3d(50px, 0, 0);
-      -ms-transform: translate3d(50px, 0, 0);
           transform: translate3d(50px, 0, 0);
 }
 .toggle.active:before {

docs/dist/css/ratchet-theme-ios.css

@@ -36,13 +36,10 @@ p {
   background-color: rgba(247, 247, 247, .98);
   border: 1px solid #929292;
   -webkit-transition: all;
-     -moz-transition: all;
           transition: all;
   -webkit-transition-timing-function: linear;
-     -moz-transition-timing-function: linear;
           transition-timing-function: linear;
   -webkit-transition-duration: .2s;
-     -moz-transition-duration: .2s;
           transition-duration: .2s;
 }
 .btn:active, .btn.active {
@@ -119,8 +116,7 @@ p {
 .bar {
   background-color: rgba(247, 247, 247, .98);
   border-bottom: 0;
-  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .85);
+  box-shadow: 0 0 1px rgba(0, 0, 0, .85);
-          box-shadow: 0 0 1px rgba(0, 0, 0, .85);
 }
 .bar.bar-header-secondary {
   top: 44px;
@@ -300,7 +296,6 @@ textarea,
   color: #929292;
   border-color: #929292;
   -webkit-transition: background-color .1s linear;
-     -moz-transition: background-color .1s linear;
           transition: background-color .1s linear;
 }
 .segmented-control .control-item:active {
@@ -359,7 +354,6 @@ textarea,
 .popover {
   border-radius: 12px;
   -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
-     -moz-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
           transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
 }
 .popover:before {
@@ -367,8 +361,7 @@ textarea,
 }
 
 .popover .bar {
-  -webkit-box-shadow: none;
+  box-shadow: none;
-          box-shadow: none;
 }
 
 .popover .bar-nav {
@@ -382,33 +375,26 @@ textarea,
 
 .modal {
   -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-     -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
           transition-timing-function: cubic-bezier(.1, .5, .1, 1);
 }
 .modal.active {
   -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-     -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
           transition-timing-function: cubic-bezier(.1, .5, .1, 1);
 }
 
 .toggle {
   width: 47px;
   border: 2px solid #e6e6e6;
-  -webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
+  box-shadow: inset 0 0 0 0 #e1e1e1;
-          box-shadow: inset 0 0 0 0 #e1e1e1;
   -webkit-transition-duration: .2s;
-     -moz-transition-duration: .2s;
           transition-duration: .2s;
   -webkit-transition-property: box-shadow, border;
-     -moz-transition-property: box-shadow, border;
           transition-property: box-shadow, border;
 }
 .toggle .toggle-handle {
   border: 1px solid rgba(0, 0, 0, .2);
-  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
+  box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
-          box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
   -webkit-transition-property: -webkit-transform, border, width;
-     -moz-transition-property:    -moz-transform, border, width;
           transition-property:         transform, border, width;
 }
 .toggle:before {
@@ -417,12 +403,10 @@ textarea,
 .toggle.active {
   background-color: transparent;
   border: 2px solid #4cd964;
-  -webkit-box-shadow: inset 0 0 0 13px #4cd964;
+  box-shadow: inset 0 0 0 13px #4cd964;
-          box-shadow: inset 0 0 0 13px #4cd964;
 }
 .toggle.active .toggle-handle {
   -webkit-transform: translate3d(17px, 0, 0);
-      -ms-transform: translate3d(17px, 0, 0);
           transform: translate3d(17px, 0, 0);
 }
 .toggle.active .toggle-handle {
@@ -431,40 +415,32 @@ textarea,
 
 .content.fade {
   -webkit-transition: opacity .2s ease-in-out;
-     -moz-transition: opacity .2s ease-in-out;
           transition: opacity .2s ease-in-out;
 }
 .content.sliding {
   -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-     -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
           transition-timing-function: cubic-bezier(.1, .5, .1, 1);
 }
 .content.sliding.sliding-in, .content.sliding.right:not([class*="sliding-in"]) {
   -webkit-animation-name: fadeOverlay;
-     -moz-animation-name: fadeOverlay;
           animation-name: fadeOverlay;
   -webkit-animation-duration: .4s;
-     -moz-animation-duration: .4s;
           animation-duration: .4s;
 }
 .content.sliding.right:not([class*="sliding-in"]) {
   -webkit-animation-direction: reverse;
-     -moz-animation-direction: reverse;
           animation-direction: reverse;
 }
 .content.sliding.left {
   -webkit-transform: translate3d(-20%, 0, 0);
-      -ms-transform: translate3d(-20%, 0, 0);
           transform: translate3d(-20%, 0, 0);
 }
 
 @-webkit-keyframes fadeOverlay {
   from {
-    -webkit-box-shadow: 0 0 10px transparent, -320px 0 0 transparent;
+    box-shadow: 0 0 10px transparent, -320px 0 0 transparent;
-            box-shadow: 0 0 10px transparent, -320px 0 0 transparent;
   }
   to {
-    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
+    box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
-            box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
   }
 }

docs/dist/css/ratchet.css

@@ -119,8 +119,9 @@ figure {
 
 hr {
   height: 0;
-  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
-       box-sizing: content-box;
+     -moz-box-sizing: content-box;
+          box-sizing: content-box;
 }
 
 pre {
@@ -179,7 +180,9 @@ input {
 
 input[type="checkbox"],
 input[type="radio"] {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
   padding: 0;
 }
 
@@ -793,6 +796,7 @@ input[type="button"] {
   right: 15px;
   -webkit-transform: translateY(-50%);
       -ms-transform: translateY(-50%);
+       -o-transform: translateY(-50%);
           transform: translateY(-50%);
 }
 .table-view-cell .navigate-left > .btn,
@@ -1024,7 +1028,7 @@ select {
           box-shadow: 0 0 15px rgba(0, 0, 0, .1);
   opacity: 0;
   -webkit-transition: all .25s linear;
-     -moz-transition: all .25s linear;
+       -o-transition: all .25s linear;
           transition: all .25s linear;
   -webkit-transform: translate3d(0, -15px, 0);
       -ms-transform: translate3d(0, -15px, 0);
@@ -1098,7 +1102,7 @@ select {
   background-color: #fff;
   opacity: 0;
   -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
-     -moz-transition:    -moz-transform .25s, opacity 1ms .25s;
+       -o-transition:      -o-transform .25s, opacity 1ms .25s;
           transition:         transform .25s, opacity 1ms .25s;
   -webkit-transform: translate3d(0, 100%, 0);
       -ms-transform: translate3d(0, 100%, 0);
@@ -1108,7 +1112,7 @@ select {
   height: 100%;
   opacity: 1;
   -webkit-transition: -webkit-transform .25s;
-     -moz-transition:    -moz-transform .25s;
+       -o-transition:      -o-transform .25s;
           transition:         transform .25s;
   -webkit-transform: translate3d(0, 0, 0);
       -ms-transform: translate3d(0, 0, 0);
@@ -1128,7 +1132,7 @@ select {
   font-size: 0;
   white-space: nowrap;
   -webkit-transition: all 0s linear;
-     -moz-transition: all 0s linear;
+       -o-transition: all 0s linear;
           transition: all 0s linear;
 }
 .slider .slide-group .slide {
@@ -1148,10 +1152,10 @@ select {
   border: 2px solid #ddd;
   border-radius: 20px;
   -webkit-transition-duration: .2s;
-     -moz-transition-duration: .2s;
+       -o-transition-duration: .2s;
           transition-duration: .2s;
   -webkit-transition-property: background-color, border;
-     -moz-transition-property: background-color, border;
+       -o-transition-property: background-color, border;
           transition-property: background-color, border;
 }
 .toggle .toggle-handle {
@@ -1165,10 +1169,10 @@ select {
   border: 1px solid #ddd;
   border-radius: 100px;
   -webkit-transition-duration: .2s;
-     -moz-transition-duration: .2s;
+       -o-transition-duration: .2s;
           transition-duration: .2s;
   -webkit-transition-property: -webkit-transform, border, width;
-     -moz-transition-property:    -moz-transform, border, width;
+       -o-transition-property:      -o-transform, border, width;
           transition-property:         transform, border, width;
 }
 .toggle:before {
@@ -1210,7 +1214,7 @@ select {
 .content.sliding {
   z-index: 2;
   -webkit-transition: -webkit-transform .4s;
-     -moz-transition:    -moz-transform .4s;
+       -o-transition:      -o-transform .4s;
           transition:         transform .4s;
   -webkit-transform: translate3d(0, 0, 0);
       -ms-transform: translate3d(0, 0, 0);
@@ -1243,6 +1247,7 @@ select {
   text-decoration: none;
   -webkit-transform: translateY(-50%);
       -ms-transform: translateY(-50%);
+       -o-transform: translateY(-50%);
           transform: translateY(-50%);
 
   -webkit-font-smoothing: antialiased;

package.json

@@ -27,6 +27,7 @@
   },
   "devDependencies": {
     "grunt": "~0.4.5",
+    "grunt-autoprefixer": "~2.2.0",
     "grunt-contrib-clean": "~0.6.0",
     "grunt-contrib-concat": "~0.5.0",
     "grunt-contrib-copy": "~0.7.0",

sass/.csslintrc

@@ -5,6 +5,7 @@
   "compatible-vendor-prefixes": false,
   "fallback-colors": false,
   "font-sizes": false,
+  "gradients": false,
   "important": false,
   "known-properties": false,
   "outline-none": false,