mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-14 23:08:07 -04:00
452e253e2c
All other navigations have their selected item as a link so we should match this. Includes changes to the pill CSS so: 1. it doesn't use elements in the selectors 2. all the selectors use BEM I did 2. because I had to change the classes/selectors anyway, they might as well match the style GOVUK Design System uses.
129 lines
2.3 KiB
SCSS
129 lines
2.3 KiB
SCSS
.pill {
|
||
|
||
display: flex;
|
||
|
||
&-item__container {
|
||
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;
|
||
}
|
||
|
||
&-item,
|
||
&-item--selected {
|
||
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;
|
||
}
|
||
|
||
&-item {
|
||
$background: $link-colour;
|
||
background: $background;
|
||
color: $white;
|
||
border: 2px solid $background;
|
||
position: relative;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
|
||
&:link,
|
||
&:visited {
|
||
color: $white;
|
||
}
|
||
|
||
&:hover {
|
||
color: $light-blue-25;
|
||
}
|
||
|
||
&:active,
|
||
&:focus {
|
||
z-index: 10;
|
||
}
|
||
}
|
||
|
||
&-item--selected {
|
||
background: inherit;
|
||
border: 2px solid $black;
|
||
outline: 1px solid rgba($white, 0.1);
|
||
position: relative;
|
||
z-index: 10;
|
||
|
||
&:link,
|
||
&:visited {
|
||
color: $govuk-text-colour;
|
||
}
|
||
|
||
&:hover {
|
||
color: govuk-tint($govuk-text-colour, 25%);
|
||
}
|
||
|
||
&:active,
|
||
&:focus {
|
||
z-index: 1000;
|
||
outline: 3px solid $yellow;
|
||
}
|
||
|
||
}
|
||
|
||
&-item__label {
|
||
|
||
text-decoration: underline;
|
||
// 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);
|
||
}
|
||
|
||
}
|
||
|
||
&-item--centered {
|
||
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;
|
||
}
|
||
|
||
}
|
||
|
||
}
|