mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-19 14:03:52 -04:00
cc04a924d0
When the list of areas is restricted to half the width of the page it starts to look pretty higgledy-piggledy when you have lots of areas or areas with very long names. To do this I’ve ripped out the table markup in favour of headings, paragraphs and lists. Probably pros and cons for each, but it was really hard to do the layout with the content in a table.
157 lines
2.8 KiB
SCSS
157 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;
|
||
}
|
||
|
||
&--smaller {
|
||
@include bold-16;
|
||
}
|
||
|
||
}
|
||
|
||
.govuk-button {
|
||
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);
|
||
|
||
&: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;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
}
|