Merge remote-tracking branch 'upstream/master' into feature/add-range-slider

src/styles/_codemirror.scss

@@ -0,0 +1,9 @@
+.CodeMirror-lint-tooltip {
+  z-index: 2000 !important;
+}
+
+.codemirror-container {
+  max-width: 100%;
+  position: relative;
+  overflow: auto;
+}

src/styles/_input.scss

@@ -11,6 +11,11 @@
   border: none;
   background-color: $color-gray;
   color: lighten($color-lowgray, 12);
+
+  &:invalid {
+    border: solid 1px #B71C1C;
+    border-radius: 2px;
+  }
 }
 
 .maputnik-string {

src/styles/_map.scss

@@ -1,7 +1,13 @@
 //OPENLAYERS
 .maputnik-layout {
   .ol-zoom {
-    top: 10px;
+    top: 40px;
+    right: 10px;
+    left: auto;
+  }
+
+  .ol-rotate {
+    top: 94px;
     right: 10px;
     left: auto;
   }
@@ -10,6 +16,11 @@
     height: 20px;
   }
 
+  .ol-attribution a {
+    color: rgba(0, 0, 0, 0.75);
+    text-decoration: none;
+  }
+
   .ol-control {
     button {
       background-color: rgb(28, 31, 36);
@@ -20,3 +31,57 @@
     }
   }
 }
+
+
+.maputnik-ol {
+  width: 100%;
+  height: 100%;
+}
+
+.maputnik-ol-popup {
+  background: $color-black;
+
+}
+
+.maputnik-coords {
+  font-family: monospace;
+  &:before {
+    content: '[';
+    color: #888;
+  }
+  &:after {
+    content: ']';
+    color: #888;
+  }
+}
+
+.maputnik-ol-debug {
+  font-family: monospace;
+  font-size: smaller;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(28, 31, 36);
+  padding: 6px 8px;
+  border-radius: 2px;
+  z-index: 9999;
+}
+
+.maputnik-ol-zoom {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  background: #1c1f24;
+  border-radius: 2px;
+  padding: 6px 8px;
+  color: $color-lowgray;
+  z-index: 9999;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.maputnik-ol-container {
+  display: flex;
+  flex: 1;
+  position: relative;
+}

src/styles/_modal.scss

@@ -180,10 +180,26 @@
   border-width: 2px;
   border-style: solid;
   padding: $margin-2;
+
+  .maputnik-input-block-label {
+    width: 30%;
+  }
+
+  .maputnik-input-block-content {
+    width: 70%;
+  }
 }
 
 .maputnik-add-source {
   @extend .clearfix;
+
+  .maputnik-input-block-label {
+    width: 30%;
+  }
+
+  .maputnik-input-block-content {
+    width: 70%;
+  }
 }
 
 .maputnik-add-source-button {

src/styles/_popup.scss

@@ -22,12 +22,14 @@
 
 .maputnik-popup-layer-id {
   padding-left: $margin-2;
-  padding-right: $margin-2;
+  padding-right: 1.6em;
   background-color: $color-midgray;
   color: $color-white;
 }
 
 .maputnik-feature-property-popup {
+  max-height: calc(50vh - 40px); /* toolbar height: 40px */
+  overflow-y: auto;
   .maputnik-input-block {
     margin: 0;
     margin-left: $margin-2;

src/styles/_react-codemirror.scss

@@ -1,3 +0,0 @@
-.react-codemirror2 {
-  max-width: 100%;
-}

src/styles/_zoomproperty.scss

@@ -45,17 +45,12 @@
 }
 
 .maputnik-delete-stop {
+  display: inline-block;
+  padding-bottom: 0;
+  padding-top: 0;
+  vertical-align: middle;
+
   @extend .maputnik-icon-button;
-
-  vertical-align: top;
-
-  .maputnik-doc-wrapper {
-    width: auto;
-  }
-
-  .maputnik-doc-target {
-    cursor: pointer;
-  }
 }
 
 .maputnik-add-stop {

src/styles/index.scss

@@ -37,8 +37,8 @@ $toolbar-offset: 0;
 @import 'zoomproperty';
 @import 'popup';
 @import 'map';
+@import 'codemirror';
 @import 'react-collapse';
-@import 'react-codemirror';
 
 /**
  * Hacks for webdriverio isVisibleWithinViewport