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

35
src/styles/button.less Normal file
View file

@ -0,0 +1,35 @@
.button {
background: #444444;
padding: 4px 16px;
height: 18px;
line-height: 1em;
border-radius: 2px;
font-family: sans-serif;
font-size: 14px;
display: inline-flex;
align-items: center;
cursor: pointer;
user-select: none;
&.primary {
background: #3c78db;
}
&.danger {
background: #ed2f3b;
}
}
.button-group {
.button {
border-radius: 0;
&:first-child {
border-radius: 4px 0 0 4px;
}
&:last-child {
border-radius: 0 4px 4px 0;
}
}
}

35
src/styles/controls.less
View file

@ -1,35 +0,0 @@
#control-screen {
position: fixed;
right: 10px;
bottom: 0px;
height: 48px;
min-width: 120px;
background: #333333;
z-index: 2;
color: white;
border-radius: 4px 4px 0 0;
padding: 0 4px 0 4px;
button {
border: none;
background: transparent;
width: 48px;
height: 48px;
padding: 8px;
outline: none;
cursor: pointer;
&.active {
svg {
fill: url(#activeButtonGradient);
stroke: url(#activeButtonGradient);
}
}
svg {
fill: white;
stroke: white;
}
}
}

13
src/styles/controlsScreen.js
View file

@ -1,13 +0,0 @@
import styled from 'styled-components';
export const ControlsScreen = styled.div`
position: fixed;
right: 10px;
bottom: 10px;
height: 48px;
min-width: 120px;
background: #333333;
border-radius: 2px;
z-index: 2;
color: white;
`;

26
src/styles/main.less Normal file
View file

@ -0,0 +1,26 @@
@import 'map.less';
@import 'panel.less';
@import 'router.less';
@import 'stickers.less';
@import 'button.less';
body {
font-family: sans-serif;
font-size: 14px;
}
.gray {
opacity: 0.75;
}
.big {
font-size: 14px;
}
.small {
font-size: 12px;
}
.white {
color: white;
}

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;
}
}

162
src/styles/mapScreen.js
View file

@ -1,162 +0,0 @@
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 routerMixin = css`
.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;
}
}
`;
const stickers = css`
.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;
}
:hover {
.sticker-delete {
transform: scale(1);
pointer-events: all;
}
::before {
opacity: 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: ${24 - 40}px;
top: ${24 - 40}px;
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;
}
}
`;
export const MapScreen = styled.div.attrs({ id: 'map' })`
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
left: 0;
top: 0;
${vertexMixin}
${stickers}
${routerMixin}
`;

92
src/styles/panel.less Normal file
View file

@ -0,0 +1,92 @@
.control-bar {
background: #333333;
border-radius: 3px;
display: flex;
box-shadow: rgba(0,0,0,0.3) 0 2px 0, inset rgba(255, 255, 255, 0.05) 1px 1px;
}
.control-sep {
height: 44px;
background: #222222;
width: 3px;
}
.panel {
position: fixed;
left: 10px;
bottom: 10px;
z-index: 3;
color: white;
display: flex;
align-items: center;
&.right {
left: auto;
right: 10px;
}
button {
border: none;
background: transparent;
padding: 8px;
outline: none;
cursor: pointer;
display: inline-flex;
color: white;
align-items: center;
transition: background-color 500ms;
height: 48px;
box-sizing: border-box;
&:hover {
background: rgba(100, 100, 100, 0.2);
}
span {
margin-right: 8px;
font-size: 14px;
font-weight: 200;
margin-left: 8px;
}
&:last-child {
border-radius: 0 4px 4px 0;
}
&.active {
svg {
fill: url(#activeButtonGradient);
stroke: url(#activeButtonGradient);
}
}
&.highlighted {
background: linear-gradient(150deg, #05a4ff, #7137c8);
}
svg {
fill: white;
stroke: white;
display: inline;
}
}
}
.panel-separator {
height: 48px;
width: 4px;
background: #222222;
}
#control-dialog {
background: #222222;
position: absolute;
right: 10px;
bottom: 10px;
border-radius: 3px;
z-index: 2;
color: white;
box-sizing: border-box;
padding-bottom: 48px;
box-shadow: rgba(0,0,0,0.3) 0 2px 0, inset rgba(255, 255, 255, 0.05) 1px 1px;
}

36
src/styles/router.less Normal file
View file

@ -0,0 +1,36 @@
.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;
}
}
.router-helper {
width: 500px;
padding: 10px;
font-weight: 200;
font-size: 14px;
display: flex;
}
.router-helper__text {
width: 100%;
}
.router-helper__buttons {
display: flex;
align-items: center;
}

95
src/styles/stickers.less Normal file
View file

@ -0,0 +1,95 @@
.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(1);
opacity: 1;
pointer-events: none;
&:hover {
transform: scale(1.2) !important;
}
}
.leaflet-control-container .leaflet-routing-container-hide {
display: none;
}