diff --git a/public/images/icon.svg b/public/images/icon.svg new file mode 100644 index 0000000..514ad8d --- /dev/null +++ b/public/images/icon.svg @@ -0,0 +1,425 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/stickers-base.svg b/public/images/stickers-base.svg new file mode 100644 index 0000000..a5eb5df --- /dev/null +++ b/public/images/stickers-base.svg @@ -0,0 +1,9287 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +   + + + + + + + + + + + + + + +   + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +   + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +   + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +   + + + + + + + + + + + + + + + + + + + + + + 1111 + 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 1 + + + + + + + + + 2 + + + + + + + + + 3 + + + + + + + + + 4 + + + + + + + + + + + 5 + + + + + + + + + 6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Fills.tsx b/src/components/Fills.tsx index 52e0d6f..d7d25cd 100644 --- a/src/components/Fills.tsx +++ b/src/components/Fills.tsx @@ -43,6 +43,6 @@ export const Fills = () => ( - + ); diff --git a/src/components/panels/Icon.tsx b/src/components/panels/Icon.tsx index a381018..f6b318c 100644 --- a/src/components/panels/Icon.tsx +++ b/src/components/panels/Icon.tsx @@ -4,7 +4,7 @@ export const Icon = memo(({ icon, size = 32 }: { icon: string; size?: number }) - + diff --git a/src/index.tsx b/src/index.tsx index f14e3c0..2845015 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { App } from '~/containers/App'; -import '~/styles/main.less'; +import '~/styles/_main.scss'; import { Provider } from 'react-redux'; import { PersistGate } from 'redux-persist/integration/react'; diff --git a/src/styles/_main.scss b/src/styles/_main.scss new file mode 100644 index 0000000..100678c --- /dev/null +++ b/src/styles/_main.scss @@ -0,0 +1,171 @@ +@import 'colors.scss'; + +@import 'map.scss'; +@import 'panel.scss'; +@import 'router.scss'; +@import 'stickers.scss'; +@import 'button.scss'; +@import 'logo.scss'; +@import 'user-button.scss'; +@import 'save.scss'; +@import 'renderer.scss'; +@import 'dialogs.scss'; +@import 'progress.scss'; +@import 'slider.scss'; +@import 'switch.scss'; +@import 'gpx.scss'; + +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; +} + +.big { + font-size: 1em; + font-weight: 500; +} + +.upper { + text-transform: uppercase; +} + +.small { + font-size: 0.9em; +} + +.white { + color: white; +} + +.success { + color: $color_success; +} + +.primary { + color: $color_primary; +} + +.danger { + color: $color_danger; +} + +.cursor-tooltip { + position: fixed; + top: 4px; + left: 4px; + width: 10px; + height: 10px; + z-index: 1; + pointer-events: none; + + svg { + 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; + 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; +} diff --git a/src/styles/button.less b/src/styles/button.scss similarity index 87% rename from src/styles/button.less rename to src/styles/button.scss index a5b6336..b17de87 100644 --- a/src/styles/button.less +++ b/src/styles/button.scss @@ -1,10 +1,9 @@ -:global { .button { background: #444444; padding: 4px 16px; height: 18px; line-height: 1em; - border-radius: @button_radius; + border-radius: $button_radius; font-family: inherit; font-size: 1em; display: inline-flex; @@ -61,12 +60,11 @@ margin: 0; &:first-child { - border-radius: @button_radius 0 0 @button_radius; + border-radius: $button_radius 0 0 $button_radius; } &:last-child { - border-radius: 0 @button_radius @button_radius 0; + border-radius: 0 $button_radius $button_radius 0; } } } -} diff --git a/src/styles/colors.less b/src/styles/colors.less deleted file mode 100644 index 7d759f3..0000000 --- a/src/styles/colors.less +++ /dev/null @@ -1,35 +0,0 @@ -@blue_primary: #55ddff; -@blue_secondary: #7137c8; - -@router_line: #4597d0; - -@bar_background: #333333; -@dialog_background: #271535; - -@location_line: #ff3344; - -@green_primary: #abc837; -@green_secondary: #009c80; - -@red_primary: #ff7034; -@red_secondary: #ff3344; - -@panel_radius: 8px; -@button_radius: 6px; - -@color_primary: #4597d0; -@color_success: #7cd766; -@color_danger: #ff3344; - -@bar_shadow: rgba(0,0,0,0.3) 0 2px 0, inset rgba(255, 255, 255, 0.05) 1px 1px; -@dialog_shadow: rgba(0,0,0,0.3) 0 2px 0; - -@mobile_breakpoint: 768px; -@micro_breakpoint: 450px; - -@tooltip_background: #123740; - -@loading_shade: darken(fade(@blue_secondary, 80%), 20%); -@cluster_small: #0069a7; - -@title_dialog_color: fade(#111111, 85%); diff --git a/src/styles/colors.scss b/src/styles/colors.scss new file mode 100644 index 0000000..c6b9fea --- /dev/null +++ b/src/styles/colors.scss @@ -0,0 +1,35 @@ +$blue_primary: #55ddff; +$blue_secondary: #7137c8; + +$router_line: #4597d0; + +$bar_background: #333333; +$dialog_background: #271535; + +$location_line: #ff3344; + +$green_primary: #abc837; +$green_secondary: #009c80; + +$red_primary: #ff7034; +$red_secondary: #ff3344; + +$panel_radius: 8px; +$button_radius: 6px; + +$color_primary: #4597d0; +$color_success: #7cd766; +$color_danger: #ff3344; + +$bar_shadow: rgba(0,0,0,0.3) 0 2px 0, inset rgba(255, 255, 255, 0.05) 1px 1px; +$dialog_shadow: rgba(0,0,0,0.3) 0 2px 0; + +$mobile_breakpoint: 768px; +$micro_breakpoint: 450px; + +$tooltip_background: #123740; + +$loading_shade: darken($blue_secondary, 20%); +$cluster_small: #0069a7; + +$title_dialog_color: fade(#111111, 85%); diff --git a/src/styles/dialogs.less b/src/styles/dialogs.less deleted file mode 100644 index e85efa9..0000000 --- a/src/styles/dialogs.less +++ /dev/null @@ -1,544 +0,0 @@ -:global { - .dialog { - position: fixed; - left: 0; - top: 0; - width: 360px; - height: 100%; - z-index: 5; - display: flex; - flex-direction: column; - - padding: 10px 10px 68px 10px; - box-sizing: border-box; - - transform: translate3d(-100%, 0, 0); - pointer-events: none; - transition: transform 500ms, background-color 500ms 500ms; - - &.active { - transform: translate3d(0, 0, 0); - pointer-events: all; - transition: transform 500ms 250ms, background-color 250ms; - - .dialog-close-button { - opacity: 1; - transform: translate3d(0, 0, 0); - } - } - - @media (max-width: @mobile_breakpoint) { - width: 100%; - z-index: 6; - transform: translate3d(0, 100%, 0); - padding: 0 0 68px 0; - - &.active { - background: rgba(19, 45, 53, 0.95); - } - } - } - - .dialog-close-button { - position: absolute; - right: -38px; - bottom: 68px; - background: @red_secondary; - width: 48px; - height: 48px; - transform: translate3d(-48px, 0, 0); - border-radius: 0 @panel_radius @panel_radius 0; - opacity: 0; - - transition: all 250ms 250ms; - z-index: -1; - cursor: pointer; - - display: flex; - align-items: center; - justify-content: center; - - svg { - fill: white; - width: 40px; - height: 40px; - } - - @media (max-width: @mobile_breakpoint) { - border-radius: @panel_radius; - bottom: 0; - right: 0; - width: 100%; - height: 68px; - background: @dialog_background; - } - } - - .dialog-content { - background: @dialog_background; - overflow: hidden; - position: relative; - border-radius: @panel_radius @panel_radius 0 @panel_radius; - box-shadow: @dialog_shadow; - - display: flex; - flex-direction: column; - - a { - color: white; - opacity: 0.8; - } - - &.full { - flex: 1; - } - } - - .dialog-flex-scroll { - display: flex; - align-items: flex-end; - justify-content: center; - // height: 100%; - } - - .nominatim-dialog-content { - padding-bottom: 48px; - min-height: 25vh; - } - - .nominatim-list-item { - padding: 10px; - color: white; - cursor: pointer; - transition: background-color 0.25s; - display: flex; - align-items: center; - justify-content: center; - // padding-bottom: 200px; - - &:hover { - background: rgba(255, 255, 255, 0.1); - } - - .title { - text-overflow: hidden; - font-size: 12px; - -webkit-line-clamp: 2; - } - } - - .dialog-shader { - &::before, - &::after { - content: ' '; - height: 40px; - width: 100%; - left: 0; - top: 0; - background: linear-gradient(180deg, rgba(39, 21, 53, 1), rgba(39, 21, 53, 0)); - position: absolute; - z-index: 5; - pointer-events: none; - } - - &::after { - top: auto; - bottom: 0; - background: linear-gradient(0deg, rgba(39, 21, 53, 1), rgba(39, 21, 53, 0)); - } - } - - .dialog-maplist { - box-sizing: border-box; - padding: 10px 0 0 0; - } - - @keyframes pulse { - 0% { - opacity: 1; - } - 100% { - opacity: 0.5; - } - } - - @keyframes spin { - 0% { - transform: rotate(0); - } - 100% { - transform: rotate(360deg); - } - } - - .dialog-maplist-pulse { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - z-index: 10; - background: linear-gradient(fade(@loading_shade, 0%), @loading_shade 70%); - height: 100px; - pointer-events: none; - transition: opacity 100ms; - opacity: 0; - - &.active { - opacity: 1; - animation: pulse 500ms 250ms infinite alternate; - } - } - - .dialog-maplist-loader { - display: flex; - margin-bottom: 10px; - text-transform: uppercase; - color: white; - align-items: center; - justify-content: center; - user-select: none; - opacity: 0.1; - - position: absolute; - width: 100%; - height: 100%; - pointer-events: none; - padding-top: 200px; - box-sizing: border-box; - font-weight: 600; - font-size: 20px; - text-align: center; - - .spin { - animation: spin infinite reverse 2s linear; - } - - .dialog-maplist-icon { - position: absolute; - left: 50%; - top: 50%; - margin-left: -100px; - margin-top: -100px; - - svg { - width: 200px; - height: 200px; - fill: white; - } - } - } - - .route-row-wrapper { - padding: 0 10px; - position: relative; - margin-bottom: 10px; - transition: all 500ms; - display: flex; - flex-direction: column; - - &.has_edit { - //transform: translateY(-2px); - .route-row { - background: fade(@green_secondary, 30%); - } - } - - &.is_menu_target { - .route-row, - .route-row-fav { - transform: translateX(-120px); - } - - .route-row-edit-menu { - width: 120px; - } - } - } - - .route-row-editor { - color: white; - padding: 5px 0 5px; - } - - .route-row-buttons { - flex: 1; - flex-direction: row; - display: flex; - align-items: center; - } - - .route-row-view { - overflow: hidden; - transition: height 500ms; - position: relative; - display: flex; - - &.has_menu { - padding-right: 32px; - } - } - - .route-row-edit { - background: fade(@green_secondary, 30%); - } - - .route-row-drop { - background: fade(@red_secondary, 20%); - - .route-row { - align-items: center; - } - } - - .route-row { - background: rgba(255, 255, 255, 0.05); - padding: 10px 10px 5px 10px; - color: white; - user-select: none; - cursor: pointer; - transition: background 250ms, transform 500ms; - position: relative; - flex: 1; - min-height: 64px; - box-sizing: border-box; - display: flex; - flex-direction: column; - justify-content: center; - align-items: stretch; - - &:hover { - background: rgba(255, 255, 255, 0.1); - - .route-row-panel { - transform: scaleY(1); - pointer-events: all; - touch-action: initial; - } - } - } - - .route-row-edit-button { - width: 32px; - background: rgba(255, 255, 255, 0.08); - fill: rgba(255, 255, 255, 0.5); - display: flex; - justify-content: center; - align-items: center; - transition: all 250ms; - position: absolute; - top: 0; - right: 0; - height: 100%; - - &:hover { - background: rgba(255, 255, 255, 0.1); - } - } - - .route-row-fav { - width: 32px; - display: flex; - align-items: center; - justify-content: center; - fill: fade(white, 30%); - background: fade(white, 8%); - cursor: pointer; - transition: background 250ms, transform 500ms; - - &:hover { - background: fade(white, 10%); - } - } - - .route-row-edit-menu { - width: 0; - height: 100%; - right: 32px; - bottom: 0; - position: absolute; - background: rgba(0, 0, 0, 0.1); - overflow: hidden; - transition: all 500ms; - display: flex; - fill: fade(white, 30%); - - div { - width: 60px; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - - &:first-child { - box-shadow: fade(black, 30%) 1px 0; - } - - &:hover { - background: fade(@red_secondary, 30%); - } - - &.modify-button { - &:hover { - background: fade(@green_secondary, 30%); - } - } - } - } - - .route-title { - margin-bottom: 5px; - font-weight: bold; - - text-overflow: ellipsis; - overflow: hidden; - position: relative; - max-height: 2.4em; - word-break: break-word; - display: flex; - - .route-row-corner { - svg { - fill: fade(white, 50%); - margin-right: 2px; - flex-shrink: 0; - } - } - } - - .route-description { - font-size: 0.9em; - opacity: 0.3; - margin-bottom: 5px; - display: grid; - grid-template-columns: 2fr 1fr; - - svg { - width: 20px; - height: 20px; - fill: white; - vertical-align: text-bottom; - margin-bottom: -2px; - } - - span { - padding-right: 10px; - - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - } - - .dialog-head { - background: rgba(255, 255, 255, 0.1); - padding: 10px; - color: white; - } - - .dialog-tabs { - background: rgba(255, 255, 255, 0); - border-radius: @panel_radius @panel_radius 0 0; - height: 32px; - user-select: none; - flex-direction: row; - display: flex; - - .dialog-tab { - display: inline-flex; - align-items: center; - justify-content: center; - color: white; - padding: 0 20px; - cursor: pointer; - border-radius: @panel_radius @panel_radius 0 0; - flex: 1; - height: 32px; - - &.active { - background: rgba(255, 255, 255, 0.1); - } - } - - @media (max-width: @mobile_breakpoint) { - height: 48px; - - .dialog-tab { - height: 48px; - } - } - } - - .dialog-head-title { - font-size: 20px; - text-transform: uppercase; - } - - .app-info-changelog { - color: white; - padding: 10px; - font-size: 0.8em; - user-select: none; - - div { - opacity: 0.8; - } - } - - .app-info-number { - width: 16px; - } - - .app-info-changelog-item { - text-transform: uppercase; - display: flex; - flex: 1; - - .app-info-current { - font-size: 0.9em; - opacity: 0.3; - display: inline; - padding-left: 10px; - } - } - - .app-info-version { - padding-bottom: 5px; - flex: 1; - flex-direction: column-reverse; - } - - .app-info-release { - padding-bottom: 5px; - display: flex; - flex: 1; - } - - .app-info-build { - padding-bottom: 5px; - display: flex; - flex-direction: column-reverse; - flex: 1; - } - - .app-info-change { - display: flex; - flex-direction: row; - padding-bottom: 5px; - - .app-info-number { - width: 20px; - } - - span { - flex: 1; - } - } - - .app-info-list { - padding: 5px 0; - - div { - padding: 5px 0; - } - } -} diff --git a/src/styles/dialogs.scss b/src/styles/dialogs.scss new file mode 100644 index 0000000..ed7d7f5 --- /dev/null +++ b/src/styles/dialogs.scss @@ -0,0 +1,542 @@ +.dialog { + position: fixed; + left: 0; + top: 0; + width: 360px; + height: 100%; + z-index: 5; + display: flex; + flex-direction: column; + + padding: 10px 10px 68px 10px; + box-sizing: border-box; + + transform: translate3d(-100%, 0, 0); + pointer-events: none; + transition: transform 500ms, background-color 500ms 500ms; + + &.active { + transform: translate3d(0, 0, 0); + pointer-events: all; + transition: transform 500ms 250ms, background-color 250ms; + + .dialog-close-button { + opacity: 1; + transform: translate3d(0, 0, 0); + } + } + + @media (max-width: $mobile_breakpoint) { + width: 100%; + z-index: 6; + transform: translate3d(0, 100%, 0); + padding: 0 0 68px 0; + + &.active { + background: rgba(19, 45, 53, 0.95); + } + } +} + +.dialog-close-button { + position: absolute; + right: -38px; + bottom: 68px; + background: $red_secondary; + width: 48px; + height: 48px; + transform: translate3d(-48px, 0, 0); + border-radius: 0 $panel_radius $panel_radius 0; + opacity: 0; + + transition: all 250ms 250ms; + z-index: -1; + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + + svg { + fill: white; + width: 40px; + height: 40px; + } + + @media (max-width: $mobile_breakpoint) { + border-radius: $panel_radius; + bottom: 0; + right: 0; + width: 100%; + height: 68px; + background: $dialog_background; + } +} + +.dialog-content { + background: $dialog_background; + overflow: hidden; + position: relative; + border-radius: $panel_radius $panel_radius 0 $panel_radius; + box-shadow: $dialog_shadow; + + display: flex; + flex-direction: column; + + a { + color: white; + opacity: 0.8; + } + + &.full { + flex: 1; + } +} + +.dialog-flex-scroll { + display: flex; + align-items: flex-end; + justify-content: center; + // height: 100%; +} + +.nominatim-dialog-content { + padding-bottom: 48px; + min-height: 25vh; +} + +.nominatim-list-item { + padding: 10px; + color: white; + cursor: pointer; + transition: background-color 0.25s; + display: flex; + align-items: center; + justify-content: center; + // padding-bottom: 200px; + + &:hover { + background: rgba(255, 255, 255, 0.1); + } + + .title { + text-overflow: hidden; + font-size: 12px; + -webkit-line-clamp: 2; + } +} + +.dialog-shader { + &::before, + &::after { + content: ' '; + height: 40px; + width: 100%; + left: 0; + top: 0; + background: linear-gradient(180deg, rgba(39, 21, 53, 1), rgba(39, 21, 53, 0)); + position: absolute; + z-index: 5; + pointer-events: none; + } + + &::after { + top: auto; + bottom: 0; + background: linear-gradient(0deg, rgba(39, 21, 53, 1), rgba(39, 21, 53, 0)); + } +} + +.dialog-maplist { + box-sizing: border-box; + padding: 10px 0 0 0; +} + +@keyframes pulse { + 0% { + opacity: 1; + } + 100% { + opacity: 0.5; + } +} + +@keyframes spin { + 0% { + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +.dialog-maplist-pulse { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + z-index: 10; + background: linear-gradient(fade($loading_shade, 0%), $loading_shade 70%); + height: 100px; + pointer-events: none; + transition: opacity 100ms; + opacity: 0; + + &.active { + opacity: 1; + animation: pulse 500ms 250ms infinite alternate; + } +} + +.dialog-maplist-loader { + display: flex; + margin-bottom: 10px; + text-transform: uppercase; + color: white; + align-items: center; + justify-content: center; + user-select: none; + opacity: 0.1; + + position: absolute; + width: 100%; + height: 100%; + pointer-events: none; + padding-top: 200px; + box-sizing: border-box; + font-weight: 600; + font-size: 20px; + text-align: center; + + .spin { + animation: spin infinite reverse 2s linear; + } + + .dialog-maplist-icon { + position: absolute; + left: 50%; + top: 50%; + margin-left: -100px; + margin-top: -100px; + + svg { + width: 200px; + height: 200px; + fill: white; + } + } +} + +.route-row-wrapper { + padding: 0 10px; + position: relative; + margin-bottom: 10px; + transition: all 500ms; + display: flex; + flex-direction: column; + + &.has_edit { + //transform: translateY(-2px); + .route-row { + background: fade($green_secondary, 30%); + } + } + + &.is_menu_target { + .route-row, + .route-row-fav { + transform: translateX(-120px); + } + + .route-row-edit-menu { + width: 120px; + } + } +} + +.route-row-editor { + color: white; + padding: 5px 0 5px; +} + +.route-row-buttons { + flex: 1; + flex-direction: row; + display: flex; + align-items: center; +} + +.route-row-view { + overflow: hidden; + transition: height 500ms; + position: relative; + display: flex; + + &.has_menu { + padding-right: 32px; + } +} + +.route-row-edit { + background: fade($green_secondary, 30%); +} + +.route-row-drop { + background: fade($red_secondary, 20%); + + .route-row { + align-items: center; + } +} + +.route-row { + background: rgba(255, 255, 255, 0.05); + padding: 10px 10px 5px 10px; + color: white; + user-select: none; + cursor: pointer; + transition: background 250ms, transform 500ms; + position: relative; + flex: 1; + min-height: 64px; + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: center; + align-items: stretch; + + &:hover { + background: rgba(255, 255, 255, 0.1); + + .route-row-panel { + transform: scaleY(1); + pointer-events: all; + touch-action: initial; + } + } +} + +.route-row-edit-button { + width: 32px; + background: rgba(255, 255, 255, 0.08); + fill: rgba(255, 255, 255, 0.5); + display: flex; + justify-content: center; + align-items: center; + transition: all 250ms; + position: absolute; + top: 0; + right: 0; + height: 100%; + + &:hover { + background: rgba(255, 255, 255, 0.1); + } +} + +.route-row-fav { + width: 32px; + display: flex; + align-items: center; + justify-content: center; + fill: fade(white, 30%); + background: fade(white, 8%); + cursor: pointer; + transition: background 250ms, transform 500ms; + + &:hover { + background: fade(white, 10%); + } +} + +.route-row-edit-menu { + width: 0; + height: 100%; + right: 32px; + bottom: 0; + position: absolute; + background: rgba(0, 0, 0, 0.1); + overflow: hidden; + transition: all 500ms; + display: flex; + fill: fade(white, 30%); + + div { + width: 60px; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + + &:first-child { + box-shadow: fade(black, 30%) 1px 0; + } + + &:hover { + background: fade($red_secondary, 30%); + } + + &.modify-button { + &:hover { + background: fade($green_secondary, 30%); + } + } + } +} + +.route-title { + margin-bottom: 5px; + font-weight: bold; + + text-overflow: ellipsis; + overflow: hidden; + position: relative; + max-height: 2.4em; + word-break: break-word; + display: flex; + + .route-row-corner { + svg { + fill: fade(white, 50%); + margin-right: 2px; + flex-shrink: 0; + } + } +} + +.route-description { + font-size: 0.9em; + opacity: 0.3; + margin-bottom: 5px; + display: grid; + grid-template-columns: 2fr 1fr; + + svg { + width: 20px; + height: 20px; + fill: white; + vertical-align: text-bottom; + margin-bottom: -2px; + } + + span { + padding-right: 10px; + + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } +} + +.dialog-head { + background: rgba(255, 255, 255, 0.1); + padding: 10px; + color: white; +} + +.dialog-tabs { + background: rgba(255, 255, 255, 0); + border-radius: $panel_radius $panel_radius 0 0; + height: 32px; + user-select: none; + flex-direction: row; + display: flex; + + .dialog-tab { + display: inline-flex; + align-items: center; + justify-content: center; + color: white; + padding: 0 20px; + cursor: pointer; + border-radius: $panel_radius $panel_radius 0 0; + flex: 1; + height: 32px; + + &.active { + background: rgba(255, 255, 255, 0.1); + } + } + + @media (max-width: $mobile_breakpoint) { + height: 48px; + + .dialog-tab { + height: 48px; + } + } +} + +.dialog-head-title { + font-size: 20px; + text-transform: uppercase; +} + +.app-info-changelog { + color: white; + padding: 10px; + font-size: 0.8em; + user-select: none; + + div { + opacity: 0.8; + } +} + +.app-info-number { + width: 16px; +} + +.app-info-changelog-item { + text-transform: uppercase; + display: flex; + flex: 1; + + .app-info-current { + font-size: 0.9em; + opacity: 0.3; + display: inline; + padding-left: 10px; + } +} + +.app-info-version { + padding-bottom: 5px; + flex: 1; + flex-direction: column-reverse; +} + +.app-info-release { + padding-bottom: 5px; + display: flex; + flex: 1; +} + +.app-info-build { + padding-bottom: 5px; + display: flex; + flex-direction: column-reverse; + flex: 1; +} + +.app-info-change { + display: flex; + flex-direction: row; + padding-bottom: 5px; + + .app-info-number { + width: 20px; + } + + span { + flex: 1; + } +} + +.app-info-list { + padding: 5px 0; + + div { + padding: 5px 0; + } +} diff --git a/src/styles/gpx.less b/src/styles/gpx.less deleted file mode 100644 index 695c73d..0000000 --- a/src/styles/gpx.less +++ /dev/null @@ -1,101 +0,0 @@ -:global { - .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; - } - - &__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 { - 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; - } - } - - .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; - } -} diff --git a/src/styles/gpx.scss b/src/styles/gpx.scss new file mode 100644 index 0000000..05d5310 --- /dev/null +++ b/src/styles/gpx.scss @@ -0,0 +1,99 @@ +.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; + } + + &__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 { + 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; + } +} + +.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; +} diff --git a/src/styles/logo.less b/src/styles/logo.less deleted file mode 100644 index 8d9272e..0000000 --- a/src/styles/logo.less +++ /dev/null @@ -1,24 +0,0 @@ -:global { - .logo-preview { - position: fixed; - right: 0; - bottom: 58px; - - width: 400px; - height: 100%; - - opacity: 0.5; - pointer-events: none; - z-index: 2; - background: 100% 100% no-repeat; - - &.top { - background-position: 100% 0; - } - - @media (max-width: @mobile_breakpoint) { - transform: scale(0.5); - transform-origin: 100% 100%; - } - } -} diff --git a/src/styles/logo.scss b/src/styles/logo.scss new file mode 100644 index 0000000..b036d68 --- /dev/null +++ b/src/styles/logo.scss @@ -0,0 +1,22 @@ +.logo-preview { + position: fixed; + right: 0; + bottom: 58px; + + width: 400px; + height: 100%; + + opacity: 0.5; + pointer-events: none; + z-index: 2; + background: 100% 100% no-repeat; + + &.top { + background-position: 100% 0; + } + + @media (max-width: $mobile_breakpoint) { + transform: scale(0.5); + transform-origin: 100% 100%; + } +} diff --git a/src/styles/main.less b/src/styles/main.less deleted file mode 100644 index 70e6c95..0000000 --- a/src/styles/main.less +++ /dev/null @@ -1,173 +0,0 @@ -@import 'colors.less'; - -@import 'map.less'; -@import 'panel.less'; -@import 'router.less'; -@import 'stickers.less'; -@import 'button.less'; -@import 'logo.less'; -@import 'user-button.less'; -@import 'save.less'; -@import 'renderer.less'; -@import 'dialogs.less'; -@import 'progress.less'; -@import 'slider.less'; -@import 'switch.less'; -@import 'gpx.less'; - -: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; - } - - .big { - font-size: 1em; - font-weight: 500; - } - - .upper { - text-transform: uppercase; - } - - .small { - font-size: 0.9em; - } - - .white { - color: white; - } - - .success { - color: @color_success; - } - - .primary { - color: @color_primary; - } - - .danger { - color: @color_danger; - } - - .cursor-tooltip { - position: fixed; - top: 4px; - left: 4px; - width: 10px; - height: 10px; - z-index: 1; - pointer-events: none; - - svg { - 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; - 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; - } -} diff --git a/src/styles/map.less b/src/styles/map.less deleted file mode 100644 index 69ada45..0000000 --- a/src/styles/map.less +++ /dev/null @@ -1,367 +0,0 @@ -:global { - #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; - 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; - 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); - } - } - } - } - - .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 { - 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; - } - } - } - } - - .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; - } - } - } - - .leaflet-km-marker-2 { - .leaflet-km-dist { - background: green; - } - } - - .touch-hinter-poly { - stroke: rgba(255, 50, 0, 0.1); - cursor: grab; - - @media (max-width: @mobile_breakpoint) { - stroke: rgba(255, 50, 0, 0.2); - } - } - - .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; - - &:hover { - background: @bar_background; - color: white; - 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; - } - - &: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 { - 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; - } - } -} diff --git a/src/styles/map.scss b/src/styles/map.scss new file mode 100644 index 0000000..433979a --- /dev/null +++ b/src/styles/map.scss @@ -0,0 +1,365 @@ +#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; + position: absolute; + top: -9px; + left: -9px; + animation: vertex_spin 500ms infinite linear alternate; + } +} + +@mixin 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; + } + + @media (max-width: $mobile_breakpoint) { + &::before { + width: 32px; + height: 32px; + transform: translate(-8px, -8px); + background: rgba(255, 50, 0, 0.3); + } + } + + @include 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; + + &::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; + } + } + } +} + +.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; + } + } +} + +.leaflet-km-marker-2 { + .leaflet-km-dist { + background: green; + } +} + +.touch-hinter-poly { + stroke: rgba(255, 50, 0, 0.1); + cursor: grab; + + @media (max-width: $mobile_breakpoint) { + stroke: rgba(255, 50, 0, 0.2); + } +} + +.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; + + &:hover { + background: $bar_background; + color: white; + 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; + } + + &: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 { + 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; + } +} diff --git a/src/styles/panel.less b/src/styles/panel.less deleted file mode 100644 index 5c8c4f9..0000000 --- a/src/styles/panel.less +++ /dev/null @@ -1,796 +0,0 @@ -:global { - .control-bar { - background: @bar_background; - border-radius: @panel_radius; - display: flex; - box-shadow: @bar_shadow; - align-items: center; - justify-content: center; - - @media (max-width: @mobile_breakpoint) { - box-shadow: none; - } - } - - .control-bar-padded { - padding: 0 5px; - } - - .control-sep { - height: 36px; - background: #222222; - width: 4px; - - @media (max-width: @mobile_breakpoint) { - margin-left: -1px; - margin-right: -1px; - width: 6px; - } - } - - .secondary-bar { - background: #222222; - margin: 0 -1px; - padding: 0 1px; - - &:first-child { - border-radius: @panel_radius 0 0 @panel_radius; - } - - .panel & button { - height: 40px; - padding: 4px; - } - - &__undo { - opacity: 0; - transform: translate(50px, 0); - pointer-events: none; - touch-action: none; - transition: transform 0.25s, opacity 0.25s; - z-index: -1; - - &.active { - opacity: 1; - transform: translate(0, 0); - pointer-events: all; - touch-action: initial; - } - } - } - - .panel { - position: fixed; - left: 10px; - bottom: 10px; - z-index: 6; - color: white; - display: flex; - align-items: center; - transform: translateY(100px); - transition: transform 500ms; - - &.active { - transform: translateY(0); - } - - &.right { - left: auto; - right: 10px; - } - - &.center { - left: 50%; - right: auto; - transform: translateX(-50%); - } - - button { - border: none; - background: transparent; - padding: 8px; - outline: none; - cursor: pointer; - display: inline-flex; - color: white; - align-items: center; - transition: background-color 500ms; - height: 48px; - box-sizing: border-box; - user-select: none; - position: relative; - - &:hover { - background: rgba(100, 100, 100, 0.2); - } - - span { - margin-right: 8px; - font-size: 14px; - font-weight: 500; - margin-left: 8px; - text-transform: uppercase; - } - - &:first-child { - border-radius: @panel_radius 0 0 @panel_radius; - } - - &:last-child { - border-radius: 0 @panel_radius @panel_radius 0; - } - - &.active { - svg { - fill: url(#activeButtonGradient); - stroke: url(#activeButtonGradient); - } - } - - &.disabled, - &.inactive { - color: #999999; - - svg { - fill: #999999; - } - } - - &.disabled { - pointer-events: none; - } - - &.highlighted { - background: rgba(255, 255, 255, 0.1); - } - - &.cancel { - // background: linear-gradient(270deg, #0f5871, #444444 60%); - } - - &.primary { - background: linear-gradient(150deg, @blue_primary, @blue_secondary) 50% 50% no-repeat; - background-size: 100% 100%; - } - - &.success { - background: linear-gradient(150deg, @green_primary, @green_secondary) 50% 50% no-repeat; - background-size: 100% 100%; - } - - &.danger { - background: linear-gradient(150deg, @red_primary, @red_secondary) 50% 50% no-repeat; - background-size: 100% 100%; - } - - &.single { - border-radius: @panel_radius; - } - - svg { - fill: white; - stroke: white; - display: inline; - fill-rule: evenodd; - stroke-linecap: butt; - stroke-linejoin: miter; - stroke-miterlimit: 4; - stroke-dasharray: none; - stroke-width: 3; - } - } - } - - .panel-tooltip { - position: absolute; - bottom: 58px; - left: 50%; - background: @tooltip_background; - padding: 10px; - transform: translate(-50%, -10px); - border-radius: @panel_radius; - opacity: 0; - pointer-events: none; - transition: all 250ms; - font-size: 13px; - color: white; - - @media (max-width: @mobile_breakpoint) { - display: none; - } - - &::after { - content: ' '; - width: 10px; - height: 10px; - position: absolute; - background: @tooltip_background; - bottom: 0; - transform: translate(-50%, 5px) rotate(45deg); - left: 50%; - } - - &.top { - bottom: auto; - top: 43px; - transform: translate(-50%, 10px); - - &::after { - bottom: auto; - top: 0; - transform: translate(-50%, -5px) rotate(45deg); - } - } - } - - .panel button, - .tooltip-container { - position: relative; - - &:hover .panel-tooltip { - opacity: 1; - transform: translate(-50%, 0); - } - } - - .control-bar-counter { - color: white; - min-width: 12px; - height: 12px; - border-radius: 10px; - font-weight: 600; - font-size: 10px; - position: absolute; - bottom: 50%; - right: 50%; - box-sizing: border-box; - transform: translate(50%, 50%); - line-height: 12px; - } - - .panel-separator { - height: 48px; - width: 4px; - background: #222222; - } - - .panel-user { - @media (max-width: @mobile_breakpoint) { - z-index: 3; - flex-direction: column-reverse; - align-items: flex-start; - - .control-sep { - opacity: 0; - height: 10px; - } - } - - @media (max-width: @micro_breakpoint) { - bottom: 68px; - } - } - - .control-dialog { - position: absolute; - right: 10px; - bottom: 68px; - z-index: 3; - color: white; - box-sizing: border-box; - // padding-bottom: 48px; - box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px; - background: #222222; - border-radius: @panel_radius; - - &.bottom.right { - width: 100%; - max-width: 500px; - } - - &.top { - bottom: auto; - top: 52px; - } - - &.left, - &__left { - right: auto; - left: 10px; - - @media (max-width: @micro_breakpoint) { - left: 68px; - } - } - - .helper:first-child { - border-radius: @panel_radius @panel_radius 0 0; - } - - .helper:last-child { - border-radius: 0 0 @panel_radius @panel_radius; - } - - .helper:only-child { - border-radius: @panel_radius; - } - - &__big { - width: calc(100% - 20px); - max-width: 620px; - - @media (max-width: @micro_breakpoint) { - width: calc(100% - 78px); - } - } - - &__medium { - width: calc(100% - 20px); - max-width: 417px; - - @media (max-width: @micro_breakpoint) { - width: calc(100% - 78px); - } - } - - &__small { - width: calc(100% - 20px); - max-width: 324px; - - @media (max-width: @micro_breakpoint) { - width: calc(100% - 78px); - } - } - } - - .control-dialog-provider { - width: 500px; - - @media (max-width: @mobile_breakpoint) { - width: 100%; - left: 0; - padding: 0 10px; - } - } - - .helper { - // width: 500px; - padding: 12px; - font-weight: 200; - font-size: 1em; - display: flex; - - //background: #222222; - //border-radius: @panel_radius; - box-shadow: @bar_shadow; - - @media (max-width: @mobile_breakpoint) { - box-shadow: none; - } - } - - .helper-prefetch { - flex-direction: column; - } - - .helper__text { - width: 100%; - display: flex; - align-items: center; - - svg { - fill: white; - width: 24px; - height: 24px; - margin-right: 6px; - } - - &.success { - color: @color_success; - - svg { - fill: @color_success; - } - } - - &.primary { - color: @color_danger; - - svg { - fill: @color_danger; - } - } - - &.danger { - color: @color_danger; - - svg { - fill: @color_danger; - } - } - } - - .flex_1 { - flex: 1; - } - - .helper__icon_button { - width: 32px; - display: flex; - align-items: center; - justify-content: center; - padding: 0; - background: none; - border: none; - outline: none; - cursor: pointer; - - svg { - margin-right: 0; - } - - &.inactive { - opacity: 0.5; - } - - &.active { - svg { - fill: url(#activeButtonGradient); - } - } - } - - .helper__buttons { - display: flex; - align-items: center; - user-select: none; - - .button { - margin-left: 10px; - } - - svg { - fill: white; - stroke: white; - - cursor: pointer; - opacity: 0.5; - transition: opacity 250ms; - } - - &:hover svg { - opacity: 1; - } - } - - .trash-buttons { - @media (max-width: @mobile_breakpoint) { - flex-direction: column; - - .button-group { - margin-bottom: 10px; - } - } - } - - .logo-helper { - width: 200px; - flex-direction: column; - padding: 16px 0 16px 0; - position: relative; - overflow: hidden; - } - - .helper-back { - width: 200px; - height: 200px; - z-index: -1; - position: absolute; - bottom: 0; - right: 0; - - svg { - fill: @bar_background; - } - } - - .helper-menu-item { - padding: 8px 20px; - user-select: none; - cursor: pointer; - position: relative; - - &:hover { - background: rgba(255, 255, 255, 0.1); - } - - &.active { - &::after { - content: ' '; - width: 16px; - height: 4px; - left: 0; - top: 14px; - position: absolute; - background: white; - } - } - } - - .provider-helper { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - grid-column-gap: 10px; - grid-row-gap: 10px; - - .provider-helper-thumb { - height: 100px; - background: #333333; - display: flex; - align-items: flex-end; - justify-content: center; - background: 50% 50% no-repeat; - border-radius: @panel_radius; - cursor: pointer; - position: relative; - } - - .provider-helper-check { - width: 40px; - height: 40px; - position: absolute; - bottom: 50%; - right: 50%; - background: rgba(0, 0, 0, 0.7); - border-radius: 20px; - transform: translate(50%, 50%); - - svg { - fill: white; - padding: 4px; - } - } - } - - .status-panel { - position: fixed; - top: 10px; - left: 10px; - height: 32px; - z-index: 5; - display: flex; - - &.bottom { - top: auto; - bottom: 68px; - } - - &.right { - left: auto; - right: 10px; - - .status-bar { - margin-right: 0; - margin-left: 10px; - } - } - } - - .status-bar { - background: #222222; - display: flex; - font-weight: 200; - color: #cccccc; - user-select: none; - border-radius: @panel_radius; - margin-right: 10px; - align-items: center; - justify-content: center; - box-shadow: @bar_shadow; - outline: none; - position: relative; - - @media (max-width: @mobile_breakpoint) { - box-shadow: none; - } - - span { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - flex: 1; - text-transform: uppercase; - font-size: 0.9em; - } - - &.square { - width: 32px; - } - - &.padded { - padding: 0 10px; - } - - &.warning { - background-color: shade(@red_secondary, 10%); - - svg { - //fill: @red_secondary; - fill: black; - } - } - - &.icon-only { - padding: 0 10px 0 15px; - } - - &.top-control { - justify-content: flex-start; - } - - svg { - fill: #cccccc; - margin-left: -5px; - } - - &:hover { - .status-bar-tip { - opacity: 1; - } - } - } - - .status-bar-tip { - position: absolute; - background: @bar_background; - top: 100%; - padding: 10px; - margin-top: 10px; - right: 0; - border-radius: @panel_radius; - touch-action: none; - pointer-events: none; - opacity: 0; - transition: opacity 250ms; - } - - .status-bar-sep { - height: 24px; - width: 1px; - background: rgba(255, 255, 255, 0.2); - margin: 0 8px 0 5px; - } - - .dialog-prefetch-stage { - font-size: 1em; - text-transform: uppercase; - opacity: 0.7; - } - - .dialog-prefetch-progress { - padding: 10px 0 5px; - } - - .speed-helper { - width: 300px; - padding: 0 20px; - - .rc-slider { - width: 100%; - } - } - - .title-dialog-wrapper { - position: fixed; - bottom: 0; - left: 0; - width: 360px; - height: 100%; - background: transparent; - z-index: 2; - padding: 10px 10px 58px 10px; - box-sizing: border-box; - display: flex; - align-items: flex-end; - pointer-events: none; - touch-action: none; - } - - .title-dialog-sizer { - height: 100%; - width: 100%; - display: flex; - align-items: flex-end; - } - - .title-dialog { - z-index: 2; - transition: opacity 500ms, transform 1s; - transform: translate(0, 68px); - user-select: none; - pointer-events: all; - touch-action: auto; - display: flex; - flex-direction: column; - opacity: 0; - align-items: flex-start; - - @media (max-width: @mobile_breakpoint) { - display: none; - } - - &.active { - opacity: 1; - transform: translate(0, 0); - } - - .title-dialog-pane { - margin-bottom: 10px; - padding: 10px; - background: @title_dialog_color; - color: fade(white, 50%); - font-size: 13px; - box-sizing: border-box; - border-radius: @panel_radius; - - h2 { - margin: 0; - padding: 0 5px 0 0; - font-weight: 400; - font-size: 1.6em; - color: white; - } - } - - .title-dialog-text { - overflow: hidden; - transition: height 500ms; - line-height: 14px; - padding: 0; - position: relative; - color: white; - - > div { - margin: 10px; - white-space: pre-line; - } - - &.has_shade { - ::after { - content: ' '; - width: 100%; - height: 40px; - background: linear-gradient(fade(@title_dialog_color, 0), @title_dialog_color); - position: absolute; - bottom: 0; - left: 0; - transition: opacity 250ms; - pointer-events: none; - touch-action: none; - } - - &:hover { - ::after { - opacity: 0; - } - } - } - } - } - - .location-bar { - width: 32px; - } - - .nominatim-panel { - position: fixed; - bottom: 53px; - left: 10px; - width: 272px; - } - - .nominatim-search-input { - padding-left: 10px; - flex: 1; - } -} diff --git a/src/styles/panel.scss b/src/styles/panel.scss new file mode 100644 index 0000000..775f956 --- /dev/null +++ b/src/styles/panel.scss @@ -0,0 +1,794 @@ +.control-bar { + background: $bar_background; + border-radius: $panel_radius; + display: flex; + box-shadow: $bar_shadow; + align-items: center; + justify-content: center; + + @media (max-width: $mobile_breakpoint) { + box-shadow: none; + } +} + +.control-bar-padded { + padding: 0 5px; +} + +.control-sep { + height: 36px; + background: #222222; + width: 4px; + + @media (max-width: $mobile_breakpoint) { + margin-left: -1px; + margin-right: -1px; + width: 6px; + } +} + +.secondary-bar { + background: #222222; + margin: 0 -1px; + padding: 0 1px; + + &:first-child { + border-radius: $panel_radius 0 0 $panel_radius; + } + + .panel & button { + height: 40px; + padding: 4px; + } + + &__undo { + opacity: 0; + transform: translate(50px, 0); + pointer-events: none; + touch-action: none; + transition: transform 0.25s, opacity 0.25s; + z-index: -1; + + &.active { + opacity: 1; + transform: translate(0, 0); + pointer-events: all; + touch-action: initial; + } + } +} + +.panel { + position: fixed; + left: 10px; + bottom: 10px; + z-index: 6; + color: white; + display: flex; + align-items: center; + transform: translateY(100px); + transition: transform 500ms; + + &.active { + transform: translateY(0); + } + + &.right { + left: auto; + right: 10px; + } + + &.center { + left: 50%; + right: auto; + transform: translateX(-50%); + } + + button { + border: none; + background: transparent; + padding: 8px; + outline: none; + cursor: pointer; + display: inline-flex; + color: white; + align-items: center; + transition: background-color 500ms; + height: 48px; + box-sizing: border-box; + user-select: none; + position: relative; + + &:hover { + background: rgba(100, 100, 100, 0.2); + } + + span { + margin-right: 8px; + font-size: 14px; + font-weight: 500; + margin-left: 8px; + text-transform: uppercase; + } + + &:first-child { + border-radius: $panel_radius 0 0 $panel_radius; + } + + &:last-child { + border-radius: 0 $panel_radius $panel_radius 0; + } + + &.active { + svg { + fill: url(#activeButtonGradient); + stroke: url(#activeButtonGradient); + } + } + + &.disabled, + &.inactive { + color: #999999; + + svg { + fill: #999999; + } + } + + &.disabled { + pointer-events: none; + } + + &.highlighted { + background: rgba(255, 255, 255, 0.1); + } + + &.cancel { + // background: linear-gradient(270deg, #0f5871, #444444 60%); + } + + &.primary { + background: linear-gradient(150deg, $blue_primary, $blue_secondary) 50% 50% no-repeat; + background-size: 100% 100%; + } + + &.success { + background: linear-gradient(150deg, $green_primary, $green_secondary) 50% 50% no-repeat; + background-size: 100% 100%; + } + + &.danger { + background: linear-gradient(150deg, $red_primary, $red_secondary) 50% 50% no-repeat; + background-size: 100% 100%; + } + + &.single { + border-radius: $panel_radius; + } + + svg { + fill: white; + stroke: white; + display: inline; + fill-rule: evenodd; + stroke-linecap: butt; + stroke-linejoin: miter; + stroke-miterlimit: 4; + stroke-dasharray: none; + stroke-width: 3; + } + } +} + +.panel-tooltip { + position: absolute; + bottom: 58px; + left: 50%; + background: $tooltip_background; + padding: 10px; + transform: translate(-50%, -10px); + border-radius: $panel_radius; + opacity: 0; + pointer-events: none; + transition: all 250ms; + font-size: 13px; + color: white; + + @media (max-width: $mobile_breakpoint) { + display: none; + } + + &::after { + content: ' '; + width: 10px; + height: 10px; + position: absolute; + background: $tooltip_background; + bottom: 0; + transform: translate(-50%, 5px) rotate(45deg); + left: 50%; + } + + &.top { + bottom: auto; + top: 43px; + transform: translate(-50%, 10px); + + &::after { + bottom: auto; + top: 0; + transform: translate(-50%, -5px) rotate(45deg); + } + } +} + +.panel button, +.tooltip-container { + position: relative; + + &:hover .panel-tooltip { + opacity: 1; + transform: translate(-50%, 0); + } +} + +.control-bar-counter { + color: white; + min-width: 12px; + height: 12px; + border-radius: 10px; + font-weight: 600; + font-size: 10px; + position: absolute; + bottom: 50%; + right: 50%; + box-sizing: border-box; + transform: translate(50%, 50%); + line-height: 12px; +} + +.panel-separator { + height: 48px; + width: 4px; + background: #222222; +} + +.panel-user { + @media (max-width: $mobile_breakpoint) { + z-index: 3; + flex-direction: column-reverse; + align-items: flex-start; + + .control-sep { + opacity: 0; + height: 10px; + } + } + + @media (max-width: $micro_breakpoint) { + bottom: 68px; + } +} + +.control-dialog { + position: absolute; + right: 10px; + bottom: 68px; + z-index: 3; + color: white; + box-sizing: border-box; + // padding-bottom: 48px; + box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px; + background: #222222; + border-radius: $panel_radius; + + &.bottom.right { + width: 100%; + max-width: 500px; + } + + &.top { + bottom: auto; + top: 52px; + } + + &.left, + &__left { + right: auto; + left: 10px; + + @media (max-width: $micro_breakpoint) { + left: 68px; + } + } + + .helper:first-child { + border-radius: $panel_radius $panel_radius 0 0; + } + + .helper:last-child { + border-radius: 0 0 $panel_radius $panel_radius; + } + + .helper:only-child { + border-radius: $panel_radius; + } + + &__big { + width: calc(100% - 20px); + max-width: 620px; + + @media (max-width: $micro_breakpoint) { + width: calc(100% - 78px); + } + } + + &__medium { + width: calc(100% - 20px); + max-width: 417px; + + @media (max-width: $micro_breakpoint) { + width: calc(100% - 78px); + } + } + + &__small { + width: calc(100% - 20px); + max-width: 324px; + + @media (max-width: $micro_breakpoint) { + width: calc(100% - 78px); + } + } +} + +.control-dialog-provider { + width: 500px; + + @media (max-width: $mobile_breakpoint) { + width: 100%; + left: 0; + padding: 0 10px; + } +} + +.helper { + // width: 500px; + padding: 12px; + font-weight: 200; + font-size: 1em; + display: flex; + + //background: #222222; + //border-radius: $panel_radius; + box-shadow: $bar_shadow; + + @media (max-width: $mobile_breakpoint) { + box-shadow: none; + } +} + +.helper-prefetch { + flex-direction: column; +} + +.helper__text { + width: 100%; + display: flex; + align-items: center; + + svg { + fill: white; + width: 24px; + height: 24px; + margin-right: 6px; + } + + &.success { + color: $color_success; + + svg { + fill: $color_success; + } + } + + &.primary { + color: $color_danger; + + svg { + fill: $color_danger; + } + } + + &.danger { + color: $color_danger; + + svg { + fill: $color_danger; + } + } +} + +.flex_1 { + flex: 1; +} + +.helper__icon_button { + width: 32px; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + background: none; + border: none; + outline: none; + cursor: pointer; + + svg { + margin-right: 0; + } + + &.inactive { + opacity: 0.5; + } + + &.active { + svg { + fill: url(#activeButtonGradient); + } + } +} + +.helper__buttons { + display: flex; + align-items: center; + user-select: none; + + .button { + margin-left: 10px; + } + + svg { + fill: white; + stroke: white; + + cursor: pointer; + opacity: 0.5; + transition: opacity 250ms; + } + + &:hover svg { + opacity: 1; + } +} + +.trash-buttons { + @media (max-width: $mobile_breakpoint) { + flex-direction: column; + + .button-group { + margin-bottom: 10px; + } + } +} + +.logo-helper { + width: 200px; + flex-direction: column; + padding: 16px 0 16px 0; + position: relative; + overflow: hidden; +} + +.helper-back { + width: 200px; + height: 200px; + z-index: -1; + position: absolute; + bottom: 0; + right: 0; + + svg { + fill: $bar_background; + } +} + +.helper-menu-item { + padding: 8px 20px; + user-select: none; + cursor: pointer; + position: relative; + + &:hover { + background: rgba(255, 255, 255, 0.1); + } + + &.active { + &::after { + content: ' '; + width: 16px; + height: 4px; + left: 0; + top: 14px; + position: absolute; + background: white; + } + } +} + +.provider-helper { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-column-gap: 10px; + grid-row-gap: 10px; + + .provider-helper-thumb { + height: 100px; + background: #333333; + display: flex; + align-items: flex-end; + justify-content: center; + background: 50% 50% no-repeat; + border-radius: $panel_radius; + cursor: pointer; + position: relative; + } + + .provider-helper-check { + width: 40px; + height: 40px; + position: absolute; + bottom: 50%; + right: 50%; + background: rgba(0, 0, 0, 0.7); + border-radius: 20px; + transform: translate(50%, 50%); + + svg { + fill: white; + padding: 4px; + } + } +} + +.status-panel { + position: fixed; + top: 10px; + left: 10px; + height: 32px; + z-index: 5; + display: flex; + + &.bottom { + top: auto; + bottom: 68px; + } + + &.right { + left: auto; + right: 10px; + + .status-bar { + margin-right: 0; + margin-left: 10px; + } + } +} + +.status-bar { + background: #222222; + display: flex; + font-weight: 200; + color: #cccccc; + user-select: none; + border-radius: $panel_radius; + margin-right: 10px; + align-items: center; + justify-content: center; + box-shadow: $bar_shadow; + outline: none; + position: relative; + + @media (max-width: $mobile_breakpoint) { + box-shadow: none; + } + + span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex: 1; + text-transform: uppercase; + font-size: 0.9em; + } + + &.square { + width: 32px; + } + + &.padded { + padding: 0 10px; + } + + &.warning { + background-color: shade($red_secondary, 10%); + + svg { + //fill: $red_secondary; + fill: black; + } + } + + &.icon-only { + padding: 0 10px 0 15px; + } + + &.top-control { + justify-content: flex-start; + } + + svg { + fill: #cccccc; + margin-left: -5px; + } + + &:hover { + .status-bar-tip { + opacity: 1; + } + } +} + +.status-bar-tip { + position: absolute; + background: $bar_background; + top: 100%; + padding: 10px; + margin-top: 10px; + right: 0; + border-radius: $panel_radius; + touch-action: none; + pointer-events: none; + opacity: 0; + transition: opacity 250ms; +} + +.status-bar-sep { + height: 24px; + width: 1px; + background: rgba(255, 255, 255, 0.2); + margin: 0 8px 0 5px; +} + +.dialog-prefetch-stage { + font-size: 1em; + text-transform: uppercase; + opacity: 0.7; +} + +.dialog-prefetch-progress { + padding: 10px 0 5px; +} + +.speed-helper { + width: 300px; + padding: 0 20px; + + .rc-slider { + width: 100%; + } +} + +.title-dialog-wrapper { + position: fixed; + bottom: 0; + left: 0; + width: 360px; + height: 100%; + background: transparent; + z-index: 2; + padding: 10px 10px 58px 10px; + box-sizing: border-box; + display: flex; + align-items: flex-end; + pointer-events: none; + touch-action: none; +} + +.title-dialog-sizer { + height: 100%; + width: 100%; + display: flex; + align-items: flex-end; +} + +.title-dialog { + z-index: 2; + transition: opacity 500ms, transform 1s; + transform: translate(0, 68px); + user-select: none; + pointer-events: all; + touch-action: auto; + display: flex; + flex-direction: column; + opacity: 0; + align-items: flex-start; + + @media (max-width: $mobile_breakpoint) { + display: none; + } + + &.active { + opacity: 1; + transform: translate(0, 0); + } + + .title-dialog-pane { + margin-bottom: 10px; + padding: 10px; + background: $title_dialog_color; + color: fade(white, 50%); + font-size: 13px; + box-sizing: border-box; + border-radius: $panel_radius; + + h2 { + margin: 0; + padding: 0 5px 0 0; + font-weight: 400; + font-size: 1.6em; + color: white; + } + } + + .title-dialog-text { + overflow: hidden; + transition: height 500ms; + line-height: 14px; + padding: 0; + position: relative; + color: white; + + > div { + margin: 10px; + white-space: pre-line; + } + + &.has_shade { + ::after { + content: ' '; + width: 100%; + height: 40px; + background: linear-gradient(fade($title_dialog_color, 0), $title_dialog_color); + position: absolute; + bottom: 0; + left: 0; + transition: opacity 250ms; + pointer-events: none; + touch-action: none; + } + + &:hover { + ::after { + opacity: 0; + } + } + } + } +} + +.location-bar { + width: 32px; +} + +.nominatim-panel { + position: fixed; + bottom: 53px; + left: 10px; + width: 272px; +} + +.nominatim-search-input { + padding-left: 10px; + flex: 1; +} diff --git a/src/styles/progress.less b/src/styles/progress.less deleted file mode 100644 index a9506a5..0000000 --- a/src/styles/progress.less +++ /dev/null @@ -1,18 +0,0 @@ -:global { - .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%; - border-radius: @panel_radius; - transition: width 500ms; - } - } -} diff --git a/src/styles/progress.scss b/src/styles/progress.scss new file mode 100644 index 0000000..dd59173 --- /dev/null +++ b/src/styles/progress.scss @@ -0,0 +1,16 @@ +.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%; + border-radius: $panel_radius; + transition: width 500ms; + } +} diff --git a/src/styles/renderer.less b/src/styles/renderer.less deleted file mode 100644 index eeb1cba..0000000 --- a/src/styles/renderer.less +++ /dev/null @@ -1,55 +0,0 @@ -: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; - 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; - } - } - - .renderer-logo { - position: absolute; - bottom: 0; - right: 0; - pointer-events: none; - - transform-origin: 100% 100%; - } -} diff --git a/src/styles/renderer.scss b/src/styles/renderer.scss new file mode 100644 index 0000000..bbe84d5 --- /dev/null +++ b/src/styles/renderer.scss @@ -0,0 +1,53 @@ +.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 { + 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; + } +} + +.renderer-logo { + position: absolute; + bottom: 0; + right: 0; + pointer-events: none; + + transform-origin: 100% 100%; +} diff --git a/src/styles/router.less b/src/styles/router.less deleted file mode 100644 index e9bd686..0000000 --- a/src/styles/router.less +++ /dev/null @@ -1,43 +0,0 @@ -: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; - } - - } - - .router-helper { - } - - .router-helper__button { - white-space: nowrap; - } -} diff --git a/src/styles/router.scss b/src/styles/router.scss new file mode 100644 index 0000000..db28f70 --- /dev/null +++ b/src/styles/router.scss @@ -0,0 +1,41 @@ +.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; + } + +} + +.router-helper { +} + +.router-helper__button { + white-space: nowrap; +} diff --git a/src/styles/save.less b/src/styles/save.less deleted file mode 100644 index 226c7cd..0000000 --- a/src/styles/save.less +++ /dev/null @@ -1,185 +0,0 @@ -:global { - .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; - } - } - - &.active { - opacity: 1; - touch-action: auto; - pointer-events: all; - - svg { - animation: jump infinite alternate 600ms; - } - } - } - - .save-description { - padding: 5px 10px; - } - - .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; - } -} diff --git a/src/styles/save.scss b/src/styles/save.scss new file mode 100644 index 0000000..862b130 --- /dev/null +++ b/src/styles/save.scss @@ -0,0 +1,183 @@ +.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; + } + } + + &.active { + opacity: 1; + touch-action: auto; + pointer-events: all; + + svg { + animation: jump infinite alternate 600ms; + } + } +} + +.save-description { + padding: 5px 10px; +} + +.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; +} diff --git a/src/styles/slider.less b/src/styles/slider.scss similarity index 58% rename from src/styles/slider.less rename to src/styles/slider.scss index 7241e58..c974fcb 100644 --- a/src/styles/slider.less +++ b/src/styles/slider.scss @@ -1,44 +1,42 @@ -@prefixClass: rc-slider; +$disabledColor: #ccc; +$border-radius-base: 6px; +$primary-color: transparent; +$tooltip-color: #fff; +$tooltip-bg: darken(#666, 4%); +$tooltip-arrow-width: 4px; +$tooltip-distance: $tooltip-arrow-width+4; +$tooltip-arrow-color: $tooltip-bg; +$ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1); +$ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06); -@disabledColor: #ccc; -@border-radius-base: 6px; -@primary-color: transparent; -@tooltip-color: #fff; -@tooltip-bg: tint(#666, 4%); -@tooltip-arrow-width: 4px; -@tooltip-distance: @tooltip-arrow-width+4; -@tooltip-arrow-color: @tooltip-bg; -@ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1); -@ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06); +@mixin 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 - - * { - box-sizing: border-box; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari - } } +} - .@{prefixClass} { +:global { + .rc-slider { position: relative; height: 40px; padding: 15px 0; // width: 100%; margin: 8px; - border-radius: @border-radius-base; + border-radius: $border-radius-base; touch-action: none; - .borderBox(); + @include borderBox(); &-rail { position: absolute; width: 100%; background-color: rgba(0, 0, 0, 0.3); height: 4px; - border-radius: @border-radius-base; + border-radius: $border-radius-base; pointer-events: none; } @@ -46,8 +44,8 @@ position: absolute; left: 0; height: 4px; - border-radius: @border-radius-base; - background: linear-gradient(270deg, @red_secondary, @blue_secondary); + border-radius: $border-radius-base; + background: linear-gradient(270deg, $red_secondary, $blue_secondary); // background-size: 320px 100px; } @@ -57,11 +55,9 @@ margin-top: -5px; width: 14px; height: 14px; - cursor: pointer; - cursor: -webkit-grab; cursor: grab; border-radius: 50%; - border: solid 2px tint(@primary-color, 50%); + border: solid 2px darken($primary-color, 50%); background-color: #fff; touch-action: pan-x; @@ -79,24 +75,23 @@ } &:focus { - // border-color: tint(@primary-color, 20%); - box-shadow: 0 0 0 4px tint(@primary-color, 50%); + // border-color: darken($primary-color, 20%); + box-shadow: 0 0 0 4px darken($primary-color, 50%); outline: none; } &-click-focused:focus { - // border-color: tint(@primary-color, 50%); + // border-color: darken($primary-color, 50%); box-shadow: unset; } &:hover { - border-color: tint(@primary-color, 20%); + border-color: darken($primary-color, 20%); } &:active { - border-color: tint(@primary-color, 20%); - box-shadow: 0 0 5px tint(@primary-color, 20%); - cursor: -webkit-grabbing; + border-color: darken($primary-color, 20%); + box-shadow: 0 0 5px darken($primary-color, 20%); cursor: grabbing; } } @@ -141,38 +136,38 @@ vertical-align: middle; &-active { - // border-color: tint(@primary-color, 50%); + // border-color: darken($primary-color, 50%); background-color: white; opacity: 0.2; } } &-disabled { - .@{prefixClass}-track { - background-color: @disabledColor; + .rc-slider-track { + background-color: $disabledColor; } - .@{prefixClass}-handle, .@{prefixClass}-dot { - border-color: @disabledColor; + .rc-slider-handle, .rc-slider-dot { + border-color: $disabledColor; box-shadow: none; background-color: #fff; cursor: not-allowed; opacity: 0; } - .@{prefixClass}-mark-text, .@{prefixClass}-dot, .@{prefixClass}-track { + .rc-slider-mark-text, .rc-slider-dot, .rc-slider-track { cursor: not-allowed !important; opacity: 0; } } } - .@{prefixClass}-vertical { + .rc-slider-vertical { width: 14px; height: 100%; padding: 0 5px; - .@{prefixClass} { + .rc-slider { &-rail { height: 100%; width: 4px; @@ -218,42 +213,6 @@ } } - .motion-common() { - animation-duration: .3s; - animation-fill-mode: both; - display: block !important; - } - - .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; @@ -278,20 +237,20 @@ } } - .@{prefixClass}-tooltip { + .rc-slider-tooltip { position: absolute; left: -9999px; top: -9999px; visibility: visible; - .borderBox(); + @include borderBox(); &-hidden { display: none; } &-placement-top { - padding: @tooltip-arrow-width 0 @tooltip-distance 0; + padding: $tooltip-arrow-width 0 $tooltip-distance 0; } &-inner { @@ -300,11 +259,11 @@ height: 24px; font-size: 12px; line-height: 1; - color: @tooltip-color; + color: $tooltip-color; text-align: center; text-decoration: none; - background-color: @tooltip-bg; - border-radius: @border-radius-base; + background-color: $tooltip-bg; + border-radius: $border-radius-base; box-shadow: 0 0 4px #d9d9d9; } @@ -317,11 +276,11 @@ } &-placement-top &-arrow { - bottom: @tooltip-distance - @tooltip-arrow-width; + 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; + margin-left: -$tooltip-arrow-width; + border-width: $tooltip-arrow-width $tooltip-arrow-width 0; + border-top-color: $tooltip-arrow-color; } } diff --git a/src/styles/stickers.less b/src/styles/stickers.less deleted file mode 100644 index 29efd5a..0000000 --- a/src/styles/stickers.less +++ /dev/null @@ -1,265 +0,0 @@ -:global { - .leaflet-dragging .sticker-container { - transition: none !important; - } - - .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; - 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: 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; - - &: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); - } - } - - .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%; - height: 100%; - font: inherit; - padding: 0; - border: none; - background: none; - color: white; - resize: none; - outline: none; - overflow: hidden; - } - } -} diff --git a/src/styles/stickers.scss b/src/styles/stickers.scss new file mode 100644 index 0000000..7cc207f --- /dev/null +++ b/src/styles/stickers.scss @@ -0,0 +1,263 @@ +.leaflet-dragging .sticker-container { + transition: none !important; +} + +.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; + 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: 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; + + &: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); + } +} + +.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%; + height: 100%; + font: inherit; + padding: 0; + border: none; + background: none; + color: white; + resize: none; + outline: none; + overflow: hidden; + } +} diff --git a/src/styles/switch.less b/src/styles/switch.less deleted file mode 100644 index 445efdf..0000000 --- a/src/styles/switch.less +++ /dev/null @@ -1,34 +0,0 @@ -: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; - - &::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; - } - - &.active { - background: white; - - &::after { - left: 1.2em; - background: #333333; - } - } - } -} diff --git a/src/styles/switch.scss b/src/styles/switch.scss new file mode 100644 index 0000000..8895b4c --- /dev/null +++ b/src/styles/switch.scss @@ -0,0 +1,32 @@ +.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; + transition: all 500ms; + } + + &.active { + background: white; + + &::after { + left: 1.2em; + background: #333333; + } + } +} diff --git a/src/styles/user-button.less b/src/styles/user-button.less deleted file mode 100644 index f2d2866..0000000 --- a/src/styles/user-button.less +++ /dev/null @@ -1,160 +0,0 @@ -: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; - } - } - } - - .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; - } - - &::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; - } - } -} diff --git a/src/styles/user-button.scss b/src/styles/user-button.scss new file mode 100644 index 0000000..eec7fbc --- /dev/null +++ b/src/styles/user-button.scss @@ -0,0 +1,158 @@ +.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; + } + } +} + +.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; + } + + &::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; + } +}