diff --git a/.gitignore b/.gitignore
index 5e84aaf..f0d2757 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,4 +2,3 @@
node_modules
/dist
.idea
-examples/custom-theme.css
diff --git a/examples/custom-theme.css b/examples/custom-theme.css
new file mode 100644
index 0000000..57a511b
--- /dev/null
+++ b/examples/custom-theme.css
@@ -0,0 +1,190 @@
+.ps-container {
+ -ms-touch-action: none;
+ touch-action: none;
+ overflow: hidden !important;
+ -ms-overflow-style: none; }
+ @supports (-ms-overflow-style: none) {
+ .ps-container {
+ overflow: auto !important; } }
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ .ps-container {
+ overflow: auto !important; } }
+ .ps-container.ps-active-x > .ps-scrollbar-x-rail,
+ .ps-container.ps-active-y > .ps-scrollbar-y-rail {
+ display: block;
+ background-color: transparent; }
+ .ps-container.ps-in-scrolling {
+ pointer-events: none; }
+ .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+ background-color: #eee;
+ opacity: 0.9; }
+ .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+ background-color: #999; }
+ .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+ background-color: #eee;
+ opacity: 0.9; }
+ .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+ background-color: #999; }
+ .ps-container > .ps-scrollbar-x-rail {
+ display: none;
+ position: absolute;
+ /* please don't change 'position' */
+ opacity: 0;
+ transition: background-color .2s linear, opacity .2s linear;
+ bottom: 0px;
+ /* there must be 'bottom' for ps-scrollbar-x-rail */
+ height: 15px; }
+ .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+ position: absolute;
+ /* please don't change 'position' */
+ background-color: #aaa;
+ border-radius: 6px;
+ transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+ bottom: 2px;
+ /* there must be 'bottom' for ps-scrollbar-x */
+ height: 6px; }
+ .ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
+ height: 11px; }
+ .ps-container > .ps-scrollbar-y-rail {
+ display: none;
+ position: absolute;
+ /* please don't change 'position' */
+ opacity: 0;
+ transition: background-color .2s linear, opacity .2s linear;
+ right: 0;
+ /* there must be 'right' for ps-scrollbar-y-rail */
+ width: 15px; }
+ .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+ position: absolute;
+ /* please don't change 'position' */
+ background-color: #aaa;
+ border-radius: 6px;
+ transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+ right: 2px;
+ /* there must be 'right' for ps-scrollbar-y */
+ width: 6px; }
+ .ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y {
+ width: 11px; }
+ .ps-container:hover.ps-in-scrolling {
+ pointer-events: none; }
+ .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+ background-color: #eee;
+ opacity: 0.9; }
+ .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+ background-color: #999; }
+ .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+ background-color: #eee;
+ opacity: 0.9; }
+ .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+ background-color: #999; }
+ .ps-container:hover > .ps-scrollbar-x-rail,
+ .ps-container:hover > .ps-scrollbar-y-rail {
+ opacity: 0.6; }
+ .ps-container:hover > .ps-scrollbar-x-rail:hover {
+ background-color: #eee;
+ opacity: 0.9; }
+ .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; }
+ .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
+ background-color: #999; }
+
+/*
+ this file is built into custom-theme.css
+
+ $ node-sass examples/custom-theme.scss -o examples/
+*/
+.ps-theme-square {
+ -ms-touch-action: none;
+ touch-action: none;
+ overflow: hidden !important;
+ -ms-overflow-style: none; }
+ @supports (-ms-overflow-style: none) {
+ .ps-theme-square {
+ overflow: auto !important; } }
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ .ps-theme-square {
+ overflow: auto !important; } }
+ .ps-theme-square.ps-active-x > .ps-scrollbar-x-rail,
+ .ps-theme-square.ps-active-y > .ps-scrollbar-y-rail {
+ display: block;
+ background-color: transparent; }
+ .ps-theme-square.ps-in-scrolling {
+ pointer-events: none; }
+ .ps-theme-square.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+ background-color: #eee;
+ opacity: 0.9; }
+ .ps-theme-square.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+ background-color: #999; }
+ .ps-theme-square.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+ background-color: #eee;
+ opacity: 0.9; }
+ .ps-theme-square.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+ background-color: #999; }
+ .ps-theme-square > .ps-scrollbar-x-rail {
+ display: none;
+ position: absolute;
+ /* please don't change 'position' */
+ opacity: 0;
+ transition: background-color .2s linear, opacity .2s linear;
+ bottom: 0;
+ /* there must be 'bottom' for ps-scrollbar-x-rail */
+ height: 10px; }
+ .ps-theme-square > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+ position: absolute;
+ /* please don't change 'position' */
+ background-color: #aaa;
+ border-radius: 0;
+ transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+ bottom: 0;
+ /* there must be 'bottom' for ps-scrollbar-x */
+ height: 10px; }
+ .ps-theme-square > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-theme-square > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
+ height: 10px; }
+ .ps-theme-square > .ps-scrollbar-y-rail {
+ display: none;
+ position: absolute;
+ /* please don't change 'position' */
+ opacity: 0;
+ transition: background-color .2s linear, opacity .2s linear;
+ right: 0;
+ /* there must be 'right' for ps-scrollbar-y-rail */
+ width: 10px; }
+ .ps-theme-square > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+ position: absolute;
+ /* please don't change 'position' */
+ background-color: #aaa;
+ border-radius: 0;
+ transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+ right: 0;
+ /* there must be 'right' for ps-scrollbar-y */
+ width: 10px; }
+ .ps-theme-square > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-theme-square > .ps-scrollbar-y-rail:active > .ps-scrollbar-y {
+ width: 10px; }
+ .ps-theme-square:hover.ps-in-scrolling {
+ pointer-events: none; }
+ .ps-theme-square:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+ background-color: #eee;
+ opacity: 0.9; }
+ .ps-theme-square:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+ background-color: #999; }
+ .ps-theme-square:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+ background-color: #eee;
+ opacity: 0.9; }
+ .ps-theme-square:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+ background-color: #999; }
+ .ps-theme-square:hover > .ps-scrollbar-x-rail,
+ .ps-theme-square:hover > .ps-scrollbar-y-rail {
+ opacity: 0.6; }
+ .ps-theme-square:hover > .ps-scrollbar-x-rail:hover {
+ background-color: #eee;
+ opacity: 0.9; }
+ .ps-theme-square:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
+ background-color: #999; }
+ .ps-theme-square:hover > .ps-scrollbar-y-rail:hover {
+ background-color: #eee;
+ opacity: 0.9; }
+ .ps-theme-square:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
+ background-color: #999; }
diff --git a/examples/custom-theme.html b/examples/custom-theme.html
index 833bbf9..830f69c 100644
--- a/examples/custom-theme.html
+++ b/examples/custom-theme.html
@@ -6,7 +6,7 @@
@@ -19,7 +19,7 @@
var $ = document.querySelector.bind(document);
window.onload = function () {
Ps.initialize($('#Default'), {
- theme: 'custom-theme'
+ theme: 'square'
});
};
diff --git a/examples/custom-theme.scss b/examples/custom-theme.scss
index 787fbfa..b4aae54 100644
--- a/examples/custom-theme.scss
+++ b/examples/custom-theme.scss
@@ -1,11 +1,23 @@
@import '../src/css/main';
-.ps-theme-custom-theme {
+/*
+ this file is built into custom-theme.css
+
+ $ node-sass examples/custom-theme.scss -o examples/
+*/
+
+.ps-theme-square {
@include ps-container(map-merge($ps-theme-default, (
- scrollbar-rail-scale-hover: 1.5,
- scrollbar-y-rail-width: 8px,
- scrollbar-y-width: 6px,
- scrollbar-x-rail-height: 8px,
- scrollbar-x-height: 6px
+ border-radius: 0,
+ scrollbar-x-rail-bottom: 0,
+ scrollbar-x-rail-height: 10px,
+ scrollbar-x-bottom: 0,
+ scrollbar-x-height: 10px,
+ scrollbar-x-hover-height: 10px,
+ scrollbar-y-rail-right: 0,
+ scrollbar-y-rail-width: 10px,
+ scrollbar-y-right: 0,
+ scrollbar-y-width: 10px,
+ scrollbar-y-hover-width: 10px,
)));
}
diff --git a/gulpfile.js b/gulpfile.js
index b339937..3c0d33f 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -83,7 +83,7 @@ gulp.task('js:min', ['clean:js:min'], function () {
});
gulp.task('clean:css', function () {
- return del(['./dist/css/perfect-scrollbar.css', './examples/custom-theme.css']);
+ return del(['./dist/css/perfect-scrollbar.css']);
});
gulp.task('clean:css:min', function () {
@@ -91,25 +91,13 @@ gulp.task('clean:css:min', function () {
});
gulp.task('css', ['clean:css'], function () {
- var main = gulp
- .src('./src/css/main.scss')
+ 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'))
.pipe(connect.reload());
-
- var custom = gulp
- .src('./examples/custom-theme.scss')
- .pipe(sass())
- .pipe(autoprefixer(autoPrefixerConfig))
- .pipe(insert.prepend(version))
- .pipe(rename('custom-theme.css'))
- .pipe(gulp.dest('./examples'))
- .pipe(connect.reload());
-
- return stream.concat(main, custom);
});
gulp.task('css:min', ['clean:css:min'], function () {