orchidmap-front/src/styles/map.less
2018-12-06 13:19:22 +07:00

124 lines
2.2 KiB
Text

#map {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
left: 0;
top: 0;
cursor: crosshair;
}
.leaflet-control-zoom {
display: none;
}
.leaflet-touch .leaflet-bar a {
border-radius: @panel_radius !important;
}
.leaflet-vertex-icon, .leaflet-middle-icon {
outline: none !important;
border-radius: 10px;
opacity :1;
border: none;
width: 16px !important;
height: 16px !important;margin-left:-8px !important;margin-top:-8px !important;
background: transparent;
}
.leaflet-vertex-icon::after, .leaflet-middle-icon::after {
content: ' ';
position:absolute;top:4px;left:4px;width:8px;height:8px;
background:white;border-radius: 8px;transform:scale(1);
transition:transform 150ms;
}
.leaflet-vertex-icon:hover, .leaflet-middle-icon:hover {
opacity: 1 !important;
}
.leaflet-vertex-icon:hover::after, .leaflet-middle-icon:hover::after,
.leaflet-vertex-icon:active::after, .leaflet-middle-icon:active::after {
transform: scale(2);
box-shadow: #999 0 0 5px 2px;
}
.leaflet-control-container .leaflet-routing-container-hide {
display: none;
}
.leaflet-bar {
box-shadow: @bar_shadow !important;
border: none !important;
}
.leaflet-bar a {
background: @bar_background;
color: white;
text-shadow: none;
user-select: none;
border-bottom: none;
&:hover {
background: @bar_background;
color: white;
border-bottom: none;
}
}
.locate-geo-button {
background: @bar_background;
width: 32px;
height: 32px;
position: fixed;
top: 10px;
left: 10px;
border-radius: @panel_radius 0 0 @panel_radius;
z-index: 3;
box-shadow: @bar_shadow;
cursor: pointer;
padding: 1px;
box-sizing: border-box;
svg {
fill: white;
}
}
.location-marker {
width: 20px;
height: 3px;
margin-left: -10px;
margin-top: -2px;
outline: none;
z-index: 10001;
background: @red_secondary;
&:after {
content: ' ';
box-shadow: 0 0 0 3px @red_secondary;
background: white;
border-radius: 8px;
width: 8px;
height: 8px;
position: absolute;
left: 6px;
top: -3px;
}
&:before {
content: ' ';
display: block;
width: 3px;
height: 20px;
background: @red_secondary;
left: 8.5px;
top: -9px;
position: absolute;
}
}
.leaflet-top {
top: 42px;
}