[gnome-shell/wip/snwh/stylesheet-minor-fixes] style: Add missing transition timings - fixes #5211

[Sam Hewitt <snwh src gnome org>]

commit 6e0d864779ae3fe9301d7e488ff2b87b1940aeb1
Author: Sam Hewitt <sam snwh org>
Date:   Fri May 27 15:39:45 2022 -0230

    style: Add missing transition timings
    - fixes #5211

 data/theme/gnome-shell-sass/_common.scss           |  3 ++-
 data/theme/gnome-shell-sass/_drawing.scss          | 16 +++++++++-------
 data/theme/gnome-shell-sass/widgets/_app-grid.scss |  8 ++++++--
 data/theme/gnome-shell-sass/widgets/_calendar.scss |  2 ++
 data/theme/gnome-shell-sass/widgets/_popovers.scss |  9 +++++----
 5 files changed, 24 insertions(+), 14 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index c6e64766ef..b2b2fefa12 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -86,7 +86,8 @@ stage {
   padding: $base_padding;
   spacing: $base_padding;
   border: 2px solid transparent;
-  transition-duration: 100ms;
+  transition-duration: 200ms;
+  transition-timing-function: ease;
   text-align: center;
 }
 
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 10c1c3f3fc..6057924219 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -129,13 +129,6 @@
   }
 }
 
-
-// buttons
-// since buttons are all flat an borderless now the mixin is simpler
-
-@mixin button($t, $tc:$fg_color, $c:$bg_color) {
-
-$button_bg_color: mix($tc, $c, 5%);
 //
 // Button drawing function
 //
@@ -148,6 +141,13 @@ $button_bg_color: mix($tc, $c, 5%);
 // backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
 // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
 //
+// since buttons are all flat an borderless now the mixin is simpler
+
+@mixin button($t, $tc:$fg_color, $c:$bg_color) {
+
+  $button_bg_color: mix($tc, $c, 5%);
+  transition-duration: 100ms;
+  transition-timing-function: ease;
 
   // normal button
   @if $t==normal {
@@ -258,6 +258,8 @@ $button_bg_color: mix($tc, $c, 5%);
 
 // overview icon, dash, app grid
 @mixin overview_icon($color, $flat: true) {
+  transition-duration: 400ms;
+  transition-timing-function: ease;
   .overview-icon { @extend %tile; }
   @if $flat {
     .overview-icon { background-color: transparent;}
diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss 
b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index c936e4b6d4..eeee1ebea6 100644
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -101,12 +101,16 @@ $app_icon_size: 96px;
 
 // App Grid pagination indicators
 .page-indicator {
-  padding: $base_padding $base_padding * 2 0;
+  padding: $base_padding*2;
+  border-radius: 999px;
+  
+  transition-duration:400ms;
+  transition-timing-function: ease;
 
   .page-indicator-icon {
     width: 10px;
     height: 10px;
-    border-radius: 10px; // the same as height&width
+    border-radius: 99px; // the same as height&width
     background-color: white;
   }
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss 
b/data/theme/gnome-shell-sass/widgets/_calendar.scss
index 465dc053d8..50193d0946 100644
--- a/data/theme/gnome-shell-sass/widgets/_calendar.scss
+++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss
@@ -69,6 +69,8 @@
     height: $calendar_day_size !important;
     width: $calendar_day_size !important;
     border-radius: 99px;
+    transition-duration: 100ms;
+    transition-timing-function: ease;
     @extend %numeric;
     @extend %smaller;
     
diff --git a/data/theme/gnome-shell-sass/widgets/_popovers.scss 
b/data/theme/gnome-shell-sass/widgets/_popovers.scss
index 08ad324612..ed35541809 100644
--- a/data/theme/gnome-shell-sass/widgets/_popovers.scss
+++ b/data/theme/gnome-shell-sass/widgets/_popovers.scss
@@ -30,16 +30,17 @@
   padding: $base_padding*1.5 $base_padding*2;
   border-radius: $base_border_radius;
   spacing: $base_padding;
-  transition: 0.2s all ease;
+  transition-duration: 100ms;
+  transition-timing-function: ease;
   background-color: transparent;
 
   &:ltr {padding-left: $base_padding;}
   &:rtl {padding-right: $base_padding;}
 
   &:focus, &:hover {
-   background-color: $hover_bg_color !important;
-   &:active { background-color: $active_bg_color !important;}
- }
+    background-color: $hover_bg_color !important;
+    &:active { background-color: $active_bg_color !important;}
+  }
 
   &:checked {background-color: $checked_bg_color !important;}