Add data-driven styling to editor

Builds off of the ZoomSpecField component with separate options for
handling data-driven properties. Reuses most of the zoom field
functionality with tweaks that I tried to keep as small as possible, and
the layout is based off of comments on the existing issue.

src/styles/_components.scss

@@ -104,13 +104,13 @@
 .maputnik-action-block {
   .maputnik-input-block-label {
     display: inline-block;
-    width: 43%;
+    width: 35%;
   }
 
   .maputnik-input-block-action {
     vertical-align: top;
     display: inline-block;
-    width: 7%;
+    width: 15%;
   }
 }
 

src/styles/_zoomproperty.scss

@@ -67,3 +67,63 @@
 .maputnik-zoom-spec-property .maputnik-input-block:not(:first-child) .maputnik-input-block-label {
   visibility: hidden;
 }
+
+// DATA FUNC
+.maputnik-make-data-function {
+  background-color: transparent;
+  display: inline-block;
+  padding-bottom: 0;
+  padding-top: 0;
+  vertical-align: middle;
+
+  @extend .maputnik-icon-button;
+}
+
+// DATA PROPERTY
+.maputnik-data-spec-block {
+  overflow: auto;
+}
+.maputnik-data-spec-property {
+  .maputnik-input-block-label {
+    width: 30%;
+  }
+
+  .maputnik-input-block-content {
+    width: 70%;
+  }
+  .maputnik-data-spec-property-group {
+    margin-bottom: 3%;
+
+    .maputnik-doc-wrapper {
+      width: 25%;
+      color: $color-lowgray;
+    }
+    .maputnik-doc-wrapper:hover {
+      color: inherit;
+    }
+    .maputnik-data-spec-property-input {
+      width: 75%;
+      display: inline-block;
+
+      .maputnik-string {
+        margin-bottom: 3%;
+      }
+    }
+  }
+}
+
+.maputnik-data-spec-block {
+  .maputnik-data-spec-property-stop-edit,
+  .maputnik-data-spec-property-stop-data {
+    display: inline-block;
+    margin-bottom: 3%;
+  }
+
+  .maputnik-data-spec-property-stop-edit {
+    width: 18%;
+    margin-right: 3%;
+  }
+  .maputnik-data-spec-property-stop-data {
+    width: 78%;
+  }
+}