From 1b24aaed0ec1dc2c0af772472109554eb3a4f989 Mon Sep 17 00:00:00 2001
From: gabalafou <gabriel@fouasnon.com>
Date: Fri, 18 Oct 2024 13:51:27 +0300
Subject: [PATCH] hover ring animation transition

---
 .../styles/extensions/_sphinx_design.scss     |  5 +++
 .../styles/extensions/_togglebutton.scss      | 32 ++++++++++++++++---
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss
index c726ef320..9593274e4 100644
--- a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss
+++ b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss
@@ -263,6 +263,11 @@ details.sd-dropdown {
     font-weight: 600;
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
+    transition: box-shadow 0.15s ease-in-out;
+
+    @media (prefers-reduced-motion) {
+      transition: none;
+    }
 
     // Set a variable that we can re-use for colors later
     // We must set this in the current and content sibling container
diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_togglebutton.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_togglebutton.scss
index fbed83c24..18a4f93d0 100644
--- a/src/pydata_sphinx_theme/assets/styles/extensions/_togglebutton.scss
+++ b/src/pydata_sphinx_theme/assets/styles/extensions/_togglebutton.scss
@@ -49,12 +49,26 @@
     .admonition-title {
       @include icon-hover-effects;
 
+      &::before {
+        transition:
+          border-radius 0.15s ease-in-out,
+          box-shadow 0.15s ease-in-out;
+
+        @media (prefers-reduced-motion) {
+          transition: none;
+        }
+      }
+
       &:hover::before {
         @include ring-base;
 
-        outline: solid $focus-ring-width var(--pst-color-link-hover);
-        outline-offset: $focus-ring-width;
+        $box-shadow-offset: 2px;
+
         border-radius: $focus-ring-width;
+        box-shadow:
+          0 0 0 $box-shadow-offset var(--pst-color-background),
+          0 0 0 calc($box-shadow-offset + $focus-ring-width)
+            var(--pst-color-link-hover);
       }
     }
 
@@ -113,9 +127,19 @@
       @include chevron-down;
       @include icon-hover-effects;
 
+      transition: box-shadow 0.15s ease-in-out;
+
+      @media (prefers-reduced-motion) {
+        box-shadow: none;
+      }
+
       &:hover {
-        outline: solid $focus-ring-width var(--pst-color-link-hover);
-        outline-offset: $focus-ring-width;
+        $box-shadow-offset: 2px;
+
+        box-shadow:
+          0 0 0 $box-shadow-offset var(--pst-color-background),
+          0 0 0 calc($box-shadow-offset + $focus-ring-width)
+            var(--pst-color-link-hover);
       }
     }