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; + } } } }