[libadwaita/wip/exalm/fixes: 2/3] stylesheet: Fix focus transitions

[Alexander Mikhaylenko <alexm src gnome org>]

commit a6231256293f33006174299e41d04ff22540e113
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Sat Aug 27 00:06:41 2022 +0400

    stylesheet: Fix focus transitions
    
    In e351779dd2cd916273a60fbfd5a119c03b4a9622 I missed the fact focus
    transitions weren't properly defined in the first place and half of them
    only worked by accident via the transitions I removed. Fix that.

 src/stylesheet/_common.scss  | 4 +++-
 src/stylesheet/_drawing.scss | 4 +---
 2 files changed, 4 insertions(+), 4 deletions(-)
---
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index 086e7fa0..1c3b010b 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -1,6 +1,8 @@
 $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 $backdrop_transition: 200ms ease-out;
-$focus_transition: outline-width 200ms $ease-out-quad, outline-offset 200ms $ease-out-quad;
+$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_radius: 6px;
 $card_radius: $button_radius + 6;
diff --git a/src/stylesheet/_drawing.scss b/src/stylesheet/_drawing.scss
index 73e85ec3..b8ec28f0 100644
--- a/src/stylesheet/_drawing.scss
+++ b/src/stylesheet/_drawing.scss
@@ -10,12 +10,10 @@
 // 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) {
-  transition-property: outline, outline-width, outline-offset, outline-color;
-  transition-duration: 300ms;
-  animation-timing-function: ease-in-out;
   & #{$target} {
     outline: 0 solid transparent;
     outline-offset: if($outer, $offset + 4px, $offset + $width + 4px);
+    transition: $focus_transition;
   }
 
   &#{$focus-state} #{$target} {