mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-25 02:19:12 -04:00
101 lines
1.5 KiB
SCSS
101 lines
1.5 KiB
SCSS
.pill {
|
||
|
||
display: flex;
|
||
|
||
li {
|
||
width: 25%;
|
||
flex-grow: 1;
|
||
text-align: left;
|
||
|
||
/*
|
||
For browsers that don’t support flexbox, use float instead.
|
||
Float does not create floating of flex item, and do not take it
|
||
out-of-flow. So this is ignored by browsers that support flexbox.
|
||
See: https://www.w3.org/TR/css-flexbox-1/#flex-containers
|
||
*/
|
||
float: 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;
|
||
text-align: center;
|
||
|
||
&:link,
|
||
&:visited {
|
||
background: $link-colour;
|
||
color: $white;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
&:hover,
|
||
&:focus,
|
||
&:link:focus {
|
||
color: $light-blue-25;
|
||
}
|
||
|
||
}
|
||
|
||
}
|