From eddd2c2731da8f4a31e4f45a7d4dbb1334a8d4d7 Mon Sep 17 00:00:00 2001 From: wujekbogdan Date: Wed, 9 Dec 2015 18:19:02 +0100 Subject: [PATCH 1/6] themeable perfect-scrollbar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - added „theme” parameter - replaced all the CSS visual styles with SCSS variables - added $ps-theme-default SCSS map that holds all the variables - added $theme parameter to all the mixins --- examples/custom-theme.html | 30 ++++++++ src/css/main.scss | 126 +------------------------------ src/css/mixins.scss | 120 +++++++++++++++++++++++++++++ src/css/themes.scss | 34 +++++++++ src/css/variables.scss | 22 ++++++ src/js/plugin/default-setting.js | 3 +- src/js/plugin/initialize.js | 1 + 7 files changed, 212 insertions(+), 124 deletions(-) create mode 100644 examples/custom-theme.html create mode 100644 src/css/mixins.scss create mode 100644 src/css/themes.scss create mode 100644 src/css/variables.scss diff --git a/examples/custom-theme.html b/examples/custom-theme.html new file mode 100644 index 0000000..e1ad56f --- /dev/null +++ b/examples/custom-theme.html @@ -0,0 +1,30 @@ + + + + + perfect-scrollbar example + + + + + +
+
+
+
+ + + + + diff --git a/src/css/main.scss b/src/css/main.scss index bad2da6..80c74b3 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -1,123 +1,3 @@ -// Colors -$ps-rail-hover: #eee; -$ps-bar-default: #aaa; -$ps-bar-hover: #999; - -// Helper mixins -@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); - opacity: 0; - @include transition(background-color .2s linear, opacity .2s linear); -} - -@mixin scrollbar-rail-hover { - background-color: $ps-rail-hover; - opacity: 0.9; -} - -@mixin scrollbar-default { - position: absolute; /* please don't change 'position' */ - background-color: $ps-bar-default; - @include border-radius(4px); - @include transition(background-color .2s linear); -} - -@mixin scrollbar-hover { - background-color: $ps-bar-hover; -} - -@mixin in-scrolling { - &.ps-in-scrolling { - pointer-events: none; - &.ps-x>.ps-scrollbar-x-rail{ - @include scrollbar-rail-hover; - >.ps-scrollbar-x { - @include scrollbar-hover; - } - } - &.ps-y>.ps-scrollbar-y-rail { - @include scrollbar-rail-hover; - >.ps-scrollbar-y { - @include scrollbar-hover; - } - } - } -} - -.ps-container { - -ms-touch-action: none; - overflow: hidden !important; - - &.ps-active-x > .ps-scrollbar-x-rail, - &.ps-active-y > .ps-scrollbar-y-rail { - display: block; - } - - @include in-scrolling; - - >.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; - } - } - - >.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; - } - } - - &:hover { - @include in-scrolling; - - >.ps-scrollbar-x-rail, - >.ps-scrollbar-y-rail { - opacity: 0.6; - } - - >.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; - } - } - } -} +@import 'variables'; +@import 'mixins'; +@import 'themes'; \ No newline at end of file diff --git a/src/css/mixins.scss b/src/css/mixins.scss new file mode 100644 index 0000000..f11db5e --- /dev/null +++ b/src/css/mixins.scss @@ -0,0 +1,120 @@ +// Helper mixins TODO: get rid of these mixins: https://github.com/noraesae/perfect-scrollbar/issues/431 +@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($theme) { + display: none; + position: absolute; /* please don't change 'position' */ + @include border-radius(map_get($theme, border-radius)); + opacity: map_get($theme, rail-default-opacity); + @include transition(background-color .2s linear, opacity .2s linear); +} + +@mixin scrollbar-rail-hover($theme) { + background-color: map_get($theme, rail-hover-bg); + opacity: map_get($theme, rail-hover-opacity); +} + +@mixin scrollbar-default($theme) { + position: absolute; /* please don't change 'position' */ + background-color: map_get($theme, bar-container-hover-bg); + @include border-radius(map_get($theme, border-radius)); + @include transition(background-color .2s linear); +} + +@mixin scrollbar-hover($theme) { + background-color: map_get($theme, bar-hover-bg); +} + +@mixin in-scrolling($theme) { + &.ps-in-scrolling { + pointer-events: none; + &.ps-x > .ps-scrollbar-x-rail { + @include scrollbar-rail-hover($theme); + > .ps-scrollbar-x { + @include scrollbar-hover($theme); + } + } + &.ps-y > .ps-scrollbar-y-rail { + @include scrollbar-rail-hover($theme); + > .ps-scrollbar-y { + @include scrollbar-hover($theme); + } + } + } +} + +// Layout and theme mixin +@mixin ps-container($theme) { + -ms-touch-action: none; + overflow: hidden !important; + + &.ps-active-x > .ps-scrollbar-x-rail, + &.ps-active-y > .ps-scrollbar-y-rail { + display: block; + background-color: map_get($theme, bar-bg); + } + + @include in-scrolling($theme); + + > .ps-scrollbar-x-rail { + @include scrollbar-rail-default($theme); + 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); + + > .ps-scrollbar-x { + @include scrollbar-default($theme); + bottom: map_get($theme, scrollbar-x-bottom); /* there must be 'bottom' for ps-scrollbar-x */ + height: map_get($theme, scrollbar-x-height); + } + } + + > .ps-scrollbar-y-rail { + @include scrollbar-rail-default($theme); + 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); + + > .ps-scrollbar-y { + @include scrollbar-default($theme); + right: map_get($theme, scrollbar-y-right); /* there must be 'right' for ps-scrollbar-y */ + width: map_get($theme, scrollbar-y-width); + } + } + + &:hover { + @include in-scrolling($theme); + + > .ps-scrollbar-x-rail, + > .ps-scrollbar-y-rail { + opacity: map_get($theme, rail-container-hover-opacity); + } + + > .ps-scrollbar-x-rail:hover { + @include scrollbar-rail-hover($theme); + + > .ps-scrollbar-x { + @include scrollbar-hover($theme); + } + } + + > .ps-scrollbar-y-rail:hover { + @include scrollbar-rail-hover($theme); + + > .ps-scrollbar-y { + @include scrollbar-hover($theme); + } + } + } +} \ No newline at end of file diff --git a/src/css/themes.scss b/src/css/themes.scss new file mode 100644 index 0000000..c607869 --- /dev/null +++ b/src/css/themes.scss @@ -0,0 +1,34 @@ +$ps-theme-default: ( + border-radius: $ps-border-radius, + rail-default-opacity: $ps-rail-default-opacity, + rail-container-hover-opacity: $ps-rail-container-hover-opacity, + rail-hover-opacity: $ps-rail-hover-opacity, + bar-bg: $ps-bar-bg, + bar-container-hover-bg: $ps-bar-container-hover-bg, + bar-hover-bg: $ps-bar-hover-bg, + rail-hover-bg: $ps-rail-hover-bg, + scrollbar-x-rail-bottom: $ps-scrollbar-x-rail-bottom, + scrollbar-x-rail-height: $ps-scrollbar-x-rail-height, + scrollbar-x-bottom: $ps-scrollbar-x-bottom, + scrollbar-x-height: $ps-scrollbar-x-height, + scrollbar-y-rail-right: $ps-scrollbar-y-rail-right, + scrollbar-y-rail-width: $ps-scrollbar-y-rail-width, + scrollbar-y-right: $ps-scrollbar-y-right, + scrollbar-y-width: $ps-scrollbar-y-width, +); + +// Default theme +.ps-container { + @include ps-container($ps-theme-default); +} + +// Example theme +.ps-theme-big-and-ugly { + @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,) + )); +} \ No newline at end of file diff --git a/src/css/variables.scss b/src/css/variables.scss new file mode 100644 index 0000000..c0188aa --- /dev/null +++ b/src/css/variables.scss @@ -0,0 +1,22 @@ +// Colors +$ps-border-radius: 4px !default; + +$ps-rail-default-opacity: 0 !default; +$ps-rail-container-hover-opacity: 0.6 !default; +$ps-rail-hover-opacity: 0.9 !default; + +$ps-bar-bg: transparent !default; +$ps-bar-container-hover-bg: #aaa !default; +$ps-bar-hover-bg: #999 !default; +$ps-rail-hover-bg: #eee !default; + +// Sizes +$ps-scrollbar-x-rail-bottom: 3px !default; +$ps-scrollbar-x-rail-height: 8px !default; +$ps-scrollbar-x-bottom: 0 !default; +$ps-scrollbar-x-height: 8px !default; + +$ps-scrollbar-y-rail-right: 3px !default; +$ps-scrollbar-y-rail-width: 8px !default; +$ps-scrollbar-y-right: 0 !default; +$ps-scrollbar-y-width: 8px !default; \ No newline at end of file diff --git a/src/js/plugin/default-setting.js b/src/js/plugin/default-setting.js index 8043d7e..e2523a8 100644 --- a/src/js/plugin/default-setting.js +++ b/src/js/plugin/default-setting.js @@ -16,5 +16,6 @@ module.exports = { useKeyboard: true, useSelectionScroll: false, wheelPropagation: false, - wheelSpeed: 1 + wheelSpeed: 1, + theme: 'default' }; diff --git a/src/js/plugin/initialize.js b/src/js/plugin/initialize.js index 77420ec..3e5b09c 100644 --- a/src/js/plugin/initialize.js +++ b/src/js/plugin/initialize.js @@ -26,6 +26,7 @@ module.exports = function (element, userSettings) { var i = instances.add(element); i.settings = h.extend(i.settings, userSettings); + cls.add(element, 'ps-theme-' + i.settings.theme); clickRailHandler(element); dragScrollbarHandler(element); From 6fbfd5c90d77922768cf1363342e2b56c30a7301 Mon Sep 17 00:00:00 2001 From: wujekbogdan Date: Wed, 9 Dec 2015 22:01:10 +0100 Subject: [PATCH 2/6] updated README.md file. Added documentation for 'theme' parameter. --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 28f4b3b..508b079 100644 --- a/README.md +++ b/README.md @@ -316,6 +316,10 @@ When set to false, when clicking on a rail, the click event will be allowed to p When set to true, you can scroll the container by selecting text and move the cursor. **Default: false** +### theme +A string. It's a class name added to the container element. The class name is prepended with `ps-theme-`. So default theme class name is `ps-theme-default`. In order to create custom themes with scss use `.ps-container($theme)` mixin, where `$theme` is a scss map. Look at `themes.scss` as a reference for how to create custom themes. +**Default: default** + ## Events perfect-scrollbar dispatches custom events. From c14feba0bf7fb4fd634dd3b6bcadd6090938c42c Mon Sep 17 00:00:00 2001 From: wujekbogdan Date: Wed, 9 Dec 2015 22:08:48 +0100 Subject: [PATCH 3/6] added an example on how to create custom themes. --- README.md | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 508b079..afb936b 100644 --- a/README.md +++ b/README.md @@ -317,9 +317,29 @@ When set to true, you can scroll the container by selecting text and move the cu **Default: false** ### theme -A string. It's a class name added to the container element. The class name is prepended with `ps-theme-`. So default theme class name is `ps-theme-default`. In order to create custom themes with scss use `.ps-container($theme)` mixin, where `$theme` is a scss map. Look at `themes.scss` as a reference for how to create custom themes. +A string. It's a class name added to the container element. The class name is prepended with `ps-theme-`. So default theme class name is `ps-theme-default`. In order to create custom themes with scss use `ps-container($theme)` mixin, where `$theme` is a scss map. Look at `themes.scss` as a reference for how to create custom themes. **Default: default** +Example: + +```javascript +Ps.initialize(container, { + theme: 'my-theme-name', +}); +``` + +```css +.ps-theme-my-theme-name { + @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,) + )); +} +``` + ## Events perfect-scrollbar dispatches custom events. From 6fbaa00403bd26d00f99edfd1062f83e1a54cd07 Mon Sep 17 00:00:00 2001 From: wujekbogdan Date: Wed, 9 Dec 2015 22:08:57 +0100 Subject: [PATCH 4/6] no message --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index afb936b..6fccdca 100644 --- a/README.md +++ b/README.md @@ -318,7 +318,7 @@ When set to true, you can scroll the container by selecting text and move the cu ### theme A string. It's a class name added to the container element. The class name is prepended with `ps-theme-`. So default theme class name is `ps-theme-default`. In order to create custom themes with scss use `ps-container($theme)` mixin, where `$theme` is a scss map. Look at `themes.scss` as a reference for how to create custom themes. -**Default: default** +**Default: 'default'** Example: From bcfe95480356b60b42ff3b21546c40a04a0b1d67 Mon Sep 17 00:00:00 2001 From: wujekbogdan Date: Thu, 10 Dec 2015 10:21:44 +0100 Subject: [PATCH 5/6] - fixed indentation (2 spaces) - added missing new lines at the end of files - removed 'ps-theme-big-and-ugly' theme - improved readme.md. Added an example on how to create custom themes with scss. --- README.md | 28 +++++++++++++++---------- examples/custom-theme.html | 35 ++++++++++++++----------------- src/css/main.scss | 2 +- src/css/mixins.scss | 4 ++-- src/css/themes.scss | 43 ++++++++++++++------------------------ src/css/variables.scss | 2 +- 6 files changed, 53 insertions(+), 61 deletions(-) diff --git a/README.md b/README.md index 6fccdca..6bb5b60 100644 --- a/README.md +++ b/README.md @@ -309,7 +309,7 @@ The number of pixels the content height can surpass the container height without **Default: 0** ### stopPropagationOnClick -When set to false, when clicking on a rail, the click event will be allowed to propagate. +When set to false, when clicking on a rail, the click event will be allowed to pr##opagate. **Default: true** ### useSelectionScroll @@ -317,29 +317,35 @@ When set to true, you can scroll the container by selecting text and move the cu **Default: false** ### theme -A string. It's a class name added to the container element. The class name is prepended with `ps-theme-`. So default theme class name is `ps-theme-default`. In order to create custom themes with scss use `ps-container($theme)` mixin, where `$theme` is a scss map. Look at `themes.scss` as a reference for how to create custom themes. +A string. It's a class name added to the container element. The class name is prepended with `ps-theme-`. So default theme class name is `ps-theme-default`. In order to create custom themes with scss use `ps-container($theme)` mixin, where `$theme` is a scss map. **Default: 'default'** -Example: +**Example 1:** +Add `theme` parameter: ```javascript Ps.initialize(container, { - theme: 'my-theme-name', + theme: 'my-theme-name' }); ``` - -```css +Create a class name prefixed with `.ps-theme-`. Include `ps-container()` mixin. It's recommended to use `map-merge()` to extend `$ps-theme-default` map with your custom styles. +```css# .ps-theme-my-theme-name { @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,) + border-radius: 0, + scrollbar-x-rail-height: 20px, + scrollbar-x-height: 20px, + scrollbar-y-rail-width: 20px, + scrollbar-y-width: 20px,) )); } ``` +**Example 2:** + +Alternatively, if you don't want to create your own themes, but only modify the default one, you could simply overwrite `$ps-*` variables with your own values. In this case `theme` parameter is not required when calling `.initialize()` method. Remember do define your own variables before the `theme.scss` file is imported. + + ## Events perfect-scrollbar dispatches custom events. diff --git a/examples/custom-theme.html b/examples/custom-theme.html index e1ad56f..c9d4965 100644 --- a/examples/custom-theme.html +++ b/examples/custom-theme.html @@ -1,30 +1,27 @@ - - perfect-scrollbar example - - - + + perfect-scrollbar example + + +
-
-
+
+
- - diff --git a/src/css/main.scss b/src/css/main.scss index 80c74b3..ae1f655 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -1,3 +1,3 @@ @import 'variables'; @import 'mixins'; -@import 'themes'; \ No newline at end of file +@import 'themes'; diff --git a/src/css/mixins.scss b/src/css/mixins.scss index f11db5e..f2abecf 100644 --- a/src/css/mixins.scss +++ b/src/css/mixins.scss @@ -1,4 +1,4 @@ -// Helper mixins TODO: get rid of these mixins: https://github.com/noraesae/perfect-scrollbar/issues/431 +// Helper mixins @mixin border-radius($r) { -webkit-border-radius: $r; -moz-border-radius: $r; @@ -117,4 +117,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/css/themes.scss b/src/css/themes.scss index c607869..af6defe 100644 --- a/src/css/themes.scss +++ b/src/css/themes.scss @@ -1,34 +1,23 @@ $ps-theme-default: ( - border-radius: $ps-border-radius, - rail-default-opacity: $ps-rail-default-opacity, - rail-container-hover-opacity: $ps-rail-container-hover-opacity, - rail-hover-opacity: $ps-rail-hover-opacity, - bar-bg: $ps-bar-bg, - bar-container-hover-bg: $ps-bar-container-hover-bg, - bar-hover-bg: $ps-bar-hover-bg, - rail-hover-bg: $ps-rail-hover-bg, - scrollbar-x-rail-bottom: $ps-scrollbar-x-rail-bottom, - scrollbar-x-rail-height: $ps-scrollbar-x-rail-height, - scrollbar-x-bottom: $ps-scrollbar-x-bottom, - scrollbar-x-height: $ps-scrollbar-x-height, - scrollbar-y-rail-right: $ps-scrollbar-y-rail-right, - scrollbar-y-rail-width: $ps-scrollbar-y-rail-width, - scrollbar-y-right: $ps-scrollbar-y-right, - scrollbar-y-width: $ps-scrollbar-y-width, + border-radius: $ps-border-radius, + rail-default-opacity: $ps-rail-default-opacity, + rail-container-hover-opacity: $ps-rail-container-hover-opacity, + rail-hover-opacity: $ps-rail-hover-opacity, + bar-bg: $ps-bar-bg, + bar-container-hover-bg: $ps-bar-container-hover-bg, + bar-hover-bg: $ps-bar-hover-bg, + rail-hover-bg: $ps-rail-hover-bg, + scrollbar-x-rail-bottom: $ps-scrollbar-x-rail-bottom, + scrollbar-x-rail-height: $ps-scrollbar-x-rail-height, + scrollbar-x-bottom: $ps-scrollbar-x-bottom, + scrollbar-x-height: $ps-scrollbar-x-height, + scrollbar-y-rail-right: $ps-scrollbar-y-rail-right, + scrollbar-y-rail-width: $ps-scrollbar-y-rail-width, + scrollbar-y-right: $ps-scrollbar-y-right, + scrollbar-y-width: $ps-scrollbar-y-width, ); // Default theme .ps-container { @include ps-container($ps-theme-default); } - -// Example theme -.ps-theme-big-and-ugly { - @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,) - )); -} \ No newline at end of file diff --git a/src/css/variables.scss b/src/css/variables.scss index c0188aa..d67c156 100644 --- a/src/css/variables.scss +++ b/src/css/variables.scss @@ -19,4 +19,4 @@ $ps-scrollbar-x-height: 8px !default; $ps-scrollbar-y-rail-right: 3px !default; $ps-scrollbar-y-rail-width: 8px !default; $ps-scrollbar-y-right: 0 !default; -$ps-scrollbar-y-width: 8px !default; \ No newline at end of file +$ps-scrollbar-y-width: 8px !default; From 2fe45b3a97549e149264976056a9a925a5858d05 Mon Sep 17 00:00:00 2001 From: wujekbogdan Date: Thu, 10 Dec 2015 11:50:19 +0100 Subject: [PATCH 6/6] typo fix. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6bb5b60..54329c1 100644 --- a/README.md +++ b/README.md @@ -309,7 +309,7 @@ The number of pixels the content height can surpass the container height without **Default: 0** ### stopPropagationOnClick -When set to false, when clicking on a rail, the click event will be allowed to pr##opagate. +When set to false, when clicking on a rail, the click event will be allowed to propagate. **Default: true** ### useSelectionScroll