Make use of autoprefixer

gulpfile.js

@@ -1,3 +1,5 @@
+require('es6-promise').polyfill();
+
 var gulp = require('gulp');
 var browserify = require('browserify');
 var concatCss = require('gulp-concat-css');
@@ -8,6 +10,7 @@ var buffer = require('vinyl-buffer');
 var source = require('vinyl-source-stream');
 var sourcemaps = require('gulp-sourcemaps');
 var merge = require('merge-stream');
+var autoprefixer = require('gulp-autoprefixer');
 
 gulp.task('js', function() {
     browserify('./jet/static/jet/js/src/main.js')
@@ -54,6 +57,10 @@ gulp.task('scss', function() {
         .on('error', function(error) {
             console.error(error);
         })
+        .pipe(autoprefixer())
+        .on('error', function(error) {
+            console.error(error);
+        })
         .pipe(sourcemaps.write('./'))
         .pipe(gulp.dest('./jet/static/jet/css'));
 });

jet/static/jet/css/_base.scss

@@ -15,7 +15,7 @@ body {
   color: $text-color;
   font-family: $font;
   font-size: $font-size;
-  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
 
   &.non-scrollable {
     overflow: hidden;

jet/static/jet/css/_changeform.scss

@@ -353,7 +353,7 @@ fieldset.monospace textarea {
       padding: 0 20px;
       text-transform: uppercase;
       box-sizing: border-box;
-      @include transition(background $transitions-duration, box-shadow $transitions-duration, border $transitions-duration);
+      transition: background $transitions-duration, box-shadow $transitions-duration, border $transitions-duration;
 
       @include for-phone {
         display: block;
@@ -589,7 +589,7 @@ body.popup .submit-row {
 .inline-group {
   .tabular {
     overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
+    overflow-scrolling: touch;
 
     table {
       box-shadow: none;
@@ -695,7 +695,7 @@ form .related-widget-wrapper ul {
 
 .related-widget-wrapper-link {
   opacity: 0.5;
-  @include transition(opacity $transitions-duration);
+  transition: opacity $transitions-duration;
 
   &:link {
     opacity: 1;
@@ -776,12 +776,9 @@ form .related-widget-wrapper ul {
       font-weight: bold;
       font-size: 11px;
       text-transform: uppercase;
-
-      @include transition(
-        background-color $fast-transitions-duration,
-        color $fast-transitions-duration,
-        border-color $transitions-duration
-      );
+      transition: background-color $fast-transitions-duration,
+                  color $fast-transitions-duration,
+                  border-color $transitions-duration;
 
       @include for-mobile {
         margin: 0 5px 5px 0;

jet/static/jet/css/_changelist.scss

@@ -12,7 +12,7 @@
 
   .results {
     overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
+    overflow-scrolling: touch;
 
     @include for-mobile {
       background: $sidebar-background-color;
@@ -346,7 +346,7 @@
         padding: 0 20px;
         text-transform: uppercase;
         margin: 0 8px 0 0;
-        @include transition(background $transitions-duration);
+        transition: background $transitions-duration;
 
         @include for-mobile {
           margin-bottom: 5px;

jet/static/jet/css/_dashboard.scss

@@ -137,7 +137,7 @@ ul.actionlist li {
     background: $background-color;
     border-radius: 4px;
     margin-bottom: 20px;
-    @include transition(background $transitions-duration);
+    transition: background $transitions-duration;
 
     @include for-mobile {
       margin-bottom: 10px;

jet/static/jet/css/_forms.scss

@@ -20,10 +20,8 @@
     text-overflow: ellipsis;
     overflow: hidden;
     max-width: 100%;
-    -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none;
-    @include transition(background $transitions-duration);
+    transition: background $transitions-duration;
   }
 
   &.default {
@@ -66,12 +64,11 @@ input[type="text"], input[type="email"], input[type="password"], input[type="url
   color: $input-text-color;
   border: 1px solid $input-border-color;
   padding: 0 12px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
   appearance: none;
-  @include transition(background $transitions-duration, box-shadow $transitions-duration, border $transitions-duration);
+  transition: background $transitions-duration, box-shadow $transitions-duration, border $transitions-duration;
 
-  @include placeholder {
+  //noinspection CssInvalidPseudoSelector
+  &:placeholder {
     color: $input-placeholder-color;
   }
 
@@ -112,7 +109,7 @@ select {
     display: inline-block;
     text-transform: none;
     border-radius: 0;
-    @include transition(background $transitions-duration);
+    transition: background $transitions-duration;
   }
 
   &:hover, &:focus {

jet/static/jet/css/_header.scss

@@ -108,7 +108,7 @@
         font-size: 24px;
         vertical-align: middle;
         line-height: 30px;
-        @include transition(color $transitions-duration);
+        transition: color $transitions-duration;
       }
     }
 
@@ -117,7 +117,7 @@
 
       &:after {
         color: $top-dropdown-icon-color;
-        @include transform(rotate(180deg));
+        transform: rotate(180deg);
       }
     }
 

jet/static/jet/css/_helpers.scss

@@ -1,5 +1,5 @@
 .hidden {
-    display: none;
+  display: none;
 }
 
 .clear-list {
@@ -65,73 +65,7 @@
   }
 }
 
-@mixin placeholder {
-  &::-webkit-input-placeholder {@content}
-  &:-moz-placeholder           {@content}
-  &::-moz-placeholder          {@content}
-  &:-ms-input-placeholder      {@content}
-}
-
-@mixin transition-all($duration) {
-  -webkit-transition: all $duration;
-  -moz-transition: all $duration;
-  -o-transition: all $duration;
-  transition: all $duration;
-}
-
-@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
-@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
-@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
-
-@function prefix($property, $prefixes: (webkit moz o ms)) {
-  $vendor-prefixed-properties: transform background-clip background-size;
-  $result: ();
-  @each $prefix in $prefixes {
-    @if index($vendor-prefixed-properties, $property) {
-      $property: -#{$prefix}-#{$property}
-    }
-    $result: append($result, $property);
-  }
-  @return $result;
-}
-
-@function trans-prefix($transition, $prefix: moz) {
-  $prefixed: ();
-  @each $trans in $transition {
-    $prop-name: nth($trans, 1);
-    $vendor-prop-name: prefix($prop-name, $prefix);
-    $prop-vals: nth($trans, 2);
-    $prefixed: append($prefixed, ($vendor-prop-name $prop-vals), comma);
-  }
-
-  @return $prefixed;
-}
-
-@mixin transition($values...) {
-  $transitions: ();
-  @each $declaration in $values {
-    $prop: nth($declaration, 1);
-    $prop-opts: ();
-    $length: length($declaration);
-    @for $i from 2 through $length {
-      $prop-opts: append($prop-opts, nth($declaration, $i));
-    }
-    $trans: ($prop, $prop-opts);
-    $transitions: append($transitions, $trans, comma);
-  }
-
-  -webkit-transition: trans-prefix($transitions, webkit);
-  -moz-transition: trans-prefix($transitions, moz);
-  -o-transition: trans-prefix($transitions, o);
-  transition: $values;
-}
-
-@mixin transform($transform) {
-  -webkit-transform: $transform;
-  -moz-transform: $transform;
-  -o-transform: $transform;
-  transform: $transform;
-}
+@keyframes spin { 100% { transform: rotate(360deg); } }
 
 @mixin font-icon {
   font-family: 'jet-icons';

jet/static/jet/css/_login.scss

@@ -69,8 +69,6 @@ body.login {
       clear: both;
       padding: 6px;
       width: 100%;
-      -webkit-box-sizing: border-box;
-      -moz-box-sizing: border-box;
       box-sizing: border-box;
     }
   }

jet/static/jet/css/_relatedpopup.scss

@@ -61,7 +61,7 @@
       box-sizing: border-box;
       text-transform: uppercase;
       border-radius: 6px 0 0 6px;
-      @include transition(background-color $transitions-duration, color $transitions-duration);
+      transition: background-color $transitions-duration, color $transitions-duration;
 
       @include for-mobile {
         margin-left: 0;

jet/static/jet/css/_sidebar.scss

@@ -2,7 +2,7 @@
 
 .sidebar {
   background-color: $sidebar-background-color;
-  @include transition(background-color $transitions-duration);
+  transition: background-color $transitions-duration;
 
   @include for-mobile {
     display: none;
@@ -21,7 +21,7 @@
     &-item {
       padding: 20px 24px;
       border-bottom: 1px solid $sidebar-contrast-background-color;
-      @include transition(border-bottom-color $transitions-duration);
+      transition: border-bottom-color $transitions-duration;
 
       &:last-child {
         border-bottom: 0;
@@ -37,7 +37,7 @@
         vertical-align: middle;
         margin-right: 6px;
         color: $sidebar-icon-color;
-        @include transition(color $transitions-duration);
+        transition: color $transitions-duration;
       }
 
       &-link {
@@ -50,7 +50,7 @@
           width: 100%;
           display: inline-block;
           box-sizing: border-box;
-          @include transition(color $transitions-duration);
+          transition: color $transitions-duration;
         }
 
         &:hover {
@@ -70,7 +70,7 @@
         width: 100%;
         display: inline-block;
         box-sizing: border-box;
-        @include transition(color $transitions-duration);
+        transition: color $transitions-duration;
 
         &-icon {
           float: right;
@@ -79,7 +79,7 @@
 
           &, &:visited, &:hover {
             color: $sidebar-title-action-color;
-            @include transition(color $transitions-duration);
+            transition: color $transitions-duration;
           }
 
           &:hover {
@@ -98,7 +98,7 @@
           text-overflow: ellipsis;
           white-space: nowrap;
           padding: 0 24px;
-          @include transition(color $transitions-duration);
+          transition: color $transitions-duration;
         }
 
         &:hover {
@@ -115,7 +115,7 @@
           margin-top: 10px;
           padding: 8px 0;
           text-transform: uppercase;
-          @include transition(color $transitions-duration, background-color $transitions-duration);
+          transition: color $transitions-duration, background-color $transitions-duration;
         }
 
         &:hover {
@@ -141,7 +141,7 @@
             vertical-align: middle;
             margin-right: 6px;
             color: $sidebar-icon-color;
-            @include transition(color $transitions-duration);
+            transition: color $transitions-duration;
           }
 
           &.compact &-icon {
@@ -158,7 +158,7 @@
               padding: 8px 12px 8px 24px;
               vertical-align: middle;
               position: relative;
-              @include transition(color $transitions-duration, background-color $transitions-duration);
+              transition: color $transitions-duration, background-color $transitions-duration;
             }
 
             &:hover, &.hovered {
@@ -172,7 +172,7 @@
                 float: right;
                 display: none;
                 color: $sidebar-action-color;
-                @include transition(color $transitions-duration);
+                transition: color $transitions-duration;
               }
 
               &:hover {
@@ -187,7 +187,7 @@
                 left: 4px;
                 font-size: 14px;
                 color: $sidebar-action-color;
-                @include transition(color $transitions-duration);
+                transition: color $transitions-duration;
               }
 
               &:hover {
@@ -214,7 +214,7 @@
             font-size: 16px;
             font-weight: bold !important;
             margin-left: 4px;
-            @include transition(color $transitions-duration);
+            transition: color $transitions-duration;
           }
 
           &-link:hover &-arrow {
@@ -283,7 +283,8 @@
       padding: 0;
       margin: 0 0 12px 0;
 
-      @include placeholder {
+      //noinspection CssInvalidPseudoSelector
+      &:placeholder {
         color: $sidebar-popup-search-input-placeholder-color;
       }
     }
@@ -318,6 +319,6 @@
     text-align: center;
     font-size: 11px;
     font-weight: bold;
-    @include transition(background-color $transitions-duration, color $transitions-duration);
+    transition: background-color $transitions-duration, color $transitions-duration;
   }
 }

jet/static/jet/css/_tables.scss

@@ -36,7 +36,7 @@ table {
     background: $content-contrast2-background-color;
     color: $content-contrast2-text-color;
     text-transform: uppercase;
-    @include transition(background-color $fast-transitions-duration);
+    transition: background-color $fast-transitions-duration;
 
     a:link, a:visited {
       color: $content-contrast2-text-color;

package.json

@@ -1,22 +1,24 @@
 {
   "name": "django-jet",
   "devDependencies": {
-    "gulp": "3.9.1",
-    "vinyl-buffer": "1.0.0",
-    "vinyl-source-stream": "1.1.0",
     "browserify": "13.0.1",
+    "es6-promise": "3.2.1",
+    "gulp": "3.9.1",
+    "gulp-autoprefixer": "3.1.0",
     "gulp-concat-css": "2.3.0",
     "gulp-minify-css": "1.2.4",
     "gulp-sass": "2.3.2",
     "gulp-sourcemaps": "1.6.0",
     "gulp-uglify": "1.5.4",
-    "merge-stream": "1.0.0",
     "jquery": "1.11.3",
+    "jquery-ui": "git://github.com/jquery/jquery-ui#1.11.4",
     "jquery.cookie": "1.4.1",
-    "timepicker": "git://github.com/geex-arts/timepicker",
-    "perfect-scrollbar": "git://github.com/noraesae/perfect-scrollbar#0.6.5",
     "jquery.mousewheel": "3.1.9",
+    "merge-stream": "1.0.0",
+    "perfect-scrollbar": "git://github.com/noraesae/perfect-scrollbar#0.6.5",
     "select2": "4.0.0",
-    "jquery-ui": "git://github.com/jquery/jquery-ui#1.11.4"
+    "timepicker": "git://github.com/geex-arts/timepicker",
+    "vinyl-buffer": "1.0.0",
+    "vinyl-source-stream": "1.1.0"
   }
 }