Add rail-size hover in scrollbar

src/scss/vendor/perfect-scrollbar/_mixins.scss

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

src/scss/vendor/perfect-scrollbar/_themes.scss

@@ -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,

src/scss/vendor/perfect-scrollbar/_variables.scss

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