Add rail-size hover in scrollbar

This commit is contained in:
Jesús Arroyo Torrens 2017-09-27 16:09:08 +02:00
parent 4339cd0a69
commit fb62dfda07
3 changed files with 14 additions and 1 deletions

View File

@ -2,7 +2,8 @@
display: none;
position: absolute; /* please don't change 'position' */
opacity: map_get($theme, rail-default-opacity);
transition: background-color .2s linear, opacity .2s linear;
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out,
border-radius .2s ease-in-out;
}
@mixin scrollbar-rail-hover($theme) {
@ -26,6 +27,8 @@
&.ps-in-scrolling {
&.ps-x > .ps-scrollbar-x-rail {
@include scrollbar-rail-hover($theme);
height: map_get($theme, scrollbar-x-rail-hover-height);
> .ps-scrollbar-x {
@include scrollbar-hover($theme);
height: map_get($theme, scrollbar-x-hover-height);
@ -33,6 +36,8 @@
}
&.ps-y > .ps-scrollbar-y-rail {
@include scrollbar-rail-hover($theme);
width: map_get($theme, scrollbar-y-rail-hover-width);
> .ps-scrollbar-y {
@include scrollbar-hover($theme);
width: map_get($theme, scrollbar-y-hover-width);
@ -78,6 +83,8 @@
}
&:hover,
&:active {
height: map_get($theme, scrollbar-x-rail-hover-height);
> .ps-scrollbar-x {
height: map_get($theme, scrollbar-x-hover-height);
}
@ -96,6 +103,8 @@
}
&:hover,
&:active {
width: map_get($theme, scrollbar-y-rail-hover-width);
> .ps-scrollbar-y {
width: map_get($theme, scrollbar-y-hover-width);
}

View File

@ -9,11 +9,13 @@ $ps-theme-default: (
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-rail-hover-height: $ps-scrollbar-x-rail-hover-height,
scrollbar-x-bottom: $ps-scrollbar-x-bottom,
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-width: $ps-scrollbar-y-rail-width,
scrollbar-y-rail-hover-width: $ps-scrollbar-y-rail-hover-width,
scrollbar-y-right: $ps-scrollbar-y-right,
scrollbar-y-width: $ps-scrollbar-y-width,
scrollbar-y-hover-width: $ps-scrollbar-y-hover-width,

View File

@ -13,12 +13,14 @@ $ps-rail-hover-bg: #eee !default;
// Sizes
$ps-scrollbar-x-rail-bottom: 0 !default;
$ps-scrollbar-x-rail-height: 4px !default;
$ps-scrollbar-x-rail-hover-height: 8px !default;
$ps-scrollbar-x-bottom: 0 !default;
$ps-scrollbar-x-height: 4px !default;
$ps-scrollbar-x-hover-height: 8px !default;
$ps-scrollbar-y-rail-right: 0 !default;
$ps-scrollbar-y-rail-width: 4px !default;
$ps-scrollbar-y-rail-hover-width: 8px !default;
$ps-scrollbar-y-right: 0 !default;
$ps-scrollbar-y-width: 4px !default;
$ps-scrollbar-y-hover-width: 8px !default;