Merge pull request #161 from pjsier/feature/data-driven-styles

Add data-driven styling

src/styles/_components.scss

@@ -40,6 +40,7 @@
 
 .maputnik-doc-target:hover .maputnik-doc-popup {
   display: block;
+  text-align: left;
 }
 
 // BUTTON
@@ -104,13 +105,17 @@
 .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%;
+  }
+
+  .maputnik-input-block-action > div {
+    text-align: right;
   }
 }
 

src/styles/_zoomproperty.scss

@@ -67,3 +67,68 @@
 .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%;
+  }
+}