[gnome-shell-sass] pageIndicators: Redesign and add position-based animation

[Florian Müllner <fmuellner src gnome org>]

commit d988c3e8354cccab971e40016c88285e6d7bfb69
Author: Alexander Mikhaylenko <exalm7659 gmail com>
Date:   Fri Nov 22 03:24:46 2019 +0500

    pageIndicators: Redesign and add position-based animation
    
    Remove setCurrentPage() function, introduce setCurrentPosition() instead,
    which allows to have fractional positions.
    
    Make inactive dots smaller, filled and partially transparent, as opposed to
    larger and fully opaque active dot. Make dots smaller overall, remove
    borders. Interpolate each dot between active and inactive state based on
    scroll position.
    
    Make it impossible to "uncheck" the active dot.
    
    Thanks Florian Müllner for parts of the code.
    
    Fixes https://gitlab.gnome.org/GNOME/gnome-shell/issues/1932
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/843

 _common.scss | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)
---
diff --git a/_common.scss b/_common.scss
index b600830..ea20b1e 100644
--- a/_common.scss
+++ b/_common.scss
@@ -1549,20 +1549,14 @@ StScrollBar {
   }
 
   .page-indicator {
-    padding: 15px 20px;
+    padding: 7px 16px;
 
     .page-indicator-icon {
       width: 12px;
       height: 12px;
-      background-color: transparent;
-      border: 2px solid rgba(255, 255, 255, 0.4);
-      border-radius: 12px;
+      background-color: white;
+      border-radius: 6px;
     }
-
-    &:hover .page-indicator-icon { border-color: white; }
-    &:active .page-indicator-icon { border: none; margin: 2px; background-color: white; }
-    &:checked .page-indicator-icon,
-    &:checked:active .page-indicator-icon { background-color: white;}
   }
 
   .no-frequent-applications-label { @extend %status_text; }
@@ -1762,8 +1756,8 @@ StScrollBar {
         padding: 4px 4px;
 
         .page-indicator-icon {
-            width: 6px;
-            height: 6px
+            width: 8px;
+            height: 8px;
         }
     }
 }