From fdc8d64fd9007237f3bd89fcf5e6e977054e1c1d Mon Sep 17 00:00:00 2001 From: Jun Date: Wed, 13 Jul 2016 01:11:30 +0900 Subject: [PATCH] Fix custom-theme example to be more useful Not it provides a meaningful example. It also just includes pre-built css file for the example. --- .gitignore | 1 - examples/custom-theme.css | 190 +++++++++++++++++++++++++++++++++++++ examples/custom-theme.html | 4 +- examples/custom-theme.scss | 24 +++-- gulpfile.js | 16 +--- 5 files changed, 212 insertions(+), 23 deletions(-) create mode 100644 examples/custom-theme.css 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 () {