hover ring animation transition

pydata · Oct 18, 2024 · 1b24aae · 1b24aae
1 parent 2f16458
commit 1b24aae
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 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
@@ -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
@@ -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);
       }
     }