Fix org navigation links focus styles

This commit is contained in:
Tom Byers
2020-09-15 17:15:41 +01:00
parent 322dab8415
commit 2f5ecdb1fa
@@ -73,11 +73,9 @@
padding: $padding-top 0 $padding-bottom govuk-spacing(3); padding: $padding-top 0 $padding-bottom govuk-spacing(3);
&:focus { &:focus {
outline: none; padding: $padding-top 0px $padding-bottom + 1px govuk-spacing(3) + 10;
border-bottom: 1px solid $yellow; /* override default focus style to inset bottom underline */
border-left: 10px solid $yellow; box-shadow: inset 0 -4px $govuk-focus-text-colour;
border-right: 3px solid $yellow;
right: -3px;
} }
} }
@@ -105,7 +103,7 @@
position: absolute; position: absolute;
top: -1px; top: -1px;
bottom: 1px; bottom: 1px;
right: 7px; right: 2px;
width: 7px; width: 7px;
height: 7px; height: 7px;
margin: auto 0; margin: auto 0;
@@ -117,10 +115,13 @@
border-color: $secondary-text-colour; border-color: $secondary-text-colour;
} }
&:focus:before {
border-color: $govuk-focus-text-colour;
}
// hack to make the focus style fit in the navigation bar // hack to make the focus style fit in the navigation bar
&:focus { &:focus {
outline: none; box-shadow: inset 0 -3px $govuk-focus-text-colour, 0 1px $govuk-focus-text-colour;
box-shadow: 0 1px 0 0 $focus-colour, -3px 0 0 0 $focus-colour, -3px 1px 0 0 $focus-colour;
} }
} }