colouring-montreal/app/src/frontend/header.css
2021-01-29 00:35:14 +00:00

84 lines
1.5 KiB
CSS

/**
* Main header
*/
.main-header {
z-index: 3000;
position: absolute;
top: 0;
left: 0;
height: 76px; /* sync with map-container positioning */
width: 100%;
min-width: 320px; /* to avoid logo line wrap*/
text-decoration: none;
}
@media (min-width: 990px){
.main-header {
width: 470px;
}
.nav-header {
border-right: 1px solid #000;
}
}
.main-header.navbar {
padding: 0;
}
.nav-header {
z-index: 1;
display: flex;
justify-content: space-between;
width: 100%;
padding: 12px;
background: #fff;
}
.nav-header a {
padding: 0;
margin: 0;
}
.navbar .navbar-toggler {
padding: .5rem .75rem .5rem .75rem;
}
.navbar .navbar-toggler-icon {
width: 1em;
height: 1em;
}
.navbar .close {
display: inline-block;
vertical-align: middle;
height: 1em;
padding: 0 3px;
}
.main-header .navbar-collapse {
height: calc(100vh - 76px);
display: block;
overflow-y: auto;
transition: transform 0.3s;
transform: translateY(0);
background: #fff;
}
@media (min-width: 990px){
.navbar-collapse {
border-right: 1px solid #000;
}
}
.main-header .navbar-collapse > ul:last-child {
padding-bottom: 5rem;
}
.navbar-collapse.collapse {
transform: translateY(-100vh);
}
.navbar-collapse {
padding: .5rem 1rem;
}
.link-note {
margin-left: 1em;
display: inline-block;
text-transform: uppercase;
font-size: 70%;
font-weight: bold;
color: #777;
}