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);