From 57b1404e29ec660b20bc07f14c413d152f0c73e1 Mon Sep 17 00:00:00 2001 From: wujekbogdan Date: Thu, 10 Dec 2015 11:46:35 +0100 Subject: [PATCH] - removed transition() and border-radius() mixins - added gulp-autoprefixer --- gulpfile.js | 8 ++++++++ package.json | 1 + src/css/main.scss | 23 ++++------------------- 3 files changed, 13 insertions(+), 19 deletions(-) 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 faa9f5c..1088e39 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/main.scss b/src/css/main.scss index bad2da6..caff721 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -3,28 +3,13 @@ $ps-rail-hover: #eee; $ps-bar-default: #aaa; $ps-bar-hover: #999; -// 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 { display: none; position: absolute; /* please don't change 'position' */ - @include border-radius(4px); + border-radius: 4px; opacity: 0; - @include transition(background-color .2s linear, opacity .2s linear); + transition: background-color .2s linear, opacity .2s linear; } @mixin scrollbar-rail-hover { @@ -35,8 +20,8 @@ $ps-bar-hover: #999; @mixin scrollbar-default { position: absolute; /* please don't change 'position' */ background-color: $ps-bar-default; - @include border-radius(4px); - @include transition(background-color .2s linear); + border-radius: 4px; + transition: background-color .2s linear; } @mixin scrollbar-hover {