mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-20 02:14:26 -05:00
4aa4970fc9
Uses some CSS to draw some grey lines to show which radios descend from which. I don’t feel like the intentation is enough, and it looks a bit messy because the circles of the radio buttons don’t have straight edges easily suggest visual alignment. Copies the design from conditionally revealing content in the design system: https://design-system.service.gov.uk/components/radios/#conditionally-revealing-content Implementation is done with pseudo elements, because borders can’t be positionned exactly enough.
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: 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;
|
||
}
|
||
|
||
}
|
||
|
||
}
|