fix: refine breadcrumb link hover/focus styling

fluid-project · May 20, 2022 · 4583d72 · 4583d72
1 parent ea72336
commit 4583d72
Showing 1 changed file with 18 additions and 1 deletion.
diff --git a/src/assets/styles/components/_breadcrumb.scss b/src/assets/styles/components/_breadcrumb.scss
@@ -18,7 +18,24 @@
 
     &:focus,
     &:hover {
+        background: unset;
         margin: unset;
-        outline: 0.125rem solid var(--fl-linkColor, $mainColour);
+        outline: none;
+        padding: unset;
+        position: relative;
+        z-index: 0;
+
+        &::after {
+            background: $linkBackgroundHoverColour;
+            border-radius: 0.3125rem;
+            bottom: -0.3rem;
+            content: "";
+            left: -0.3rem;
+            outline: 0.125rem solid var(--fl-linkColor, $mainColour);
+            position: absolute;
+            right: -0.3rem;
+            top: -0.3rem;
+            z-index: -1;
+        }
     }
 }