[libadwaita/wip/exalm/transitions: 2/2] stylesheet: Fix transitions, again

[Alexander Mikhaylenko <alexm src gnome org>]

commit cab1c7cc327f8ea67f60abb3b3b137158400fdb7
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Tue Aug 30 17:01:01 2022 +0400

    stylesheet: Fix transitions, again
    
    Turned out 4c3e8878143e313ed03f74b06c3e2799cbc788d7 introduced specificity
    issues. Oh well.

 src/stylesheet/_common.scss                |  2 +-
 src/stylesheet/_drawing.scss               |  4 ++--
 src/stylesheet/widgets/_buttons.scss       | 12 ++++--------
 src/stylesheet/widgets/_checks.scss        |  1 -
 src/stylesheet/widgets/_color-chooser.scss |  4 ----
 src/stylesheet/widgets/_entries.scss       |  1 -
 src/stylesheet/widgets/_expanders.scss     |  1 -
 src/stylesheet/widgets/_lists.scss         | 12 ++++++------
 src/stylesheet/widgets/_misc.scss          |  2 +-
 src/stylesheet/widgets/_scale.scss         |  1 -
 src/stylesheet/widgets/_sidebars.scss      |  1 -
 src/stylesheet/widgets/_switch.scss        |  2 --
 12 files changed, 14 insertions(+), 29 deletions(-)
---
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index 1c3b010b..b5bc1fdc 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -3,7 +3,7 @@ $backdrop_transition: 200ms ease-out;
 $focus_transition: outline-color 200ms $ease-out-quad,
                    outline-width 200ms $ease-out-quad,
                    outline-offset 200ms $ease-out-quad;
-$button_transition: $focus_transition, background 200ms $ease-out-quad;
+$button_transition: background 200ms $ease-out-quad;
 $button_radius: 6px;
 $card_radius: $button_radius + 6;
 $menu_radius: 6px;
diff --git a/src/stylesheet/_drawing.scss b/src/stylesheet/_drawing.scss
index b8ec28f0..17df9c73 100644
--- a/src/stylesheet/_drawing.scss
+++ b/src/stylesheet/_drawing.scss
@@ -9,11 +9,11 @@
 // If $outer is true, the focus ring extends outward. Otherwise, it extends inward.
 // If $within is true, use focus-within instead of focus:focus-visible
 //
-@mixin focus-ring($target: null, $width: 2px, $offset: -$width, $outer: false, $focus-state: 
':focus:focus-visible', $fc: $focus_border_color) {
+@mixin focus-ring($target: null, $width: 2px, $offset: -$width, $outer: false, $focus-state: 
':focus:focus-visible', $fc: $focus_border_color, $transition: null) {
   & #{$target} {
     outline: 0 solid transparent;
     outline-offset: if($outer, $offset + 4px, $offset + $width + 4px);
-    transition: $focus_transition;
+    transition: $focus_transition, $transition;
   }
 
   &#{$focus-state} #{$target} {
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index 5f1ee606..8ee170d4 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -16,8 +16,7 @@ button {
     border-radius: $button_radius;
     font-weight: bold;
 
-    @include focus-ring();
-    transition: $button_transition;
+    @include focus-ring($transition: $button_transition);
 
     .osd &:focus:focus-visible {
       outline-color: $osd_focus_color;
@@ -111,8 +110,7 @@ button {
   &.osd {
     min-width: 32px;
     min-height: 32px;
-    @include focus-ring($outer: true, $offset: 1px, $fc: $osd_focus_color);
-    transition: $button_transition;
+    @include focus-ring($outer: true, $offset: 1px, $fc: $osd_focus_color, $transition: $button_transition);
 
     color: $osd_fg_color;
     background-color: transparentize(black, .35);
@@ -154,8 +152,7 @@ button {
   @at-root %opaque_button {
     box-shadow: none;
 
-    @include focus-ring($outer: true, $offset: 1px);
-    transition: $button_transition;
+    @include focus-ring($outer: true, $offset: 1px, $transition: $button_transition);
 
     .osd &:focus:focus-visible {
       outline-color: $osd_focus_color;
@@ -214,8 +211,7 @@ button {
   @at-root %button_basic_flat,
   &.flat {
     background: transparent;
-    @include focus-ring();
-    transition: $button_transition;
+    @include focus-ring($transition: $button_transition);
 
     .osd &:focus:focus-visible {
       outline-color: $osd_focus_color;
diff --git a/src/stylesheet/widgets/_checks.scss b/src/stylesheet/widgets/_checks.scss
index e5807061..d87f6750 100644
--- a/src/stylesheet/widgets/_checks.scss
+++ b/src/stylesheet/widgets/_checks.scss
@@ -1,7 +1,6 @@
 checkbutton {
   border-spacing: 4px;
   border-radius: $button_radius + 3px;
-  transition: $focus_transition;
   padding: 3px;
 
   @include focus-ring();
diff --git a/src/stylesheet/widgets/_color-chooser.scss b/src/stylesheet/widgets/_color-chooser.scss
index e40b1a9d..514d33e8 100644
--- a/src/stylesheet/widgets/_color-chooser.scss
+++ b/src/stylesheet/widgets/_color-chooser.scss
@@ -3,8 +3,6 @@ colorswatch {
   // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
   // applied to the overlay box.
 
-  transition: $focus_transition;
-
   @include focus-ring($width: 4px, $offset: -2px);
 
   // base color corners rounding
@@ -104,8 +102,6 @@ colorswatch {
 }
 
 plane {
-  transition: $focus_transition;
-
   @include focus-ring($offset: 2px, $outer: true);
 }
 
diff --git a/src/stylesheet/widgets/_entries.scss b/src/stylesheet/widgets/_entries.scss
index f9faf208..6bc042e7 100644
--- a/src/stylesheet/widgets/_entries.scss
+++ b/src/stylesheet/widgets/_entries.scss
@@ -15,7 +15,6 @@ 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/_expanders.scss b/src/stylesheet/widgets/_expanders.scss
index 82ace679..77de60c7 100644
--- a/src/stylesheet/widgets/_expanders.scss
+++ b/src/stylesheet/widgets/_expanders.scss
@@ -13,7 +13,6 @@ expander-widget {
   @include focus-ring("> box > title");
 
   > box > title {
-    transition: $focus_transition;
     border-radius: $button_radius;
 
     > expander {
diff --git a/src/stylesheet/widgets/_lists.scss b/src/stylesheet/widgets/_lists.scss
index 32a4d6a0..adcdbe32 100644
--- a/src/stylesheet/widgets/_lists.scss
+++ b/src/stylesheet/widgets/_lists.scss
@@ -1,3 +1,6 @@
+$row_transition: background-color 200ms $ease-out-quad,
+                 border-radius 200ms $ease-out-quad;
+
 listview,
 list {
   color: $view_fg_color;
@@ -125,7 +128,7 @@ row {
  ***************/
 
 row.entry {
-  @include focus-ring($focus-state: '.focused', $offset: -1px);
+  @include focus-ring($focus-state: '.focused', $offset: -1px, $transition: $row_transition);
 
   &:not(:selected).activatable.focused:hover,
   &:not(:selected).activatable.focused:active {
@@ -158,7 +161,7 @@ row.entry {
                              (warning, $warning_color),
                              (success, $success_color) {
     &.#{$e_type} {
-      @include focus-ring($focus-state: '.focused', $offset: -1px, $fc: gtkalpha(currentColor, 
$focus_border_opacity));
+      @include focus-ring($focus-state: '.focused', $offset: -1px, $fc: gtkalpha(currentColor, 
$focus_border_opacity), $transition: $row_transition);
 
       text {
         > selection:focus-within { background-color: gtkalpha($e_color, .2); }
@@ -210,15 +213,12 @@ row.combo {
 }
 
 %boxed_list_row {
-  @include focus-ring($offset: -1px);
+  @include focus-ring($offset: -1px, $transition: $row_transition);
 
   .osd &:focus:focus-visible {
     outline-color: $osd_focus_color;
   }
 
-  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 {
diff --git a/src/stylesheet/widgets/_misc.scss b/src/stylesheet/widgets/_misc.scss
index 5c398b56..d3c30ee2 100644
--- a/src/stylesheet/widgets/_misc.scss
+++ b/src/stylesheet/widgets/_misc.scss
@@ -214,7 +214,7 @@ statuspage {
   }
 
   &.activatable {
-    transition: $button_transition;
+    transition: $focus_transition, $button_transition;
 
     &:hover {
       background-image: image(gtkalpha(currentColor, .03));
diff --git a/src/stylesheet/widgets/_scale.scss b/src/stylesheet/widgets/_scale.scss
index 60163704..bb3155e6 100644
--- a/src/stylesheet/widgets/_scale.scss
+++ b/src/stylesheet/widgets/_scale.scss
@@ -43,7 +43,6 @@ scale {
       box-shadow: 0 0 0 1px $_slider_border_color, 0 2px 4px transparentize(black, .8);
 
       border-radius: 100%;
-      transition: $focus_transition;
 
       // the slider is inside the trough, so to have make it bigger there's a negative margin
       min-width: 20px;
diff --git a/src/stylesheet/widgets/_sidebars.scss b/src/stylesheet/widgets/_sidebars.scss
index 41302904..4adef698 100644
--- a/src/stylesheet/widgets/_sidebars.scss
+++ b/src/stylesheet/widgets/_sidebars.scss
@@ -26,7 +26,6 @@
 
 stacksidebar row {
   padding: 10px 4px;
-  @include focus-ring();
 
   > label {
     padding-left: 6px;
diff --git a/src/stylesheet/widgets/_switch.scss b/src/stylesheet/widgets/_switch.scss
index 3507bf25..1b47f315 100644
--- a/src/stylesheet/widgets/_switch.scss
+++ b/src/stylesheet/widgets/_switch.scss
@@ -3,8 +3,6 @@ switch {
   border-radius: 14px;
   padding: 2px;
 
-  transition: $focus_transition;
-
   background-color: $trough_color;
 
   &:hover { background-color: $trough_hover_color; }