mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-09 08:39:49 -04:00
3c7364408b
I’ve never liked the style of the selected areas on the preview of a broadcast message. They were a compromise, taking what’s on the map page and giving it a shaded background so it looks less like a text box. The trouble is all these stroked elements jumbled together made the page look very busy. I think it can be a bit calmer if they look more like the ‘tag’ component[1] from the Design System, which only uses shading. Going for black text not blue, because it’s one less piece of visual differentiation – again, trying to keep the busyness level down. 1. https://design-system.service.gov.uk/components/tag/
135 lines
2.5 KiB
SCSS
135 lines
2.5 KiB
SCSS
.area-list {
|
||
|
||
display: inline;
|
||
|
||
&-item {
|
||
|
||
display: inline-block;
|
||
border: 2px solid $black;
|
||
padding: (govuk-spacing(1) + 1px) (govuk-spacing(2) + 35px) govuk-spacing(1) govuk-spacing(2);
|
||
margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
|
||
position: relative;
|
||
|
||
&-remove {
|
||
|
||
font-size: 0;
|
||
|
||
&:before {
|
||
content: "×";
|
||
display: block;
|
||
position: absolute;
|
||
top: -2px;
|
||
right: -2px;
|
||
bottom: -2px;
|
||
width: 35px;
|
||
background: $govuk-blue;
|
||
color: $white;
|
||
box-shadow: -2px 0 0 0 $black, inset 1px 0 0 0 rgba($white, 0.1);
|
||
border: 2px solid $govuk-blue;
|
||
border-left: none;
|
||
font-size: 24px;
|
||
font-weight: normal;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
text-decoration: none;
|
||
}
|
||
|
||
&:hover,
|
||
&:focus {
|
||
|
||
&:before {
|
||
color: $light-blue-25;
|
||
}
|
||
|
||
}
|
||
|
||
&:focus {
|
||
|
||
outline: none;
|
||
|
||
&:before {
|
||
background: $govuk-focus-colour;
|
||
color: $black;
|
||
border-color: $black;
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
&: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;
|
||
}
|
||
|
||
}
|
||
|
||
.govuk-button {
|
||
margin-left: 3px;
|
||
}
|
||
|
||
}
|
||
|
||
#map {
|
||
z-index: 50;
|
||
margin-bottom: govuk-spacing(4);
|
||
}
|
||
|
||
.area-key {
|
||
|
||
display: inline-block;
|
||
position: relative;
|
||
margin-right: govuk-spacing(3);
|
||
margin-bottom: govuk-spacing(5);
|
||
height: govuk-spacing(7);
|
||
padding-left: govuk-spacing(8);
|
||
line-height: govuk-spacing(7);
|
||
|
||
&:before {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
top: 3px;
|
||
left: govuk-spacing(1);
|
||
width: govuk-spacing(6);
|
||
height: govuk-spacing(6);
|
||
box-sizing: border-box;
|
||
margin-right: govuk-spacing(1);
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
&--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;
|
||
}
|
||
}
|
||
|
||
}
|