style: Add missing transition timings

- fixes #5211

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2309>

5 files changed, 14 insertions, 11 deletions

diff --git a/_common.scss b/_common.scss
index f15c86c..0b89700 100644
--- a/_common.scss
+++ b/_common.scss
@@ -74,7 +74,7 @@ stage {
   padding: $base_padding;
   spacing: $base_padding;
   border: 2px solid transparent;
-  transition-duration: 100ms;
+  transition-duration: 200ms;
   text-align: center;
 }
 
diff --git a/_drawing.scss b/_drawing.scss
index 910eeb5..217aac9 100644
--- a/_drawing.scss
+++ b/_drawing.scss
@@ -129,12 +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
 //
@@ -147,6 +141,12 @@ $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;
 
   // normal button
   @if $t==normal {
@@ -257,6 +257,7 @@ $button_bg_color: mix($tc, $c, 5%);
 
 // overview icon, dash, app grid
 @mixin overview_icon($color, $flat: true) {
+  transition-duration: 400ms;
   .overview-icon { @extend %tile; }
   @if $flat {
     .overview-icon { background-color: transparent;}
diff --git a/widgets/_app-grid.scss b/widgets/_app-grid.scss
index c936e4b..91cf023 100644
--- a/widgets/_app-grid.scss
+++ b/widgets/_app-grid.scss
@@ -102,6 +102,7 @@ $app_icon_size: 96px;
 // App Grid pagination indicators
 .page-indicator {
   padding: $base_padding $base_padding * 2 0;
+  transition-duration:400ms;
 
   .page-indicator-icon {
     width: 10px;
diff --git a/widgets/_calendar.scss b/widgets/_calendar.scss
index 465dc05..336372c 100644
--- a/widgets/_calendar.scss
+++ b/widgets/_calendar.scss
@@ -69,6 +69,7 @@
     height: $calendar_day_size !important;
     width: $calendar_day_size !important;
     border-radius: 99px;
+    transition-duration: 100ms;
     @extend %numeric;
     @extend %smaller;
     
diff --git a/widgets/_popovers.scss b/widgets/_popovers.scss
index 3a470ef..4e6813a 100644
--- a/widgets/_popovers.scss
+++ b/widgets/_popovers.scss
@@ -30,16 +30,16 @@
   padding: $base_padding*1.5 $base_padding*2;
   border-radius: $base_border_radius;
   spacing: $base_padding;
-  transition: 0.2s all ease;
+  transition-duration: 100ms;
   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;}