src/applications/gi/sass/partials/_gi-search-location.scss
$ct-locator-shadow: rgba(0, 0, 0, 0.5);
.location-search {
.result-card {
flex-basis: 100% !important;
&.active {
border: $focus-outline;
padding-right: 6px !important;
}
.location-header {
flex-wrap: wrap;
}
}
.location-search-results-container {
border: solid var(--vads-color-base-lightest);
height: 565px;
overflow-y: scroll;
@include media-maxwidth($small-screen) {
height: 75vh;
border: none;
}
}
.marker {
border-radius: 50%;
width: 23px;
height: 23px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
border: solid 4px var(--vads-color-white);
background-color: var(--vads-color-secondary-dark);
}
.location-letter,
.location-letter-marker {
border-radius: 50%;
width: 28px;
height: 24px;
display: flex;
font-family: $font-sans;
align-items: center;
justify-content: center;
background: var(--vads-color-base);
color: var(--vads-color-base-lightest);
text-align: center;
}
.current-position {
border-radius: 50%;
width: 23px;
height: 23px;
box-shadow: 0 0 4px 0 $ct-locator-shadow;
border: solid 4px var(--vads-color-white);
background-color: var(--vads-color-secondary-dark);
}
.location-letter-marker:active {
background: var(--vads-color-base-dark);
}
#mapbox-gl-container {
display: flex;
}
.desktop-map-container {
min-height: 76vh;
padding-left: 0;
display: flex;
flex-direction: row;
@include media-maxwidth($small-screen) {
min-height: 45vh;
}
}
.mapboxgl-ctrl-top-center {
position: absolute;
margin: 0;
text-align: center;
width: 100%;
}
.mapboxgl-ctrl-bottom-center {
bottom: 40px;
position: absolute;
pointer-events: none;
}
button.mapboxgl-ctrl-zoom-in {
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
}
button.mapboxgl-ctrl-zoom-out {
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
}
canvas.mapboxgl-canvas:focus {
outline: 2px solid var(--vads-color-action-focus-on-light);
outline-offset: 2px;
}
#search-area-control-container {
z-index: 1;
button:disabled {
background-color: var(--vads-color-gray-medium);
}
}
.tab-form {
.active-results-tab {
border-top: 4px solid var(--vads-color-primary);
}
.inactive-results-tab {
border-top: 2px solid var(--vads-color-black);
}
.list-results-tab {
border-left: 2px solid var(--vads-color-black);
border-right: 1px solid var(--vads-color-black);
}
.map-results-tab {
border-left: 1px solid var(--vads-color-black);
border-right: 2px solid var(--vads-color-black);
}
}
}
.use-my-location-container {
display: block;
@media (min-width: $medium-screen) {
display: inline-block;
float: right;
vertical-align: bottom;
margin-bottom: -10px;
}
}
.use-my-location-link {
text-decoration: none;
background-color: transparent;
color: var(--vads-color-link);
font-weight: normal;
padding: 0;
margin: 0 0 0 20px;
@media (max-width: $small-desktop-screen) {
margin: 0.75em 0;
text-align: left;
width: 140px;
}
}
.use-my-location-link:hover {
background-color: transparent;
color: var(--vads-color-link);
@media (max-width: $small-desktop-screen) {
text-align: left;
}
}
input.location-search {
width: 100%;
max-width: 490px;
}
#distance-dropdown {
select {
margin-top: 4px;
margin-left: 25px;
}
}
#distance-dropdown {
@media (max-width: $medium-screen) {
width: 100%;
select {
width: 100%;
padding-right: 0px;
}
}
@media (max-width: $small-screen) {
select {
margin-left: 0;
}
}
}
button.location-search-button {
width: 120px !important;
}
@media (max-width: $small-screen) {
#institution-search-label {
margin-top: 0px;
}
button.location-search-button {
width: 100% !important;
i {
display: none;
}
}
input.location-search {
width: 100%;
padding-right: 0px;
}
.input-row {
padding-top: 5px;
padding-bottom: 5px;
}
}