mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-06-05 14:00:51 -04:00
70007fcb8f
At maximum zoom, the text in the items gets cropped horizontally. This removes the padding on their containers to give them more space and, instead, puts it on the content items instead. Left-aligned content still needs some padding on the left-hand side but centrally-aligned can grow into the whole space. This also reduces the padding applied below 420px width or when the screen is zoomed below 300%. Above that, our content needs more space between items but below that, the space allocated to the content is more important.
122 lines
2.2 KiB
SCSS
122 lines
2.2 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 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;
|
||
}
|
||
}
|
||
|
||
&-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;
|
||
}
|
||
|
||
}
|
||
|
||
&-label {
|
||
|
||
// reduce padding until screen is above 420px / zoomed below 300%
|
||
padding-left: govuk-spacing(1);
|
||
|
||
@include govuk-media-query($from: 420px) {
|
||
padding-left: govuk-spacing(2);
|
||
}
|
||
|
||
}
|
||
|
||
&-centered-item {
|
||
text-align: center;
|
||
padding-left: 0;
|
||
}
|
||
|
||
}
|
||
|
||
.pill-separate {
|
||
|
||
&-item {
|
||
|
||
display: block;
|
||
text-align: left;
|
||
padding: 10px govuk-spacing(3);
|
||
text-align: center;
|
||
|
||
&:link,
|
||
&:visited {
|
||
background: $link-colour;
|
||
color: $white;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
&:hover,
|
||
&:focus,
|
||
&:link:focus {
|
||
color: $light-blue-25;
|
||
}
|
||
|
||
}
|
||
|
||
}
|