made global less styles

src/styles/button.less

@@ -1,4 +1,5 @@
-.button {
+:global {
+  .button {
     background: #444444;
     padding: 4px 16px;
     height: 18px;
@@ -10,7 +11,7 @@
     align-items: center;
     cursor: pointer;
     user-select: none;
-  box-shadow: inset rgba(100,100,100, 0.3) 1px 0, inset rgba(0,0,0, 0.1) -1px 0;
+    box-shadow: inset rgba(100, 100, 100, 0.3) 1px 0, inset rgba(0,0,0, 0.1) -1px 0;
     color: white;
     font-weight: 400;
     border: none;
@@ -50,9 +51,9 @@
       height: 100%;
       opacity: 0;
     }
-}
+  }
 
-.button-group {
+  .button-group {
     display: flex;
 
     .button {
@@ -67,4 +68,5 @@
         border-radius: 0 @button_radius @button_radius 0;
       }
     }
+  }
 }

src/styles/dialogs.less

@@ -1,4 +1,5 @@
-.dialog {
+:global {
+  .dialog {
     position: fixed;
     left: 0;
     top: 0;
@@ -36,9 +37,9 @@
         background: rgba(19, 45, 53, 0.95);
       }
     }
-}
+  }
 
-.dialog-close-button {
+  .dialog-close-button {
     position: absolute;
     right: -38px;
     bottom: 68px;
@@ -71,9 +72,9 @@
       height: 68px;
       background: @dialog_background;
     }
-}
+  }
 
-.dialog-content {
+  .dialog-content {
     background: @dialog_background;
     overflow: hidden;
     position: relative;
@@ -91,21 +92,21 @@
     &.full {
       flex: 1;
     }
-}
+  }
 
-.dialog-flex-scroll {
+  .dialog-flex-scroll {
     display: flex;
     align-items: flex-end;
     justify-content: center;
     // height: 100%;
-}
+  }
 
-.nominatim-dialog-content {
+  .nominatim-dialog-content {
     padding-bottom: 48px;
     min-height: 25vh;
-}
+  }
 
-.nominatim-list-item {
+  .nominatim-list-item {
     padding: 10px;
     color: white;
     cursor: pointer;
@@ -124,9 +125,9 @@
       font-size: 12px;
       -webkit-line-clamp: 2;
     }
-}
+  }
 
-.dialog-shader {
+  .dialog-shader {
     &::before,
     &::after {
       content: ' ';
@@ -145,32 +146,32 @@
       bottom: 0;
       background: linear-gradient(0deg, rgba(39, 21, 53, 1), rgba(39, 21, 53, 0));
     }
-}
+  }
 
-.dialog-maplist {
+  .dialog-maplist {
     box-sizing: border-box;
     padding: 10px 0 0 0;
-}
+  }
 
-@keyframes pulse {
+  @keyframes pulse {
     0% {
       opacity: 1;
     }
     100% {
       opacity: 0.5;
     }
-}
+  }
 
-@keyframes spin {
+  @keyframes spin {
     0% {
       transform: rotate(0);
     }
     100% {
       transform: rotate(360deg);
     }
-}
+  }
 
-.dialog-maplist-pulse {
+  .dialog-maplist-pulse {
     position: absolute;
     bottom: 0;
     left: 0;
@@ -186,9 +187,9 @@
       opacity: 1;
       animation: pulse 500ms 250ms infinite alternate;
     }
-}
+  }
 
-.dialog-maplist-loader {
+  .dialog-maplist-loader {
     display: flex;
     margin-bottom: 10px;
     text-transform: uppercase;
@@ -211,6 +212,7 @@
     .spin {
       animation: spin infinite reverse 2s linear;
     }
+
     .dialog-maplist-icon {
       position: absolute;
       left: 50%;
@@ -224,9 +226,9 @@
         fill: white;
       }
     }
-}
+  }
 
-.route-row-wrapper {
+  .route-row-wrapper {
     padding: 0 10px;
     position: relative;
     margin-bottom: 10px;
@@ -251,21 +253,21 @@
         width: 120px;
       }
     }
-}
+  }
 
-.route-row-editor {
+  .route-row-editor {
     color: white;
     padding: 5px 0 5px;
-}
+  }
 
-.route-row-buttons {
+  .route-row-buttons {
     flex: 1;
     flex-direction: row;
     display: flex;
     align-items: center;
-}
+  }
 
-.route-row-view {
+  .route-row-view {
     overflow: hidden;
     transition: height 500ms;
     position: relative;
@@ -274,21 +276,21 @@
     &.has_menu {
       padding-right: 32px;
     }
-}
+  }
 
-.route-row-edit {
+  .route-row-edit {
     background: fade(@green_secondary, 30%);
-}
+  }
 
-.route-row-drop {
+  .route-row-drop {
     background: fade(@red_secondary, 20%);
 
     .route-row {
       align-items: center;
     }
-}
+  }
 
-.route-row {
+  .route-row {
     background: rgba(255, 255, 255, 0.05);
     padding: 10px 10px 5px 10px;
     color: white;
@@ -313,9 +315,9 @@
         touch-action: initial;
       }
     }
-}
+  }
 
-.route-row-edit-button {
+  .route-row-edit-button {
     width: 32px;
     background: rgba(255, 255, 255, 0.08);
     fill: rgba(255, 255, 255, 0.5);
@@ -331,9 +333,9 @@
     &:hover {
       background: rgba(255, 255, 255, 0.1);
     }
-}
+  }
 
-.route-row-fav {
+  .route-row-fav {
     width: 32px;
     display: flex;
     align-items: center;
@@ -346,9 +348,9 @@
     &:hover {
       background: fade(white, 10%);
     }
-}
+  }
 
-.route-row-edit-menu {
+  .route-row-edit-menu {
     width: 0;
     height: 100%;
     right: 32px;
@@ -381,9 +383,9 @@
         }
       }
     }
-}
+  }
 
-.route-title {
+  .route-title {
     margin-bottom: 5px;
     font-weight: bold;
 
@@ -401,9 +403,9 @@
         flex-shrink: 0;
       }
     }
-}
+  }
 
-.route-description {
+  .route-description {
     font-size: 0.9em;
     opacity: 0.3;
     margin-bottom: 5px;
@@ -425,15 +427,15 @@
       overflow: hidden;
       white-space: nowrap;
     }
-}
+  }
 
-.dialog-head {
+  .dialog-head {
     background: rgba(255, 255, 255, 0.1);
     padding: 10px;
     color: white;
-}
+  }
 
-.dialog-tabs {
+  .dialog-tabs {
     background: rgba(255, 255, 255, 0);
     border-radius: @panel_radius @panel_radius 0 0;
     height: 32px;
@@ -464,14 +466,14 @@
         height: 48px;
       }
     }
-}
+  }
 
-.dialog-head-title {
+  .dialog-head-title {
     font-size: 20px;
     text-transform: uppercase;
-}
+  }
 
-.app-info-changelog {
+  .app-info-changelog {
     color: white;
     padding: 10px;
     font-size: 0.8em;
@@ -480,13 +482,13 @@
     div {
       opacity: 0.8;
     }
-}
+  }
 
-.app-info-number {
+  .app-info-number {
     width: 16px;
-}
+  }
 
-.app-info-changelog-item {
+  .app-info-changelog-item {
     text-transform: uppercase;
     display: flex;
     flex: 1;
@@ -497,28 +499,28 @@
       display: inline;
       padding-left: 10px;
     }
-}
+  }
 
-.app-info-version {
+  .app-info-version {
     padding-bottom: 5px;
     flex: 1;
     flex-direction: column-reverse;
-}
+  }
 
-.app-info-release {
+  .app-info-release {
     padding-bottom: 5px;
     display: flex;
     flex: 1;
-}
+  }
 
-.app-info-build {
+  .app-info-build {
     padding-bottom: 5px;
     display: flex;
     flex-direction: column-reverse;
     flex: 1;
-}
+  }
 
-.app-info-change {
+  .app-info-change {
     display: flex;
     flex-direction: row;
     padding-bottom: 5px;
@@ -530,12 +532,13 @@
     span {
       flex: 1;
     }
-}
+  }
 
-.app-info-list {
+  .app-info-list {
     padding: 5px 0;
 
     div {
       padding: 5px 0;
     }
+  }
 }

src/styles/gpx.less

@@ -1,10 +1,11 @@
-.gpx-title {
+:global {
+  .gpx-title {
     display: flex;
     flex-direction: row;
     padding: 10px;
-}
+  }
 
-.gpx-row {
+  .gpx-row {
     display: flex;
     align-items: center;
     justify-content: flex-start;
@@ -58,9 +59,9 @@
 
       // }
     }
-}
+  }
 
-.gpx-buttons {
+  .gpx-buttons {
     padding: 10px;
 
     & > * {
@@ -83,9 +84,9 @@
       align-items: center;
       justify-content: center;
     }
-}
+  }
 
-.gpx-confirm {
+  .gpx-confirm {
     position: absolute;
     bottom: 5%;
     left: 5%;
@@ -95,5 +96,6 @@
     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;
+    box-shadow: rgba(0, 0, 0, 0.5) 0 5px 5px 10px;
+  }
 }

src/styles/logo.less

@@ -1,4 +1,5 @@
-.logo-preview {
+:global {
+  .logo-preview {
     position: fixed;
     right: 0;
     bottom: 58px;
@@ -19,6 +20,5 @@
       transform: scale(0.5);
       transform-origin: 100% 100%;
     }
+  }
 }
-
-

src/styles/main.less

@@ -15,49 +15,50 @@
 @import 'switch.less';
 @import 'gpx.less';
 
-body {
+:global {
+  body {
     font-family: 'Rubik', sans-serif;
     font-size: 15px;
     // letter-spacing: 0.4px;
     padding: 0;
     font-weight: 400;
     -webkit-font-smoothing: antialiased;
-}
+  }
 
-.gray {
+  .gray {
     opacity: 0.5;
-}
+  }
 
-.big {
+  .big {
     font-size: 1em;
     font-weight: 500;
-}
+  }
 
-.upper {
+  .upper {
     text-transform: uppercase;
-}
+  }
 
-.small {
+  .small {
     font-size: 0.9em;
-}
+  }
 
-.white {
+  .white {
     color: white;
-}
+  }
 
-.success {
+  .success {
     color: @color_success;
-}
+  }
 
-.primary {
+  .primary {
     color: @color_primary;
-}
+  }
 
-.danger {
+  .danger {
     color: @color_danger;
-}
+  }
 
-.cursor-tooltip {
+  .cursor-tooltip {
     position: fixed;
     top: 4px;
     left: 4px;
@@ -73,28 +74,28 @@ body {
       fill: black;
     }
 
-  @media(hover: none) {
+    @media (hover: none) {
       display: none;
     }
-}
+  }
 
-.cursor-icon-sticker {
+  .cursor-icon-sticker {
     width: 20px;
     height: 20px;
     background-size: cover;
     background-position: 0 50%;
     position: absolute;
     top: -30px;
-}
+  }
 
-.track-vertical {
+  .track-vertical {
     position: absolute;
     right: 0;
     height: 100%;
     width: 10px !important;
-}
+  }
 
-.thumb-vertical {
+  .thumb-vertical {
     position: absolute;
     width: 20px !important;
     left: -10px;
@@ -116,35 +117,39 @@ body {
       border-radius: 4px 0 0 4px;
       background: rgba(255, 255, 255, 0.5);
     }
-}
+  }
 
-.pointer {
+  .pointer {
     cursor: pointer;
-}
+  }
 
-@media (max-width: @mobile_breakpoint) {
+  @media (max-width: @mobile_breakpoint) {
-  .desktop-only { display: none; }
+    .desktop-only {
-}
+      display: none;
+    }
+  }
 
-@media (min-width: @mobile_breakpoint) {
+  @media (min-width: @mobile_breakpoint) {
-  .mobile-only { display: none; }
+    .mobile-only {
-}
+      display: none;
+    }
+  }
 
-h2 {
+  h2 {
     font: inherit;
     font-size: 18px;
     font-weight: 400;
     text-transform: uppercase;
     margin: 10px 0;
-}
+  }
 
-hr {
+  hr {
     border: none;
     height: 2px;
     background: rgba(0, 0, 0, 0.3);
-}
+  }
 
-input {
+  input {
     width: 100%;
     padding: 5px 10px 5px 10px;
     background: rgba(0, 0, 0, 0.3);
@@ -156,12 +161,13 @@ input {
     font-family: inherit;
     font-size: 14px;
     font-weight: 200;
-}
+  }
 
-.relative {
+  .relative {
     position: relative;
-}
+  }
 
-.justify-end {
+  .justify-end {
     justify-content: flex-end;
+  }
 }

src/styles/map.less

@@ -1,4 +1,5 @@
-#map {
+:global {
+  #map {
     width: 50% !important;
     height: 100%;
     position: absolute;
@@ -7,26 +8,26 @@
     top: 0;
 
     cursor: crosshair;
-}
+  }
 
-.leaflet-control-zoom {
+  .leaflet-control-zoom {
     display: none;
-}
+  }
 
-.leaflet-touch .leaflet-bar a {
+  .leaflet-touch .leaflet-bar a {
     border-radius: @panel_radius !important;
-}
+  }
 
-@keyframes vertex_spin {
+  @keyframes vertex_spin {
     0% {
       transform: scale(1);
     }
     100% {
       transform: scale(1.2);
     }
-}
+  }
 
-.leaflet-vertex-drag-helper {
+  .leaflet-vertex-drag-helper {
     pointer-events: none !important;
     background: fade(red, 50%);
     border-radius: 12px;
@@ -42,9 +43,9 @@
       left: -9px;
       animation: vertex_spin 500ms infinite linear alternate;
     }
-}
+  }
 
-.vertex-icon-mixin(@left, @right) {
+  .vertex-icon-mixin(@left, @right) {
     &::after {
       content: ' ';
       position: absolute;
@@ -58,9 +59,9 @@
       transform: scale(1);
       transition: transform 150ms;
     }
-}
+  }
 
-.leaflet-vertex-icon {
+  .leaflet-vertex-icon {
     outline: none !important;
     border-radius: 10px;
     opacity: 1;
@@ -99,23 +100,23 @@
     &:hover {
       opacity: 1;
     }
-}
+  }
 
-.leaflet-arrow {
+  .leaflet-arrow {
     position: absolute;
     left: -18px;
     top: -18px;
     width: 48px;
     height: 48px;
     pointer-events: none;
-}
+  }
 
-.leaflet-arrow-icon {
+  .leaflet-arrow-icon {
     pointer-events: none !important;
-}
+  }
 
-.leaflet-km-marker,
+  .leaflet-km-marker,
-.leaflet-km-marker-2 {
+  .leaflet-km-marker-2 {
     position: absolute;
     z-index: 0 !important;
 
@@ -148,17 +149,17 @@
         }
       }
     }
-}
+  }
 
-.start-marker {
+  .start-marker {
     svg {
       position: absolute;
       left: -4px;
       top: -4px;
     }
-}
+  }
 
-.end-marker {
+  .end-marker {
     .leaflet-km-dist {
       left: auto;
       right: -3px;
@@ -192,9 +193,9 @@
         }
       }
     }
-}
+  }
 
-.router-marker {
+  .router-marker {
     div {
       background: @router_line;
       color: white;
@@ -215,33 +216,33 @@
         left: 15px;
       }
     }
-}
+  }
 
-.leaflet-km-marker-2 {
+  .leaflet-km-marker-2 {
     .leaflet-km-dist {
       background: green;
     }
-}
+  }
 
-.touch-hinter-poly {
+  .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 {
+  .leaflet-control-container .leaflet-routing-container-hide {
     display: none;
-}
+  }
 
-.leaflet-bar {
+  .leaflet-bar {
     box-shadow: @bar_shadow !important;
     border: none !important;
-}
+  }
 
-.leaflet-bar a {
+  .leaflet-bar a {
     background: @bar_background;
     color: white;
     text-shadow: none;
@@ -253,9 +254,9 @@
       color: white;
       border-bottom: none;
     }
-}
+  }
 
-.location-marker {
+  .location-marker {
     width: 20px;
     height: 3px;
     margin-left: -10px;
@@ -286,18 +287,18 @@
       top: -9px;
       position: absolute;
     }
-}
+  }
 
-.leaflet-top {
+  .leaflet-top {
     top: 42px;
-}
+  }
 
-.leaflet-div-icon {
+  .leaflet-div-icon {
     background: none !important;
     border: none !important;
-}
+  }
 
-.custom-marker-cluster {
+  .custom-marker-cluster {
     width: 24px;
     height: 24px;
     background: @cluster_small;
@@ -332,9 +333,9 @@
       border-radius: 8px;
       font-size: 11px;
     }
-}
+  }
 
-#canvas {
+  #canvas {
     background: #eeeeee;
     z-index: 0;
 
@@ -342,13 +343,13 @@
       width: 100%;
       height: 100%;
     }
-}
+  }
 
-.leaflet-pane {
+  .leaflet-pane {
     user-select: none;
-}
+  }
 
-.current-location {
+  .current-location {
     width: 0;
     height: 0;
     position: relative;
@@ -362,5 +363,5 @@
       stroke: white;
       stroke-width: 0.2px;
     }
+  }
 }
- 

src/styles/panel.less

@@ -1,4 +1,5 @@
-.control-bar {
+:global {
+  .control-bar {
     background: @bar_background;
     border-radius: @panel_radius;
     display: flex;
@@ -9,13 +10,13 @@
     @media (max-width: @mobile_breakpoint) {
       box-shadow: none;
     }
-}
+  }
 
-.control-bar-padded {
+  .control-bar-padded {
     padding: 0 5px;
-}
+  }
 
-.control-sep {
+  .control-sep {
     height: 36px;
     background: #222222;
     width: 4px;
@@ -25,9 +26,9 @@
       margin-right: -1px;
       width: 6px;
     }
-}
+  }
 
-.secondary-bar {
+  .secondary-bar {
     background: #222222;
     margin: 0 -1px;
     padding: 0 1px;
@@ -56,9 +57,9 @@
         touch-action: initial;
       }
     }
-}
+  }
 
-.panel {
+  .panel {
     position: fixed;
     left: 10px;
     bottom: 10px;
@@ -178,9 +179,9 @@
         stroke-width: 3;
       }
     }
-}
+  }
 
-.panel-tooltip {
+  .panel-tooltip {
     position: absolute;
     bottom: 58px;
     left: 50%;
@@ -220,19 +221,19 @@
         transform: translate(-50%, -5px) rotate(45deg);
       }
     }
-}
+  }
 
-.panel button,
+  .panel button,
-.tooltip-container {
+  .tooltip-container {
     position: relative;
 
     &:hover .panel-tooltip {
       opacity: 1;
       transform: translate(-50%, 0);
     }
-}
+  }
 
-.control-bar-counter {
+  .control-bar-counter {
     color: white;
     min-width: 12px;
     height: 12px;
@@ -245,15 +246,15 @@
     box-sizing: border-box;
     transform: translate(50%, 50%);
     line-height: 12px;
-}
+  }
 
-.panel-separator {
+  .panel-separator {
     height: 48px;
     width: 4px;
     background: #222222;
-}
+  }
 
-.panel-user {
+  .panel-user {
     @media (max-width: @mobile_breakpoint) {
       z-index: 3;
       flex-direction: column-reverse;
@@ -268,9 +269,9 @@
     @media (max-width: @micro_breakpoint) {
       bottom: 68px;
     }
-}
+  }
 
-.control-dialog {
+  .control-dialog {
     position: absolute;
     right: 10px;
     bottom: 68px;
@@ -340,9 +341,9 @@
         width: calc(100% - 78px);
       }
     }
-}
+  }
 
-.control-dialog-provider {
+  .control-dialog-provider {
     width: 500px;
 
     @media (max-width: @mobile_breakpoint) {
@@ -350,9 +351,9 @@
       left: 0;
       padding: 0 10px;
     }
-}
+  }
 
-.helper {
+  .helper {
     // width: 500px;
     padding: 12px;
     font-weight: 200;
@@ -366,13 +367,13 @@
     @media (max-width: @mobile_breakpoint) {
       box-shadow: none;
     }
-}
+  }
 
-.helper-prefetch {
+  .helper-prefetch {
     flex-direction: column;
-}
+  }
 
-.helper__text {
+  .helper__text {
     width: 100%;
     display: flex;
     align-items: center;
@@ -407,13 +408,13 @@
         fill: @color_danger;
       }
     }
-}
+  }
 
-.flex_1 {
+  .flex_1 {
     flex: 1;
-}
+  }
 
-.helper__icon_button {
+  .helper__icon_button {
     width: 32px;
     display: flex;
     align-items: center;
@@ -437,9 +438,9 @@
         fill: url(#activeButtonGradient);
       }
     }
-}
+  }
 
-.helper__buttons {
+  .helper__buttons {
     display: flex;
     align-items: center;
     user-select: none;
@@ -460,9 +461,9 @@
     &:hover svg {
       opacity: 1;
     }
-}
+  }
 
-.trash-buttons {
+  .trash-buttons {
     @media (max-width: @mobile_breakpoint) {
       flex-direction: column;
 
@@ -470,17 +471,17 @@
         margin-bottom: 10px;
       }
     }
-}
+  }
 
-.logo-helper {
+  .logo-helper {
     width: 200px;
     flex-direction: column;
     padding: 16px 0 16px 0;
     position: relative;
     overflow: hidden;
-}
+  }
 
-.helper-back {
+  .helper-back {
     width: 200px;
     height: 200px;
     z-index: -1;
@@ -491,9 +492,9 @@
     svg {
       fill: @bar_background;
     }
-}
+  }
 
-.helper-menu-item {
+  .helper-menu-item {
     padding: 8px 20px;
     user-select: none;
     cursor: pointer;
@@ -514,9 +515,9 @@
         background: white;
       }
     }
-}
+  }
 
-.provider-helper {
+  .provider-helper {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     grid-column-gap: 10px;
@@ -549,9 +550,9 @@
         padding: 4px;
       }
     }
-}
+  }
 
-.status-panel {
+  .status-panel {
     position: fixed;
     top: 10px;
     left: 10px;
@@ -573,9 +574,9 @@
         margin-left: 10px;
       }
     }
-}
+  }
 
-.status-bar {
+  .status-bar {
     background: #222222;
     display: flex;
     font-weight: 200;
@@ -637,9 +638,9 @@
         opacity: 1;
       }
     }
-}
+  }
 
-.status-bar-tip {
+  .status-bar-tip {
     position: absolute;
     background: @bar_background;
     top: 100%;
@@ -651,35 +652,35 @@
     pointer-events: none;
     opacity: 0;
     transition: opacity 250ms;
-}
+  }
 
-.status-bar-sep {
+  .status-bar-sep {
     height: 24px;
     width: 1px;
     background: rgba(255, 255, 255, 0.2);
     margin: 0 8px 0 5px;
-}
+  }
 
-.dialog-prefetch-stage {
+  .dialog-prefetch-stage {
     font-size: 1em;
     text-transform: uppercase;
     opacity: 0.7;
-}
+  }
 
-.dialog-prefetch-progress {
+  .dialog-prefetch-progress {
     padding: 10px 0 5px;
-}
+  }
 
-.speed-helper {
+  .speed-helper {
     width: 300px;
     padding: 0 20px;
 
     .rc-slider {
       width: 100%;
     }
-}
+  }
 
-.title-dialog-wrapper {
+  .title-dialog-wrapper {
     position: fixed;
     bottom: 0;
     left: 0;
@@ -693,16 +694,16 @@
     align-items: flex-end;
     pointer-events: none;
     touch-action: none;
-}
+  }
 
-.title-dialog-sizer {
+  .title-dialog-sizer {
     height: 100%;
     width: 100%;
     display: flex;
     align-items: flex-end;
-}
+  }
 
-.title-dialog {
+  .title-dialog {
     z-index: 2;
     transition: opacity 500ms, transform 1s;
     transform: translate(0, 68px);
@@ -775,20 +776,21 @@
         }
       }
     }
-}
+  }
 
-.location-bar {
+  .location-bar {
     width: 32px;
-}
+  }
 
-.nominatim-panel {
+  .nominatim-panel {
     position: fixed;
     bottom: 53px;
     left: 10px;
     width: 272px;
-}
+  }
 
-.nominatim-search-input {
+  .nominatim-search-input {
     padding-left: 10px;
     flex: 1;
+  }
 }

src/styles/progress.less

@@ -1,4 +1,5 @@
-.progress {
+:global {
+  .progress {
     width: 100%;
     position: relative;
     height: 5px;
@@ -13,4 +14,5 @@
       border-radius: @panel_radius;
       transition: width 500ms;
     }
+  }
 }

src/styles/renderer.less

@@ -1,4 +1,5 @@
-.renderer-shade {
+:global {
+  .renderer-shade {
     position: fixed;
     top: 0;
     left: 0;
@@ -41,13 +42,14 @@
       border: none;
       box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px;
     }
-}
+  }
 
-.renderer-logo {
+  .renderer-logo {
     position: absolute;
     bottom: 0;
     right: 0;
     pointer-events: none;
 
     transform-origin: 100% 100%;
+  }
 }

src/styles/router.less

@@ -1,4 +1,5 @@
-.router-waypoint {
+:global {
+  .router-waypoint {
     width: 40px;
     height: 40px;
     margin-left: -20px;
@@ -31,11 +32,12 @@
       top: 18px;
     }
 
-}
+  }
 
-.router-helper {
+  .router-helper {
-}
+  }
 
-.router-helper__button {
+  .router-helper__button {
     white-space: nowrap;
+  }
 }

src/styles/save.less

@@ -1,9 +1,10 @@
-.save-helper {
+:global {
+  .save-helper {
     padding: 0;
     flex-direction: column;
-}
+  }
 
-.save-title {
+  .save-title {
     padding: 10px;
     width: 100%;
     background: linear-gradient(175deg, #abc837 -50%, #009c80 150%);
@@ -11,14 +12,18 @@
     border-radius: @panel_radius @panel_radius 0 0;
     font-weight: 200;
     box-sizing: border-box;
-}
+  }
 
-@keyframes jump {
+  @keyframes jump {
-  0% { transform: translate3d(0, 0, 0) scale(0.5); }
+    0% {
-  100% { transform: translate3d(0, -20px, 0) scale(1); }
+      transform: translate3d(0, 0, 0) scale(0.5);
-}
+    }
+    100% {
+      transform: translate3d(0, -20px, 0) scale(1);
+    }
+  }
 
-.save-loader {
+  .save-loader {
     position: absolute;
     top: 0;
     left: 0;
@@ -40,8 +45,13 @@
     svg {
       fill: white;
 
-    &:nth-child(2) { animation-delay: 200ms; }
+      &:nth-child(2) {
-    &:nth-child(3) { animation-delay: 400ms; }
+        animation-delay: 200ms;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 400ms;
+      }
     }
 
     &.active {
@@ -53,13 +63,13 @@
         animation: jump infinite alternate 600ms;
       }
     }
-}
+  }
 
-.save-description {
+  .save-description {
     padding: 5px 10px;
-}
+  }
 
-.save-title-input {
+  .save-title-input {
     background: rgba(0, 0, 0, 0.3);
     border-radius: @panel_radius;
     display: flex;
@@ -76,16 +86,16 @@
       font-size: 14px;
       font-weight: 200;
     }
-}
+  }
 
-.save-title-label {
+  .save-title-label {
     display: flex;
     padding: 5px 10px;
-  background: rgba(0,0,0,0.1);
+    background: rgba(0, 0, 0, 0.1);
     height: 100%;
-}
+  }
 
-.save-address-input {
+  .save-address-input {
     background: rgba(0, 0, 0, 0.2);
     border-radius: 2px;
     display: flex;
@@ -95,17 +105,17 @@
       padding: 5px 5px 5px 2px;
       background: transparent;
     }
-}
+  }
 
-.save-address-label {
+  .save-address-label {
     display: flex;
     padding: 5px 0 5px 10px;
     height: 100%;
     opacity: 0.5;
     white-space: nowrap;
-}
+  }
 
-.save-address-copy {
+  .save-address-copy {
     background: rgba(255, 255, 255, 0.1);
     padding: 0 5px;
     border-radius: 0 @panel_radius @panel_radius 0;
@@ -122,15 +132,16 @@
     svg {
       fill: white;
     }
-}
+  }
-.save-text {
+
+  .save-text {
     padding: 10px;
     line-height: 1.1em;
     min-height: 2.2em;
     font-size: 0.9em;
-}
+  }
 
-.save-buttons {
+  .save-buttons {
     display: flex;
     padding: 0px;
     margin-top: 20px;
@@ -139,9 +150,9 @@
     .button {
       margin-left: 10px;
     }
-}
+  }
 
-.save-buttons-text {
+  .save-buttons-text {
     flex: 1;
     padding: 0 10px 2px 10px;
     align-items: center;
@@ -150,11 +161,11 @@
     .switch {
       margin-right: 0.5em;
     }
-}
+  }
 
-.save-description {
+  .save-description {
     textarea {
-    background: rgba(0,0,0,0.3);
+      background: rgba(0, 0, 0, 0.3);
       outline: none;
       border: none;
       border-radius: 3px;
@@ -165,9 +176,10 @@
       padding: 5px 10px;
       font-size: 14px;
     }
-}
+  }
 
-.save-controls {
+  .save-controls {
     padding: 5px 10px;
     user-select: none;
+  }
 }

src/styles/slider.less

@@ -11,7 +11,8 @@
 @ease-out-quint      : cubic-bezier(0.23, 1, 0.32, 1);
 @ease-in-quint       : cubic-bezier(0.755, 0.05, 0.855, 0.06);
 
-.borderBox() {
+:global {
+  .borderBox() {
     box-sizing: border-box;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
 
@@ -19,9 +20,9 @@
       box-sizing: border-box;
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
     }
-}
+  }
 
-.@{prefixClass} {
+  .@{prefixClass} {
     position: relative;
     height: 40px;
     padding: 15px 0;
@@ -138,6 +139,7 @@
       cursor: pointer;
       border-radius: 50%;
       vertical-align: middle;
+
       &-active {
         // border-color: tint(@primary-color, 50%);
         background-color: white;
@@ -159,13 +161,13 @@
       }
 
       .@{prefixClass}-mark-text, .@{prefixClass}-dot, .@{prefixClass}-track {
-      cursor: not-allowed!important;
+        cursor: not-allowed !important;
         opacity: 0;
       }
     }
-}
+  }
 
-.@{prefixClass}-vertical {
+  .@{prefixClass}-vertical {
     width: 14px;
     height: 100%;
     padding: 0 5px;
@@ -204,23 +206,25 @@
       &-dot {
         left: 2px;
         margin-bottom: -4px;
+
         &:first-child {
           margin-bottom: -4px;
         }
+
         &:last-child {
           margin-bottom: -4px;
         }
       }
     }
-}
+  }
 
-.motion-common() {
+  .motion-common() {
     animation-duration: .3s;
     animation-fill-mode: both;
     display: block !important;
-}
+  }
 
-.make-motion(@className, @keyframeName) {
+  .make-motion(@className, @keyframeName) {
     .@{className}-enter, .@{className}-appear {
       .motion-common();
       animation-play-state: paused;
@@ -237,8 +241,8 @@
       animation-name: ~"@{keyframeName}Out";
       animation-play-state: running;
     }
-}
+  }
-.zoom-motion(@className, @keyframeName) {
+  .zoom-motion(@className, @keyframeName) {
     .make-motion(@className, @keyframeName);
     .@{className}-enter, .@{className}-appear {
       transform: scale(0, 0); // need this by yiminghe
@@ -247,10 +251,10 @@
     .@{className}-leave {
       animation-timing-function: @ease-in-quint;
     }
-}
+  }
-.zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDown);
+  .zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDown);
 
-@keyframes rcSliderTooltipZoomDownIn {
+  @keyframes rcSliderTooltipZoomDownIn {
     0% {
       opacity: 0;
       transform-origin: 50% 100%;
@@ -260,9 +264,9 @@
       transform-origin: 50% 100%;
       transform: scale(1, 1);
     }
-}
+  }
 
-@keyframes rcSliderTooltipZoomDownOut {
+  @keyframes rcSliderTooltipZoomDownOut {
     0% {
       transform-origin: 50% 100%;
       transform: scale(1, 1);
@@ -272,9 +276,9 @@
       transform-origin: 50% 100%;
       transform: scale(0, 0);
     }
-}
+  }
 
-.@{prefixClass}-tooltip {
+  .@{prefixClass}-tooltip {
     position: absolute;
     left: -9999px;
     top: -9999px;
@@ -319,9 +323,9 @@
       border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
       border-top-color: @tooltip-arrow-color;
     }
-}
+  }
 
-.range-placeholder {
+  .range-placeholder {
     height: 40px;
     padding: 15px 0;
     box-sizing: border-box;
@@ -336,4 +340,5 @@
       border-radius: 6px;
       pointer-events: none;
     }
+  }
 }

src/styles/stickers.less

@@ -1,8 +1,9 @@
-.leaflet-dragging .sticker-container {
+:global {
+  .leaflet-dragging .sticker-container {
     transition: none !important;
-}
+  }
 
-.sticker-container {
+  .sticker-container {
     outline: none;
     position: relative;
     transition: transform 250ms;
@@ -55,12 +56,12 @@
       }
     }
 
-  @media(hover: hover) {
+    @media (hover: hover) {
       transition: none;
     }
-}
+  }
 
-.sticker-label {
+  .sticker-label {
     width: 48px;
     height: 48px;
     position: absolute;
@@ -107,18 +108,18 @@
         right: 24px;
       }
     }
-}
+  }
 
-.sticker-wrapper {
+  .sticker-wrapper {
     will-change: transform;
     transition: transform 250ms;
 
     @media (hover: hover) {
       transition: transform 0ms;
     }
-}
+  }
 
-.sticker-arrow {
+  .sticker-arrow {
     position: absolute;
     transform-origin: 0 0;
     left: 0;
@@ -136,9 +137,9 @@
       top: 0;
       position: absolute;
     }
-}
+  }
 
-.sticker-delete {
+  .sticker-delete {
     position: absolute;
     width: 24px;
     height: 24px;
@@ -170,25 +171,25 @@
     &::after {
       transform: rotate(-45deg);
     }
-}
+  }
 
-.leaflet-control-container .leaflet-routing-container-hide {
+  .leaflet-control-container .leaflet-routing-container-hide {
     display: none;
-}
+  }
 
-.stickers-helper {
+  .stickers-helper {
     flex-direction: column;
     padding-top: 0;
-}
+  }
 
-.stickers-grid {
+  .stickers-grid {
     // display: grid;
     // grid-template-columns: repeat( auto-fit , minmax(48px, 1fr) );
     display: flex;
     flex-wrap: wrap;
-}
+  }
 
-.stickers-set-title {
+  .stickers-set-title {
     opacity: 0.3;
     font-size: 0.8em;
     padding: 10px 0;
@@ -203,9 +204,9 @@
       background-color: #666666;
       margin-left: 10px;
     }
-}
+  }
 
-.sticker-preview {
+  .sticker-preview {
     float: left;
     cursor: pointer;
     transform: scale(1);
@@ -221,9 +222,9 @@
       transform: scale(1.5);
       z-index: 2;
     }
-}
+  }
 
-.sticker-desc {
+  .sticker-desc {
     min-width: 60px;
     z-index: -1;
     height: auto;
@@ -235,13 +236,13 @@
     color: white;
     box-sizing: border-box;
     padding: 10px 10px 10px 36px;
-}
+  }
 
-.sticker-desc-sizer {
+  .sticker-desc-sizer {
     position: relative;
     width: 100%;
     height: 100%;
-  color: rgba(0,0,0,0);
+    color: rgba(0, 0, 0, 0);
     white-space: nowrap;
     padding: 1px;
 
@@ -260,4 +261,5 @@
       outline: none;
       overflow: hidden;
     }
+  }
 }

src/styles/switch.less

@@ -1,4 +1,5 @@
-.switch {
+:global {
+  .switch {
     height: 1em;
     width: 2em;
     border-radius: 0.5em;
@@ -29,4 +30,5 @@
         background: #333333;
       }
     }
+  }
 }

src/styles/user-button.less

@@ -1,18 +1,20 @@
-.user-bar {
+:global {
+  .user-bar {
     // width: 160px;
 
     .button {
       width: 100%;
     }
-}
+  }
-.user-bar-guest {
+
+  .user-bar-guest {
     // width: 168px;
     @media (min-width: @mobile_breakpoint) {
       width: 158px;
     }
-}
+  }
 
-.user-button {
+  .user-button {
     width: 120px;
     padding-left: 48px;
     height: 48px;
@@ -28,9 +30,9 @@
         display: none;
       }
     }
-}
+  }
 
-.user-button-picture {
+  .user-button-picture {
     width: 48px;
     height: 48px;
     background-size: cover;
@@ -39,9 +41,9 @@
     position: absolute;
     left: 0;
     top: 0;
-}
+  }
 
-.user-button-fields {
+  .user-button-fields {
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -56,25 +58,25 @@
       white-space: nowrap;
       text-overflow: ellipsis;
     }
-}
+  }
 
-.user-button-name {
+  .user-button-name {
     font-size: 14px;
-}
+  }
 
-.user-button-text {
+  .user-button-text {
     font-size: 12px;
     opacity: 0.5;
     padding-top: 2px;
     font-weight: 500;
-}
+  }
 
 
-.user-panel {
+  .user-panel {
     position: relative;
-}
+  }
 
-.user-panel-menu {
+  .user-panel-menu {
     position: absolute;
     bottom: 58px;
     left: 0;
@@ -89,27 +91,28 @@
       left: 0;
       z-index: 4;
     }
-}
+  }
-.user-panel-title {
+
+  .user-panel-title {
     font-size: 20px;
     padding: 10px;
 
-  background: rgba(0,0,0, 0.5);
+    background: rgba(0, 0, 0, 0.5);
-  box-shadow: inset rgba(255,255,255,0.1) 0 -1px;
+    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 {
+  .user-panel-ver {
     font-size: 12px;
     vertical-align: text-top;
     opacity: 0.5;
     padding-left: 3px;
     position: relative;
     top: 3px;
-}
+  }
 
-.user-panel-item {
+  .user-panel-item {
     padding: 10px 10px;
     position: relative;
     cursor: pointer;
@@ -119,7 +122,7 @@
     box-sizing: border-box;
     user-select: none;
     display: block;
-  border-bottom: 1px solid rgba(255,255,255,0.1);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     text-decoration: none;
 
     &:first-child::after {
@@ -142,15 +145,16 @@
     &:hover::after {
       opacity: 0.5;
     }
-}
+  }
 
-.user-panel-text {
+  .user-panel-text {
     padding: 10px;
     opacity: 0.5;
     font-weight: 200;
-  border-bottom: 1px solid rgba(255,255,255,0.1);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 
     div {
       padding-top: 5px;
     }
+  }
 }