diff --git a/gulpfile.js b/gulpfile.js index a487efd..d05cb3c 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -13,6 +13,7 @@ var gulp = require('gulp') , source = require('vinyl-source-stream') , stream = require('event-stream') , uglify = require('gulp-uglify') + , autoprefixer = require('gulp-autoprefixer') , zip = require('gulp-zip'); var version = '/* perfect-scrollbar v' + require('./package').version + ' */\n'; @@ -37,6 +38,11 @@ var jsEntries = [ './src/js/adaptor/jquery.js' ]; +var autoPrefixerConfig = { + browsers: ['> 0%'], // '> 0%' forces autoprefixer to use all the possible prefixes. See https://github.com/ai/browserslist#queries for more details. IMO 'last 3 versions' would be good enough. + cascade: false +}; + gulp.task('js', ['clean:js'], function () { var tasks = jsEntries.map(function (src) { return browserify([src]).bundle() @@ -87,6 +93,7 @@ gulp.task('clean:css:min', function () { gulp.task('css', ['clean:css'], function () { return gulp.src('./src/css/main.scss') .pipe(sass()) + .pipe(autoprefixer(autoPrefixerConfig)) .pipe(insert.prepend(version)) .pipe(rename('perfect-scrollbar.css')) .pipe(gulp.dest('./dist/css')) @@ -96,6 +103,7 @@ gulp.task('css', ['clean:css'], function () { gulp.task('css:min', ['clean:css:min'], function () { return gulp.src('./src/css/main.scss') .pipe(sass({outputStyle: 'compressed'})) + .pipe(autoprefixer(autoPrefixerConfig)) .pipe(insert.prepend(version)) .pipe(rename('perfect-scrollbar.min.css')) .pipe(gulp.dest('./dist/css')); diff --git a/package.json b/package.json index 8f078f9..61b0cae 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "del": "^2.0.2", "event-stream": "^3.3.1", "gulp": "^3.9.0", + "gulp-autoprefixer": "^3.1.0", "gulp-connect": "^2.2.0", "gulp-eslint": "^1.0.0", "gulp-insert": "^0.5.0", diff --git a/src/css/mixins.scss b/src/css/mixins.scss index f2abecf..a371d17 100644 --- a/src/css/mixins.scss +++ b/src/css/mixins.scss @@ -1,25 +1,9 @@ -// Helper mixins -@mixin border-radius($r) { - -webkit-border-radius: $r; - -moz-border-radius: $r; - -ms-border-radius: $r; - border-radius: $r; -} - -@mixin transition($t...) { - -webkit-transition: $t; - -moz-transition: $t; - -o-transition: $t; - transition: $t; -} - -// Scrollbar mixins @mixin scrollbar-rail-default($theme) { display: none; position: absolute; /* please don't change 'position' */ - @include border-radius(map_get($theme, border-radius)); + border-radius: map_get($theme, border-radius); opacity: map_get($theme, rail-default-opacity); - @include transition(background-color .2s linear, opacity .2s linear); + transition: background-color .2s linear, opacity .2s linear; } @mixin scrollbar-rail-hover($theme) { @@ -30,8 +14,8 @@ @mixin scrollbar-default($theme) { position: absolute; /* please don't change 'position' */ background-color: map_get($theme, bar-container-hover-bg); - @include border-radius(map_get($theme, border-radius)); - @include transition(background-color .2s linear); + border-radius: map_get($theme, border-radius); + transition: background-color .2s linear; } @mixin scrollbar-hover($theme) {