This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* set padding and height to 100% */ | |
html, body, #mapDiv { | |
padding: 0; | |
margin: 0; | |
height: 100%; | |
font-family: sans-serif; | |
} | |
/* use flex and flex-wrap */ | |
.container { | |
display: flex; | |
flex-wrap: wrap; | |
height: 100%; | |
} | |
/* set all the section stacked vertically in mobile view*/ | |
.box { | |
width: 100%; | |
} | |
.heading { | |
font-size: 1.0em; | |
text-align: center; | |
min-height: 50px; | |
} | |
.heading h2{ | |
font-size: smaller; | |
} | |
.map { | |
height: 80%; | |
max-height: 700px; | |
} | |
#txtSearchText { | |
width: 74%; | |
} | |
#btnSearch { | |
width: 20%; | |
} | |
#divMain{ | |
width: 100%; | |
height: 100%; | |
} | |
/* results will be off the screen at first | |
when the search button is pressed, | |
it will slide in from the left. | |
*/ | |
#divResults{ | |
overflow:scroll; | |
width: 300px; | |
height: 100%; | |
position: absolute; | |
transform: translate(-300px, 0); | |
transition: transform 0.3s ease; | |
background-color: lightyellow; | |
} | |
/* Set this property from javascript to make the results | |
to slide into view */ | |
#divResults.open { | |
transform: translate(0,0); | |
z-index: 101; | |
} | |
/* adjust the logo at the bottom of map */ | |
#OneMapLogo { | |
bottom: 5px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment