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

Enhance 'scale scrollbars on hover' feature

Browse Source 
Now it's set as default, with a little different form of settings.
This commit is contained in:
Jun 2016-07-13 01:09:15 +09:00
parent e0510b5fad
commit 26852236cc
3 changed files with 28 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/css/mixins.scss
View File

@ -1,9 +1,8 @@
@mixin scrollbar-rail-default($theme) { @mixin scrollbar-rail-default($theme) {
display: none; display: none;
position: absolute; /* please don't change 'position' */ position: absolute; /* please don't change 'position' */
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, height .2s linear, width .2s ease-in-out;; transition: background-color .2s linear, opacity .2s linear;
} }
@mixin scrollbar-rail-hover($theme) { @mixin scrollbar-rail-hover($theme) {
@ -15,7 +14,8 @@
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, height .2s linear, width .2s ease-in-out; transition: background-color .2s linear, height .2s linear, width .2s ease-in-out,
border-radius .2s ease-in-out;
} }
@mixin scrollbar-hover($theme) { @mixin scrollbar-hover($theme) {
@ -69,19 +69,17 @@
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: 100%;
}
}
> .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 */
height: map_get($theme, scrollbar-x-height); height: map_get($theme, scrollbar-x-height);
} }
&:hover,
&:active {
> .ps-scrollbar-x {
height: map_get($theme, scrollbar-x-hover-height);
}
}
} }
> .ps-scrollbar-y-rail { > .ps-scrollbar-y-rail {
@ -89,19 +87,17 @@
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: 100%;
}
}
> .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 */
width: map_get($theme, scrollbar-y-width); width: map_get($theme, scrollbar-y-width);
} }
&:hover,
&:active {
> .ps-scrollbar-y {
width: map_get($theme, scrollbar-y-hover-width);
}
}
} }
&:hover { &:hover {

3
src/css/themes.scss
View File

@ -7,15 +7,16 @@ $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,
scrollbar-x-height: $ps-scrollbar-x-height, scrollbar-x-height: $ps-scrollbar-x-height,
scrollbar-x-hover-height: $ps-scrollbar-x-hover-height,
scrollbar-y-rail-right: $ps-scrollbar-y-rail-right, scrollbar-y-rail-right: $ps-scrollbar-y-rail-right,
scrollbar-y-rail-width: $ps-scrollbar-y-rail-width, scrollbar-y-rail-width: $ps-scrollbar-y-rail-width,
scrollbar-y-right: $ps-scrollbar-y-right, scrollbar-y-right: $ps-scrollbar-y-right,
scrollbar-y-width: $ps-scrollbar-y-width, scrollbar-y-width: $ps-scrollbar-y-width,
scrollbar-y-hover-width: $ps-scrollbar-y-hover-width,
); );
// Default theme // Default theme

21
src/css/variables.scss
View File

@ -1,5 +1,5 @@
// Colors // Colors
$ps-border-radius: 4px !default; $ps-border-radius: 6px !default;
$ps-rail-default-opacity: 0 !default; $ps-rail-default-opacity: 0 !default;
$ps-rail-container-hover-opacity: 0.6 !default; $ps-rail-container-hover-opacity: 0.6 !default;
@ -11,13 +11,14 @@ $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: 0px !default;
$ps-scrollbar-x-rail-bottom: 3px !default; $ps-scrollbar-x-rail-height: 15px !default;
$ps-scrollbar-x-rail-height: 8px !default; $ps-scrollbar-x-bottom: 2px !default;
$ps-scrollbar-x-bottom: 0 !default; $ps-scrollbar-x-height: 6px !default;
$ps-scrollbar-x-height: 8px !default; $ps-scrollbar-x-hover-height: 11px !default;
$ps-scrollbar-y-rail-right: 3px !default; $ps-scrollbar-y-rail-right: 0 !default;
$ps-scrollbar-y-rail-width: 8px !default; $ps-scrollbar-y-rail-width: 15px !default;
$ps-scrollbar-y-right: 0 !default; $ps-scrollbar-y-right: 2px !default;
$ps-scrollbar-y-width: 8px !default; $ps-scrollbar-y-width: 6px !default;
$ps-scrollbar-y-hover-width: 11px !default;