muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 11:06:40 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

styled panels

Browse source
This commit is contained in:
muerwre 2018-08-22 15:20:39 +07:00
parent 7229a48297
commit d17a7b6aef
24 changed files with 470 additions and 421 deletions
Download patch file Download diff file Expand all files Collapse all files

136
src/styles/map.less
View file

@ -38,139 +38,3 @@
.leaflet-control-container .leaflet-routing-container-hide {
display: none;
}
.router-waypoint {
width: 40px;
height: 40px;
margin-left: -20px;
margin-top: -20px;
outline: none;
z-index: 10001;
&:after {
content: ' ';
display: block;
width: 20px;
height: 20px;
border-radius: 10px;
box-shadow: 0 0 0 2px #4597d0;
margin-left: 10px;
margin-top: 10px;
}
}
.sticker-container {
outline: none;
position: relative;
&:before {
content: ' ';
box-shadow: 0 0 10px 1px #ff3344;
background: #ff334422;
width: 48px;
height: 48px;
left: -24px;
top: -24px;
position: absolute;
border-radius: 40px;
opacity: 0;
transition: opacity 250ms, transform 500ms;
transform: scale(0);
}
&:hover, &:active {
.sticker-delete {
transform: scale(1);
pointer-events: all;
}
&:before {
opacity: 1;
transform: scale(1);
}
}
}
.sticker-label {
width: 48px;
height: 48px;
position: absolute;
background: white;
border-radius: 32px;
left: 0;
top: 0;
outline: none;
&:after {
content: ' ';
box-shadow: 0 0 0 1px #ff3344;
width: 80px;
height: 80px;
left: -16px;
top: -16px;
position: absolute;
border-radius: 40px;
pointer-events: none;
opacity: 0;
}
}
.sticker-arrow {
position: absolute;
background: red;
transform-origin: 0 0;
left: 0;
top: 0;
&:after {
content: ' ';
background: #ff3344;
width: 24px;
height: 24px;
transform-origin: 0 0;
transform: rotate(-45deg);
left: 0;
top: 0;
position: absolute;
}
}
.sticker-delete {
position: absolute;
width: 24px;
height: 24px;
background: red;
border-radius: 24px;
transition: transform 500ms;
transform: scale(0);
opacity: 1;
pointer-events: none;
&:hover {
transform: scale(1.2) !important;
}
}
.leaflet-control-container .leaflet-routing-container-hide {
display: none;
}
.router-waypoint {
width: 40px;
height: 40px;
margin-left: -20px;
margin-top: -20px;
outline: none;
z-index: 10001;
&:after {
content: ' ';
display: block;
width: 20px;
height: 20px;
border-radius: 10px;
box-shadow: 0 0 0 2px #4597d0;
margin-left: 10px;
margin-top: 10px;
}
}