cartodb4/perfect-scrollbar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding custom-theme scss used for custom-theme example. Added ability to set a hover scale size in the theme which will scale the X and Y rails when hovered.

Browse Source
This commit is contained in:
Chris Driscol 2016-06-01 16:48:50 -06:00
parent 9016f207e9
commit e9d7cc97c8
7 changed files with 49 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -2,3 +2,4 @@
node_modules node_modules
/dist /dist
.idea .idea
examples/custom-theme.css

4
examples/custom-theme.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title> <title>perfect-scrollbar example</title>
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet"> <link href="custom-theme.css" rel="stylesheet">
<script src="../dist/js/perfect-scrollbar.js"></script> <script src="../dist/js/perfect-scrollbar.js"></script>
<style> <style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; } .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
@ -19,7 +19,7 @@
var $ = document.querySelector.bind(document); var $ = document.querySelector.bind(document);
window.onload = function () { window.onload = function () {
Ps.initialize($('#Default'), { Ps.initialize($('#Default'), {
theme: 'big-and-ugly' theme: 'custom-theme'
}); });
}; };
</script> </script>

12
examples/custom-theme.scss Normal file
View File

@ -0,0 +1,12 @@
@import '../src/css/main';
.ps-theme-custom-theme {
@include ps-container(map-merge($ps-theme-default, (
border-radius: 0,
scrollbar-x-rail-height: 20px,
scrollbar-x-height: 20px,
scrollbar-y-rail-width: 20px,
scrollbar-y-width: 20px,
scrollbar-rail-scale-hover: 1.5
)));
}

16
gulpfile.js
View File

@ -83,7 +83,7 @@ gulp.task('js:min', ['clean:js:min'], function () {
}); });
gulp.task('clean:css', function () { gulp.task('clean:css', function () {
return del(['./dist/css/perfect-scrollbar.css']); return del(['./dist/css/perfect-scrollbar.css', './examples/custom-theme.css']);
}); });
gulp.task('clean:css:min', function () { gulp.task('clean:css:min', function () {
@ -91,13 +91,25 @@ gulp.task('clean:css:min', function () {
}); });
gulp.task('css', ['clean:css'], function () { gulp.task('css', ['clean:css'], function () {
return gulp.src('./src/css/main.scss') var main = gulp
.src('./src/css/main.scss')
.pipe(sass()) .pipe(sass())
.pipe(autoprefixer(autoPrefixerConfig)) .pipe(autoprefixer(autoPrefixerConfig))
.pipe(insert.prepend(version)) .pipe(insert.prepend(version))
.pipe(rename('perfect-scrollbar.css')) .pipe(rename('perfect-scrollbar.css'))
.pipe(gulp.dest('./dist/css')) .pipe(gulp.dest('./dist/css'))
.pipe(connect.reload()); .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 () { gulp.task('css:min', ['clean:css:min'], function () {

20
src/css/mixins.scss
View File

@ -3,7 +3,7 @@
position: absolute; /* please don't change 'position' */ position: absolute; /* please don't change 'position' */
border-radius: map_get($theme, border-radius); border-radius: map_get($theme, border-radius);
opacity: map_get($theme, rail-default-opacity); opacity: map_get($theme, rail-default-opacity);
transition: background-color .2s linear, opacity .2s linear; transition: background-color .2s linear, opacity .2s linear, height .2s linear, width .2s ease-in-out;;
} }
@mixin scrollbar-rail-hover($theme) { @mixin scrollbar-rail-hover($theme) {
@ -15,7 +15,7 @@
position: absolute; /* please don't change 'position' */ position: absolute; /* please don't change 'position' */
background-color: map_get($theme, bar-container-hover-bg); background-color: map_get($theme, bar-container-hover-bg);
border-radius: map_get($theme, border-radius); border-radius: map_get($theme, border-radius);
transition: background-color .2s linear; transition: background-color .2s linear, height .2s linear, width .2s ease-in-out;
} }
@mixin scrollbar-hover($theme) { @mixin scrollbar-hover($theme) {
@ -69,6 +69,14 @@
bottom: map_get($theme, scrollbar-x-rail-bottom); /* there must be 'bottom' for ps-scrollbar-x-rail */ bottom: map_get($theme, scrollbar-x-rail-bottom); /* there must be 'bottom' for ps-scrollbar-x-rail */
height: map_get($theme, scrollbar-x-rail-height); height: map_get($theme, scrollbar-x-rail-height);
&:hover,
&:active {
height: map_get($theme, scrollbar-rail-scale-hover) * map_get($theme, scrollbar-x-rail-height);
> .ps-scrollbar-x {
height: map_get($theme, scrollbar-rail-scale-hover) * map_get($theme, scrollbar-x-rail-height);
}
}
> .ps-scrollbar-x { > .ps-scrollbar-x {
@include scrollbar-default($theme); @include scrollbar-default($theme);
bottom: map_get($theme, scrollbar-x-bottom); /* there must be 'bottom' for ps-scrollbar-x */ bottom: map_get($theme, scrollbar-x-bottom); /* there must be 'bottom' for ps-scrollbar-x */
@ -81,6 +89,14 @@
right: map_get($theme, scrollbar-y-rail-right); /* there must be 'right' for ps-scrollbar-y-rail */ right: map_get($theme, scrollbar-y-rail-right); /* there must be 'right' for ps-scrollbar-y-rail */
width: map_get($theme, scrollbar-y-rail-width); width: map_get($theme, scrollbar-y-rail-width);
&:hover,
&:active {
width: map_get($theme, scrollbar-rail-scale-hover) * map_get($theme, scrollbar-y-rail-width);
> .ps-scrollbar-y {
width: map_get($theme, scrollbar-rail-scale-hover) * map_get($theme, scrollbar-y-rail-width);
}
}
> .ps-scrollbar-y { > .ps-scrollbar-y {
@include scrollbar-default($theme); @include scrollbar-default($theme);
right: map_get($theme, scrollbar-y-right); /* there must be 'right' for ps-scrollbar-y */ right: map_get($theme, scrollbar-y-right); /* there must be 'right' for ps-scrollbar-y */

1
src/css/themes.scss
View File

@ -7,6 +7,7 @@ $ps-theme-default: (
bar-container-hover-bg: $ps-bar-container-hover-bg, bar-container-hover-bg: $ps-bar-container-hover-bg,
bar-hover-bg: $ps-bar-hover-bg, bar-hover-bg: $ps-bar-hover-bg,
rail-hover-bg: $ps-rail-hover-bg, rail-hover-bg: $ps-rail-hover-bg,
scrollbar-rail-scale-hover: $ps-scrollbar-rail-scale-hover,
scrollbar-x-rail-bottom: $ps-scrollbar-x-rail-bottom, scrollbar-x-rail-bottom: $ps-scrollbar-x-rail-bottom,
scrollbar-x-rail-height: $ps-scrollbar-x-rail-height, scrollbar-x-rail-height: $ps-scrollbar-x-rail-height,
scrollbar-x-bottom: $ps-scrollbar-x-bottom, scrollbar-x-bottom: $ps-scrollbar-x-bottom,

1
src/css/variables.scss
View File

@ -11,6 +11,7 @@ $ps-bar-hover-bg: #999 !default;
$ps-rail-hover-bg: #eee !default; $ps-rail-hover-bg: #eee !default;
// Sizes // Sizes
$ps-scrollbar-rail-scale-hover: 1 !default;
$ps-scrollbar-x-rail-bottom: 3px !default; $ps-scrollbar-x-rail-bottom: 3px !default;
$ps-scrollbar-x-rail-height: 8px !default; $ps-scrollbar-x-rail-height: 8px !default;
$ps-scrollbar-x-bottom: 0 !default; $ps-scrollbar-x-bottom: 0 !default;