Remove JS input config

src/styles/_components.scss

@@ -1,13 +1,4 @@
-
-.maputnik-icon-text {
-  padding-left: $margin-1;
-}
-
-.maputnik-icon-action {
-  display: inline;
-  margin-left: $margin-1;
-}
-
+// MAP
 .maputnik-map {
   position: fixed !important;
   top: 40px;
@@ -17,21 +8,43 @@
   width: 75%;
 }
 
-.maputnik-doc-target {
-  cursor: help;
+// DOC LABEL
+.maputnik-doc {
+  &-target {
+    cursor: help;
+  }
+
+  &-wrapper{
+    display: inline-block;
+    box-sizing: border-box;
+    font-size: $font-size-6;
+    line-height: 2;
+    color: $color-lowgray;
+    user-select: none;
+    position: relative;
+    vertical-align: top;
+  }
+
+  &-popup {
+    display: none;
+    color: $color-lowgray;
+    background-color: $color-gray;
+    padding: $margin-2;
+    font-size: 10px;
+    position: absolute;
+    top: 20px;
+    left: 0px;
+    width: 120px;
+    z-index: 3;
+  }
 }
 
-.maputnik-doc-wrapper {
-  display: inline-block;
-  box-sizing: border-box;
-  font-size: $font-size-6;
-  line-height: 2;
-  color: $color-lowgray;
-  user-select: none;
-  position: relative;
-  vertical-align: top;
+.maputnik-doc-target:hover .maputnik-doc-popup {
+  display: block;
 }
 
+// BUTTON
+
 .maputnik-button {
   cursor: pointer;
   background-color: $color-midgray;
@@ -59,12 +72,16 @@
   background-color: transparent;
   &:hover {
     background-color: transparent;
+    label, svg {
+      cursor: pointer;
+    }
     svg {
       fill: $color-white;
     }
   }
 }
 
+// INPUT BLOCK
 .maputnik-input-block {
   margin: $margin-3;
 
@@ -82,7 +99,6 @@
   }
 }
 
-
 .maputnik-action-block {
   .maputnik-input-block-label {
     display: inline-block;
@@ -95,6 +111,7 @@
   }
 }
 
+// SPACE HELPER
 .maputnik-space {
 	flex-grow: 1;
 }

src/styles/_input.scss

@@ -52,6 +52,16 @@
   height: 24px;
 }
 
+// MULTIBUTTON
+.maputnik-multibutton {
+  @extend .maputnik-input;
+  margin-right: $margin-1;
+}
+
+.maputnik-button-selected {
+  background-color: $color-midgray;
+}
+
 // CHECKBOX
 .maputnik-checkbox {
   position: absolute;
@@ -94,5 +104,34 @@
 
 // AUTOCOMPLETE
 .maputnik-autocomplete {
+  &-menu {
+    border: none;
+    padding: 2px 0;
+    position: fixed;
+    overflow: auto;
+    max-height: 50%;
+    background: $color-gray;
+    z-index: 3,
+  }
+
+  &-menu-item {
+    user-select: none;
+    color: $color-lowgray;
+    cursor: default;
+    padding: $margin-1;
+    font-size: $font-size-6;
+    z-index: 3;
+    background: $color-gray;
+  }
+
+  &-menu-item-selected {
+    background: $color-midgray;
+  }
 }
 
+// FONT
+.maputnik-font {
+  .maputnik-autocomplete:not(:last-child) {
+    margin-bottom: $margin-3;
+  }
+}

src/styles/_toolbar.scss

@@ -45,3 +45,12 @@
 .maputnik-toolbar-action {
   @extend .maputnik-toolbar-link;
 }
+
+.maputnik-icon-text {
+  padding-left: $margin-1;
+}
+
+.maputnik-icon-action {
+  display: inline;
+  margin-left: $margin-1;
+}