mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-27 03:09:11 -04:00
58d80f5097
The link-buttons we use in our pill component have a blue background which shows the area they occupy by default. In high contrast mode, backgrounds are hidden so the link-button text looks like it is floating because you can't see the edge of their area. These changes use the trick of adding a transparent border. This is hidden by default but displays in high contrast mode to show the edges of the link-button. I've reduced the padding to accommodate the extra space it takes up.
152 lines
3.1 KiB
SCSS
152 lines
3.1 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;
|
||
color: $govuk-focus-text-colour;
|
||
/* override default focus styles to inset bottom underline */
|
||
box-shadow: inset 0 -4px $govuk-focus-text-colour;
|
||
border: none;
|
||
padding: 12px 2px; /* compensate for lack of border with padding */
|
||
}
|
||
}
|
||
|
||
&-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;
|
||
color: $govuk-focus-text-colour;
|
||
border: solid 2px $black;
|
||
padding: 10px 0px; /* reset padding to default */
|
||
box-shadow: inset 0 -2px $govuk-focus-text-colour; /* remove bottom border from underline */
|
||
}
|
||
|
||
}
|
||
|
||
&-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,
|
||
&-item--selected {
|
||
&:focus .pill-item__label {
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
|
||
&-item--centered {
|
||
text-align: center;
|
||
padding-left: 0;
|
||
}
|
||
|
||
}
|
||
|
||
.pill-separate {
|
||
|
||
&-item {
|
||
|
||
display: block;
|
||
text-align: left;
|
||
padding: 9px (govuk-spacing(3) - 1);
|
||
border: 1px solid transparent;
|
||
text-align: center;
|
||
|
||
&:link,
|
||
&:visited {
|
||
background: $link-colour;
|
||
color: $white;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
&:hover {
|
||
color: $light-blue-25;
|
||
}
|
||
|
||
&:focus,
|
||
&:link:focus {
|
||
color: $govuk-focus-text-colour;
|
||
text-decoration: none;
|
||
background: $govuk-focus-colour;
|
||
/* override default focus style to inset bottom underline */
|
||
box-shadow: inset 0 -4px $govuk-focus-text-colour;
|
||
}
|
||
|
||
}
|
||
|
||
}
|