final? style tweaks

pydata · Aug 5, 2023 · 4034f1d · 4034f1d
1 parent 8aea24b
commit 4034f1d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 22 deletions.
diff --git a/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss b/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss
@@ -22,39 +22,46 @@ $link-underline-offset: 0.1578em !default;
 //  - 0.12em (relative to the link's text size)
 $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 
+@function if-important($important) {
+  @return #{if($important, "!important", "")};
+}
+
 //  Ensures links have an underline decoration by default - needed to meet
 // WCAG SC 1.4.1
-@mixin link-decoration {
-  text-decoration: underline;
+@mixin link-decoration($important: false) {
+  text-decoration: underline if-important($important);
 
   @if $link-underline-thickness {
-    text-decoration-thickness: $link-underline-thickness;
+    text-decoration-thickness: $link-underline-thickness
+      if-important($important);
   }
 
   @if $link-underline-offset {
-    text-underline-offset: $link-underline-offset;
+    text-underline-offset: $link-underline-offset if-important($important);
   }
 }
 
 // Ensures links have an underline decoration on hover - distinct from the
 // default behaviour
-@mixin link-decoration-hover {
+@mixin link-decoration-hover($important: true) {
   @if $link-hover-decoration-thickness {
-    text-decoration-thickness: $link-hover-decoration-thickness;
+    text-decoration-thickness: $link-hover-decoration-thickness
+      if-important($important);
     // Disable ink skipping on underlines on hover. Browsers haven't
     // standardised on this part of the spec yet, so set both properties
-    text-decoration-skip-ink: none; // Chromium, Firefox
-    text-decoration-skip: none; // Safari
+    text-decoration-skip-ink: none
+      if-important($important); // Chromium, Firefox
+    text-decoration-skip: none if-important($important); // Safari
   }
 }
 
 // Simple hover style - can be used alone or in conjunction with other mixins
 // Add the text underline and change in thickness on hover
-@mixin link-style-hover {
+@mixin link-style-hover($important: true) {
   &:hover {
-    @include link-decoration;
-    @include link-decoration-hover;
-    color: var(--pst-color-link-hover);
+    @include link-decoration($important: $important);
+    @include link-decoration-hover($important: $important);
+    color: var(--pst-color-link-hover) if-important($important);
   }
 }
 

diff --git a/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss b/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss
@@ -3,12 +3,8 @@
   font-family: inherit !important;
   a {
     color: var(--pst-color-link) !important;
-    text-decoration: unset;
-    @include link-style-hover;
-    &:hover {
-      color: var(--pst-color-link-hover);
-      background-color: var(--pst-color-surface);
-    }
+    text-decoration: underline !important;
+    @include link-style-hover($important: true);
   }
   &.rst-badge {
     border-color: var(--pst-color-border) !important;
@@ -53,11 +49,10 @@
       border-style: solid !important;
       border-width: 1px !important;
       a {
+        @include link-style-hover($important: true);
+        background-color: var(--pst-color-surface);
         color: var(--pst-color-text-base) !important;
-        @include link-style-hover;
-        &:hover {
-          color: var(--pst-color-link-hover);
-        }
+        text-decoration: none !important;
       }
     }
   }