From d24f9bd41b995c7c31c99cd8334bdf1bedc7c2f5 Mon Sep 17 00:00:00 2001 From: Hyunje Alex Jun Date: Fri, 31 Oct 2014 02:15:36 +0000 Subject: [PATCH] Use scss for stylesheet. We can build the scss source to .css and .min.css files with the `grunt build` command. --- Gruntfile.js | 30 ++---- min/perfect-scrollbar.min.css | 2 +- package.json | 14 ++- src/perfect-scrollbar.css | 194 ++++++++++++++++------------------ src/perfect-scrollbar.scss | 111 +++++++++++++++++++ 5 files changed, 224 insertions(+), 127 deletions(-) create mode 100644 src/perfect-scrollbar.scss diff --git a/Gruntfile.js b/Gruntfile.js index d9a6650..c24ebba 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,6 +1,7 @@ 'use strict'; module.exports = function (grunt) { + require('load-grunt-tasks')(grunt); // Project configuration. grunt.initConfig({ @@ -38,15 +39,6 @@ module.exports = function (grunt) { src: 'src/perfect-scrollbar.js' } }, - csslint: { - strict: { - options: { - csslintrc: '.csslintrc', - 'import': 2 - }, - src: ['src/perfect-scrollbar.css'] - } - }, cssmin: { options: { banner: '<%= banner %>' @@ -67,17 +59,16 @@ module.exports = function (grunt) { createTag: false, push: false } + }, + sass: { + dist: { + files: { + 'src/perfect-scrollbar.css': 'src/perfect-scrollbar.scss' + } + } } }); - // These plugins provide necessary tasks. - grunt.loadNpmTasks('grunt-contrib-uglify'); - grunt.loadNpmTasks('grunt-contrib-jshint'); - grunt.loadNpmTasks('grunt-contrib-clean'); - grunt.loadNpmTasks('grunt-contrib-csslint'); - grunt.loadNpmTasks('grunt-contrib-cssmin'); - grunt.loadNpmTasks('grunt-bump'); - grunt.registerTask('default', 'List commands', function () { grunt.log.writeln(""); @@ -85,12 +76,11 @@ module.exports = function (grunt) { grunt.log.writeln("Run 'grunt build' to minify the source files"); }); - grunt.registerTask('lint', ['jshint', 'csslint']); - grunt.registerTask('build', ['clean', 'uglify', 'cssmin']); + grunt.registerTask('lint', ['jshint']); + grunt.registerTask('build', ['clean', 'uglify', 'sass', 'cssmin']); grunt.registerTask('travis', ['lint']); grunt.registerTask('release', 'Release a new version', function (arg) { var bumpType = arg ? ':' + arg : ''; grunt.task.run(['lint', 'bump' + bumpType, 'build']); }); - }; diff --git a/min/perfect-scrollbar.min.css b/min/perfect-scrollbar.min.css index 5fcbd93..25ddcd5 100644 --- a/min/perfect-scrollbar.min.css +++ b/min/perfect-scrollbar.min.css @@ -2,4 +2,4 @@ * http://noraesae.github.com/perfect-scrollbar/ * Copyright (c) 2014 Hyunje Alex Jun; Licensed MIT */ -.ps-container>.ps-scrollbar-x-rail{display:none;position:absolute;bottom:3px;height:8px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;opacity:0;filter:alpha(opacity=0);-o-transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear}.ps-container.ps-active-x>.ps-scrollbar-x-rail{display:block}.ps-container:hover>.ps-scrollbar-x-rail{opacity:.6;filter:alpha(opacity=60)}.ps-container>.ps-scrollbar-x-rail:hover{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}.ps-container>.ps-scrollbar-x-rail.in-scrolling{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}.ps-container>.ps-scrollbar-y-rail{display:block;position:absolute;right:3px;width:8px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;opacity:0;filter:alpha(opacity=0);-o-transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear}.ps-container.ps-active-y>.ps-scrollbar-y-rail{display:block}.ps-container:hover>.ps-scrollbar-y-rail{opacity:.6;filter:alpha(opacity=60)}.ps-container>.ps-scrollbar-y-rail:hover{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}.ps-container>.ps-scrollbar-y-rail.in-scrolling{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}.ps-container>.ps-scrollbar-x-rail>.ps-scrollbar-x{position:absolute;bottom:0;height:8px;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-o-transition:background-color .2s linear;-webkit-transition:background-color.2s linear;-moz-transition:background-color .2s linear;transition:background-color .2s linear}.ps-container>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x{background-color:#999}.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y{position:absolute;right:0;width:8px;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-o-transition:background-color .2s linear;-webkit-transition:background-color.2s linear;-moz-transition:background-color .2s linear;transition:background-color .2s linear}.ps-container>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y{background-color:#999} \ No newline at end of file +.ps-container.ps-active-x>.ps-scrollbar-x-rail,.ps-container.ps-active-y>.ps-scrollbar-y-rail{display:block}.ps-container>.ps-scrollbar-x-rail{display:none;position:absolute;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;opacity:0;-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);-webkit-transition:background-color .2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;-o-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear;bottom:3px;height:8px}.ps-container>.ps-scrollbar-x-rail>.ps-scrollbar-x{position:absolute;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;-webkit-transition:background-color .2s linear;-moz-transition:background-color .2s linear;-o-transition:background-color .2s linear;transition:background-color .2s linear;bottom:0;height:8px}.ps-container>.ps-scrollbar-x-rail.in-scrolling{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container>.ps-scrollbar-y-rail{display:none;position:absolute;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;opacity:0;-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);-webkit-transition:background-color .2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;-o-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear;right:3px;width:8px}.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y{position:absolute;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;-webkit-transition:background-color .2s linear;-moz-transition:background-color .2s linear;-o-transition:background-color .2s linear;transition:background-color .2s linear;right:0;width:8px}.ps-container>.ps-scrollbar-y-rail.in-scrolling{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container:hover>.ps-scrollbar-x-rail,.ps-container:hover>.ps-scrollbar-y-rail{opacity:.6;-ms-filter:"alpha(Opacity=60)";filter:alpha(opacity=60)}.ps-container:hover>.ps-scrollbar-x-rail.in-scrolling,.ps-container:hover>.ps-scrollbar-y-rail.in-scrolling{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container:hover>.ps-scrollbar-x-rail:hover{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container:hover>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x{background-color:#999}.ps-container:hover>.ps-scrollbar-y-rail:hover{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container:hover>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y{background-color:#999} \ No newline at end of file diff --git a/package.json b/package.json index 98b30e4..7f794b9 100644 --- a/package.json +++ b/package.json @@ -3,10 +3,12 @@ "version": "0.5.6", "description": "Tiny but perfect jquery scrollbar plugin.", "author": "Hyunje Alex Jun ", - "contributors": [{ - "name": "Hyunje Alex Jun", - "email": "me@noraesae.net" - }], + "contributors": [ + { + "name": "Hyunje Alex Jun", + "email": "me@noraesae.net" + } + ], "main": "src/perfect-scrollbar.js", "repository": { "type": "git", @@ -30,7 +32,9 @@ "grunt-contrib-csslint": "~0.1.2", "grunt-contrib-cssmin": "~0.6.1", "grunt-contrib-jshint": "~0.1.1", - "grunt-contrib-uglify": "~0.1.1" + "grunt-contrib-uglify": "~0.1.1", + "grunt-sass": "^0.16.1", + "load-grunt-tasks": "^1.0.0" }, "scripts": { "test": "grunt travis --verbose" diff --git a/src/perfect-scrollbar.css b/src/perfect-scrollbar.css index b216585..6a12f49 100644 --- a/src/perfect-scrollbar.css +++ b/src/perfect-scrollbar.css @@ -1,109 +1,101 @@ -.ps-container>.ps-scrollbar-x-rail { - display: none; - position: absolute; /* please don't change 'position' */ - bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x-rail */ - height: 8px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - opacity: 0; - filter: alpha(opacity=0); - -o-transition: background-color .2s linear, opacity .2s linear; - -webkit-transition: background-color .2s linear, opacity .2s linear; - -moz-transition: background-color .2s linear, opacity .2s linear; - transition: background-color .2s linear, opacity .2s linear; -} - -.ps-container.ps-active-x>.ps-scrollbar-x-rail { - display: block; -} - -.ps-container:hover>.ps-scrollbar-x-rail { - opacity: 0.6; - filter: alpha(opacity=60); -} - -.ps-container>.ps-scrollbar-x-rail:hover { - background-color: #eee; - opacity: 0.9; - filter: alpha(opacity=90); -} - -.ps-container>.ps-scrollbar-x-rail.in-scrolling { - background-color: #eee; - opacity: 0.9; - filter: alpha(opacity=90); -} - -.ps-container>.ps-scrollbar-y-rail { - display: block; - position: absolute; /* please don't change 'position' */ - right: 3px; /* there must be 'right' for ps-scrollbar-y-rail */ - width: 8px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - opacity: 0; - filter: alpha(opacity = 0); - -o-transition: background-color .2s linear, opacity .2s linear; - -webkit-transition: background-color .2s linear, opacity .2s linear; - -moz-transition: background-color .2s linear, opacity .2s linear; - transition: background-color .2s linear, opacity .2s linear; -} - -.ps-container.ps-active-y>.ps-scrollbar-y-rail { - display: block; -} - -.ps-container:hover>.ps-scrollbar-y-rail { - opacity: 0.6; - filter: alpha(opacity=60); -} - -.ps-container>.ps-scrollbar-y-rail:hover { - background-color: #eee; - opacity: 0.9; - filter: alpha(opacity=90); -} - -.ps-container>.ps-scrollbar-y-rail.in-scrolling { - background-color: #eee; - opacity: 0.9; - filter: alpha(opacity=90); -} - -.ps-container>.ps-scrollbar-x-rail>.ps-scrollbar-x { - position: absolute; /* please don't change 'position' */ - bottom: 0; /* there must be 'bottom' for ps-scrollbar-x */ - height: 8px; +.ps-container.ps-active-x > .ps-scrollbar-x-rail, .ps-container.ps-active-y > .ps-scrollbar-y-rail { + display: block; } +.ps-container > .ps-scrollbar-x-rail { + display: none; + position: absolute; + /* please don't change 'position' */ + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + border-radius: 4px; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: background-color 0.2s linear, opacity 0.2s linear; + -moz-transition: background-color 0.2s linear, opacity 0.2s linear; + -o-transition: background-color 0.2s linear, opacity 0.2s linear; + transition: background-color 0.2s linear, opacity 0.2s linear; + bottom: 3px; + /* there must be 'bottom' for ps-scrollbar-x-rail */ + height: 8px; } + .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x { + position: absolute; + /* please don't change 'position' */ background-color: #aaa; -webkit-border-radius: 4px; -moz-border-radius: 4px; + -ms-border-radius: 4px; border-radius: 4px; - -o-transition: background-color .2s linear; - -webkit-transition: background-color.2s linear; - -moz-transition: background-color .2s linear; - transition: background-color .2s linear; -} - -.ps-container>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x { - background-color: #999; -} - -.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y { - position: absolute; /* please don't change 'position' */ - right: 0; /* there must be 'right' for ps-scrollbar-y */ - width: 8px; + -webkit-transition: background-color 0.2s linear; + -moz-transition: background-color 0.2s linear; + -o-transition: background-color 0.2s linear; + transition: background-color 0.2s linear; + bottom: 0; + /* there must be 'bottom' for ps-scrollbar-x */ + height: 8px; } + .ps-container > .ps-scrollbar-x-rail.in-scrolling { + background-color: #eee; + opacity: 0.9; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; + filter: alpha(opacity=90); } +.ps-container > .ps-scrollbar-y-rail { + display: none; + position: absolute; + /* please don't change 'position' */ + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + border-radius: 4px; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: background-color 0.2s linear, opacity 0.2s linear; + -moz-transition: background-color 0.2s linear, opacity 0.2s linear; + -o-transition: background-color 0.2s linear, opacity 0.2s linear; + transition: background-color 0.2s linear, opacity 0.2s linear; + right: 3px; + /* there must be 'right' for ps-scrollbar-y-rail */ + width: 8px; } + .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y { + position: absolute; + /* please don't change 'position' */ background-color: #aaa; -webkit-border-radius: 4px; -moz-border-radius: 4px; + -ms-border-radius: 4px; border-radius: 4px; - -o-transition: background-color .2s linear; - -webkit-transition: background-color.2s linear; - -moz-transition: background-color .2s linear; - transition: background-color .2s linear; -} - -.ps-container>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y { - background-color: #999; -} + -webkit-transition: background-color 0.2s linear; + -moz-transition: background-color 0.2s linear; + -o-transition: background-color 0.2s linear; + transition: background-color 0.2s linear; + right: 0; + /* there must be 'right' for ps-scrollbar-y */ + width: 8px; } + .ps-container > .ps-scrollbar-y-rail.in-scrolling { + background-color: #eee; + opacity: 0.9; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; + filter: alpha(opacity=90); } +.ps-container:hover > .ps-scrollbar-x-rail, .ps-container:hover > .ps-scrollbar-y-rail { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); } + .ps-container:hover > .ps-scrollbar-x-rail.in-scrolling, .ps-container:hover > .ps-scrollbar-y-rail.in-scrolling { + background-color: #eee; + opacity: 0.9; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; + filter: alpha(opacity=90); } +.ps-container:hover > .ps-scrollbar-x-rail:hover { + background-color: #eee; + opacity: 0.9; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; + filter: alpha(opacity=90); } + .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x { + background-color: #999; } +.ps-container:hover > .ps-scrollbar-y-rail:hover { + background-color: #eee; + opacity: 0.9; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; + filter: alpha(opacity=90); } + .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y { + background-color: #999; } diff --git a/src/perfect-scrollbar.scss b/src/perfect-scrollbar.scss new file mode 100644 index 0000000..c1504ac --- /dev/null +++ b/src/perfect-scrollbar.scss @@ -0,0 +1,111 @@ +// Helper mixins +@mixin opacity($o) { + $IEValue: $o * 100; + opacity: $o; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$IEValue+")"; + filter: alpha(opacity=$IEValue); +} + +@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); + @include opacity(0); + @include transition(background-color .2s linear, opacity .2s linear); +} + +@mixin scrollbar-rail-hover { + background-color: #eee; + @include opacity(0.9); +} + +@mixin scrollbar-default { + position: absolute; /* please don't change 'position' */ + background-color: #aaa; + @include border-radius(4px); + @include transition(background-color .2s linear); +} + +@mixin scrollbar-hover { + background-color: #999; +} + +@mixin in-scrolling { + &.in-scrolling { + @include scrollbar-rail-hover; + } +} + +.ps-container { + &.ps-active-x > .ps-scrollbar-x-rail, + &.ps-active-y > .ps-scrollbar-y-rail { + display: block; + } + + >.ps-scrollbar-x-rail { + @include scrollbar-rail-default; + bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x-rail */ + height: 8px; + + >.ps-scrollbar-x { + @include scrollbar-default; + bottom: 0; /* there must be 'bottom' for ps-scrollbar-x */ + height: 8px; + } + + @include in-scrolling; + } + + >.ps-scrollbar-y-rail { + @include scrollbar-rail-default; + right: 3px; /* there must be 'right' for ps-scrollbar-y-rail */ + width: 8px; + + >.ps-scrollbar-y { + @include scrollbar-default; + right: 0; /* there must be 'right' for ps-scrollbar-y */ + width: 8px; + } + + @include in-scrolling; + } + + &:hover { + >.ps-scrollbar-x-rail, + >.ps-scrollbar-y-rail { + @include opacity(0.6); + @include in-scrolling; + } + + >.ps-scrollbar-x-rail:hover { + @include scrollbar-rail-hover; + + >.ps-scrollbar-x { + @include scrollbar-hover; + } + } + + >.ps-scrollbar-y-rail:hover { + @include scrollbar-rail-hover; + + >.ps-scrollbar-y { + @include scrollbar-hover; + } + } + } +}