publik-base-theme/static/montpellier-ville/_chantiers.scss

87 lines
1.6 KiB
SCSS

$cell-map-height: calc(100vh - 265px) !default;
$cell-map-mobile-height: calc(100vh - 108px) !default;
$roadwork-width: 400px !default;
.page-template-roadworks-map {
#main-content {
min-height: auto;
}
#main-content, #columns-wrapper {
padding: 0;
overflow: hidden;
position: relative;
}
div.combo-cell-map.leaflet-container {
height: $cell-map-height;
}
@media ($max-mobile-viewport) {
footer {
display: none;
}
div.combo-cell-map.leaflet-container {
height: $cell-map-mobile-height;
}
&.has-pwa-navigation div.combo-cell-map.leaflet-container {
height: calc(#{$cell-map-mobile-height} - 64px);
}
}
div.cell {
margin-bottom: 0;
}
div.config-json-cell {
border: none;
}
}
.chantier {
position: absolute;
border: $cell-border;
background: $cell-background;
right: 0;
top: 0;
z-index: 100000;
height: calc(#{$cell-map-height} + 2px);
overflow-x: hidden;
overflow-y: scroll;
width: $roadwork-width;
transform: translateX($roadwork-width);
transition: transform linear 250ms;
padding: 1em;
h3 {
@extend %title;
padding: 0;
margin-bottom: 0.5em;
}
p {
margin: 0.5em 0;
&.chantier--localisations {
font-size: 105%;
@media ($max-mobile-viewport) {
font-size: 100%;
}
}
}
.chantier--dates {
font-size: 80%;
}
.chantier--libelle {
display: block;
color: #333;
}
&.shown {
transform: translateX(0vw);
}
@media ($max-mobile-viewport) {
top: unset;
right: unset;
bottom: 0;
width: 100vw;
height: 250px;
max-height: calc(100vh - 180px);
transform: translateY(250px);
&.shown {
transform: translateY(0px);
}
}
}