Add rail-size hover in scrollbar
This commit is contained in:
parent
4339cd0a69
commit
fb62dfda07
11
src/scss/vendor/perfect-scrollbar/_mixins.scss
vendored
11
src/scss/vendor/perfect-scrollbar/_mixins.scss
vendored
@ -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);
|
||||
}
|
||||
|
@ -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,
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user