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
Download Patch File Download Diff File Expand all files Collapse all files

20
src/css/mixins.scss
View File

@@ -3,7 +3,7 @@
position: absolute; /* please don't change 'position' */
border-radius: map_get($theme, border-radius);
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) {
@@ -15,7 +15,7 @@
position: absolute; /* please don't change 'position' */
background-color: map_get($theme, bar-container-hover-bg);
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) {
@@ -69,6 +69,14 @@
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);
&: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 {
@include scrollbar-default($theme);
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 */
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 {
@include scrollbar-default($theme);
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-hover-bg: $ps-bar-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-height: $ps-scrollbar-x-rail-height,
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;
// Sizes
$ps-scrollbar-rail-scale-hover: 1 !default;
$ps-scrollbar-x-rail-bottom: 3px !default;
$ps-scrollbar-x-rail-height: 8px !default;
$ps-scrollbar-x-bottom: 0 !default;