[TASK] Style layer selector

assets/icons/fonts/hopglass.svg

@@ -1,27 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Generated by Fontastic.me</metadata>
-<defs>
-<font id="hopglass" horiz-adv-x="512">
-<font-face font-family="hopglass" units-per-em="512" ascent="480" descent="-32"/>
-<missing-glyph horiz-adv-x="512" />
-
-<glyph glyph-name="android-add" unicode="&#62151;" d="M416 235l-139 0 0-139-42 0 0 139-139 0 0 42 139 0 0 139 42 0 0-139 139 0z"/>
-<glyph glyph-name="chevron-left" unicode="&#61732;" d="M214 256l167 174c4 4 4 11 0 16l-30 30c-4 5-11 5-16 1l-204-213c-2-2-3-5-3-8 0-3 1-6 3-8l204-213c5-4 12-4 16 0l30 31c4 4 4 11 0 16z"/>
-<glyph glyph-name="chevron-right" unicode="&#61733;" d="M298 256l-167 174c-4 4-4 11 0 16l30 30c5 5 12 5 16 1l204-213c2-2 3-5 3-8 0-3-1-6-3-8l-204-213c-4-4-11-4-16 0l-30 31c-4 4-4 11 0 16z"/>
-<glyph glyph-name="pin" unicode="&#62371;" d="M332 284c-1 0-3 1-4 2-7 4-12 11-14 19l-18 118 0 5c0 7 4 11 10 13 0 1 1 1 2 1 7 4 12 8 12 17 0 20-7 21-18 21l-92 0c-11 0-18-1-18-21 0-9 5-13 12-17 1 0 2 0 2-1 6-3 10-6 10-13l0-5-18-118c-2-8-7-15-14-19-1-1-2-2-4-2-19-10-36-31-36-55 0-16 4-21 15-21l81 0 12-176 8 0 12 176 81 0c12 0 15 5 15 21 0 24-16 45-36 55z"/>
-<glyph glyph-name="wifi" unicode="&#62044;" d="M256 416c-80 0-156-30-214-84l-10-10 10-9 32-32 10-10 9 9c45 41 102 64 163 64 60 0 118-23 163-64l9-9 10 10 32 32 10 9-10 10c-58 54-134 84-214 84z m141-160c-38 35-88 54-141 54l-9 0 0 0c-49-2-96-21-132-54l-11-10 10-10 33-32 9-9 10 8c25 22 57 35 90 35 33 0 65-13 91-35l9-8 9 9 33 32 10 10z m-141-160l10 9 53 53 10 10-11 10c-16 11-33 20-62 20-29 0-45-10-61-20l-12-10 11-10 53-53z"/>
-<glyph glyph-name="eye" unicode="&#61747;" d="M256 384c-82 0-146-49-224-128 67-68 124-128 224-128 100 0 173 76 224 127-52 58-125 129-224 129z m0-219c-49 0-90 41-90 91 0 50 41 91 90 91 49 0 90-41 90-91 0-50-41-91-90-91z m0 123c0 8 3 15 8 21-3 0-5 0-8 0-29 0-52-24-52-53 0-29 23-53 52-53 29 0 52 24 52 53 0 2 0 5 0 7-6-4-12-7-20-7-18 0-32 14-32 32z"/>
-<glyph glyph-name="ios-arrow-thin-left" unicode="&#62421;" d="M190 162c3 3 3 8 0 12l-67 74 285 0c4 0 8 4 8 8 0 4-4 8-8 8l-285 0 67 74c3 4 3 8 0 12-3 3-9 3-12 0 0 0-79-87-80-88 0-1-2-3-2-6 0-3 2-5 2-6 1-1 80-88 80-88 2-1 4-2 6-2 2 0 4 1 6 2z"/>
-<glyph glyph-name="ios-arrow-thin-right" unicode="&#62422;" d="M322 162c-3 3-3 8 0 12l67 74-285 0c-4 0-8 4-8 8 0 4 4 8 8 8l285 0-67 74c-3 4-3 8 0 12 3 3 9 3 12 0 0 0 79-87 80-88 0-1 2-3 2-6 0-3-2-5-2-6-1-1-80-88-80-88-2-1-4-2-6-2-2 0-4 1-6 2z"/>
-<glyph glyph-name="arrow-up-b" unicode="&#61709;" d="M413 185l-2 2-136 156c-4 6-11 9-19 9-8 0-14-4-19-9l-136-156-2-3c-2-2-3-5-3-8 0-9 7-16 17-16l286 0c10 0 17 7 17 16 0 3-1 6-3 9z"/>
-<glyph glyph-name="arrow-down-b" unicode="&#61700;" d="M99 327l2-2 136-156c4-6 11-9 19-9 8 0 15 3 19 9l136 156 2 2c2 3 3 6 3 9 0 9-7 16-17 16l-286 0c-10 0-17-7-17-16 0-3 1-6 3-9z"/>
-<glyph glyph-name="android-locate" unicode="&#62185;" d="M256 336c-44 0-80-36-80-80 0-44 36-80 80-80 44 0 80 36 80 80 0 44-36 80-80 80z m191-59c-10 89-81 160-170 170l0 33-42 0 0-33c-89-10-160-81-170-170l-33 0 0-42 33 0c10-89 81-160 170-170l0-33 42 0 0 33c89 10 160 81 170 170l33 0 0 42z m-191-170c-82 0-149 67-149 149 0 82 67 149 149 149 82 0 149-67 149-149 0-82-67-149-149-149z"/>
-<glyph glyph-name="android-close" unicode="&#62167;" d="M405 375l-30 30-119-119-119 119-30-30 119-119-119-119 30-30 119 119 119-119 30 30-119 119z"/>
-<glyph glyph-name="android-lock" unicode="&#62354;" d="M376 326l-20 0 0 40c0 55-45 100-100 100-55 0-100-45-100-100l0-40-20 0c-22 0-40-18-40-40l0-200c0-22 18-40 40-40l240 0c22 0 40 18 40 40l0 200c0 22-18 40-40 40z m-120-182c-22 0-40 18-40 40 0 22 18 40 40 40 22 0 40-18 40-40 0-22-18-40-40-40z m62 182l-124 0 0 40c0 34 28 62 62 62 34 0 62-28 62-62z"/>
-<glyph glyph-name="ios-copy" unicode="&#62492;" d="M144 96l0 304-32 0 0-336 240 0 0 32z m181 352l-165 0 0-336 240 0 0 261z m43-112l-80 0 0 80 16 0 0-64 64 0z"/>
-<glyph glyph-name="location" unicode="&#62550;" d="M256 448c-66 0-119-54-119-120 0-115 119-264 119-264 0 0 119 149 119 264 0 66-53 120-119 120z m0-178c-31 0-56 25-56 56 0 32 25 57 56 57 31 0 56-25 56-57 0-31-25-56-56-56z"/>
-<glyph glyph-name="android-remove" unicode="&#62196;" d="M96 277l320 0 0-42-320 0z"/>
-<glyph glyph-name="ios-person" unicode="&#62590;" d="M363 148c-13 5-31 6-43 9-7 1-17 5-20 9-3 4-1 41-1 41 0 0 6 10 9 18 4 8 7 31 7 31 0 0 7 0 9 12 3 13 7 19 6 28 0 9-5 10-5 10 0 0 5 13 5 42 1 34-25 68-74 68-49 0-75-34-74-68 0-28 5-42 5-42 0 0-5-1-5-10-1-9 3-14 6-27 2-12 9-12 9-12 0 0 4-24 7-32 3-8 9-18 9-18 0 0 2-37-1-41-3-4-13-8-20-9-12-3-30-4-43-9-13-5-53-20-53-52l320 0c0 32-40 47-53 52z"/>
-</font></defs></svg>

assets/icons/hopglass-icons.css

@@ -1,8 +1,8 @@
 @font-face {
     font-family: "Ionicons";
-    src: url("fonts/hopglass.woff2") format("woff2"),
-    url("fonts/hopglass.woff") format("woff"),
-    url("fonts/hopglass.ttf") format("truetype");
+    src: url("fonts/icon.woff2") format("woff2"),
+    url("fonts/icon.woff") format("woff"),
+    url("fonts/icon.ttf") format("truetype");
     font-weight: normal;
     font-style: normal;
 
@@ -90,3 +90,7 @@
 .ion-ios-person:before {
     content: "\f47e";
 }
+
+.ion-layer:before {
+    content: "\f229";
+}

scss/_leaflet-layer.scss

@@ -0,0 +1,33 @@
+.leaflet-control-layers {
+  box-shadow: none;
+  border-radius: 0;
+  background: none;
+}
+
+.leaflet-control-layers-toggle {
+  background: none;
+  &::before {
+    content: "\f229";
+    display: inline-block;
+    font-family: "ionicons" !important;
+    font-size: 2.3rem;
+    speak: none;
+    text-rendering: auto;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: #e32d6d;
+  }
+}
+
+.leaflet-control-layers-expanded {
+  padding: 0;
+}
+
+.leaflet-control-layers-list {
+  background: rgba(255, 255, 255, 0.9);
+  padding: 10px;
+  label {
+    cursor: pointer;
+  }
+}

scss/main.scss

@@ -3,6 +3,7 @@
 @import '_base';
 @import '_leaflet';
 @import '_leaflet.label';
+@import '_leaflet-layer';
 @import '_filters';
 
 $minscreenwidth: 630pt;