Remove JS input config

src/components/inputs/ArrayInput.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import input from '../../config/input.js'
 import StringInput from './StringInput'
 import NumberInput from './NumberInput'
 

src/components/inputs/AutocompleteInput.jsx

@@ -1,8 +1,7 @@
 import React from 'react'
+import classnames from 'classnames'
 import Autocomplete from 'react-autocomplete'
-import input from '../../config/input'
-import colors from '../../config/colors'
-import { margins, fontSizes } from '../../config/scales'
+
 
 class AutocompleteInput extends React.Component {
   static propTypes = {
@@ -17,20 +16,15 @@ class AutocompleteInput extends React.Component {
   }
 
   render() {
+
+    const AutocompleteMenu = (items, value, style) => <div className={"maputnik-autocomplete-menu"} children={props.items} />
+
     return <Autocomplete
       wrapperProps={{
         className: "maputnik-autocomplete",
         style: null
       }}
-      menuStyle={{
-        border: 'none',
-        padding: '2px 0',
-        position: 'fixed',
-        overflow: 'auto',
-        maxHeight: '50%',
-        background: colors.gray,
-        zIndex: 3,
-      }}
+      renderMenu={AutocompleteMenu}
       inputProps={{
         className: "maputnik-string"
       }}
@@ -42,15 +36,10 @@ class AutocompleteInput extends React.Component {
       renderItem={(item, isHighlighted) => (
         <div
           key={item[0]}
-          style={{
-            userSelect: 'none',
-            color: colors.lowgray,
-            cursor: 'default',
-            background: isHighlighted ? colors.midgray : colors.gray,
-            padding: margins[0],
-            fontSize: fontSizes[5],
-            zIndex: 3,
-          }}
+          className={classnames({
+            "maputnik-autocomplete-menu-item": true,
+            "maputnik-autocomplete-menu-item-selected": isHighlighted,
+          })}
         >
          {item[1]}
         </div>

src/components/inputs/CheckboxInput.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import input from '../../config/input.js'
 
 class CheckboxInput extends React.Component {
   static propTypes = {

src/components/inputs/FontInput.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
 import AutocompleteInput from './AutocompleteInput'
-import input from '../../config/input.js'
-import { margins } from '../../config/scales.js'
 
 //TODO: Query available font stack dynamically
 import fontStacks from '../../config/fontstacks.json'
@@ -35,17 +33,10 @@ class FontInput extends React.Component {
         value={value}
         options={this.props.fonts.map(f => [f, f])}
         onChange={this.changeFont.bind(this, i)}
-        wrapperStyle={{
-          display: 'block',
-          marginBottom: i == this.values.length - 1 ? 0 : margins[2],
-        }}
       />
     })
 
-    return <div style={{
-      display: 'inline-block',
-      ...this.props.style
-    }}>
+    return <div className="maputnik-font">
       {inputs}
     </div>
   }

src/components/inputs/IconInput.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
 import AutocompleteInput from './AutocompleteInput'
-import input from '../../config/input.js'
-import { margins } from '../../config/scales.js'
 
 
 class IconInput extends React.Component {

src/components/inputs/InputBlock.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import classnames from 'classnames'
-import input from '../../config/input'
 import DocLabel from '../fields/DocLabel'
 
 /** Wrap a component with a label */

src/components/inputs/MultiButtonInput.jsx

@@ -1,16 +1,11 @@
-
 import React from 'react'
+import classnames from 'classnames'
 import Button from '../Button'
 
-import colors from '../../config/colors'
-import { margins } from '../../config/scales'
-import input from '../../config/input.js'
-
 class MultiButtonInput extends React.Component {
   static propTypes = {
     value: React.PropTypes.string.isRequired,
     options: React.PropTypes.array.isRequired,
-    style: React.PropTypes.object,
     onChange: React.PropTypes.func.isRequired,
   }
 
@@ -25,21 +20,13 @@ class MultiButtonInput extends React.Component {
       return <Button
         key={val}
         onClick={e => this.props.onChange(val)}
-        style={{
-          marginRight: margins[0],
-          backgroundColor: val === selectedValue ? colors.midgray : colors.gray,
-        }}
+        className={classnames({"maputnik-button-selected": val === selectedValue})}
       >
         {label}
       </Button>
     })
 
-    return <div style={{
-      display: 'inline-block',
-      ...this.props.style,
-    }}
-      className="maputnik-multibutton"
-    >
+    return <div className="maputnik-multibutton">
       {buttons}
     </div>
   }

src/components/inputs/NumberInput.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import input from '../../config/input.js'
 
 class NumberInput extends React.Component {
   static propTypes = {

src/components/inputs/SelectInput.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import input from '../../config/input.js'
 
 class SelectInput extends React.Component {
   static propTypes = {

src/components/inputs/StringInput.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import input from '../../config/input.js'
 
 class StringInput extends React.Component {
   static propTypes = {