mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-10 19:34:27 -04:00
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:
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user