[gtk/wip/jimmac/sidebar-focus] Adwaita: Regular focus ring for sidebar rows

[Jakub Steiner <jimmac src gnome org>]

commit 2ee821cecc937c0cecf7a497af79571d8db04e59
Author: Jakub Steiner <jimmac gmail com>
Date:   Fri Mar 5 12:16:10 2021 +0100

    Adwaita: Regular focus ring for sidebar rows
    
    - style sidebar rows as regular items like buttons wrt focus
    - define transition as part of the focus-ring(),
      only animate outline related properties rather than `all`
    
    Fixes https://gitlab.gnome.org/GNOME/gtk/-/issues/3708

 gtk/theme/Adwaita/_common.scss  | 17 +++--------------
 gtk/theme/Adwaita/_drawing.scss |  3 +++
 2 files changed, 6 insertions(+), 14 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 4c1b378a2d..9758cd3b85 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -3589,6 +3589,7 @@ stacksidebar {
   }
   row {
     padding: 10px 4px;
+    @include focus-ring();
 
     > label {
       padding-left: 6px;
@@ -3607,11 +3608,6 @@ stacksidebar {
     &:selected:hover:dir(ltr), &:selected:hover:dir(rtl) {
       background-color: darken($menu_selected_color,5%);
     }
-    &:focus:focus-visible {
-      outline-width: 0;
-      background-color: $selected_bg_color;
-      color: $selected_fg_color;
-    }
     &.activatable:active, &.activatable:selected:active {
       box-shadow: none; // #3413
     }
@@ -3639,9 +3635,8 @@ separator.sidebar {
     padding: 0 8px;
     border-radius: $menu-margin;
     margin: 0 $menu-margin 2px;
-
-    &:hover,
-    &:focus-visible:focus-within {
+    @include focus-ring($focus-state: 'focus-within');
+    &:hover {
       background-color: darken($menu_selected_color, 5%);
     }
 
@@ -3653,12 +3648,6 @@ separator.sidebar {
         background-color: darken($menu_selected_color,5%);
       }
 
-      &:focus-visible:focus-within {
-        outline-width: 0;
-        color: $selected_fg_color;
-        background-color: $selected_bg_color;
-        &:hover { background-color: darken($selected_bg_color,10%); }
-      }
     }
 
     &:disabled { color: $insensitive_fg_color; }
diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss
index b8fed6ea3f..909af03f4c 100644
--- a/gtk/theme/Adwaita/_drawing.scss
+++ b/gtk/theme/Adwaita/_drawing.scss
@@ -10,6 +10,9 @@
 // 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);