mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-06-25 01:41:19 -04:00
f514d377f7
This is like the ‘pill’ pattern that we use for filtering lists of notifications. However it is meant for navigating between discrete things, not a filtered view of the same list. This is why is has a gutter between each item, and no selected state. Turns out we already had a pattern about this on the dashboard, so this commit also changes the dashboard to use the same code.
81 lines
1.1 KiB
SCSS
81 lines
1.1 KiB
SCSS
.pill {
|
|
|
|
display: flex;
|
|
|
|
a,
|
|
span {
|
|
display: block;
|
|
padding: 10px;
|
|
flex-grow: 1;
|
|
text-align: left;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
span {
|
|
border: 2px solid $black;
|
|
outline: 1px solid rgba($white, 0.1);
|
|
position: relative;
|
|
z-index: 1000;
|
|
color: $text-colour;
|
|
}
|
|
}
|
|
|
|
.pill-separate {
|
|
|
|
&-item {
|
|
|
|
display: block;
|
|
text-align: left;
|
|
padding: 10px $gutter-half;
|
|
|
|
&:link,
|
|
&:visited {
|
|
background: $link-colour;
|
|
color: $white;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&:hover {
|
|
color: $light-blue-25;
|
|
}
|
|
|
|
}
|
|
|
|
}
|