mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-16 20:49:00 -04:00
db98af7ec3
Bigger click areas make them quicker to hit, as per Fitt’s law: https://en.wikipedia.org/wiki/Fitts%27s_law
69 lines
1000 B
SCSS
69 lines
1000 B
SCSS
.navigation {
|
|
|
|
padding: 0 $gutter 0 0;
|
|
|
|
&-service {
|
|
|
|
padding: 11px 0 9px 0;
|
|
border-bottom: 1px solid $border-colour;
|
|
margin: 0 0 10px;
|
|
position: relative;
|
|
|
|
&-name {
|
|
@include bold-19;
|
|
margin: 0 0 0 0;
|
|
}
|
|
|
|
&-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;
|
|
color: $text-colour;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
li {
|
|
@include core-19;
|
|
margin: 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
a {
|
|
|
|
display: block;
|
|
padding: 5px 0;
|
|
position: relative;
|
|
top: 5px;
|
|
|
|
&:link,
|
|
&:visited {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:hover {
|
|
color: $link-hover-colour;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&:focus {
|
|
color: $text-colour;
|
|
}
|
|
|
|
}
|
|
|
|
}
|