mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-02 07:27:35 -04:00
fb960205f3
GOV.UK Template hanged the colour of text in focused links in
79466a489c
It was done with greater specificity than before. This means that the
way we were previously overriding the focus colour (for links with a
dark background) no longer works.
This commit makes our override more specific, so that it works again.
92 lines
1.2 KiB
SCSS
92 lines
1.2 KiB
SCSS
.pill {
|
|
|
|
display: flex;
|
|
|
|
li {
|
|
width: 25%;
|
|
flex-grow: 1;
|
|
text-align: left;
|
|
}
|
|
|
|
a,
|
|
&-selected-item {
|
|
display: block;
|
|
float: left;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
padding: 10px;
|
|
}
|
|
|
|
a {
|
|
$background: $link-colour;
|
|
background: $background;
|
|
color: $white;
|
|
border: 2px solid $background;
|
|
position: relative;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
|
|
.pill-label {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&:link,
|
|
&:visited {
|
|
color: $white;
|
|
}
|
|
|
|
&:hover {
|
|
color: $light-blue-25;
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
z-index: 10;
|
|
}
|
|
}
|
|
|
|
&-selected-item {
|
|
border: 2px solid $black;
|
|
outline: 1px solid rgba($white, 0.1);
|
|
position: relative;
|
|
z-index: 1000;
|
|
color: $text-colour;
|
|
|
|
&:focus {
|
|
z-index: 10;
|
|
outline: 3px solid $yellow;
|
|
}
|
|
|
|
}
|
|
|
|
&-centered-item {
|
|
text-align: center;
|
|
}
|
|
|
|
}
|
|
|
|
.pill-separate {
|
|
|
|
&-item {
|
|
|
|
display: block;
|
|
text-align: left;
|
|
padding: 10px $gutter-half;
|
|
|
|
&:link,
|
|
&:visited {
|
|
background: $link-colour;
|
|
color: $white;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:link:focus {
|
|
color: $light-blue-25;
|
|
}
|
|
|
|
}
|
|
|
|
}
|