mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-25 02:56:41 +07:00
made global less styles
This commit is contained in:
Fedor Katurov
parent
c2f42ea721
commit
4e18eba558
15 changed files with 2846 additions and 2799 deletions
|
|
@ -1,70 +1,72 @@
|
||||||
.button {
|
:global {
|
||||||
background: #444444;
|
|
||||||
padding: 4px 16px;
|
|
||||||
height: 18px;
|
|
||||||
line-height: 1em;
|
|
||||||
border-radius: @button_radius;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: 1em;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
box-shadow: inset rgba(100,100,100, 0.3) 1px 0, inset rgba(0,0,0, 0.1) -1px 0;
|
|
||||||
color: white;
|
|
||||||
font-weight: 400;
|
|
||||||
border: none;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&.outline {
|
|
||||||
box-shadow: inset #444444 0 0 0 1px;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.primary {
|
|
||||||
background: #3c78db;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.danger {
|
|
||||||
background: #ed2f3b;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.success {
|
|
||||||
background: #17bf6d;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
touch-action: none;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="file"] {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-group {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
border-radius: 0;
|
background: #444444;
|
||||||
margin: 0;
|
padding: 4px 16px;
|
||||||
|
height: 18px;
|
||||||
|
line-height: 1em;
|
||||||
|
border-radius: @button_radius;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 1em;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
box-shadow: inset rgba(100, 100, 100, 0.3) 1px 0, inset rgba(0,0,0, 0.1) -1px 0;
|
||||||
|
color: white;
|
||||||
|
font-weight: 400;
|
||||||
|
border: none;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
&:first-child {
|
&.outline {
|
||||||
border-radius: @button_radius 0 0 @button_radius;
|
box-shadow: inset #444444 0 0 0 1px;
|
||||||
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&.primary {
|
||||||
border-radius: 0 @button_radius @button_radius 0;
|
background: #3c78db;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.danger {
|
||||||
|
background: #ed2f3b;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.success {
|
||||||
|
background: #17bf6d;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
touch-action: none;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="file"] {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-group {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.button {
|
||||||
|
border-radius: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
border-radius: @button_radius 0 0 @button_radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-radius: 0 @button_radius @button_radius 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,99 +1,101 @@
|
||||||
.gpx-title {
|
:global {
|
||||||
display: flex;
|
.gpx-title {
|
||||||
flex-direction: row;
|
display: flex;
|
||||||
padding: 10px;
|
flex-direction: row;
|
||||||
}
|
padding: 10px;
|
||||||
|
|
||||||
.gpx-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
flex-direction: row;
|
|
||||||
padding: 5px 10px;
|
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
&_disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__title {
|
.gpx-row {
|
||||||
flex: 1;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
margin: 0 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__buttons {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: flex-start;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 5px 10px;
|
||||||
|
min-width: 0;
|
||||||
|
|
||||||
svg {
|
&_disabled {
|
||||||
fill: white;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
> div {
|
&__title {
|
||||||
padding: 0 5px;
|
flex: 1;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin: 0 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buttons {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
> div {
|
||||||
|
padding: 0 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__color {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
// span {
|
||||||
|
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gpx-buttons {
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
margin: 2.5px 0;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
padding-right: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
padding-left: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&__color {
|
& > .button {
|
||||||
width: 8px;
|
width: 100%;
|
||||||
height: 8px;
|
box-sizing: border-box;
|
||||||
border-radius: 100%;
|
position: relative;
|
||||||
cursor: pointer;
|
height: 32px;
|
||||||
|
align-items: center;
|
||||||
// span {
|
justify-content: center;
|
||||||
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.gpx-buttons {
|
|
||||||
padding: 10px;
|
|
||||||
|
|
||||||
& > * {
|
|
||||||
margin: 2.5px 0;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& > .button {
|
.gpx-confirm {
|
||||||
width: 100%;
|
position: absolute;
|
||||||
|
bottom: 5%;
|
||||||
|
left: 5%;
|
||||||
|
z-index: 5;
|
||||||
|
width: 90%;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: @panel_radius;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
position: relative;
|
background: lighten(@bar_background, 10%);
|
||||||
height: 32px;
|
box-shadow: rgba(0, 0, 0, 0.5) 0 5px 5px 10px;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.gpx-confirm {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 5%;
|
|
||||||
left: 5%;
|
|
||||||
z-index: 5;
|
|
||||||
width: 90%;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: @panel_radius;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background: lighten(@bar_background, 10%);
|
|
||||||
box-shadow: rgba(0,0,0,0.5) 0 5px 5px 10px;
|
|
||||||
}
|
|
||||||
|
|
@ -1,24 +1,24 @@
|
||||||
.logo-preview {
|
:global {
|
||||||
position: fixed;
|
.logo-preview {
|
||||||
right: 0;
|
position: fixed;
|
||||||
bottom: 58px;
|
right: 0;
|
||||||
|
bottom: 58px;
|
||||||
|
|
||||||
width: 400px;
|
width: 400px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
background: 100% 100% no-repeat;
|
background: 100% 100% no-repeat;
|
||||||
|
|
||||||
&.top {
|
&.top {
|
||||||
background-position: 100% 0;
|
background-position: 100% 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: @mobile_breakpoint) {
|
@media (max-width: @mobile_breakpoint) {
|
||||||
transform: scale(0.5);
|
transform: scale(0.5);
|
||||||
transform-origin: 100% 100%;
|
transform-origin: 100% 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,153 +15,159 @@
|
||||||
@import 'switch.less';
|
@import 'switch.less';
|
||||||
@import 'gpx.less';
|
@import 'gpx.less';
|
||||||
|
|
||||||
body {
|
:global {
|
||||||
font-family: 'Rubik', sans-serif;
|
body {
|
||||||
font-size: 15px;
|
font-family: 'Rubik', sans-serif;
|
||||||
// letter-spacing: 0.4px;
|
font-size: 15px;
|
||||||
padding: 0;
|
// letter-spacing: 0.4px;
|
||||||
font-weight: 400;
|
padding: 0;
|
||||||
-webkit-font-smoothing: antialiased;
|
font-weight: 400;
|
||||||
}
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
.gray {
|
.gray {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.big {
|
.big {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upper {
|
.upper {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small {
|
.small {
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.white {
|
.white {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.success {
|
.success {
|
||||||
color: @color_success;
|
color: @color_success;
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary {
|
.primary {
|
||||||
color: @color_primary;
|
color: @color_primary;
|
||||||
}
|
}
|
||||||
|
|
||||||
.danger {
|
.danger {
|
||||||
color: @color_danger;
|
color: @color_danger;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cursor-tooltip {
|
.cursor-tooltip {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 4px;
|
top: 4px;
|
||||||
left: 4px;
|
left: 4px;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
stroke-width: 4;
|
||||||
|
fill: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: none) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cursor-icon-sticker {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
stroke-width: 4;
|
background-size: cover;
|
||||||
fill: black;
|
background-position: 0 50%;
|
||||||
}
|
|
||||||
|
|
||||||
@media(hover: none) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cursor-icon-sticker {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: 0 50%;
|
|
||||||
position: absolute;
|
|
||||||
top: -30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.track-vertical {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 10px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thumb-vertical {
|
|
||||||
position: absolute;
|
|
||||||
width: 20px !important;
|
|
||||||
left: -10px;
|
|
||||||
border-radius: 4px 0 0 4px;
|
|
||||||
transition: background 250ms;
|
|
||||||
cursor: grab;
|
|
||||||
|
|
||||||
&:hover, &:active {
|
|
||||||
background: rgba(255, 255, 255, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: ' ';
|
|
||||||
width: 5px;
|
|
||||||
height: 100%;
|
|
||||||
display: block;
|
|
||||||
right: 0;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
top: -30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-vertical {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumb-vertical {
|
||||||
|
position: absolute;
|
||||||
|
width: 20px !important;
|
||||||
|
left: -10px;
|
||||||
border-radius: 4px 0 0 4px;
|
border-radius: 4px 0 0 4px;
|
||||||
background: rgba(255, 255, 255, 0.5);
|
transition: background 250ms;
|
||||||
|
cursor: grab;
|
||||||
|
|
||||||
|
&:hover, &:active {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: ' ';
|
||||||
|
width: 5px;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
right: 0;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 4px 0 0 4px;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pointer {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: @mobile_breakpoint) {
|
||||||
|
.desktop-only {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: @mobile_breakpoint) {
|
||||||
|
.mobile-only {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font: inherit;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 400;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: none;
|
||||||
|
height: 2px;
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 5px 10px 5px 10px;
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: @panel_radius;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relative {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-end {
|
||||||
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pointer {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: @mobile_breakpoint) {
|
|
||||||
.desktop-only { display: none; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: @mobile_breakpoint) {
|
|
||||||
.mobile-only { display: none; }
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font: inherit;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 400;
|
|
||||||
text-transform: uppercase;
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
border: none;
|
|
||||||
height: 2px;
|
|
||||||
background: rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
width: 100%;
|
|
||||||
padding: 5px 10px 5px 10px;
|
|
||||||
background: rgba(0, 0, 0, 0.3);
|
|
||||||
border-radius: @panel_radius;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
color: white;
|
|
||||||
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 200;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relative {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.justify-end {
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,366 +1,367 @@
|
||||||
#map {
|
:global {
|
||||||
width: 50% !important;
|
#map {
|
||||||
height: 100%;
|
width: 50% !important;
|
||||||
position: absolute;
|
height: 100%;
|
||||||
z-index: 1;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
cursor: crosshair;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-control-zoom {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-touch .leaflet-bar a {
|
|
||||||
border-radius: @panel_radius !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes vertex_spin {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: scale(1.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-vertex-drag-helper {
|
|
||||||
pointer-events: none !important;
|
|
||||||
background: fade(red, 50%);
|
|
||||||
border-radius: 12px;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: ' ';
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
border: 2px solid @red_secondary;
|
|
||||||
border-radius: 24px;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -9px;
|
z-index: 1;
|
||||||
left: -9px;
|
|
||||||
animation: vertex_spin 500ms infinite linear alternate;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertex-icon-mixin(@left, @right) {
|
|
||||||
&::after {
|
|
||||||
content: ' ';
|
|
||||||
position: absolute;
|
|
||||||
top: 4px;
|
|
||||||
left: @left;
|
|
||||||
right: @right;
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
background: white;
|
|
||||||
border-radius: 8px;
|
|
||||||
transform: scale(1);
|
|
||||||
transition: transform 150ms;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-vertex-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;
|
|
||||||
position: absolute;
|
|
||||||
cursor: grab;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
background: none;
|
|
||||||
content: ' ';
|
|
||||||
position: absolute;
|
|
||||||
transform: translate(-4px, -4px);
|
|
||||||
border-radius: 16px;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
cursor: crosshair;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: @mobile_breakpoint) {
|
.leaflet-control-zoom {
|
||||||
&::before {
|
display: none;
|
||||||
width: 32px;
|
}
|
||||||
height: 32px;
|
|
||||||
transform: translate(-8px, -8px);
|
.leaflet-touch .leaflet-bar a {
|
||||||
background: rgba(255, 50, 0, 0.3);
|
border-radius: @panel_radius !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes vertex_spin {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.vertex-icon-mixin(4px, auto);
|
.leaflet-vertex-drag-helper {
|
||||||
|
pointer-events: none !important;
|
||||||
&:hover {
|
background: fade(red, 50%);
|
||||||
opacity: 1;
|
border-radius: 12px;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-arrow {
|
|
||||||
position: absolute;
|
|
||||||
left: -18px;
|
|
||||||
top: -18px;
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-arrow-icon {
|
|
||||||
pointer-events: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-km-marker,
|
|
||||||
.leaflet-km-marker-2 {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 0 !important;
|
|
||||||
|
|
||||||
.leaflet-km-dist {
|
|
||||||
background: @red_secondary;
|
|
||||||
color: white;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
height: 14px;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: relative;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
font-weight: bold;
|
|
||||||
padding: 0 2px;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
position: absolute;
|
|
||||||
top: -16px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.reverse {
|
|
||||||
svg {
|
|
||||||
transform: translate(-50%, 0) rotate(180deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-marker {
|
|
||||||
svg {
|
|
||||||
position: absolute;
|
|
||||||
left: -4px;
|
|
||||||
top: -4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.end-marker {
|
|
||||||
.leaflet-km-dist {
|
|
||||||
left: auto;
|
|
||||||
right: -3px;
|
|
||||||
top: -2px;
|
|
||||||
position: absolute;
|
|
||||||
z-index: -10;
|
|
||||||
padding: 1px 15px 1px 6px;
|
|
||||||
border-radius: 10px;
|
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: ' ';
|
content: ' ';
|
||||||
width: 8px;
|
width: 24px;
|
||||||
height: 8px;
|
height: 24px;
|
||||||
border-radius: 4px;
|
border: 2px solid @red_secondary;
|
||||||
background: white;
|
border-radius: 24px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 4px;
|
top: -9px;
|
||||||
top: 4px;
|
left: -9px;
|
||||||
|
animation: vertex_spin 500ms infinite linear alternate;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.right {
|
.vertex-icon-mixin(@left, @right) {
|
||||||
.leaflet-km-dist {
|
&::after {
|
||||||
padding: 2px 4px 2px 16px;
|
content: ' ';
|
||||||
left: -3px;
|
position: absolute;
|
||||||
right: auto;
|
top: 4px;
|
||||||
|
left: @left;
|
||||||
|
right: @right;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
transform: scale(1);
|
||||||
|
transition: transform 150ms;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&::after {
|
.leaflet-vertex-icon {
|
||||||
left: 5px;
|
outline: none !important;
|
||||||
right: auto;
|
border-radius: 10px;
|
||||||
|
opacity: 1;
|
||||||
|
border: none;
|
||||||
|
width: 16px !important;
|
||||||
|
height: 16px !important;
|
||||||
|
margin-left: -8px !important;
|
||||||
|
margin-top: -8px !important;
|
||||||
|
background: transparent;
|
||||||
|
position: absolute;
|
||||||
|
cursor: grab;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background: none;
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
transform: translate(-4px, -4px);
|
||||||
|
border-radius: 16px;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: @mobile_breakpoint) {
|
||||||
|
&::before {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
transform: translate(-8px, -8px);
|
||||||
|
background: rgba(255, 50, 0, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertex-icon-mixin(4px, auto);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-arrow {
|
||||||
|
position: absolute;
|
||||||
|
left: -18px;
|
||||||
|
top: -18px;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-arrow-icon {
|
||||||
|
pointer-events: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-km-marker,
|
||||||
|
.leaflet-km-marker-2 {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 0 !important;
|
||||||
|
|
||||||
|
.leaflet-km-dist {
|
||||||
|
background: @red_secondary;
|
||||||
|
color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
height: 14px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0 2px;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
position: absolute;
|
||||||
|
top: -16px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.reverse {
|
||||||
|
svg {
|
||||||
|
transform: translate(-50%, 0) rotate(180deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.router-marker {
|
.start-marker {
|
||||||
div {
|
svg {
|
||||||
background: @router_line;
|
position: absolute;
|
||||||
color: white;
|
left: -4px;
|
||||||
left: auto;
|
top: -4px;
|
||||||
right: 15px;
|
|
||||||
// transform: translate(50%, 0);
|
|
||||||
top: -3px;
|
|
||||||
position: absolute;
|
|
||||||
z-index: -10;
|
|
||||||
padding: 0 6px 0 6px;
|
|
||||||
border-radius: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.right {
|
|
||||||
div {
|
|
||||||
right: auto;
|
|
||||||
left: 15px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-km-marker-2 {
|
.end-marker {
|
||||||
.leaflet-km-dist {
|
.leaflet-km-dist {
|
||||||
background: green;
|
left: auto;
|
||||||
|
right: -3px;
|
||||||
|
top: -2px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: -10;
|
||||||
|
padding: 1px 15px 1px 6px;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: ' ';
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: white;
|
||||||
|
position: absolute;
|
||||||
|
right: 4px;
|
||||||
|
top: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.right {
|
||||||
|
.leaflet-km-dist {
|
||||||
|
padding: 2px 4px 2px 16px;
|
||||||
|
left: -3px;
|
||||||
|
right: auto;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
left: 5px;
|
||||||
|
right: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.touch-hinter-poly {
|
.router-marker {
|
||||||
stroke: rgba(255, 50, 0, 0.1);
|
div {
|
||||||
cursor: grab;
|
background: @router_line;
|
||||||
|
color: white;
|
||||||
|
left: auto;
|
||||||
|
right: 15px;
|
||||||
|
// transform: translate(50%, 0);
|
||||||
|
top: -3px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: -10;
|
||||||
|
padding: 0 6px 0 6px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: @mobile_breakpoint) {
|
&.right {
|
||||||
stroke: rgba(255, 50, 0, 0.2);
|
div {
|
||||||
|
right: auto;
|
||||||
|
left: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-control-container .leaflet-routing-container-hide {
|
.leaflet-km-marker-2 {
|
||||||
display: none;
|
.leaflet-km-dist {
|
||||||
}
|
background: green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.leaflet-bar {
|
.touch-hinter-poly {
|
||||||
box-shadow: @bar_shadow !important;
|
stroke: rgba(255, 50, 0, 0.1);
|
||||||
border: none !important;
|
cursor: grab;
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-bar a {
|
@media (max-width: @mobile_breakpoint) {
|
||||||
background: @bar_background;
|
stroke: rgba(255, 50, 0, 0.2);
|
||||||
color: white;
|
}
|
||||||
text-shadow: none;
|
}
|
||||||
user-select: none;
|
|
||||||
border-bottom: none;
|
|
||||||
|
|
||||||
&:hover {
|
.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;
|
background: @bar_background;
|
||||||
color: white;
|
color: white;
|
||||||
|
text-shadow: none;
|
||||||
|
user-select: none;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.location-marker {
|
&:hover {
|
||||||
width: 20px;
|
background: @bar_background;
|
||||||
height: 3px;
|
color: white;
|
||||||
margin-left: -10px;
|
border-bottom: none;
|
||||||
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 {
|
.location-marker {
|
||||||
content: ' ';
|
width: 20px;
|
||||||
display: block;
|
height: 3px;
|
||||||
width: 3px;
|
margin-left: -10px;
|
||||||
height: 20px;
|
margin-top: -2px;
|
||||||
background: @red_secondary;
|
|
||||||
left: 8.5px;
|
|
||||||
top: -9px;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-top {
|
|
||||||
top: 42px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-div-icon {
|
|
||||||
background: none !important;
|
|
||||||
border: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-marker-cluster {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
background: @cluster_small;
|
|
||||||
border-radius: 16px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: white;
|
|
||||||
box-shadow: fade(@cluster_small, 70%) 0 0 0 5px;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 13px;
|
|
||||||
transform: translate(-12px, -12px);
|
|
||||||
transition: box-shadow 250ms;
|
|
||||||
position: relative;
|
|
||||||
outline: none;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
box-shadow: fade(@cluster_small, 70%) 0 0 0 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
outline: none;
|
outline: none;
|
||||||
position: absolute;
|
z-index: 10001;
|
||||||
right: -7px;
|
background: @red_secondary;
|
||||||
bottom: 11px;
|
|
||||||
|
&: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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-div-icon {
|
||||||
|
background: none !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-marker-cluster {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
background: @cluster_small;
|
background: @cluster_small;
|
||||||
width: 16px;
|
border-radius: 16px;
|
||||||
height: 16px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border-radius: 8px;
|
color: white;
|
||||||
font-size: 11px;
|
box-shadow: fade(@cluster_small, 70%) 0 0 0 5px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 13px;
|
||||||
|
transform: translate(-12px, -12px);
|
||||||
|
transition: box-shadow 250ms;
|
||||||
|
position: relative;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: fade(@cluster_small, 70%) 0 0 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
outline: none;
|
||||||
|
position: absolute;
|
||||||
|
right: -7px;
|
||||||
|
bottom: 11px;
|
||||||
|
background: @cluster_small;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#canvas {
|
||||||
|
background: #eeeeee;
|
||||||
|
z-index: 0;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-pane {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-location {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
fill: @bar_background;
|
||||||
|
stroke: white;
|
||||||
|
stroke-width: 0.2px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#canvas {
|
|
||||||
background: #eeeeee;
|
|
||||||
z-index: 0;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-pane {
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.current-location {
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
fill: @bar_background;
|
|
||||||
stroke: white;
|
|
||||||
stroke-width: 0.2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,16 +1,18 @@
|
||||||
.progress {
|
:global {
|
||||||
width: 100%;
|
.progress {
|
||||||
position: relative;
|
width: 100%;
|
||||||
height: 5px;
|
position: relative;
|
||||||
background: #111111;
|
height: 5px;
|
||||||
border-radius: @panel_radius;
|
background: #111111;
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.bar {
|
|
||||||
width: 30%;
|
|
||||||
background: linear-gradient(270deg, @blue_primary, @blue_secondary);
|
|
||||||
height: 100%;
|
|
||||||
border-radius: @panel_radius;
|
border-radius: @panel_radius;
|
||||||
transition: width 500ms;
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.bar {
|
||||||
|
width: 30%;
|
||||||
|
background: linear-gradient(270deg, @blue_primary, @blue_secondary);
|
||||||
|
height: 100%;
|
||||||
|
border-radius: @panel_radius;
|
||||||
|
transition: width 500ms;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,53 +1,55 @@
|
||||||
.renderer-shade {
|
:global {
|
||||||
position: fixed;
|
.renderer-shade {
|
||||||
top: 0;
|
position: fixed;
|
||||||
left: 0;
|
top: 0;
|
||||||
width: 100%;
|
left: 0;
|
||||||
height: 100%;
|
width: 100%;
|
||||||
z-index: 1000;
|
height: 100%;
|
||||||
background: rgba(0, 0, 0, 0.9);
|
z-index: 1000;
|
||||||
display: flex;
|
background: rgba(0, 0, 0, 0.9);
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding-bottom: 80px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
position: relative;
|
padding-bottom: 80px;
|
||||||
transition: opacity 250ms;
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
transition: opacity 250ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
img#rendererOutput {
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.croppr-region {
|
||||||
|
box-shadow: rgba(255, 255, 255, 0.2) 0 0 0 6px, rgba(0, 0, 0, 0.3) 0 0 0 1px;
|
||||||
|
border: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.croppr-handle {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: none;
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
img#rendererOutput {
|
.renderer-logo {
|
||||||
width: 300px;
|
|
||||||
height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.croppr-region {
|
|
||||||
box-shadow: rgba(255, 255, 255, 0.2) 0 0 0 6px, rgba(0, 0, 0, 0.3) 0 0 0 1px;
|
|
||||||
border: none;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
bottom: 0;
|
||||||
left: 0;
|
right: 0;
|
||||||
overflow: hidden;
|
pointer-events: none;
|
||||||
}
|
|
||||||
|
|
||||||
.croppr-handle {
|
transform-origin: 100% 100%;
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: none;
|
|
||||||
box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.renderer-logo {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
transform-origin: 100% 100%;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,41 +1,43 @@
|
||||||
.router-waypoint {
|
:global {
|
||||||
width: 40px;
|
.router-waypoint {
|
||||||
height: 40px;
|
width: 40px;
|
||||||
margin-left: -20px;
|
height: 40px;
|
||||||
margin-top: -20px;
|
margin-left: -20px;
|
||||||
outline: none;
|
margin-top: -20px;
|
||||||
z-index: 10001;
|
outline: none;
|
||||||
|
z-index: 10001;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: ' ';
|
||||||
|
display: block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 0 0 2px @router_line;
|
||||||
|
position: absolute;
|
||||||
|
left: 10px;
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: ' ';
|
||||||
|
display: block;
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 0 0 2px @router_line;
|
||||||
|
background: @router_line;
|
||||||
|
position: absolute;
|
||||||
|
left: 18px;
|
||||||
|
top: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: ' ';
|
|
||||||
display: block;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 0 0 2px @router_line;
|
|
||||||
position: absolute;
|
|
||||||
left: 10px;
|
|
||||||
top: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before {
|
.router-helper {
|
||||||
content: ' ';
|
|
||||||
display: block;
|
|
||||||
width: 5px;
|
|
||||||
height: 5px;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 0 0 2px @router_line;
|
|
||||||
background: @router_line;
|
|
||||||
position: absolute;
|
|
||||||
left: 18px;
|
|
||||||
top: 18px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
.router-helper__button {
|
||||||
|
white-space: nowrap;
|
||||||
.router-helper {
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.router-helper__button {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,173 +1,185 @@
|
||||||
.save-helper {
|
:global {
|
||||||
padding: 0;
|
.save-helper {
|
||||||
flex-direction: column;
|
padding: 0;
|
||||||
}
|
flex-direction: column;
|
||||||
|
|
||||||
.save-title {
|
|
||||||
padding: 10px;
|
|
||||||
width: 100%;
|
|
||||||
background: linear-gradient(175deg, #abc837 -50%, #009c80 150%);
|
|
||||||
flex-direction: column;
|
|
||||||
border-radius: @panel_radius @panel_radius 0 0;
|
|
||||||
font-weight: 200;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes jump {
|
|
||||||
0% { transform: translate3d(0, 0, 0) scale(0.5); }
|
|
||||||
100% { transform: translate3d(0, -20px, 0) scale(1); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.save-loader {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: @loading_shade;
|
|
||||||
z-index: 2;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: opacity 250ms;
|
|
||||||
opacity: 0;
|
|
||||||
touch-action: none;
|
|
||||||
pointer-events: none;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 1.2em;
|
|
||||||
color: fade(white, 70%);
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: white;
|
|
||||||
|
|
||||||
&:nth-child(2) { animation-delay: 200ms; }
|
|
||||||
&:nth-child(3) { animation-delay: 400ms; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
.save-title {
|
||||||
opacity: 1;
|
padding: 10px;
|
||||||
touch-action: auto;
|
width: 100%;
|
||||||
pointer-events: all;
|
background: linear-gradient(175deg, #abc837 -50%, #009c80 150%);
|
||||||
|
flex-direction: column;
|
||||||
|
border-radius: @panel_radius @panel_radius 0 0;
|
||||||
|
font-weight: 200;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
svg {
|
@keyframes jump {
|
||||||
animation: jump infinite alternate 600ms;
|
0% {
|
||||||
|
transform: translate3d(0, 0, 0) scale(0.5);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate3d(0, -20px, 0) scale(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.save-description {
|
.save-loader {
|
||||||
padding: 5px 10px;
|
position: absolute;
|
||||||
}
|
top: 0;
|
||||||
|
left: 0;
|
||||||
.save-title-input {
|
|
||||||
background: rgba(0, 0, 0, 0.3);
|
|
||||||
border-radius: @panel_radius;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
input {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 5px;
|
height: 100%;
|
||||||
background: transparent;
|
background: @loading_shade;
|
||||||
border: none;
|
z-index: 2;
|
||||||
outline: none;
|
display: flex;
|
||||||
color: white;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: opacity 250ms;
|
||||||
|
opacity: 0;
|
||||||
|
touch-action: none;
|
||||||
|
pointer-events: none;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 1.2em;
|
||||||
|
color: fade(white, 70%);
|
||||||
|
|
||||||
font-family: inherit;
|
svg {
|
||||||
font-size: 14px;
|
fill: white;
|
||||||
font-weight: 200;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.save-title-label {
|
&:nth-child(2) {
|
||||||
display: flex;
|
animation-delay: 200ms;
|
||||||
padding: 5px 10px;
|
}
|
||||||
background: rgba(0,0,0,0.1);
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.save-address-input {
|
&:nth-child(3) {
|
||||||
background: rgba(0, 0, 0, 0.2);
|
animation-delay: 400ms;
|
||||||
border-radius: 2px;
|
}
|
||||||
display: flex;
|
}
|
||||||
margin-bottom: 5px;
|
|
||||||
|
|
||||||
input {
|
&.active {
|
||||||
padding: 5px 5px 5px 2px;
|
opacity: 1;
|
||||||
background: transparent;
|
touch-action: auto;
|
||||||
}
|
pointer-events: all;
|
||||||
}
|
|
||||||
|
|
||||||
.save-address-label {
|
svg {
|
||||||
display: flex;
|
animation: jump infinite alternate 600ms;
|
||||||
padding: 5px 0 5px 10px;
|
}
|
||||||
height: 100%;
|
}
|
||||||
opacity: 0.5;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.save-address-copy {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
padding: 0 5px;
|
|
||||||
border-radius: 0 @panel_radius @panel_radius 0;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: background-color 250ms;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
.save-description {
|
||||||
fill: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.save-text {
|
|
||||||
padding: 10px;
|
|
||||||
line-height: 1.1em;
|
|
||||||
min-height: 2.2em;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.save-buttons {
|
|
||||||
display: flex;
|
|
||||||
padding: 0px;
|
|
||||||
margin-top: 20px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
|
|
||||||
.button {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.save-buttons-text {
|
|
||||||
flex: 1;
|
|
||||||
padding: 0 10px 2px 10px;
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.switch {
|
|
||||||
margin-right: 0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.save-description {
|
|
||||||
textarea {
|
|
||||||
background: rgba(0,0,0,0.3);
|
|
||||||
outline: none;
|
|
||||||
border: none;
|
|
||||||
border-radius: 3px;
|
|
||||||
width: 100%;
|
|
||||||
resize: none;
|
|
||||||
color: inherit;
|
|
||||||
font: inherit;
|
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
font-size: 14px;
|
}
|
||||||
|
|
||||||
|
.save-title-input {
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: @panel_radius;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 5px;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-title-label {
|
||||||
|
display: flex;
|
||||||
|
padding: 5px 10px;
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-address-input {
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
border-radius: 2px;
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
|
||||||
|
input {
|
||||||
|
padding: 5px 5px 5px 2px;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-address-label {
|
||||||
|
display: flex;
|
||||||
|
padding: 5px 0 5px 10px;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0.5;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-address-copy {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
padding: 0 5px;
|
||||||
|
border-radius: 0 @panel_radius @panel_radius 0;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: background-color 250ms;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-text {
|
||||||
|
padding: 10px;
|
||||||
|
line-height: 1.1em;
|
||||||
|
min-height: 2.2em;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-buttons {
|
||||||
|
display: flex;
|
||||||
|
padding: 0px;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
|
||||||
|
.button {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-buttons-text {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0 10px 2px 10px;
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.switch {
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-description {
|
||||||
|
textarea {
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
border-radius: 3px;
|
||||||
|
width: 100%;
|
||||||
|
resize: none;
|
||||||
|
color: inherit;
|
||||||
|
font: inherit;
|
||||||
|
padding: 5px 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-controls {
|
||||||
|
padding: 5px 10px;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.save-controls {
|
|
||||||
padding: 5px 10px;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -11,329 +11,334 @@
|
||||||
@ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1);
|
@ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1);
|
||||||
@ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
@ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||||
|
|
||||||
.borderBox() {
|
:global {
|
||||||
box-sizing: border-box;
|
.borderBox() {
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{prefixClass} {
|
* {
|
||||||
position: relative;
|
box-sizing: border-box;
|
||||||
height: 40px;
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
|
||||||
padding: 15px 0;
|
|
||||||
// width: 100%;
|
|
||||||
margin: 8px;
|
|
||||||
border-radius: @border-radius-base;
|
|
||||||
touch-action: none;
|
|
||||||
|
|
||||||
.borderBox();
|
|
||||||
|
|
||||||
&-rail {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
|
||||||
height: 4px;
|
|
||||||
border-radius: @border-radius-base;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-track {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
height: 4px;
|
|
||||||
border-radius: @border-radius-base;
|
|
||||||
background: linear-gradient(270deg, @red_secondary, @blue_secondary);
|
|
||||||
// background-size: 320px 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-handle {
|
|
||||||
position: absolute;
|
|
||||||
margin-left: -7px;
|
|
||||||
margin-top: -5px;
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
cursor: -webkit-grab;
|
|
||||||
cursor: grab;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: solid 2px tint(@primary-color, 50%);
|
|
||||||
background-color: #fff;
|
|
||||||
touch-action: pan-x;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
width: 40px;
|
|
||||||
height: 50px;
|
|
||||||
position: absolute;
|
|
||||||
left: -15px;
|
|
||||||
top: -16px;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: black;
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
// border-color: tint(@primary-color, 20%);
|
|
||||||
box-shadow: 0 0 0 4px tint(@primary-color, 50%);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-click-focused:focus {
|
|
||||||
// border-color: tint(@primary-color, 50%);
|
|
||||||
box-shadow: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: tint(@primary-color, 20%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
border-color: tint(@primary-color, 20%);
|
|
||||||
box-shadow: 0 0 5px tint(@primary-color, 20%);
|
|
||||||
cursor: -webkit-grabbing;
|
|
||||||
cursor: grabbing;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-mark {
|
|
||||||
position: absolute;
|
|
||||||
top: 18px;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 12px;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-mark-text {
|
|
||||||
position: absolute;
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
color: rgba(255, 255, 255, 0.3);
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-step {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 4px;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-dot {
|
|
||||||
position: absolute;
|
|
||||||
bottom: -2;
|
|
||||||
margin-left: -0.5px;
|
|
||||||
width: 1px;
|
|
||||||
height: 12px;
|
|
||||||
// border: 2px solid #e9e9e9;
|
|
||||||
background-color: black;
|
|
||||||
opacity: 0.2;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 50%;
|
|
||||||
vertical-align: middle;
|
|
||||||
&-active {
|
|
||||||
// border-color: tint(@primary-color, 50%);
|
|
||||||
background-color: white;
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-disabled {
|
|
||||||
.@{prefixClass}-track {
|
|
||||||
background-color: @disabledColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{prefixClass}-handle, .@{prefixClass}-dot {
|
|
||||||
border-color: @disabledColor;
|
|
||||||
box-shadow: none;
|
|
||||||
background-color: #fff;
|
|
||||||
cursor: not-allowed;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{prefixClass}-mark-text, .@{prefixClass}-dot, .@{prefixClass}-track {
|
|
||||||
cursor: not-allowed!important;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{prefixClass}-vertical {
|
|
||||||
width: 14px;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0 5px;
|
|
||||||
|
|
||||||
.@{prefixClass} {
|
.@{prefixClass} {
|
||||||
|
position: relative;
|
||||||
|
height: 40px;
|
||||||
|
padding: 15px 0;
|
||||||
|
// width: 100%;
|
||||||
|
margin: 8px;
|
||||||
|
border-radius: @border-radius-base;
|
||||||
|
touch-action: none;
|
||||||
|
|
||||||
|
.borderBox();
|
||||||
|
|
||||||
&-rail {
|
&-rail {
|
||||||
height: 100%;
|
position: absolute;
|
||||||
width: 4px;
|
width: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
|
height: 4px;
|
||||||
|
border-radius: @border-radius-base;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-track {
|
&-track {
|
||||||
left: 5px;
|
position: absolute;
|
||||||
bottom: 0;
|
left: 0;
|
||||||
width: 4px;
|
height: 4px;
|
||||||
|
border-radius: @border-radius-base;
|
||||||
|
background: linear-gradient(270deg, @red_secondary, @blue_secondary);
|
||||||
|
// background-size: 320px 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-handle {
|
&-handle {
|
||||||
margin-left: -5px;
|
position: absolute;
|
||||||
margin-bottom: -7px;
|
margin-left: -7px;
|
||||||
touch-action: pan-y;
|
margin-top: -5px;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
cursor: -webkit-grab;
|
||||||
|
cursor: grab;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: solid 2px tint(@primary-color, 50%);
|
||||||
|
background-color: #fff;
|
||||||
|
touch-action: pan-x;
|
||||||
|
|
||||||
position: relative;
|
&::after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 40px;
|
||||||
|
height: 50px;
|
||||||
|
position: absolute;
|
||||||
|
left: -15px;
|
||||||
|
top: -16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: black;
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
// border-color: tint(@primary-color, 20%);
|
||||||
|
box-shadow: 0 0 0 4px tint(@primary-color, 50%);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-click-focused:focus {
|
||||||
|
// border-color: tint(@primary-color, 50%);
|
||||||
|
box-shadow: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: tint(@primary-color, 20%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
border-color: tint(@primary-color, 20%);
|
||||||
|
box-shadow: 0 0 5px tint(@primary-color, 20%);
|
||||||
|
cursor: -webkit-grabbing;
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-mark {
|
&-mark {
|
||||||
top: 0;
|
position: absolute;
|
||||||
left: 18px;
|
top: 18px;
|
||||||
height: 100%;
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 12px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-mark-text {
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
color: rgba(255, 255, 255, 0.3);
|
||||||
|
padding-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-step {
|
&-step {
|
||||||
height: 100%;
|
position: absolute;
|
||||||
width: 4px;
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-dot {
|
&-dot {
|
||||||
left: 2px;
|
position: absolute;
|
||||||
margin-bottom: -4px;
|
bottom: -2;
|
||||||
&:first-child {
|
margin-left: -0.5px;
|
||||||
margin-bottom: -4px;
|
width: 1px;
|
||||||
|
height: 12px;
|
||||||
|
// border: 2px solid #e9e9e9;
|
||||||
|
background-color: black;
|
||||||
|
opacity: 0.2;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 50%;
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
&-active {
|
||||||
|
// border-color: tint(@primary-color, 50%);
|
||||||
|
background-color: white;
|
||||||
|
opacity: 0.2;
|
||||||
}
|
}
|
||||||
&:last-child {
|
}
|
||||||
margin-bottom: -4px;
|
|
||||||
|
&-disabled {
|
||||||
|
.@{prefixClass}-track {
|
||||||
|
background-color: @disabledColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{prefixClass}-handle, .@{prefixClass}-dot {
|
||||||
|
border-color: @disabledColor;
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: #fff;
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{prefixClass}-mark-text, .@{prefixClass}-dot, .@{prefixClass}-track {
|
||||||
|
cursor: not-allowed !important;
|
||||||
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.motion-common() {
|
.@{prefixClass}-vertical {
|
||||||
animation-duration: .3s;
|
width: 14px;
|
||||||
animation-fill-mode: both;
|
height: 100%;
|
||||||
display: block !important;
|
padding: 0 5px;
|
||||||
}
|
|
||||||
|
|
||||||
.make-motion(@className, @keyframeName) {
|
.@{prefixClass} {
|
||||||
.@{className}-enter, .@{className}-appear {
|
&-rail {
|
||||||
.motion-common();
|
height: 100%;
|
||||||
animation-play-state: paused;
|
width: 4px;
|
||||||
}
|
}
|
||||||
.@{className}-leave {
|
|
||||||
.motion-common();
|
|
||||||
animation-play-state: paused;
|
|
||||||
}
|
|
||||||
.@{className}-enter.@{className}-enter-active, .@{className}-appear.@{className}-appear-active {
|
|
||||||
animation-name: ~"@{keyframeName}In";
|
|
||||||
animation-play-state: running;
|
|
||||||
}
|
|
||||||
.@{className}-leave.@{className}-leave-active {
|
|
||||||
animation-name: ~"@{keyframeName}Out";
|
|
||||||
animation-play-state: running;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.zoom-motion(@className, @keyframeName) {
|
|
||||||
.make-motion(@className, @keyframeName);
|
|
||||||
.@{className}-enter, .@{className}-appear {
|
|
||||||
transform: scale(0, 0); // need this by yiminghe
|
|
||||||
animation-timing-function: @ease-out-quint;
|
|
||||||
}
|
|
||||||
.@{className}-leave {
|
|
||||||
animation-timing-function: @ease-in-quint;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDown);
|
|
||||||
|
|
||||||
@keyframes rcSliderTooltipZoomDownIn {
|
&-track {
|
||||||
0% {
|
left: 5px;
|
||||||
opacity: 0;
|
bottom: 0;
|
||||||
transform-origin: 50% 100%;
|
width: 4px;
|
||||||
transform: scale(0, 0);
|
}
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform-origin: 50% 100%;
|
|
||||||
transform: scale(1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rcSliderTooltipZoomDownOut {
|
&-handle {
|
||||||
0% {
|
margin-left: -5px;
|
||||||
transform-origin: 50% 100%;
|
margin-bottom: -7px;
|
||||||
transform: scale(1, 1);
|
touch-action: pan-y;
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
transform-origin: 50% 100%;
|
|
||||||
transform: scale(0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{prefixClass}-tooltip {
|
position: relative;
|
||||||
position: absolute;
|
}
|
||||||
left: -9999px;
|
|
||||||
top: -9999px;
|
|
||||||
visibility: visible;
|
|
||||||
|
|
||||||
.borderBox();
|
&-mark {
|
||||||
|
top: 0;
|
||||||
|
left: 18px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
&-hidden {
|
&-step {
|
||||||
display: none;
|
height: 100%;
|
||||||
|
width: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-dot {
|
||||||
|
left: 2px;
|
||||||
|
margin-bottom: -4px;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-bottom: -4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: -4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-placement-top {
|
.motion-common() {
|
||||||
padding: @tooltip-arrow-width 0 @tooltip-distance 0;
|
animation-duration: .3s;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
display: block !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-inner {
|
.make-motion(@className, @keyframeName) {
|
||||||
padding: 6px 2px;
|
.@{className}-enter, .@{className}-appear {
|
||||||
min-width: 24px;
|
.motion-common();
|
||||||
height: 24px;
|
animation-play-state: paused;
|
||||||
font-size: 12px;
|
}
|
||||||
line-height: 1;
|
.@{className}-leave {
|
||||||
color: @tooltip-color;
|
.motion-common();
|
||||||
text-align: center;
|
animation-play-state: paused;
|
||||||
text-decoration: none;
|
}
|
||||||
background-color: @tooltip-bg;
|
.@{className}-enter.@{className}-enter-active, .@{className}-appear.@{className}-appear-active {
|
||||||
border-radius: @border-radius-base;
|
animation-name: ~"@{keyframeName}In";
|
||||||
box-shadow: 0 0 4px #d9d9d9;
|
animation-play-state: running;
|
||||||
|
}
|
||||||
|
.@{className}-leave.@{className}-leave-active {
|
||||||
|
animation-name: ~"@{keyframeName}Out";
|
||||||
|
animation-play-state: running;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.zoom-motion(@className, @keyframeName) {
|
||||||
|
.make-motion(@className, @keyframeName);
|
||||||
|
.@{className}-enter, .@{className}-appear {
|
||||||
|
transform: scale(0, 0); // need this by yiminghe
|
||||||
|
animation-timing-function: @ease-out-quint;
|
||||||
|
}
|
||||||
|
.@{className}-leave {
|
||||||
|
animation-timing-function: @ease-in-quint;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDown);
|
||||||
|
|
||||||
|
@keyframes rcSliderTooltipZoomDownIn {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform-origin: 50% 100%;
|
||||||
|
transform: scale(0, 0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform-origin: 50% 100%;
|
||||||
|
transform: scale(1, 1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-arrow {
|
@keyframes rcSliderTooltipZoomDownOut {
|
||||||
|
0% {
|
||||||
|
transform-origin: 50% 100%;
|
||||||
|
transform: scale(1, 1);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
transform-origin: 50% 100%;
|
||||||
|
transform: scale(0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{prefixClass}-tooltip {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 0;
|
left: -9999px;
|
||||||
height: 0;
|
top: -9999px;
|
||||||
border-color: transparent;
|
visibility: visible;
|
||||||
border-style: solid;
|
|
||||||
|
.borderBox();
|
||||||
|
|
||||||
|
&-hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-placement-top {
|
||||||
|
padding: @tooltip-arrow-width 0 @tooltip-distance 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-inner {
|
||||||
|
padding: 6px 2px;
|
||||||
|
min-width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1;
|
||||||
|
color: @tooltip-color;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: @tooltip-bg;
|
||||||
|
border-radius: @border-radius-base;
|
||||||
|
box-shadow: 0 0 4px #d9d9d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-arrow {
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-color: transparent;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-placement-top &-arrow {
|
||||||
|
bottom: @tooltip-distance - @tooltip-arrow-width;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -@tooltip-arrow-width;
|
||||||
|
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
|
||||||
|
border-top-color: @tooltip-arrow-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-placement-top &-arrow {
|
.range-placeholder {
|
||||||
bottom: @tooltip-distance - @tooltip-arrow-width;
|
height: 40px;
|
||||||
left: 50%;
|
padding: 15px 0;
|
||||||
margin-left: -@tooltip-arrow-width;
|
box-sizing: border-box;
|
||||||
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
|
margin: 8px;
|
||||||
border-top-color: @tooltip-arrow-color;
|
|
||||||
}
|
&::after {
|
||||||
}
|
content: ' ';
|
||||||
|
display: block;
|
||||||
.range-placeholder {
|
width: 100%;
|
||||||
height: 40px;
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
padding: 15px 0;
|
height: 4px;
|
||||||
box-sizing: border-box;
|
border-radius: 6px;
|
||||||
margin: 8px;
|
pointer-events: none;
|
||||||
|
}
|
||||||
&::after {
|
|
||||||
content: ' ';
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
|
||||||
height: 4px;
|
|
||||||
border-radius: 6px;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,263 +1,265 @@
|
||||||
.leaflet-dragging .sticker-container {
|
:global {
|
||||||
transition: none !important;
|
.leaflet-dragging .sticker-container {
|
||||||
}
|
|
||||||
|
|
||||||
.sticker-container {
|
|
||||||
outline: none;
|
|
||||||
position: relative;
|
|
||||||
transition: transform 250ms;
|
|
||||||
cursor: pointer;
|
|
||||||
z-index: 10;
|
|
||||||
|
|
||||||
&.leaflet-drag-target {
|
|
||||||
transition: none !important;
|
transition: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before {
|
.sticker-container {
|
||||||
content: ' ';
|
outline: none;
|
||||||
background: @red_secondary;
|
position: relative;
|
||||||
|
transition: transform 250ms;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
&.leaflet-drag-target {
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: ' ';
|
||||||
|
background: @red_secondary;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
left: -24px;
|
||||||
|
top: -24px;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 40px;
|
||||||
|
opacity: 0.25;
|
||||||
|
transform: scale(0.5);
|
||||||
|
transition: opacity 250ms, transform 500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transition: transform 250ms;
|
||||||
|
|
||||||
|
.sticker-delete {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover, &:active {
|
||||||
|
&:before {
|
||||||
|
opacity: 0.3;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.inactive {
|
||||||
|
pointer-events: none;
|
||||||
|
transition: transform 250ms;
|
||||||
|
|
||||||
|
.sticker-delete {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sticker-desc.is_empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: hover) {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sticker-label {
|
||||||
width: 48px;
|
width: 48px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
left: -24px;
|
|
||||||
top: -24px;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-radius: 40px;
|
//background: white;
|
||||||
opacity: 0.25;
|
//border-radius: 32px;
|
||||||
transform: scale(0.5);
|
left: 0;
|
||||||
transition: opacity 250ms, transform 500ms;
|
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;
|
||||||
|
//}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
left: -8px;
|
||||||
|
top: -8px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sticker-image {
|
||||||
|
width: 72px;
|
||||||
|
height: 72px;
|
||||||
|
left: -12px;
|
||||||
|
top: -12px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.left {
|
||||||
|
.sticker-desc {
|
||||||
|
padding: 10px 36px 10px 10px;
|
||||||
|
left: auto;
|
||||||
|
right: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
.sticker-wrapper {
|
||||||
|
will-change: transform;
|
||||||
transition: transform 250ms;
|
transition: transform 250ms;
|
||||||
|
|
||||||
.sticker-delete {
|
@media (hover: hover) {
|
||||||
pointer-events: none;
|
transition: transform 0ms;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover, &:active {
|
.sticker-arrow {
|
||||||
&:before {
|
position: absolute;
|
||||||
opacity: 0.3;
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.inactive {
|
|
||||||
pointer-events: none;
|
|
||||||
transition: transform 250ms;
|
|
||||||
|
|
||||||
.sticker-delete {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sticker-desc.is_empty {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media(hover: hover) {
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
//}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
left: -8px;
|
|
||||||
top: -8px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sticker-image {
|
|
||||||
width: 72px;
|
|
||||||
height: 72px;
|
|
||||||
left: -12px;
|
|
||||||
top: -12px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 0;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.left {
|
|
||||||
.sticker-desc {
|
|
||||||
padding: 10px 36px 10px 10px;
|
|
||||||
left: auto;
|
|
||||||
right: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sticker-wrapper {
|
|
||||||
will-change: transform;
|
|
||||||
transition: transform 250ms;
|
|
||||||
|
|
||||||
@media (hover: hover) {
|
|
||||||
transition: transform 0ms;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sticker-arrow {
|
|
||||||
position: absolute;
|
|
||||||
transform-origin: 0 0;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: ' ';
|
|
||||||
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 38,20 38,38 20,38' style='fill:%23ff3344;' /%3E%3C/svg%3E") no-repeat;
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
transform-origin: 0 0;
|
transform-origin: 0 0;
|
||||||
transform: rotate(-45deg);
|
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: ' ';
|
||||||
|
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 38,20 38,38 20,38' style='fill:%23ff3344;' /%3E%3C/svg%3E") no-repeat;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
transform-origin: 0 0;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sticker-delete {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
width: 24px;
|
||||||
}
|
height: 24px;
|
||||||
|
background: red;
|
||||||
|
border-radius: 24px;
|
||||||
|
transition: transform 500ms;
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: all;
|
||||||
|
left: 28px;
|
||||||
|
top: -16px;
|
||||||
|
z-index: 20;
|
||||||
|
|
||||||
.sticker-delete {
|
&:hover {
|
||||||
position: absolute;
|
transform: scale(1.2) !important;
|
||||||
width: 24px;
|
}
|
||||||
height: 24px;
|
|
||||||
background: red;
|
|
||||||
border-radius: 24px;
|
|
||||||
transition: transform 500ms;
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: all;
|
|
||||||
left: 28px;
|
|
||||||
top: -16px;
|
|
||||||
z-index: 20;
|
|
||||||
|
|
||||||
&:hover {
|
&::before, &::after {
|
||||||
transform: scale(1.2) !important;
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
left: 11px;
|
||||||
|
top: 6px;
|
||||||
|
width: 2px;
|
||||||
|
height: 12px;
|
||||||
|
background: white;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before, &::after {
|
.leaflet-control-container .leaflet-routing-container-hide {
|
||||||
content: ' ';
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stickers-helper {
|
||||||
|
flex-direction: column;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stickers-grid {
|
||||||
|
// display: grid;
|
||||||
|
// grid-template-columns: repeat( auto-fit , minmax(48px, 1fr) );
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stickers-set-title {
|
||||||
|
opacity: 0.3;
|
||||||
|
font-size: 0.8em;
|
||||||
|
padding: 10px 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: ' ';
|
||||||
|
height: 1px;
|
||||||
|
flex: 1;
|
||||||
|
background-color: #666666;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sticker-preview {
|
||||||
|
float: left;
|
||||||
|
cursor: pointer;
|
||||||
|
transform: scale(1);
|
||||||
|
transition: transform 250ms;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 0 50%;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.5);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sticker-desc {
|
||||||
|
min-width: 60px;
|
||||||
|
z-index: -1;
|
||||||
|
height: auto;
|
||||||
|
background: #222222;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 11px;
|
top: 50%;
|
||||||
top: 6px;
|
left: 24px;
|
||||||
width: 2px;
|
transform: translate3d(0, -50%, 0);
|
||||||
height: 12px;
|
color: white;
|
||||||
background: white;
|
box-sizing: border-box;
|
||||||
transform: rotate(45deg);
|
padding: 10px 10px 10px 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
.sticker-desc-sizer {
|
||||||
transform: rotate(-45deg);
|
position: relative;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-control-container .leaflet-routing-container-hide {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stickers-helper {
|
|
||||||
flex-direction: column;
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stickers-grid {
|
|
||||||
// display: grid;
|
|
||||||
// grid-template-columns: repeat( auto-fit , minmax(48px, 1fr) );
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stickers-set-title {
|
|
||||||
opacity: 0.3;
|
|
||||||
font-size: 0.8em;
|
|
||||||
padding: 10px 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: ' ';
|
|
||||||
height: 1px;
|
|
||||||
flex: 1;
|
|
||||||
background-color: #666666;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sticker-preview {
|
|
||||||
float: left;
|
|
||||||
cursor: pointer;
|
|
||||||
transform: scale(1);
|
|
||||||
transition: transform 250ms;
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: 0 50%;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: scale(1.5);
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sticker-desc {
|
|
||||||
min-width: 60px;
|
|
||||||
z-index: -1;
|
|
||||||
height: auto;
|
|
||||||
background: #222222;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 24px;
|
|
||||||
transform: translate3d(0, -50%, 0);
|
|
||||||
color: white;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 10px 10px 10px 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sticker-desc-sizer {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
color: rgba(0,0,0,0);
|
|
||||||
white-space: nowrap;
|
|
||||||
padding: 1px;
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font: inherit;
|
color: rgba(0, 0, 0, 0);
|
||||||
padding: 0;
|
white-space: nowrap;
|
||||||
border: none;
|
padding: 1px;
|
||||||
background: none;
|
|
||||||
color: white;
|
textarea {
|
||||||
resize: none;
|
position: absolute;
|
||||||
outline: none;
|
left: 0;
|
||||||
overflow: hidden;
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font: inherit;
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
color: white;
|
||||||
|
resize: none;
|
||||||
|
outline: none;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,34 @@
|
||||||
.switch {
|
:global {
|
||||||
height: 1em;
|
.switch {
|
||||||
width: 2em;
|
height: 1em;
|
||||||
border-radius: 0.5em;
|
width: 2em;
|
||||||
box-shadow: inset white 0 0 0 0.1em;
|
border-radius: 0.5em;
|
||||||
display: inline-flex;
|
box-shadow: inset white 0 0 0 0.1em;
|
||||||
vertical-align: text-top;
|
display: inline-flex;
|
||||||
position: relative;
|
vertical-align: text-top;
|
||||||
top: 0.05em;
|
position: relative;
|
||||||
transition: all 500ms;
|
top: 0.05em;
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: ' ';
|
|
||||||
position: absolute;
|
|
||||||
left: 0.2em;
|
|
||||||
top: 0.2em;
|
|
||||||
width: 0.6em;
|
|
||||||
height: 0.6em;
|
|
||||||
border-radius: 0.3em;
|
|
||||||
background: white;
|
|
||||||
transition: all 500ms;
|
transition: all 500ms;
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background: white;
|
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
left: 1.2em;
|
content: ' ';
|
||||||
background: #333333;
|
position: absolute;
|
||||||
|
left: 0.2em;
|
||||||
|
top: 0.2em;
|
||||||
|
width: 0.6em;
|
||||||
|
height: 0.6em;
|
||||||
|
border-radius: 0.3em;
|
||||||
|
background: white;
|
||||||
|
transition: all 500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: white;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
left: 1.2em;
|
||||||
|
background: #333333;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,156 +1,160 @@
|
||||||
.user-bar {
|
:global {
|
||||||
// width: 160px;
|
.user-bar {
|
||||||
|
// width: 160px;
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
|
||||||
}
|
|
||||||
.user-bar-guest {
|
|
||||||
// width: 168px;
|
|
||||||
@media (min-width: @mobile_breakpoint) {
|
|
||||||
width: 158px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-button {
|
|
||||||
width: 120px;
|
|
||||||
padding-left: 48px;
|
|
||||||
height: 48px;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
user-select: none;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
@media (max-width: @mobile_breakpoint) {
|
|
||||||
width: 0;
|
|
||||||
|
|
||||||
.user-button-fields {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.user-button-picture {
|
.user-bar-guest {
|
||||||
width: 48px;
|
// width: 168px;
|
||||||
height: 48px;
|
@media (min-width: @mobile_breakpoint) {
|
||||||
background-size: cover;
|
width: 158px;
|
||||||
background: rgba(0, 0, 0, 0.3) 50% 50%;
|
}
|
||||||
border-radius: 3px 0 0 3px;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-button-fields {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0 10px 0 10px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
div {
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-button-name {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-button-text {
|
|
||||||
font-size: 12px;
|
|
||||||
opacity: 0.5;
|
|
||||||
padding-top: 2px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.user-panel {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-panel-menu {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 58px;
|
|
||||||
left: 0;
|
|
||||||
width: 219px;
|
|
||||||
background: @dialog_background;
|
|
||||||
border-radius: @panel_radius;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
z-index: -1;
|
|
||||||
|
|
||||||
@media (max-width: @mobile_breakpoint) {
|
|
||||||
left: 0;
|
|
||||||
z-index: 4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.user-panel-title {
|
|
||||||
font-size: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
|
|
||||||
background: rgba(0,0,0, 0.5);
|
|
||||||
box-shadow: inset rgba(255,255,255,0.1) 0 -1px;
|
|
||||||
border-radius: @panel_radius @panel_radius 0 0;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-panel-ver {
|
|
||||||
font-size: 12px;
|
|
||||||
vertical-align: text-top;
|
|
||||||
opacity: 0.5;
|
|
||||||
padding-left: 3px;
|
|
||||||
position: relative;
|
|
||||||
top: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-panel-item {
|
|
||||||
padding: 10px 10px;
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 100%;
|
|
||||||
transition: all 250ms;
|
|
||||||
color: white;
|
|
||||||
box-sizing: border-box;
|
|
||||||
user-select: none;
|
|
||||||
display: block;
|
|
||||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:first-child::after {
|
|
||||||
border-radius: 3px 3px 0 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
.user-button {
|
||||||
content: ' ';
|
width: 120px;
|
||||||
|
padding-left: 48px;
|
||||||
|
height: 48px;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
@media (max-width: @mobile_breakpoint) {
|
||||||
|
width: 0;
|
||||||
|
|
||||||
|
.user-button-fields {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-button-picture {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
background-size: cover;
|
||||||
|
background: rgba(0, 0, 0, 0.3) 50% 50%;
|
||||||
|
border-radius: 3px 0 0 3px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
}
|
||||||
|
|
||||||
|
.user-button-fields {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: linear-gradient(150deg, @blue_primary, @blue_secondary);
|
display: flex;
|
||||||
opacity: 0;
|
flex-direction: column;
|
||||||
transition: opacity 0.3s;
|
justify-content: center;
|
||||||
z-index: -1;
|
padding: 0 10px 0 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
div {
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover::after {
|
.user-button-name {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-button-text {
|
||||||
|
font-size: 12px;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
padding-top: 2px;
|
||||||
}
|
font-weight: 500;
|
||||||
|
}
|
||||||
.user-panel-text {
|
|
||||||
padding: 10px;
|
|
||||||
opacity: 0.5;
|
.user-panel {
|
||||||
font-weight: 200;
|
position: relative;
|
||||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
}
|
||||||
|
|
||||||
div {
|
.user-panel-menu {
|
||||||
padding-top: 5px;
|
position: absolute;
|
||||||
|
bottom: 58px;
|
||||||
|
left: 0;
|
||||||
|
width: 219px;
|
||||||
|
background: @dialog_background;
|
||||||
|
border-radius: @panel_radius;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
z-index: -1;
|
||||||
|
|
||||||
|
@media (max-width: @mobile_breakpoint) {
|
||||||
|
left: 0;
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-panel-title {
|
||||||
|
font-size: 20px;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
box-shadow: inset rgba(255, 255, 255, 0.1) 0 -1px;
|
||||||
|
border-radius: @panel_radius @panel_radius 0 0;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-panel-ver {
|
||||||
|
font-size: 12px;
|
||||||
|
vertical-align: text-top;
|
||||||
|
opacity: 0.5;
|
||||||
|
padding-left: 3px;
|
||||||
|
position: relative;
|
||||||
|
top: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-panel-item {
|
||||||
|
padding: 10px 10px;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100%;
|
||||||
|
transition: all 250ms;
|
||||||
|
color: white;
|
||||||
|
box-sizing: border-box;
|
||||||
|
user-select: none;
|
||||||
|
display: block;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:first-child::after {
|
||||||
|
border-radius: 3px 3px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(150deg, @blue_primary, @blue_secondary);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover::after {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-panel-text {
|
||||||
|
padding: 10px;
|
||||||
|
opacity: 0.5;
|
||||||
|
font-weight: 200;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
|
||||||
|
div {
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue