[TASK] Improve styling

scss/_leaflet.scss

@@ -1 +0,0 @@
-../node_modules/leaflet/dist/leaflet.css

scss/main.scss

@@ -13,9 +13,7 @@
 @import 'modules/base';
 @import 'modules/font/icon';
 @import 'modules/loader';
-@import 'leaflet';
 @import 'modules/leaflet';
-@import 'modules/leaflet-layer';
 @import 'modules/table';
 @import 'modules/filter';
 @import 'modules/sidebar';

scss/modules/_button.scss

@@ -11,15 +11,14 @@ button {
   opacity: .7;
   outline: none;
   padding: 0;
-  transition: box-shadow .5s, color .5s;
+  transition: box-shadow .5s, background-color .5s, color .5s;
   width: 1.8em;
 
   &.active {
-    color: $color-primary;
+    box-shadow: 0 0 0 2px $color-primary;
   }
 
   &:hover {
-    background: $color-white;
     color: $color-primary;
   }
 

scss/modules/_leaflet-layer.scss

@@ -1,43 +0,0 @@
-.leaflet-control-layers {
-  &.leaflet-control {
-    background: transparent;
-    border: 0;
-    border-radius: 0;
-    box-shadow: none;
-    margin: 0;
-    opacity: .8;
-  }
-}
-
-.leaflet-control-container {
-  .leaflet-control-layers-toggle {
-    background: none;
-    height: auto;
-    width: auto;
-
-    &::before {
-      color: $color-primary;
-      content: '\f229';
-      display: inline-block;
-      font-family: $font-family-icons;
-      font-size: 2.3rem;
-      line-height: 1;
-      speak: none;
-      text-rendering: auto;
-    }
-  }
-}
-
-.leaflet-control-layers-expanded {
-  padding: 0;
-}
-
-.leaflet-control-layers-list {
-  background: transparentize($color-white, .1);
-  color: $color-gray-dark;
-  padding: 10px;
-
-  label {
-    cursor: pointer;
-  }
-}

scss/modules/_leaflet.scss

@@ -1,10 +1,302 @@
+.leaflet-map-pane,
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-tile-pane,
+.leaflet-tile-container,
+.leaflet-overlay-pane,
+.leaflet-shadow-pane,
+.leaflet-marker-pane,
+.leaflet-zoom-box,
+.leaflet-image-layer,
+.leaflet-layer {
+  left: 0;
+  position: absolute;
+  top: 0;
+}
+
+.leaflet-container {
+  background: $color-map-background;
+  cursor: grab;
+  outline: 0;
+  overflow: hidden;
+  touch-action: none;
+
+  a {
+    color: $color-primary;
+  }
+
+  img {
+    max-width: none;
+  }
+
+  .leaflet-control-attribution {
+    background: transparentize($color-white, .3);
+    margin: 0;
+  }
+
+  .leaflet-control-layers-toggle {
+    background: none;
+    height: auto;
+    width: auto;
+
+    &::before {
+      color: $color-primary;
+      content: '\f229';
+      display: inline-block;
+      font-family: $font-family-icons;
+      font-size: 2.3rem;
+      line-height: 1;
+      speak: none;
+      text-rendering: auto;
+    }
+  }
+}
+
+.leaflet-tile {
+  filter: inherit;
+  visibility: hidden;
+}
+
+.leaflet-tile-loaded {
+  visibility: inherit;
+}
+
+.leaflet-zoom-box {
+  height: 0;
+  width: 0;
+}
+
+.leaflet-tile-pane {
+  z-index: 2;
+}
+
+.leaflet-objects-pane {
+  z-index: 3;
+}
+
+.leaflet-overlay-pane {
+  z-index: 4;
+}
+
+.leaflet-shadow-pane {
+  z-index: 5;
+}
+
+.leaflet-marker-pane {
+  z-index: 6;
+}
+
+.leaflet-vml-shape {
+  height: 1px;
+  width: 1px;
+}
+
+.leaflet-control {
+  clear: both;
+  cursor: auto;
+  float: left;
+  font-size: $font-size-map-control;
+  pointer-events: auto;
+  position: relative;
+  z-index: 7;
+}
+
+.leaflet-top,
+.leaflet-bottom {
+  pointer-events: none;
+  position: absolute;
+  z-index: 1000;
+}
+
+.leaflet-top {
+  top: 0;
+
+  .leaflet-control {
+    margin-top: 10px;
+  }
+}
+
+.leaflet-right {
+  right: 0;
+
+  .leaflet-control {
+    float: right;
+  }
+}
+
+.leaflet-bottom {
+  bottom: 0;
+}
+
+.leaflet-left {
+  left: 0;
+
+  .leaflet-control {
+    margin-left: 10px;
+  }
+}
+
+.leaflet-fade-anim {
+  .leaflet-tile {
+    opacity: 0;
+    transition: opacity .2s linear;
+  }
+
+  .leaflet-tile-loaded {
+    opacity: 1;
+  }
+}
+
+%no-transition {
+  transition: none;
+}
+
+.leaflet-zoom-anim {
+  .leaflet-tile {
+    @extend %no-transition;
+  }
+
+  .leaflet-zoom-animated {
+    transition: transform .25s cubic-bezier(0, 0, .25, 1);
+  }
+
+  .leaflet-zoom-hide {
+    visibility: hidden;
+  }
+}
+
+.leaflet-pan-anim {
+  .leaflet-tile {
+    @extend %no-transition;
+  }
+}
+
+.leaflet-touching {
+  .leaflet-zoom-animated {
+    @extend %no-transition;
+  }
+}
+
+.leaflet-clickable {
+  cursor: pointer;
+}
+
+.leaflet-dragging {
+  .leaflet-container,
+  .leaflet-clickable {
+    cursor: move;
+  }
+}
+
+.leaflet-touch {
+  .leaflet-control-layers,
+  .leaflet-bar {
+    background-clip: padding-box;
+    border: 2px solid transparentize($color-black, .8);
+  }
+
+  .leaflet-control-layers-toggle {
+    height: 44px;
+    width: 44px;
+  }
+}
+
+.leaflet-control-layers {
+  &.leaflet-control {
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    margin: 0;
+    opacity: .8;
+  }
+
+  label {
+    display: block;
+  }
+
+  .leaflet-control-layers-list {
+    display: none;
+  }
+}
+
+.leaflet-control-layers-expanded {
+  background: $color-white;
+  color: $color-gray-dark;
+
+  .leaflet-control-layers-toggle {
+    display: none;
+  }
+
+  .leaflet-control-layers-list {
+    background: transparentize($color-white, .1);
+    color: $color-gray-dark;
+    display: block;
+    padding: 2px 10px;
+    position: relative;
+
+    label {
+      cursor: pointer;
+    }
+  }
+}
+
+.leaflet-control-layers-selector {
+  display: none;
+
+  + span {
+    display: block;
+    padding: 5px 0 8px 20px;
+
+    &::before {
+      border: 1px solid $color-primary;
+      border-radius: 50%;
+      content: ' ';
+      height: 10px;
+      margin: 0 0 0 -18px;
+      position: absolute;
+      transition: background .3s;
+      width: 10px;
+    }
+
+    &:hover {
+      &::before {
+        background: transparentize($color-primary, .7);
+      }
+    }
+  }
+
+  &:checked {
+    + span {
+      &::before {
+        background: $color-primary;
+      }
+    }
+  }
+}
+
+.leaflet-control-layers-separator {
+  border-top: 1px solid $color-gray-light;
+  height: 0;
+  margin: 5px -10px 5px -6px;
+}
+
+.leaflet-control-attribution,
+.leaflet-control-scale-line {
+  color: $color-gray-dark;
+  padding: 2px 5px 4px;
+}
+
 .leaflet-label {
   &.leaflet-label-right {
     background-color: $color-white;
-    border: 2px solid $color-primary;
+    border: 1px solid $color-primary;
     border-radius: 0;
     display: block;
+    font-size: $font-size-map-control;
     font-weight: normal;
+    line-height: 1.5;
     opacity: .8;
     padding: 1px 6px;
     position: absolute;

scss/modules/_table.scss

@@ -36,7 +36,9 @@ th {
   font-weight: bold;
 
   &[class*=' ion-'] {
-    font-size: 1.3em;
+    &::before {
+      font-size: 1.3em;
+    }
   }
 
   &.sort-header {

scss/modules/_variables.scss

@@ -11,11 +11,14 @@ $color-online: #1566a9 !default;
 $color-offline: #cf3e2a !default;
 $color-unseen: #d89100 !default;
 
+$color-map-background: #f8f4f0 !default;
+
 $font-family: Assistant, sans-serif !default;
 $font-family-icons: ionicons !default;
 $font-family-monospace: monospace !default;
 $font-size: 15px !default;
 $font-size-small: 11px !default;
+$font-size-map-control: 12px !default;
 
 $button-font-size: 1.6rem !default;
 $button-distance: 16px !default;
@@ -41,7 +44,7 @@ $sidebar-width: map-get($grid-breakpoints, xl) * .45 !default;
 $sidebar-width-small: map-get($grid-breakpoints, lg) * .45 !default;
 
 // En/disable box-shadows
-$shadows: 1 !default;
+$shadows: 0 !default;
 
 // En/disable included font
 $use-included-font: 1 !default;

scss/night.scss

@@ -4,6 +4,7 @@
 
 $color-white: #111;
 $color-black: #fefefe;
+$color-map-background: #0d151c;
 
 html {
   //@import 'modules/base';
@@ -18,7 +19,7 @@ html {
 
   //@import 'leaflet';
   .leaflet-container {
-    background: adjust-color($color-white, $blue: 10);
+    background: $color-map-background;
   }
 
   //@import 'modules/leaflet';
@@ -28,7 +29,6 @@ html {
     }
   }
 
-  //@import 'modules/leaflet-layer';
   .leaflet-control-layers {
     &.leaflet-control {
       opacity: .9;