feat(header): L3-4294 links underline fix (#401)

PhillipsAuctionHouse · Oct 24, 2024 · 47802e7 · 47802e7
1 parent 68d88d3
commit 47802e7
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 8 deletions.
diff --git a/src/components/Link/_link.scss b/src/components/Link/_link.scss
@@ -55,10 +55,7 @@
 
     &:hover,
     &:focus-visible {
-      @include underline(
-        $color: $dark-gray,
-        $padding: 0.5rem 0.625rem calc(0.5rem + 2px)
-      ); // 1 px so that the bottom border of the nav counts as part of the button
+      @include underline($color: $dark-gray); // 1 px so that the bottom border of the nav counts as part of the button
 
       color: $dark-gray;
     }

diff --git a/src/patterns/UserManagement/_userManagement.scss b/src/patterns/UserManagement/_userManagement.scss
@@ -31,7 +31,7 @@
     padding-bottom: $padding-xsm;
 
     &:hover {
-      @include underline($padding-xsm);
+      @include underline;
     }
 
     @include isHeaderMobile {

diff --git a/src/scss/_type.scss b/src/scss/_type.scss
@@ -37,9 +37,10 @@
   font-family: Distinct, sans-serif;
 }
 
-@mixin underline($padding: 0, $width: 0.0625rem, $color: $pure-black) {
-  border-bottom: $width solid $color;
-  padding-bottom: $padding;
+@mixin underline($offset: $spacing-xsm, $thickness: 1px, $color: $pure-black) {
+  text-decoration: underline;
+  text-decoration-thickness: $thickness;
+  text-underline-offset: $offset;
 }
 
 @mixin hText(