client/src/scss/components/_list.scss
// ==================
// == Results List ==
// ==================
// loc-name is in general
.locator-list {
display: flex;
flex-direction: column;
@include media-breakpoint-up(sm) {
flex-grow: 1;
height: auto;
}
@include media-breakpoint-between(sm, md) {
.list-label {
margin-left: 0;
}
.list-content {
padding: 10px 0;
}
.list-details {
width: 140px;
}
}
.loc-list-container {
flex-grow: 1;
overflow-x: hidden;
overflow-y: scroll;
}
.list-label {
background: $dark-red;
color: $white;
float: left;
font-weight: bold;
margin: 10px 0 0 6px;
padding: 2px 3px;
text-align: center;
width: 27px;
}
.list-details {
float: left;
margin-left: 6px;
width: 165px;
}
.list-content {
padding: 10px;
}
.loc-dist {
color: $light-grey;
font-style: italic;
font-weight: bold;
}
.list-location {
// Adding this to prevent moving elements when adding the list-focus class
border: 1px solid transparent;
box-sizing: border-box;
clear: left;
cursor: pointer;
display: block;
float: left;
margin: 0;
width: 100%;
&.first {
margin-top: 0;
}
&.last {
margin-bottom: 0;
}
&.even {
background-color: $off-white;
}
&.focus {
border: 1px solid $bright-blue;
box-shadow: 0 0 8px $blue;
transition: border .2s linear 0s, box-shadow .2s linear 0s;
// so the border doesn't get blocked by other elements
z-index: 1;
}
}
}