Use scss for stylesheet.
We can build the scss source to .css and .min.css files with the `grunt build` command.
This commit is contained in:
parent
5be50316ca
commit
d24f9bd41b
30
Gruntfile.js
30
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']);
|
||||
});
|
||||
|
||||
};
|
||||
|
2
min/perfect-scrollbar.min.css
vendored
2
min/perfect-scrollbar.min.css
vendored
@ -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}
|
||||
.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}
|
10
package.json
10
package.json
@ -3,10 +3,12 @@
|
||||
"version": "0.5.6",
|
||||
"description": "Tiny but perfect jquery scrollbar plugin.",
|
||||
"author": "Hyunje Alex Jun <me@noraesae.net>",
|
||||
"contributors": [{
|
||||
"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"
|
||||
|
@ -1,109 +1,101 @@
|
||||
.ps-container>.ps-scrollbar-x-rail {
|
||||
.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' */
|
||||
bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x-rail */
|
||||
height: 8px;
|
||||
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);
|
||||
-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-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;
|
||||
-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;
|
||||
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 {
|
||||
-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;
|
||||
-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;
|
||||
filter: alpha(opacity=60);
|
||||
}
|
||||
|
||||
.ps-container>.ps-scrollbar-y-rail:hover {
|
||||
-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;
|
||||
filter: alpha(opacity=90);
|
||||
}
|
||||
|
||||
.ps-container>.ps-scrollbar-y-rail.in-scrolling {
|
||||
-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;
|
||||
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;
|
||||
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; /* please don't change 'position' */
|
||||
right: 0; /* there must be 'right' for ps-scrollbar-y */
|
||||
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;
|
||||
}
|
||||
-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; }
|
||||
|
111
src/perfect-scrollbar.scss
Normal file
111
src/perfect-scrollbar.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user