mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-14 23:08:07 -04:00
4433db346b
Turns each pill item (already full height) into a flex container with its content as a column. Uses this to align the content (the pill label) to the middle of the column.
110 lines
1.9 KiB
SCSS
110 lines
1.9 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;
|
||
/*
|
||
Setting this as a flex container means the contents (1 item)
|
||
will fill the vertical space due to `align-items` defaulting
|
||
to `stretch`.
|
||
See: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#prop-align-items
|
||
*/
|
||
display: flex;
|
||
}
|
||
|
||
a,
|
||
&-selected-item {
|
||
display: flex; // float causes display: block in browsers without flexbox
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
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: 10;
|
||
color: $text-colour;
|
||
|
||
&:focus {
|
||
z-index: 1000;
|
||
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;
|
||
}
|
||
|
||
}
|
||
|
||
}
|