diff --git a/src/assets/styles/abstracts/_mixins.scss b/src/assets/styles/abstracts/_mixins.scss index f8b98402..d66cad32 100644 --- 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 index 07cd9d26..d2d7b586 100644 --- 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 index 0f26206f..30271f52 100644 --- 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; }