Make focus state of switch service align nicely

There is padding on the switch service link so that:
- it lines up with the service name
- it has a bigger hit area (because Fitt’s law[1])

This means that visually, the default focus state overlaps the blue
bar under the GOV.UK banner. So it needs a bit of custom CSS to make it
look right visually.
This commit is contained in:
Chris Hill-Scott
2017-08-07 11:40:17 +01:00
parent 2fbf0acb08
commit 5782ad49d9

View File

@@ -15,12 +15,22 @@
}
&-switch {
@include core-16;
text-align: right;
position: absolute;
top: 0;
right: 0;
padding: 13px 0 9px 15px;
&:focus {
outline: none;
border-bottom: 4px solid $yellow;
border-left: 10px solid $yellow;
border-right: 3px solid $yellow;
right: -3px;
}
}
}