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;