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: ( $marker_icons: (
(ambulance, "\f0f9"), (ambulance, "\f0f9"),
(bicycle, "\f206"), (bicycle, "\f206"),
@ -50,15 +52,15 @@ div.leaflet-marker-icon.leaflet-div-icon {
} }
div.leaflet-div-icon span { div.leaflet-div-icon span {
width: 2.3em; width: #{$marker_width};
height: 2.3em; height: #{$marker_width};
display: block; display: block;
left: -1.15em; /* 2.3 / 2 */ left: #{0 - $marker_width / 2};
top: -3em; /* 2.3 * 1.2 */ top: #{0 - $marker_width * 1.2};
position: relative; 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); transform: scale(1, 1.3) rotate(45deg);
box-sizing: border-box; box-sizing: content-box;
} }
div.leaflet-div-icon span { 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; display: inline-block;
background: white; background: white;
border-radius: 100%; border-radius: 100%;
padding: 0.5ex; padding: #{$marker_width * 0.1};
transform: scale(1.3, 1); transform: scale(1.3, 1);
margin-top: -0.3ex; position: relative;
height: 1rem; top: #{0 - $marker_width * 0.1};
width: 1rem; height: #{$marker_width * 0.5};
line-height: #{$marker_width * 0.5};
width: #{$marker_width * 0.5};
} }
/* leaflet markers icons */ /* leaflet markers icons */