fix: include hover/focus styles for certain links

fluid-project · Apr 26, 2022 · a94c80c · a94c80c
1 parent 334632c
commit a94c80c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 0 deletions.
diff --git a/src/assets/styles/abstracts/_mixins.scss b/src/assets/styles/abstracts/_mixins.scss
@@ -28,3 +28,11 @@
         @content;
     }
 }
+
+@mixin hover-focus-outline($colour) {
+    &:focus,
+    &:hover {
+        outline: 0.125rem solid var(--fl-linkColor, $colour);
+        outline-offset: 2px;
+    }
+}
diff --git a/src/assets/styles/components/_breadcrumb.scss b/src/assets/styles/components/_breadcrumb.scss
@@ -14,5 +14,7 @@
 }
 
 .breadcrumb__link {
+    @include hover-focus-outline($mainColour);
+
     color: $mainColour !important;
 }
diff --git a/src/assets/styles/layout/_header.scss b/src/assets/styles/layout/_header.scss
@@ -18,6 +18,8 @@
 }
 
 .org-header__link {
+    @include hover-focus-outline($headerOrgLinkColour);
+
     color: $headerOrgLinkColour;
     text-decoration: underline;
 }