mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-08 18:03:12 -04:00
d3a599a3d5
We hide the map inside a details element. Because the map has such a strong shape I don’t think it needs the grey border to contain it. This commit removes the border, and adjusts the spacing to group things by proximity alone. By removing the border and associated gutter we can give more space to the map, and make the page look less busy.
151 lines
2.8 KiB
SCSS
151 lines
2.8 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(4);
|
||
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;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|