From 26852236cce8336fbdc3e975eff8871d978a2846 Mon Sep 17 00:00:00 2001
From: Jun <me@noraesae.net>
Date: Wed, 13 Jul 2016 01:09:15 +0900
Subject: [PATCH] Enhance 'scale scrollbars on hover' feature

Now it's set as default, with a little different form of settings.
---
 src/css/mixins.scss    | 34 +++++++++++++++-------------------
 src/css/themes.scss    |  3 ++-
 src/css/variables.scss | 21 +++++++++++----------
 3 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/src/css/mixins.scss b/src/css/mixins.scss
index 3995b66..135e3f6 100644
--- a/src/css/mixins.scss
+++ b/src/css/mixins.scss
@@ -1,9 +1,8 @@
 @mixin scrollbar-rail-default($theme) {
   display: none;
   position: absolute; /* please don't change 'position' */
-  border-radius: map_get($theme, border-radius);
   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) {
@@ -15,7 +14,8 @@
   position: absolute; /* please don't change 'position' */
   background-color: map_get($theme, bar-container-hover-bg);
   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) {
@@ -69,19 +69,17 @@
     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);
 
-    &: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 {
       @include scrollbar-default($theme);
       bottom: map_get($theme, scrollbar-x-bottom); /* there must be 'bottom' for ps-scrollbar-x */
       height: map_get($theme, scrollbar-x-height);
     }
+    &:hover,
+    &:active {
+      > .ps-scrollbar-x {
+        height: map_get($theme, scrollbar-x-hover-height);
+      }
+    }
   }
 
   > .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 */
     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 {
       @include scrollbar-default($theme);
       right: map_get($theme, scrollbar-y-right); /* there must be 'right' for ps-scrollbar-y */
       width: map_get($theme, scrollbar-y-width);
     }
+    &:hover,
+    &:active {
+      > .ps-scrollbar-y {
+        width: map_get($theme, scrollbar-y-hover-width);
+      }
+    }
   }
 
   &:hover {
diff --git a/src/css/themes.scss b/src/css/themes.scss
index 9a7dce7..bf7729a 100644
--- a/src/css/themes.scss
+++ b/src/css/themes.scss
@@ -7,15 +7,16 @@ $ps-theme-default: (
   bar-container-hover-bg: $ps-bar-container-hover-bg,
   bar-hover-bg: $ps-bar-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-height: $ps-scrollbar-x-rail-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-right: $ps-scrollbar-y-right,
   scrollbar-y-width: $ps-scrollbar-y-width,
+  scrollbar-y-hover-width: $ps-scrollbar-y-hover-width,
 );
 
 // Default theme
diff --git a/src/css/variables.scss b/src/css/variables.scss
index 0f3a34b..7454fb0 100644
--- a/src/css/variables.scss
+++ b/src/css/variables.scss
@@ -1,5 +1,5 @@
 // Colors
-$ps-border-radius: 4px !default;
+$ps-border-radius: 6px !default;
 
 $ps-rail-default-opacity: 0 !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;
 
 // Sizes
-$ps-scrollbar-rail-scale-hover: 1 !default;
-$ps-scrollbar-x-rail-bottom: 3px !default;
-$ps-scrollbar-x-rail-height: 8px !default;
-$ps-scrollbar-x-bottom: 0 !default;
-$ps-scrollbar-x-height: 8px !default;
+$ps-scrollbar-x-rail-bottom: 0px !default;
+$ps-scrollbar-x-rail-height: 15px !default;
+$ps-scrollbar-x-bottom: 2px !default;
+$ps-scrollbar-x-height: 6px !default;
+$ps-scrollbar-x-hover-height: 11px !default;
 
-$ps-scrollbar-y-rail-right: 3px !default;
-$ps-scrollbar-y-rail-width: 8px !default;
-$ps-scrollbar-y-right: 0 !default;
-$ps-scrollbar-y-width: 8px !default;
+$ps-scrollbar-y-rail-right: 0 !default;
+$ps-scrollbar-y-rail-width: 15px !default;
+$ps-scrollbar-y-right: 2px !default;
+$ps-scrollbar-y-width: 6px !default;
+$ps-scrollbar-y-hover-width: 11px !default;