maps: adjust rendering using sass variables and fixed pixel sizes (#49504)

This commit is contained in:
Frédéric Péters 2020-12-15 16:35:09 +01:00
parent b558319204
commit d61c514f0e
1 changed files with 15 additions and 11 deletions

View File

@ -1,3 +1,5 @@
$marker_width: 40px;
$marker_icons: (
(ambulance, "\f0f9"),
(bicycle, "\f206"),
@ -50,15 +52,15 @@ div.leaflet-marker-icon.leaflet-div-icon {
}
div.leaflet-div-icon span {
width: 2.3em;
height: 2.3em;
width: #{$marker_width};
height: #{$marker_width};
display: block;
left: -1.15em; /* 2.3 / 2 */
top: -3em; /* 2.3 * 1.2 */
left: #{0 - $marker_width / 2};
top: #{0 - $marker_width * 1.2};
position: relative;
border-radius: 11em 6em 0.8em;
border-radius: #{$marker_width * 10} #{$marker_width * 6} #{$marker_width * 0.5};
transform: scale(1, 1.3) rotate(45deg);
box-sizing: border-box;
box-sizing: content-box;
}
div.leaflet-div-icon span {
@ -97,15 +99,17 @@ div.leaflet-popup-content {
}
}
div.leaflet-div-icon span i:before {
div.leaflet-div-icon span i::before {
display: inline-block;
background: white;
border-radius: 100%;
padding: 0.5ex;
padding: #{$marker_width * 0.1};
transform: scale(1.3, 1);
margin-top: -0.3ex;
height: 1rem;
width: 1rem;
position: relative;
top: #{0 - $marker_width * 0.1};
height: #{$marker_width * 0.5};
line-height: #{$marker_width * 0.5};
width: #{$marker_width * 0.5};
}
/* leaflet markers icons */