Move style code to CSS

src/components/fields/ColorField.jsx

@@ -58,9 +58,10 @@ class ColorField extends React.Component {
   render() {
     const offset = this.calcPickerOffset()
     const picker = <div
+      className="maputnik-color-picker-offset"
       style={{
-        position: 'fixed',
-        zIndex: 1,
+	      position: 'fixed',
+	      zIndex: 1,
         left: offset.left,
         top: offset.top,
       }}>
@@ -69,6 +70,7 @@ class ColorField extends React.Component {
         onChange={c => this.props.onChange(formatColor(c))}
       />
       <div
+        className="maputnik-color-picker-offset"
         onClick={this.togglePicker.bind(this)}
         style={{
           zIndex: -1,
@@ -81,18 +83,13 @@ class ColorField extends React.Component {
       />
     </div>
 
-    return <div style={{
-      position: 'relative',
-      display: 'inline',
-    }}>
+    return <div className="maputnik-color-wrapper">
       {this.state.pickerOpened && picker}
       <input
+        className="maputnik-color"
         ref="colorInput"
         onClick={this.togglePicker.bind(this)}
-        style={{
-          ...input.input,
-          ...this.props.style
-        }}
+        style={this.props.style}
         name={this.props.name}
         placeholder={this.props.default}
         value={this.props.value ? this.props.value : ""}

src/components/fields/DocLabel.jsx

@@ -22,15 +22,14 @@ export default class DocLabel extends React.Component {
   render() {
     return <label
       style={{
-        ...input.label,
-        position: 'relative',
-        verticalAlign: 'top',
-        ...this.props.style,
+        ...this.props.style
       }}
+      className="maputnik-doc-wrapper"
     >
       <span
         onMouseOver={e => this.setState({showDoc: true})}
         onMouseOut={e => this.setState({showDoc: false})}
+        className="maputnik-doc-target"
         style={{
           cursor: 'help',
           ...this.props.cursorTargetStyle,
@@ -48,7 +47,9 @@ export default class DocLabel extends React.Component {
         width: 120,
         display: this.state.showDoc ? null : 'none',
         zIndex: 3,
-      }}>
+      }}
+        className="maputnik-doc-popup"
+      >
         {this.props.doc}
       </div>
     </label>

src/components/fields/PropertyGroup.jsx

@@ -66,7 +66,7 @@ export default class PropertyGroup extends React.Component {
       />
     })
 
-    return <div>
+    return <div className="maputnik-property-group">
       {fields}
     </div>
   }

src/components/fields/ZoomSpecField.jsx

@@ -105,6 +105,7 @@ export default class ZoomSpecField extends React.Component {
         if(idx === 1) {
           label = <label style={{...input.label, width: '41%'}}>
             <Button
+              className="maputnik-add-stop"
               style={{fontSize: fontSizes[5]}}
               onClick={this.addStop.bind(this)}
             >
@@ -123,6 +124,7 @@ export default class ZoomSpecField extends React.Component {
           }}>
           {label}
           <Button
+           className="maputnik-delete-stop"
             style={{backgroundColor: null, verticalAlign: 'top'}}
             onClick={this.deleteStop.bind(this, idx)}
           >
@@ -160,7 +162,9 @@ export default class ZoomSpecField extends React.Component {
 
       }
 
-      return <div style={input.property}>
+      return <div style={input.property}
+         className="maputnik-zoom-spec-field"
+        >
         <DocLabel
           label={labelFromFieldName(this.props.fieldName)}
           doc={this.props.fieldSpec.doc}
@@ -170,6 +174,7 @@ export default class ZoomSpecField extends React.Component {
         />
         {this.props.fieldSpec['zoom-function'] &&
         <Button
+           className="maputnik-make-zoom-function"
           style={{
             verticalAlign: 'top',
             backgroundColor: null,