mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-11 09:28:27 -04:00
bc22c206b9
At the moment, the icons in the key of the map showing what each type of area drawn on the map means change colour in high contrast mode. This causes a mismatch between the areas on the map and the key. These changes remake the images in SVG to prevent the colours changing in high contrast modes. They also add a white background to the icons, to make sure they match the areas they refer to in the map.
190 lines
4.3 KiB
SCSS
190 lines
4.3 KiB
SCSS
.area-list {
|
|
|
|
display: inline;
|
|
|
|
&-item {
|
|
|
|
display: inline-block;
|
|
border: 2px solid $black;
|
|
// Create space for the remove link on the right of the list item (including borders)
|
|
padding: (govuk-spacing(1) + 1px) (govuk-spacing(2) + 37px) govuk-spacing(1) govuk-spacing(2);
|
|
margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
|
|
position: relative;
|
|
|
|
&-remove {
|
|
|
|
display: block; // fallback for browsers that don't support flexbox
|
|
display: flex;
|
|
// center SVG vertically and horizontally
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
top: -2px; // cover list-item border-top
|
|
right: -2px; // cover list-item border-right
|
|
bottom: -2px; // cover list-item border-bottom
|
|
width: 37px;
|
|
padding: 0;
|
|
border: 2px solid $govuk-blue;
|
|
border-left: none;
|
|
text-align: center;
|
|
font-size: inherit; // counter govuk-button styles
|
|
line-height: 36px; // match area-list-item for browsers that don't support flexbox
|
|
|
|
// set styles so they don't get overriden by govuk-button styles
|
|
&,
|
|
&:hover {
|
|
background: $govuk-blue;
|
|
}
|
|
|
|
&:hover {
|
|
color: $light-blue-25;
|
|
}
|
|
|
|
// set styles so they don't get overriden by govuk-button styles
|
|
&:active {
|
|
top: -2px;
|
|
}
|
|
|
|
// The box-shadow that separates the remove link from the list item is hidden in
|
|
// high contrast mode. Remake using a border instead
|
|
// Also sets text colour to match govuk-button
|
|
@media (-ms-high-contrast: active), (forced-colors: active) {
|
|
|
|
&:link,
|
|
&:active,
|
|
&:hover,
|
|
&:focus:not(:active):not(:hover) {
|
|
border-left: 2px solid $govuk-blue;
|
|
color: LinkText;
|
|
}
|
|
|
|
}
|
|
|
|
// set styles so they don't get overriden by govuk-button styles
|
|
&,
|
|
&:focus,
|
|
&:focus:not(:active):not(:hover) {
|
|
box-shadow: -2px 0 0 0 $black, inset 1px 0 0 0 rgba($white, 0.1);
|
|
}
|
|
|
|
// set styles so they don't get overriden by govuk-button styles
|
|
&:focus,
|
|
&:focus:not(:active):not(:hover) {
|
|
border-color: $black;
|
|
}
|
|
|
|
&:focus:hover {
|
|
background-color: $govuk-focus-colour;
|
|
color: $black;
|
|
}
|
|
|
|
// show outline to make focus visible when background colours are overridden
|
|
@media (-ms-high-contrast: active), (forced-colors: active) {
|
|
|
|
// set styles so they don't get overriden by govuk-button styles
|
|
&:focus:not(:active):not(:hover) {
|
|
outline: 3px solid transparent;
|
|
}
|
|
|
|
// override hover styles when focused, to preserve dimensions and outline
|
|
&:focus:hover {
|
|
top: -2px;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
width: 37px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: govuk-spacing(1) * 1.5;
|
|
}
|
|
|
|
&--unremoveable {
|
|
padding-right: govuk-spacing(2);
|
|
background: $light-blue-25;
|
|
color: mix($black, $govuk-blue, 66%);
|
|
border-color: $light-blue-25;
|
|
margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
&--smaller {
|
|
@include bold-16;
|
|
}
|
|
|
|
}
|
|
|
|
.govuk-button--secondary {
|
|
margin-left: 3px;
|
|
}
|
|
|
|
}
|
|
|
|
#area-list-map {
|
|
z-index: 50;
|
|
margin-bottom: govuk-spacing(4);
|
|
}
|
|
|
|
.area-list-key {
|
|
|
|
display: inline-block;
|
|
position: relative;
|
|
margin-right: govuk-spacing(3);
|
|
margin-bottom: govuk-spacing(4);
|
|
height: govuk-spacing(7);
|
|
padding-left: govuk-spacing(8);
|
|
line-height: govuk-spacing(7);
|
|
|
|
&__icon {
|
|
position: absolute;
|
|
left: -5px;
|
|
top: -7px;
|
|
}
|
|
|
|
&--certain {
|
|
&:before {
|
|
border: 2px solid $black;
|
|
background: $light-blue-50;
|
|
}
|
|
}
|
|
|
|
&--likely {
|
|
&:before {
|
|
padding: 1px;
|
|
border: 2px dashed $govuk-blue;
|
|
border-image: file-url('dashed-border-govuk-blue.svg') 4 round;
|
|
background: $light-blue-25;
|
|
}
|
|
}
|
|
|
|
&--phone-estimate {
|
|
padding-left: govuk-spacing(1);
|
|
margin-right: 0;
|
|
float: right;
|
|
&:before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.area-list-map-details {
|
|
|
|
.govuk-details__summary {
|
|
display: block;
|
|
padding-top: govuk-spacing(1);
|
|
padding-bottom: govuk-spacing(1);
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.govuk-details__text {
|
|
padding: 0;
|
|
border: none;
|
|
border-bottom: 1px solid $border-colour;
|
|
margin-top: -1px;
|
|
}
|
|
|
|
}
|