From fb62dfda0757782ba6fd8175159e61745c77c13e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 27 Sep 2017 16:09:08 +0200
Subject: [PATCH] Add rail-size hover in scrollbar

---
 src/scss/vendor/perfect-scrollbar/_mixins.scss    | 11 ++++++++++-
 src/scss/vendor/perfect-scrollbar/_themes.scss    |  2 ++
 src/scss/vendor/perfect-scrollbar/_variables.scss |  2 ++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/scss/vendor/perfect-scrollbar/_mixins.scss b/src/scss/vendor/perfect-scrollbar/_mixins.scss
index a2d0d75..3bda63e 100644
--- a/src/scss/vendor/perfect-scrollbar/_mixins.scss
+++ b/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);
       }
diff --git a/src/scss/vendor/perfect-scrollbar/_themes.scss b/src/scss/vendor/perfect-scrollbar/_themes.scss
index bf7729a..089241c 100644
--- a/src/scss/vendor/perfect-scrollbar/_themes.scss
+++ b/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,
diff --git a/src/scss/vendor/perfect-scrollbar/_variables.scss b/src/scss/vendor/perfect-scrollbar/_variables.scss
index cfc7d00..814509a 100644
--- a/src/scss/vendor/perfect-scrollbar/_variables.scss
+++ b/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;