[libadwaita/wip/exalm/transitions] stylesheet: Remove unnecessary transitions

[Alexander Mikhaylenko <alexm src gnome org>]

commit e351779dd2cd916273a60fbfd5a119c03b4a9622
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Wed Aug 3 15:20:43 2022 +0400

    stylesheet: Remove unnecessary transitions
    
    In a lot of cases we define transitions for all properties while really
    only intending it to be used for a specific thing, like changing backgound
    on hover.
    
    Only explicitly define the latter, and avoid transitions for everything.
    
    Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/354
    
    Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/135

 src/stylesheet/_common.scss               | 2 +-
 src/stylesheet/widgets/_entries.scss      | 2 +-
 src/stylesheet/widgets/_file-chooser.scss | 3 +--
 src/stylesheet/widgets/_header-bar.scss   | 5 ++---
 src/stylesheet/widgets/_lists.scss        | 6 ++++--
 src/stylesheet/widgets/_tab-view.scss     | 4 ++--
 src/stylesheet/widgets/_toolbars.scss     | 8 ++++----
 src/stylesheet/widgets/_window.scss       | 2 +-
 8 files changed, 16 insertions(+), 16 deletions(-)
---
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index 4b083b6d..086e7fa0 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -1,7 +1,7 @@
 $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 $backdrop_transition: 200ms ease-out;
-$button_transition: all 200ms $ease-out-quad;
 $focus_transition: outline-width 200ms $ease-out-quad, outline-offset 200ms $ease-out-quad;
+$button_transition: $focus_transition, background 200ms $ease-out-quad;
 $button_radius: 6px;
 $card_radius: $button_radius + 6;
 $menu_radius: 6px;
diff --git a/src/stylesheet/widgets/_entries.scss b/src/stylesheet/widgets/_entries.scss
index f941d4b6..f9faf208 100644
--- a/src/stylesheet/widgets/_entries.scss
+++ b/src/stylesheet/widgets/_entries.scss
@@ -8,7 +8,6 @@ entry {
     border-spacing: 6px;
     background-color: $button_color;
     background-clip: padding-box;
-    transition: all 200ms $ease-out-quad;
     caret-color: currentColor;
 
     @if $contrast == 'high' {
@@ -16,6 +15,7 @@ entry {
     }
 
     @include focus-ring($focus-state: ':focus-within');
+    transition: $focus-transition;
 
     .osd &:focus-within {
       outline-color: $osd_focus_color;
diff --git a/src/stylesheet/widgets/_file-chooser.scss b/src/stylesheet/widgets/_file-chooser.scss
index a83b01af..c0368f91 100644
--- a/src/stylesheet/widgets/_file-chooser.scss
+++ b/src/stylesheet/widgets/_file-chooser.scss
@@ -1,11 +1,10 @@
 placesview {
   .server-list-button > image {
-    transition: 200ms $ease-out-quad;
+    transition: -gtk-icon-transform 200ms $ease-out-quad;
     -gtk-icon-transform: rotate(0turn);
   }
 
   .server-list-button:checked > image {
-    transition: 200ms $ease-out-quad;
     -gtk-icon-transform: rotate(-0.5turn);
   }
 
diff --git a/src/stylesheet/widgets/_header-bar.scss b/src/stylesheet/widgets/_header-bar.scss
index eb699f6d..4388dd9a 100644
--- a/src/stylesheet/widgets/_header-bar.scss
+++ b/src/stylesheet/widgets/_header-bar.scss
@@ -23,14 +23,13 @@ headerbar {
 
   &:backdrop {
     background-color: $headerbar_backdrop_color;
-
-    transition: $backdrop_transition;
+    transition: background-color $backdrop_transition;
 
     > windowhandle {
       // opacity looks weird with GtkSwitch, but filter works fine
       filter: opacity(0.5);
 
-      transition: $backdrop_transition;
+      transition: filter $backdrop_transition;
     }
   }
 
diff --git a/src/stylesheet/widgets/_lists.scss b/src/stylesheet/widgets/_lists.scss
index 5cc2c6f8..32a4d6a0 100644
--- a/src/stylesheet/widgets/_lists.scss
+++ b/src/stylesheet/widgets/_lists.scss
@@ -216,7 +216,9 @@ row.combo {
     outline-color: $osd_focus_color;
   }
 
-  transition: 200ms $ease-out-quad;
+  transition: $focus_transition,
+              background-color 200ms $ease-out-quad,
+              border-radius 200ms $ease-out-quad;
   border-bottom: 1px solid if($contrast == 'high', $border_color, $card_shade_color);
 
   &:not(:selected).activatable {
@@ -259,7 +261,7 @@ row.expander {
   image.expander-row-arrow {
     @extend .dim-label;
 
-    transition: 200ms $ease-out-quad;
+    transition: -gtk-icon-transform 200ms $ease-out-quad;
     @include margin-start(6px);
 
     &:dir(ltr) {
diff --git a/src/stylesheet/widgets/_tab-view.scss b/src/stylesheet/widgets/_tab-view.scss
index b18dabf4..1b140c40 100644
--- a/src/stylesheet/widgets/_tab-view.scss
+++ b/src/stylesheet/widgets/_tab-view.scss
@@ -86,13 +86,13 @@ tabbar {
 
     &:backdrop .box {
       background-color: $headerbar_backdrop_color;
-      transition: $backdrop_transition;
+      transition: background-color $backdrop_transition;
 
       > scrolledwindow,
       > .start-action,
       > .end-action {
         filter: opacity(0.5);
-        transition: $backdrop_transition;
+        transition: filter $backdrop_transition;
       }
     }
   }
diff --git a/src/stylesheet/widgets/_toolbars.scss b/src/stylesheet/widgets/_toolbars.scss
index b14ea43c..778b7a00 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -146,11 +146,11 @@ searchbar {
 
     &:backdrop {
       background-color: $headerbar_backdrop_color;
-      transition: $backdrop_transition;
+      transition: background-color $backdrop_transition;
 
       > * {
         filter: opacity(.5);
-        transition: $backdrop_transition;
+        transition: filter $backdrop_transition;
       }
     }
   }
@@ -189,11 +189,11 @@ actionbar > revealer > box {
 
   &:backdrop {
     background-color: $headerbar_backdrop_color;
-    transition: $backdrop_transition;
+    transition: background-color $backdrop_transition;
 
     > * {
       filter: opacity(.5);
-      transition: $backdrop_transition;
+      transition: filter $backdrop_transition;
     }
   }
 }
diff --git a/src/stylesheet/widgets/_window.scss b/src/stylesheet/widgets/_window.scss
index 9e2b462a..b56b4ae5 100644
--- a/src/stylesheet/widgets/_window.scss
+++ b/src/stylesheet/widgets/_window.scss
@@ -24,7 +24,7 @@ window {
                   0 4px 28px 12px transparentize(black, 0.97),
                   0 6px 32px 16px transparent,
                   0 0 0 1px transparentize(black, if($contrast == 'high', .2, .98));
-      transition: $backdrop_transition;
+      transition: box-shadow $backdrop_transition;
     }
 
     &.dialog.message {