mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-24 18:46:40 +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 {
|
||||
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;
|
||||
|
||||
:global {
|
||||
.button {
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
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;
|
||||
|
||||
&:first-child {
|
||||
border-radius: @button_radius 0 0 @button_radius;
|
||||
&.outline {
|
||||
box-shadow: inset #444444 0 0 0 1px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 @button_radius @button_radius 0;
|
||||
&.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 {
|
||||
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 {
|
||||
display: flex;
|
||||
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;
|
||||
:global {
|
||||
.gpx-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
flex: 1;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin: 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
.gpx-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
flex-direction: row;
|
||||
padding: 5px 10px;
|
||||
min-width: 0;
|
||||
|
||||
svg {
|
||||
fill: white;
|
||||
&_disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
> div {
|
||||
padding: 0 5px;
|
||||
&__title {
|
||||
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;
|
||||
|
||||
// span {
|
||||
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.gpx-buttons {
|
||||
padding: 10px;
|
||||
|
||||
& > * {
|
||||
margin: 2.5px 0;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__color {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
// span {
|
||||
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.gpx-buttons {
|
||||
padding: 10px;
|
||||
|
||||
& > * {
|
||||
margin: 2.5px 0;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
& > .button {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
& > .button {
|
||||
width: 100%;
|
||||
.gpx-confirm {
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
left: 5%;
|
||||
z-index: 5;
|
||||
width: 90%;
|
||||
padding: 10px;
|
||||
border-radius: @panel_radius;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: lighten(@bar_background, 10%);
|
||||
box-shadow: rgba(0, 0, 0, 0.5) 0 5px 5px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 58px;
|
||||
:global {
|
||||
.logo-preview {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 58px;
|
||||
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
background: 100% 100% no-repeat;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
background: 100% 100% no-repeat;
|
||||
|
||||
&.top {
|
||||
background-position: 100% 0;
|
||||
}
|
||||
&.top {
|
||||
background-position: 100% 0;
|
||||
}
|
||||
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
transform: scale(0.5);
|
||||
transform-origin: 100% 100%;
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
transform: scale(0.5);
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -15,153 +15,159 @@
|
|||
@import 'switch.less';
|
||||
@import 'gpx.less';
|
||||
|
||||
body {
|
||||
font-family: 'Rubik', sans-serif;
|
||||
font-size: 15px;
|
||||
// letter-spacing: 0.4px;
|
||||
padding: 0;
|
||||
font-weight: 400;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
:global {
|
||||
body {
|
||||
font-family: 'Rubik', sans-serif;
|
||||
font-size: 15px;
|
||||
// letter-spacing: 0.4px;
|
||||
padding: 0;
|
||||
font-weight: 400;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.gray {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.gray {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.big {
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
}
|
||||
.big {
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.upper {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.upper {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.small {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.white {
|
||||
color: white;
|
||||
}
|
||||
.white {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: @color_success;
|
||||
}
|
||||
.success {
|
||||
color: @color_success;
|
||||
}
|
||||
|
||||
.primary {
|
||||
color: @color_primary;
|
||||
}
|
||||
.primary {
|
||||
color: @color_primary;
|
||||
}
|
||||
|
||||
.danger {
|
||||
color: @color_danger;
|
||||
}
|
||||
.danger {
|
||||
color: @color_danger;
|
||||
}
|
||||
|
||||
.cursor-tooltip {
|
||||
position: fixed;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
.cursor-tooltip {
|
||||
position: fixed;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
|
||||
svg {
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke-width: 4;
|
||||
fill: black;
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-icon-sticker {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke-width: 4;
|
||||
fill: black;
|
||||
}
|
||||
|
||||
@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;
|
||||
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;
|
||||
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 {
|
||||
width: 50% !important;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.leaflet-control-zoom {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-bar a {
|
||||
border-radius: @panel_radius !important;
|
||||
}
|
||||
|
||||
@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;
|
||||
:global {
|
||||
#map {
|
||||
width: 50% !important;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: -9px;
|
||||
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;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
&::before {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
transform: translate(-8px, -8px);
|
||||
background: rgba(255, 50, 0, 0.3);
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
.leaflet-vertex-drag-helper {
|
||||
pointer-events: none !important;
|
||||
background: fade(red, 50%);
|
||||
border-radius: 12px;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 2px solid @red_secondary;
|
||||
border-radius: 24px;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 4px;
|
||||
top: -9px;
|
||||
left: -9px;
|
||||
animation: vertex_spin 500ms infinite linear alternate;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
.leaflet-km-dist {
|
||||
padding: 2px 4px 2px 16px;
|
||||
left: -3px;
|
||||
right: auto;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: 5px;
|
||||
right: auto;
|
||||
.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;
|
||||
}
|
||||
|
||||
@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 {
|
||||
div {
|
||||
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;
|
||||
}
|
||||
|
||||
&.right {
|
||||
div {
|
||||
right: auto;
|
||||
left: 15px;
|
||||
.start-marker {
|
||||
svg {
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: -4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-km-marker-2 {
|
||||
.leaflet-km-dist {
|
||||
background: green;
|
||||
.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 {
|
||||
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 {
|
||||
stroke: rgba(255, 50, 0, 0.1);
|
||||
cursor: grab;
|
||||
.router-marker {
|
||||
div {
|
||||
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) {
|
||||
stroke: rgba(255, 50, 0, 0.2);
|
||||
&.right {
|
||||
div {
|
||||
right: auto;
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-control-container .leaflet-routing-container-hide {
|
||||
display: none;
|
||||
}
|
||||
.leaflet-km-marker-2 {
|
||||
.leaflet-km-dist {
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-bar {
|
||||
box-shadow: @bar_shadow !important;
|
||||
border: none !important;
|
||||
}
|
||||
.touch-hinter-poly {
|
||||
stroke: rgba(255, 50, 0, 0.1);
|
||||
cursor: grab;
|
||||
|
||||
.leaflet-bar a {
|
||||
background: @bar_background;
|
||||
color: white;
|
||||
text-shadow: none;
|
||||
user-select: none;
|
||||
border-bottom: none;
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
stroke: rgba(255, 50, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&: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;
|
||||
color: white;
|
||||
text-shadow: none;
|
||||
user-select: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.location-marker {
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
margin-left: -10px;
|
||||
margin-top: -2px;
|
||||
outline: none;
|
||||
z-index: 10001;
|
||||
background: @red_secondary;
|
||||
|
||||
&:after {
|
||||
content: ' ';
|
||||
box-shadow: 0 0 0 3px @red_secondary;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: -3px;
|
||||
&:hover {
|
||||
background: @bar_background;
|
||||
color: white;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
&: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;
|
||||
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 {
|
||||
.location-marker {
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
margin-left: -10px;
|
||||
margin-top: -2px;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
right: -7px;
|
||||
bottom: 11px;
|
||||
z-index: 10001;
|
||||
background: @red_secondary;
|
||||
|
||||
&:after {
|
||||
content: ' ';
|
||||
box-shadow: 0 0 0 3px @red_secondary;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: 3px;
|
||||
height: 20px;
|
||||
background: @red_secondary;
|
||||
left: 8.5px;
|
||||
top: -9px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-top {
|
||||
top: 42px;
|
||||
}
|
||||
|
||||
.leaflet-div-icon {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.custom-marker-cluster {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: @cluster_small;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
font-size: 11px;
|
||||
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;
|
||||
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 {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 5px;
|
||||
background: #111111;
|
||||
border-radius: @panel_radius;
|
||||
box-sizing: border-box;
|
||||
|
||||
.bar {
|
||||
width: 30%;
|
||||
background: linear-gradient(270deg, @blue_primary, @blue_secondary);
|
||||
height: 100%;
|
||||
:global {
|
||||
.progress {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 5px;
|
||||
background: #111111;
|
||||
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 {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 80px;
|
||||
box-sizing: border-box;
|
||||
|
||||
> div {
|
||||
:global {
|
||||
.renderer-shade {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
transition: opacity 250ms;
|
||||
padding-bottom: 80px;
|
||||
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 {
|
||||
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;
|
||||
.renderer-logo {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
|
||||
.croppr-handle {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px;
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.renderer-logo {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,41 +1,43 @@
|
|||
.router-waypoint {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-left: -20px;
|
||||
margin-top: -20px;
|
||||
outline: none;
|
||||
z-index: 10001;
|
||||
:global {
|
||||
.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 @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 {
|
||||
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 {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.router-helper {
|
||||
}
|
||||
|
||||
.router-helper__button {
|
||||
white-space: nowrap;
|
||||
.router-helper__button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,173 +1,185 @@
|
|||
.save-helper {
|
||||
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; }
|
||||
:global {
|
||||
.save-helper {
|
||||
padding: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
touch-action: auto;
|
||||
pointer-events: all;
|
||||
.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;
|
||||
}
|
||||
|
||||
svg {
|
||||
animation: jump infinite alternate 600ms;
|
||||
@keyframes jump {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0) scale(0.5);
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(0, -20px, 0) scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.save-description {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.save-title-input {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: @panel_radius;
|
||||
display: flex;
|
||||
|
||||
input {
|
||||
.save-loader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: white;
|
||||
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%);
|
||||
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 200;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
fill: white;
|
||||
|
||||
.save-title-label {
|
||||
display: flex;
|
||||
padding: 5px 10px;
|
||||
background: rgba(0,0,0,0.1);
|
||||
height: 100%;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
animation-delay: 200ms;
|
||||
}
|
||||
|
||||
.save-address-input {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
margin-bottom: 5px;
|
||||
&:nth-child(3) {
|
||||
animation-delay: 400ms;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 5px 5px 5px 2px;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
opacity: 1;
|
||||
touch-action: auto;
|
||||
pointer-events: all;
|
||||
|
||||
.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 {
|
||||
animation: jump infinite alternate 600ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
.save-description {
|
||||
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-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
|
||||
.borderBox() {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
|
||||
|
||||
* {
|
||||
:global {
|
||||
.borderBox() {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefixClass} {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
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;
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
|
||||
}
|
||||
}
|
||||
|
||||
&-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} {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
padding: 15px 0;
|
||||
// width: 100%;
|
||||
margin: 8px;
|
||||
border-radius: @border-radius-base;
|
||||
touch-action: none;
|
||||
|
||||
.borderBox();
|
||||
|
||||
&-rail {
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
height: 4px;
|
||||
border-radius: @border-radius-base;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&-track {
|
||||
left: 5px;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
border-radius: @border-radius-base;
|
||||
background: linear-gradient(270deg, @red_secondary, @blue_secondary);
|
||||
// background-size: 320px 100px;
|
||||
}
|
||||
|
||||
&-handle {
|
||||
margin-left: -5px;
|
||||
margin-bottom: -7px;
|
||||
touch-action: pan-y;
|
||||
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;
|
||||
|
||||
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 {
|
||||
top: 0;
|
||||
left: 18px;
|
||||
height: 100%;
|
||||
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 {
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&-dot {
|
||||
left: 2px;
|
||||
margin-bottom: -4px;
|
||||
&:first-child {
|
||||
margin-bottom: -4px;
|
||||
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;
|
||||
}
|
||||
&: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() {
|
||||
animation-duration: .3s;
|
||||
animation-fill-mode: both;
|
||||
display: block !important;
|
||||
}
|
||||
.@{prefixClass}-vertical {
|
||||
width: 14px;
|
||||
height: 100%;
|
||||
padding: 0 5px;
|
||||
|
||||
.make-motion(@className, @keyframeName) {
|
||||
.@{className}-enter, .@{className}-appear {
|
||||
.motion-common();
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.@{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);
|
||||
.@{prefixClass} {
|
||||
&-rail {
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
@keyframes rcSliderTooltipZoomDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
&-track {
|
||||
left: 5px;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
@keyframes rcSliderTooltipZoomDownOut {
|
||||
0% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
}
|
||||
&-handle {
|
||||
margin-left: -5px;
|
||||
margin-bottom: -7px;
|
||||
touch-action: pan-y;
|
||||
|
||||
.@{prefixClass}-tooltip {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
visibility: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.borderBox();
|
||||
&-mark {
|
||||
top: 0;
|
||||
left: 18px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
&-step {
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
&-dot {
|
||||
left: 2px;
|
||||
margin-bottom: -4px;
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-placement-top {
|
||||
padding: @tooltip-arrow-width 0 @tooltip-distance 0;
|
||||
.motion-common() {
|
||||
animation-duration: .3s;
|
||||
animation-fill-mode: both;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
&-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;
|
||||
.make-motion(@className, @keyframeName) {
|
||||
.@{className}-enter, .@{className}-appear {
|
||||
.motion-common();
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.@{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 {
|
||||
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;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
visibility: visible;
|
||||
|
||||
.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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.range-placeholder {
|
||||
height: 40px;
|
||||
padding: 15px 0;
|
||||
box-sizing: border-box;
|
||||
margin: 8px;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
height: 4px;
|
||||
border-radius: 6px;
|
||||
pointer-events: none;
|
||||
.range-placeholder {
|
||||
height: 40px;
|
||||
padding: 15px 0;
|
||||
box-sizing: border-box;
|
||||
margin: 8px;
|
||||
|
||||
&::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 {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.sticker-container {
|
||||
outline: none;
|
||||
position: relative;
|
||||
transition: transform 250ms;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
|
||||
&.leaflet-drag-target {
|
||||
:global {
|
||||
.leaflet-dragging .sticker-container {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: ' ';
|
||||
background: @red_secondary;
|
||||
.sticker-container {
|
||||
outline: none;
|
||||
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;
|
||||
height: 48px;
|
||||
left: -24px;
|
||||
top: -24px;
|
||||
position: absolute;
|
||||
border-radius: 40px;
|
||||
opacity: 0.25;
|
||||
transform: scale(0.5);
|
||||
transition: opacity 250ms, transform 500ms;
|
||||
//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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
.sticker-wrapper {
|
||||
will-change: transform;
|
||||
transition: transform 250ms;
|
||||
|
||||
.sticker-delete {
|
||||
pointer-events: none;
|
||||
@media (hover: hover) {
|
||||
transition: transform 0ms;
|
||||
}
|
||||
}
|
||||
|
||||
&: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;
|
||||
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;
|
||||
.sticker-arrow {
|
||||
position: absolute;
|
||||
transform-origin: 0 0;
|
||||
transform: rotate(-45deg);
|
||||
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: 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: all;
|
||||
left: 28px;
|
||||
top: -16px;
|
||||
z-index: 20;
|
||||
|
||||
.sticker-delete {
|
||||
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;
|
||||
&:hover {
|
||||
transform: scale(1.2) !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2) !important;
|
||||
&::before, &::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
left: 11px;
|
||||
top: 6px;
|
||||
width: 2px;
|
||||
height: 12px;
|
||||
background: white;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
&::before, &::after {
|
||||
content: ' ';
|
||||
.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;
|
||||
left: 11px;
|
||||
top: 6px;
|
||||
width: 2px;
|
||||
height: 12px;
|
||||
background: white;
|
||||
transform: rotate(45deg);
|
||||
top: 50%;
|
||||
left: 24px;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 10px 10px 36px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
.sticker-desc-sizer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font: inherit;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
color: white;
|
||||
resize: none;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
color: rgba(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
padding: 1px;
|
||||
|
||||
textarea {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
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 {
|
||||
height: 1em;
|
||||
width: 2em;
|
||||
border-radius: 0.5em;
|
||||
box-shadow: inset white 0 0 0 0.1em;
|
||||
display: inline-flex;
|
||||
vertical-align: text-top;
|
||||
position: relative;
|
||||
top: 0.05em;
|
||||
transition: all 500ms;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
left: 0.2em;
|
||||
top: 0.2em;
|
||||
width: 0.6em;
|
||||
height: 0.6em;
|
||||
border-radius: 0.3em;
|
||||
background: white;
|
||||
:global {
|
||||
.switch {
|
||||
height: 1em;
|
||||
width: 2em;
|
||||
border-radius: 0.5em;
|
||||
box-shadow: inset white 0 0 0 0.1em;
|
||||
display: inline-flex;
|
||||
vertical-align: text-top;
|
||||
position: relative;
|
||||
top: 0.05em;
|
||||
transition: all 500ms;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: white;
|
||||
|
||||
&::after {
|
||||
left: 1.2em;
|
||||
background: #333333;
|
||||
content: ' ';
|
||||
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 {
|
||||
// width: 160px;
|
||||
:global {
|
||||
.user-bar {
|
||||
// width: 160px;
|
||||
|
||||
.button {
|
||||
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;
|
||||
.button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
.user-bar-guest {
|
||||
// width: 168px;
|
||||
@media (min-width: @mobile_breakpoint) {
|
||||
width: 158px;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
.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 {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-size: cover;
|
||||
background: rgba(0, 0, 0, 0.3) 50% 50%;
|
||||
border-radius: 3px 0 0 3px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.user-button-fields {
|
||||
height: 100%;
|
||||
background: linear-gradient(150deg, @blue_primary, @blue_secondary);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
z-index: -1;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
.user-button-name {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.user-button-text {
|
||||
font-size: 12px;
|
||||
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;
|
||||
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 {
|
||||
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