[gtk/wip/jimmac/larger-smaller-scrollbar-gtk3] Adwaita: Scrollbar transitions and size

[Jakub Steiner <jimmac src gnome org>]

commit 9ec7bd4482d1169acb4a181eba399d07bb0f86a7
Author: Jakub Steiner <jimmac gmail com>
Date:   Mon Feb 15 12:53:36 2021 +0100

    Adwaita: Scrollbar transitions and size
    
     - tone down the size of the controller again
     - transition between the indicator and control fluidly
    
    Fixes https://gitlab.gnome.org/GNOME/gtk/-/issues/1886

 gtk/theme/Adwaita/_common.scss           | 13 ++++++++-----
 gtk/theme/Adwaita/gtk-contained-dark.css |  4 ++--
 gtk/theme/Adwaita/gtk-contained.css      |  4 ++--
 3 files changed, 12 insertions(+), 9 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 581da9ef45..fc994b0962 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -2640,6 +2640,8 @@ notebook {
  **************/
 scrollbar {
   $_slider_min_length: 40px;
+  $_slider_width: 8px;
+  $_scrollbar_transition: all 300ms $ease-out-quad;
 
   // disable steppers
   @at-root * {
@@ -2648,7 +2650,7 @@ scrollbar {
   }
 
   background-color: $scrollbar_bg_color;
-  transition: 300ms $ease-out-quad;
+  transition: $_scrollbar_transition;
 
   // scrollbar border
   &.top { border-bottom: 1px solid $borders_color; }
@@ -2664,13 +2666,14 @@ scrollbar {
 
   // slider
   slider {
-    min-width: 10px;
-    min-height: 10px;
+    min-width: $_slider_width;
+    min-height: $_slider_width;
     margin: -1px;
     border: 4px solid transparent;
     border-radius: 10px;
     background-clip: padding-box;
     background-color: $scrollbar_slider_color;
+    transition: $_scrollbar_transition;
 
     &:hover { background-color: $scrollbar_slider_hover_color; }
 
@@ -2683,8 +2686,8 @@ scrollbar {
 
   &.fine-tune {
     slider {
-      min-width: 6px;
-      min-height: 6px;
+      min-width: $_slider_width - 2;
+      min-height: $_slider_width - 2;
     }
 
     &.horizontal slider { border-width: 6px 4px; }
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 9bb4c1c2fb..25482cf750 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -970,7 +970,7 @@ notebook > stack:not(:only-child) { background-color: #2d2d2d; }
 notebook > stack:not(:only-child):backdrop { background-color: #303030; }
 
 /************** Scrollbars * */
-scrollbar { background-color: #313131; transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
+scrollbar { background-color: #313131; transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
 
 * { -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; }
 
@@ -984,7 +984,7 @@ scrollbar.right { border-left: 1px solid #1b1b1b; }
 
 scrollbar:backdrop { background-color: #2d2d2d; border-color: #202020; transition: 200ms ease-out; }
 
-scrollbar slider { min-width: 10px; min-height: 10px; margin: -1px; border: 4px solid transparent; 
border-radius: 10px; background-clip: padding-box; background-color: #a4a4a3; }
+scrollbar slider { min-width: 8px; min-height: 8px; margin: -1px; border: 4px solid transparent; 
border-radius: 10px; background-clip: padding-box; background-color: #a4a4a3; transition: all 300ms 
cubic-bezier(0.25, 0.46, 0.45, 0.94); }
 
 scrollbar slider:hover { background-color: #c9c9c7; }
 
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 6a429b32f3..78844c1e7e 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -978,7 +978,7 @@ notebook > stack:not(:only-child) { background-color: #ffffff; }
 notebook > stack:not(:only-child):backdrop { background-color: #fcfcfc; }
 
 /************** Scrollbars * */
-scrollbar { background-color: #cecece; transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
+scrollbar { background-color: #cecece; transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
 
 * { -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; }
 
@@ -992,7 +992,7 @@ scrollbar.right { border-left: 1px solid #cdc7c2; }
 
 scrollbar:backdrop { background-color: #efedec; border-color: #d5d0cc; transition: 200ms ease-out; }
 
-scrollbar slider { min-width: 10px; min-height: 10px; margin: -1px; border: 4px solid transparent; 
border-radius: 10px; background-clip: padding-box; background-color: #7e8182; }
+scrollbar slider { min-width: 8px; min-height: 8px; margin: -1px; border: 4px solid transparent; 
border-radius: 10px; background-clip: padding-box; background-color: #7e8182; transition: all 300ms 
cubic-bezier(0.25, 0.46, 0.45, 0.94); }
 
 scrollbar slider:hover { background-color: #565b5c; }