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

stickers with ability to drag them

Browse source
This commit is contained in:
Fedor Katurov 2018-08-15 16:18:49 +07:00
parent 5f30df6f48
commit b8434c32e7
19 changed files with 460 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

60
src/styles/mapScreen.js Normal file
View file

@ -0,0 +1,60 @@
import styled, { css } from 'styled-components';
const vertexMixin = css`
.leaflet-vertex-icon, .leaflet-middle-icon {
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;
}
`;
const stickers = css`
.sticker-label {
width: 48px;
height: 48px;
position: absolute;
background: white;
border-radius: 32px;
left: 0;
top: 0;
}
.sticker-arrow {
width: 24px;
height: 24px;
position: absolute;
background: red;
}
`;
export const MapScreen = styled.div.attrs({ id: 'map' })`
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
left: 0;
top: 0;
${vertexMixin}
${stickers}
`;