made global less styles

src/styles/button.less

@@ -1,3 +1,4 @@
+:global {
   .button {
     background: #444444;
     padding: 4px 16px;
@@ -68,3 +69,4 @@
       }
     }
   }
+}

src/styles/dialogs.less

@@ -1,3 +1,4 @@
+:global {
   .dialog {
     position: fixed;
     left: 0;
@@ -211,6 +212,7 @@
     .spin {
       animation: spin infinite reverse 2s linear;
     }
+
     .dialog-maplist-icon {
       position: absolute;
       left: 50%;
@@ -539,3 +541,4 @@
       padding: 5px 0;
     }
   }
+}

src/styles/gpx.less

@@ -1,3 +1,4 @@
+:global {
   .gpx-title {
     display: flex;
     flex-direction: row;
@@ -97,3 +98,4 @@
     background: lighten(@bar_background, 10%);
     box-shadow: rgba(0, 0, 0, 0.5) 0 5px 5px 10px;
   }
+}

src/styles/logo.less

@@ -1,3 +1,4 @@
+:global {
   .logo-preview {
     position: fixed;
     right: 0;
@@ -20,5 +21,4 @@
       transform-origin: 100% 100%;
     }
   }
-
+}
-

src/styles/main.less

@@ -15,6 +15,7 @@
 @import 'switch.less';
 @import 'gpx.less';
 
+:global {
   body {
     font-family: 'Rubik', sans-serif;
     font-size: 15px;
@@ -123,11 +124,15 @@ body {
   }
 
   @media (max-width: @mobile_breakpoint) {
-  .desktop-only { display: none; }
+    .desktop-only {
+      display: none;
+    }
   }
 
   @media (min-width: @mobile_breakpoint) {
-  .mobile-only { display: none; }
+    .mobile-only {
+      display: none;
+    }
   }
 
   h2 {
@@ -165,3 +170,4 @@ input {
   .justify-end {
     justify-content: flex-end;
   }
+}

src/styles/map.less

@@ -1,3 +1,4 @@
+:global {
   #map {
     width: 50% !important;
     height: 100%;
@@ -363,4 +364,4 @@
       stroke-width: 0.2px;
     }
   }
- 
+}

src/styles/panel.less

@@ -1,3 +1,4 @@
+:global {
   .control-bar {
     background: @bar_background;
     border-radius: @panel_radius;
@@ -792,3 +793,4 @@
     padding-left: 10px;
     flex: 1;
   }
+}

src/styles/progress.less

@@ -1,3 +1,4 @@
+:global {
   .progress {
     width: 100%;
     position: relative;
@@ -14,3 +15,4 @@
       transition: width 500ms;
     }
   }
+}

src/styles/renderer.less

@@ -1,3 +1,4 @@
+:global {
   .renderer-shade {
     position: fixed;
     top: 0;
@@ -51,3 +52,4 @@
 
     transform-origin: 100% 100%;
   }
+}

src/styles/router.less

@@ -1,3 +1,4 @@
+:global {
   .router-waypoint {
     width: 40px;
     height: 40px;
@@ -39,3 +40,4 @@
   .router-helper__button {
     white-space: nowrap;
   }
+}

src/styles/save.less

@@ -1,3 +1,4 @@
+:global {
   .save-helper {
     padding: 0;
     flex-direction: column;
@@ -14,8 +15,12 @@
   }
 
   @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 {
@@ -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 {
@@ -123,6 +133,7 @@
       fill: white;
     }
   }
+
   .save-text {
     padding: 10px;
     line-height: 1.1em;
@@ -171,3 +182,4 @@
     padding: 5px 10px;
     user-select: none;
   }
+}

src/styles/slider.less

@@ -11,6 +11,7 @@
 @ease-out-quint      : cubic-bezier(0.23, 1, 0.32, 1);
 @ease-in-quint       : cubic-bezier(0.755, 0.05, 0.855, 0.06);
 
+:global {
   .borderBox() {
     box-sizing: border-box;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
@@ -138,6 +139,7 @@
       cursor: pointer;
       border-radius: 50%;
       vertical-align: middle;
+
       &-active {
         // border-color: tint(@primary-color, 50%);
         background-color: white;
@@ -204,9 +206,11 @@
       &-dot {
         left: 2px;
         margin-bottom: -4px;
+
         &:first-child {
           margin-bottom: -4px;
         }
+
         &:last-child {
           margin-bottom: -4px;
         }
@@ -337,3 +341,4 @@
       pointer-events: none;
     }
   }
+}

src/styles/stickers.less

@@ -1,3 +1,4 @@
+:global {
   .leaflet-dragging .sticker-container {
     transition: none !important;
   }
@@ -261,3 +262,4 @@
       overflow: hidden;
     }
   }
+}

src/styles/switch.less

@@ -1,3 +1,4 @@
+:global {
   .switch {
     height: 1em;
     width: 2em;
@@ -30,3 +31,4 @@
       }
     }
   }
+}

src/styles/user-button.less

@@ -1,3 +1,4 @@
+:global {
   .user-bar {
     // width: 160px;
 
@@ -5,6 +6,7 @@
       width: 100%;
     }
   }
+
   .user-bar-guest {
     // width: 168px;
     @media (min-width: @mobile_breakpoint) {
@@ -90,6 +92,7 @@
       z-index: 4;
     }
   }
+
   .user-panel-title {
     font-size: 20px;
     padding: 10px;
@@ -154,3 +157,4 @@
       padding-top: 5px;
     }
   }
+}