diff --git a/packages/component-header-footer/src/footer/components/Social/index.js b/packages/component-header-footer/src/footer/components/Social/index.js
index 0f259984f4..18522e9d84 100644
--- a/packages/component-header-footer/src/footer/components/Social/index.js
+++ b/packages/component-header-footer/src/footer/components/Social/index.js
@@ -69,6 +69,7 @@ const Social = ({ social: { logoUrl, unitLogo, mediaLinks } }) => {
)}
@@ -87,6 +88,7 @@ const Social = ({ social: { logoUrl, unitLogo, mediaLinks } }) => {
)}
@@ -105,6 +107,7 @@ const Social = ({ social: { logoUrl, unitLogo, mediaLinks } }) => {
)}
@@ -123,6 +126,7 @@ const Social = ({ social: { logoUrl, unitLogo, mediaLinks } }) => {
)}
@@ -141,6 +145,7 @@ const Social = ({ social: { logoUrl, unitLogo, mediaLinks } }) => {
)}
diff --git a/packages/component-header-footer/src/footer/index.styles.js b/packages/component-header-footer/src/footer/index.styles.js
index bc2f9629f0..b9377a9476 100644
--- a/packages/component-header-footer/src/footer/index.styles.js
+++ b/packages/component-header-footer/src/footer/index.styles.js
@@ -28,6 +28,11 @@ const StyledFooter = styled.footer`
font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans,
sans-serif;
line-height: 1.5rem;
+
+ a:focus, button:focus {
+ outline: none;
+ box-shadow: 0 0 0 2px var(--color-base-white), 0 0 0 4px var(--color-base-grey-7) !important;
+ }
}
.btn,
@@ -132,6 +137,12 @@ const StyledFooter = styled.footer`
.nav {
padding-bottom: 1.5rem;
+ .nav-link .social-icon {
+ &:hover {
+ color: var(--color-base-white);
+ }
+ }
+
@media (min-width: 768px) {
padding: 2.5rem 0;
justify-content: flex-end;
@@ -271,8 +282,7 @@ const StyledFooter = styled.footer`
text-decoration: none;
display: block;
- &:hover,
- &:focus {
+ &:hover {
color: var(--color-base-gold);
text-decoration: underline;
}
@@ -282,6 +292,7 @@ const StyledFooter = styled.footer`
padding: 0;
display: block;
min-height: fit-content;
+ overflow: visible;
}
}
}
diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_globalfooter.scss b/packages/unity-bootstrap-theme/src/scss/extends/_globalfooter.scss
index 0105d40bac..d65dbe0766 100644
--- a/packages/unity-bootstrap-theme/src/scss/extends/_globalfooter.scss
+++ b/packages/unity-bootstrap-theme/src/scss/extends/_globalfooter.scss
@@ -141,6 +141,10 @@ footer {
color: $uds-color-base-gray-4;
line-height: 1;
padding-top: 7px; // Magic number. Reducing the padding by 1px to make the height = 48px.
+
+ :hover {
+ color: $uds-color-base-white;
+ }
}
}
}