Adwaita: Regular focus ring for sidebar rowswip/jimmac/sidebar-focus

- 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

2 files changed, 5 insertions, 12 deletions

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 4c1b378a2d..6bcd25bd29 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,7 +3635,7 @@ separator.sidebar {
     padding: 0 8px;
     border-radius: $menu-margin;
     margin: 0 $menu-margin 2px;
-
+    @include focus-ring();
     &:hover,
     &:focus-visible:focus-within {
       background-color: darken($menu_selected_color, 5%);
@@ -3653,12 +3649,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);