[gnome-shell-sass] js/appDisplay: Implement navigation of pages by hovering/clicking edges

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

commit d6f7117bdc25b7c5e9ae524ed87278ee90f8680b
Author: Carlos Garnacho <carlosg gnome org>
Date:   Wed Feb 3 12:46:07 2021 +0100

    js/appDisplay: Implement navigation of pages by hovering/clicking edges
    
    Add the necessary animations to slide in the icons in the previous/next
    pages, also needing to 1) drop the viewport clipping, and 2) extend scrollview
    fade effects to let see the pages in the navigated direction(s).
    
    The animation is driven via 2 adjustments, one for each side, so they
    can animate independently.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1630>

 widgets/_app-grid.scss | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
---
diff --git a/widgets/_app-grid.scss b/widgets/_app-grid.scss
index 0e3c54c..5620ac2 100644
--- a/widgets/_app-grid.scss
+++ b/widgets/_app-grid.scss
@@ -136,3 +136,17 @@ $app_grid_fg_color: #fff;
   border-radius: 99px;
   icon-size: $app_icon_size * 0.5;
 }
+
+.page-navigation-hint {
+  background: rgba(255, 255, 255, 0.05);
+  width: 88px;
+
+  &.next {
+    &:ltr { border-radius: 15px 0px 0px 15px; }
+    &:rtl { border-radius: 0px 15px 15px 0px; }
+  }
+  &.previous {
+    &:ltr { border-radius: 0px 15px 15px 0px; }
+    &:rtl { border-radius: 15px 0px 0px 15px; }
+  }
+}