src/app/modules/common/map-header-box/map-header-box.component.scss
:host {
position: relative;
min-height:250px;
max-height:300px;
height:calc(100vw / 4 * 3);
width: 100%;
user-select: none;
overflow:none;
flex:0 0;
}
:host > ::ng-deep map {
position: absolute;
display: block;
height: 100%;
width: 100%;
::ng-deep .leaflet-control-attribution{
display:none;
}
}
.title-box{
position: absolute;
bottom:0px;
left:0px;
right:0px;
z-index: 800;
padding:20px 20px 10px 20px;
color:white;
text-shadow: 0 0 5px black;
background-image: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.7));
display: flex;
flex-direction: column;
align-items: stretch;
span.title{
font-size: 20px;
font-weight: bold;
}
span.subtitle{
font-size: 12px;
font-weight: bold;
}
}
mat-icon{
position: absolute;
z-index: 799;
bottom:0px;
left:0px;
right:0px;
top:0px;
margin:auto;
font-size: 64px;
width:64px;
height:64px;
display:none;
color:white;
}
:host-context(.no-location){
::ng-deep map {
filter: blur(2px) grayscale(100%) brightness(0.5);
transition: all 1s ease-out;
}
mat-icon{
display:block;
}
}