Move style code to CSS

src/components/AppLayout.jsx

@@ -25,51 +25,20 @@ class AppLayout extends React.Component {
   }
 
   render() {
-    return <div style={{
-      fontFamily: theme.fontFamily,
-      color: theme.color,
-      fontWeight: 300
-    }}>
+    return <div className="maputnik-layout">
       {this.props.toolbar}
-      <div style={{
-        position: 'fixed',
-        bottom: 0,
-        height: "100%",
-        top: 40,
-        left: 0,
-        zIndex: 1,
-        width: 200,
-        overflow: "hidden",
-        backgroundColor: colors.black
-      }}>
+      <div className="maputnik-layout-list">
         <ScrollContainer>
           {this.props.layerList}
         </ScrollContainer>
       </div>
-      <div style={{
-        position: 'fixed',
-        bottom: 0,
-        height: "100%",
-        top: 40,
-        left: 200,
-        zIndex: 1,
-        width: 350,
-        backgroundColor: colors.black
-      }}>
+      <div className="maputnik-layout-drawer">
         <ScrollContainer>
           {this.props.layerEditor}
         </ScrollContainer>
       </div>
       {this.props.map}
-      {this.props.bottom && <div style={{
-          position: 'fixed',
-          height: 50,
-          bottom: 0,
-          left: 550,
-          zIndex: 1,
-          width: '100%',
-          backgroundColor: colors.black
-        }}>
+      {this.props.bottom && <div className="maputnik-layout-bottom">
           {this.props.bottom}
         </div>
       }

src/components/Button.jsx

@@ -11,17 +11,8 @@ class Button extends React.Component {
   render() {
     return <a
       onClick={this.props.onClick}
-      style={{
-        cursor: 'pointer',
-        backgroundColor: colors.midgray,
-        color: colors.lowgray,
-        fontSize: fontSizes[5],
-        padding: margins[1],
-        userSelect: 'none',
-        borderRadius: 2,
-        boxSizing: 'border-box',
-        ...this.props.style,
-      }}>
+      className="maputnik-button"
+      style={this.props.style}>
       {this.props.children}
     </a>
   }

src/components/ScrollContainer.jsx

@@ -1,15 +1,7 @@
 import React from 'react'
 
 const ScrollContainer = (props) => {
-  return <div style={{
-    overflowX: "visible",
-    overflowY: "scroll",
-    bottom:0,
-    left:0,
-    right:0,
-    top:1,
-    position: "absolute",
-  }}>
+  return <div className="maputnik-scroll-container">
     {props.children}
   </div>
 }

src/components/Toolbar.jsx

@@ -30,22 +30,14 @@ const IconText = props => <span style={{ paddingLeft: margins[0] }}>
   {props.children}
 </span>
 
-const actionStyle = {
-  display: "inline-block",
-  padding: 10,
-  fontSize: fontSizes[4],
-  cursor: "pointer",
-  color: colors.white,
-  textDecoration: 'none',
-}
-
 const ToolbarLink = props => <a
+  className='maputnik-toolbar-link'
   href={props.href}
   target={"blank"}
   style={{
-    ...actionStyle,
     ...props.style,
-  }}>
+  }}
+  >
   {props.children}
 </a>
 
@@ -54,20 +46,12 @@ class ToolbarAction extends React.Component {
     onClick: React.PropTypes.func.isRequired,
   }
 
-  constructor(props) {
-    super(props)
-    this.state = { hover: false }
-  }
-
   render() {
     return <a
+      className='maputnik-toolbar-action'
       onClick={this.props.onClick}
-      onMouseOver={e => this.setState({hover: true})}
-      onMouseOut={e => this.setState({hover: false})}
       style={{
-        ...actionStyle,
         ...this.props.style,
-        backgroundColor: this.state.hover ? colors.gray : null,
       }}>
       {this.props.children}
     </a>
@@ -116,15 +100,7 @@ export default class Toolbar extends React.Component {
   }
 
   render() {
-    return <div style={{
-      position: "fixed",
-      height: 40,
-      width: '100%',
-      zIndex: 100,
-      left: 0,
-      top: 0,
-      backgroundColor: colors.black
-    }}>
+    return <div className='maputnik-toolbar'>
       <SettingsModal
         mapStyle={this.props.mapStyle}
         onStyleChanged={this.props.onStyleChanged}

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,

src/components/filter/FilterEditor.jsx

@@ -95,7 +95,7 @@ export default class CombiningFilterEditor extends React.Component {
     }
 
     return <div>
-      <div style={{ marginBottom: margins[1] }}>
+      <div className="maputnik-filter-editor-compound-select" style={{ marginBottom: margins[1] }}>
         <DocLabel
           label={"Compound Filter"}
           doc={GlSpec.layer.filter.doc + " Combine multiple filters together by using a compound filter."}
@@ -115,7 +115,7 @@ export default class CombiningFilterEditor extends React.Component {
         />
       </div>
       {editorBlocks}
-      <div style={{marginTop: margins[1]}}>
+      <div className="maputnik-filter-editor-add-wrapper" style={{marginTop: margins[1]}}>
         <Button onClick={this.addFilterItem.bind(this)} style={{
           display: 'inline-block',
           marginLeft: '79%',

src/components/filter/FilterEditorBlock.jsx

@@ -9,8 +9,8 @@ class FilterEditorBlock extends React.Component {
   }
 
   render() {
-    return <div>
-      <div style={{display: 'inline-block', width: '8%'}}>
+    return <div className="maputnik-filter-editor-block">
+      <div className="maputnik-filter-editor-block-action" style={{display: 'inline-block', width: '8%'}}>
         <Button
           style={{backgroundColor: null}}
           onClick={this.props.onDelete}
@@ -18,7 +18,7 @@ class FilterEditorBlock extends React.Component {
           <DeleteIcon />
         </Button>
       </div>
-      <div style={{display: 'inline-block', width: '92%'}}>
+      <div className="maputnik-filter-editor-block-content" style={{display: 'inline-block', width: '92%'}}>
         {this.props.children}
       </div>
     </div>

src/components/filter/SingleFilterEditor.jsx

@@ -29,36 +29,32 @@ class SingleFilterEditor extends React.Component {
     const propertyName = f[1]
     const filterArgs = f.slice(2)
 
-    return <div style={{
+    return <div className="maputnik-filter-editor-single"
+    style={{
       marginTop: margins[1],
       marginBottom: margins[1],
       ...this.props.style
     }}>
-      <AutocompleteInput
-        wrapperStyle={{
-          width: '22%'
-        }}
-        value={propertyName}
-        options={Object.keys(this.props.properties).map(propName => [propName, propName])}
-        onChange={newPropertyName => this.onFilterPartChanged(filterOp, newPropertyName, filterArgs)}
-      />
-      <SelectInput
-        style={{
-          width: '19%',
-          marginLeft: '2%'
-        }}
-        value={filterOp}
-        onChange={newFilterOp => this.onFilterPartChanged(newFilterOp, propertyName, filterArgs)}
-        options={otherFilterOps}
-      />
-      <StringInput
-        style={{
-          width: '54%',
-          marginLeft: '2%'
-        }}
-        value={filterArgs.join(',')}
-        onChange={ v=> this.onFilterPartChanged(filterOp, propertyName, v.split(','))}
-      />
+      <div className="maputnik-filter-editor-property">
+        <AutocompleteInput
+          value={propertyName}
+          options={Object.keys(this.props.properties).map(propName => [propName, propName])}
+          onChange={newPropertyName => this.onFilterPartChanged(filterOp, newPropertyName, filterArgs)}
+        />
+      </div>
+      <div className="maputnik-filter-editor-operator">
+        <SelectInput
+          value={filterOp}
+          onChange={newFilterOp => this.onFilterPartChanged(newFilterOp, propertyName, filterArgs)}
+          options={otherFilterOps}
+        />
+      </div>
+      <div className="maputnik-filter-editor-args">
+        <StringInput
+          value={filterArgs.join(',')}
+          onChange={ v=> this.onFilterPartChanged(filterOp, propertyName, v.split(','))}
+        />
+      </div>
     </div>
   }
 

src/components/inputs/ArrayInput.jsx

@@ -50,7 +50,8 @@ class ArrayInput extends React.Component {
       }
     })
 
-    return <div style={{display: 'inline-block', width: '50%'}}>
+    return <div className="maputnik-array"
+      style={{display: 'inline-block', width: '50%'}}>
       {inputs}
     </div>
   }

src/components/inputs/AutocompleteInput.jsx

@@ -20,6 +20,7 @@ class AutocompleteInput extends React.Component {
 
   render() {
     return <Autocomplete
+      className="maputnik-autocomplete"
       menuStyle={{
         border: 'none',
         padding: '2px 0',

src/components/inputs/CheckboxInput.jsx

@@ -51,6 +51,7 @@ class CheckboxInput extends React.Component {
 
     return <label style={styles.root}>
       <input
+        className="maputnik-checkbox"
         type="checkbox"
         style={{
           ...styles.input,

src/components/inputs/InputBlock.jsx

@@ -32,7 +32,9 @@ class InputBlock extends React.Component {
     return <div style={{
       ...input.property,
       ...this.props.style,
-    }}>
+    }}
+      className="maputnik-input-block"
+      >
       {this.props.doc &&
       <DocLabel
         label={this.props.label}

src/components/inputs/MultiButtonInput.jsx

@@ -37,7 +37,9 @@ class MultiButtonInput extends React.Component {
     return <div style={{
       display: 'inline-block',
       ...this.props.style,
-    }}>
+    }}
+      className="maputnik-multibutton"
+    >
       {buttons}
     </div>
   }

src/components/inputs/NumberInput.jsx

@@ -68,8 +68,8 @@ class NumberInput extends React.Component {
 
   render() {
     return <input
+      className="maputnik-number"
       style={{
-        ...input.input,
         ...this.props.style
       }}
       placeholder={this.props.default}

src/components/inputs/SelectInput.jsx

@@ -17,6 +17,7 @@ class SelectInput extends React.Component {
     }
 
     return <select
+      className="maputnik-select"
       style={{
         ...input.select,
         ...this.props.style

src/components/inputs/StringInput.jsx

@@ -22,6 +22,7 @@ class StringInput extends React.Component {
 
   render() {
     return <input
+      className="maputnik-string"
       style={{
         ...input.input,
         ...this.props.style

src/components/layers/LayerEditor.jsx

@@ -172,7 +172,8 @@ export default class LayerEditor extends React.Component {
       </LayerEditorGroup>
     })
 
-    return <div>
+    return <div className="maputnik-layer-editor"
+      >
       {groups}
     </div>
   }

src/components/layers/LayerEditorGroup.jsx

@@ -36,18 +36,7 @@ export default class LayerEditorGroup extends React.Component {
 
   render() {
     return <div>
-      <div style={{
-        fontWeight: 'bold',
-        fontSize: fontSizes[4],
-        backgroundColor: this.state.hover ? Color(colors.black).lighten(0.30).string() : Color(colors.black).lighten(0.15).string(),
-        color: colors.lowgray,
-        cursor: 'pointer',
-        userSelect: 'none',
-        padding: margins[1],
-        display: 'flex',
-        flexDirection: 'row',
-        lineHeight: '20px',
-      }}
+      <div className="maputnik-layer-editor-group"
         onMouseOver={e => this.setState({hover: true})}
         onMouseOut={e => this.setState({hover: false})}
         onClick={e => this.props.onActiveToggle(!this.props.isActive)}

src/components/layers/LayerList.jsx

@@ -69,11 +69,7 @@ class LayerListContainer extends React.Component {
         onLayerVisibilityToggle={this.onLayerVisibilityToggle.bind(this)}
       />
     })
-    return <ul style={{
-      padding: 0,
-      margin: 0,
-      paddingBottom: margins[4]
-    }}>
+    return <ul className="maputnik-layer-list-container">
       {layerPanels}
     </ul>
   }

src/components/layers/LayerListItem.jsx

@@ -66,11 +66,8 @@ class IconAction extends React.Component {
 
   render() {
     return <a
-      style={{
-        display: "inline",
-        marginLeft: margins[0],
-        ...this.props.style
-      }}
+      className="maputnik-icon-action"
+      style={this.props.style}
       onClick={this.props.onClick}
       onMouseOver={e => this.setState({hover: true})}
       onMouseOut={e => this.setState({hover: false})}
@@ -121,25 +118,7 @@ class LayerListItem extends React.Component {
 
   render() {
     const itemStyle = {
-      fontWeight: 400,
-      color: this.props.isSelected ? colors.white : colors.lowgray,
-      fontSize: fontSizes[5],
-      borderLeft: 0,
-      borderTop: 0,
-      borderBottom: 1,
-      borderRight: 0,
-      borderStyle: "solid",
-      userSelect: 'none',
-      listStyle: 'none',
-      zIndex: 2000,
-      cursor: 'pointer',
-      position: 'relative',
-      padding: margins[1],
-      paddingLeft: margins[2],
-      paddingRight: margins[2],
-      borderColor: Color(colors.black).lighten(0.10).string(),
       backgroundColor: colors.black,
-      lineHeight: 1.3,
     }
 
     if(this.state.hover) {
@@ -159,18 +138,10 @@ class LayerListItem extends React.Component {
       onClick={e => this.props.onLayerSelect(this.props.layerId)}
       onMouseOver={e => this.setState({hover: true})}
       onMouseOut={e => this.setState({hover: false})}
-      style={itemStyle}>
-      <div style={{
-        display: 'flex',
-        flexDirection: 'row'
-      }}>
+      className="maputnik-layer-list-item"
+      >
         <LayerTypeDragHandle type={this.props.layerType} />
-        <span style={{
-          width: 115,
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis'
-        }}>{this.props.layerId}</span>
+        <span className="maputnik-layer-list-item-id">{this.props.layerId}</span>
         <span style={{flexGrow: 1}} />
         <IconAction {...iconProps}
           action={'delete'}
@@ -185,7 +156,6 @@ class LayerListItem extends React.Component {
           action={this.props.visibility === 'visible' ? 'hide' : 'show'}
           onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
         />
-      </div>
     </li>
   }
 }

src/components/map/MapboxGlMap.jsx

@@ -142,16 +142,8 @@ export default class MapboxGlMap extends React.Component {
 
   render() {
     return <div
+      className="maputnik-map"
       ref={x => this.container = x}
-      style={{
-        position: "fixed",
-        top: 0,
-        right: 0,
-        bottom: 0,
-        height: "100%",
-        width: "75%",
-        ...this.props.style,
-      }}>
-    </div>
+    ></div>
   }
 }

src/components/modals/Modal.jsx

@@ -15,32 +15,17 @@ class Modal extends React.Component {
 
   render() {
     return <Overlay isOpen={this.props.isOpen}>
-      <div style={{
-        minWidth: 350,
-        maxWidth: 600,
-        backgroundColor: colors.black,
-        boxShadow: '0px 0px 5px 0px rgba(0,0,0,0.3)',
-      }}>
-        <div style={{
-          backgroundColor: colors.gray,
-          display: 'flex',
-          flexDirection: 'row',
-          padding: margins[2],
-          fontSize: fontSizes[4],
-        }}>
-          {this.props.title}
+      <div className="maputnik-modal">
+        <div className="maputnik-modal-header">
+          <span className="maputnik-modal-header-title">{this.props.title}</span>
           <span style={{flexGrow: 1}} />
-          <a
+          <a className="maputnik-modal-header-toggle"
             onClick={() => this.props.onOpenToggle(false)}
             style={{ cursor: 'pointer' }} >
             <CloseIcon />
           </a>
         </div>
-        <div style={{
-          padding: margins[2],
-        }}>
-          {this.props.children}
-        </div>
+        <div className="maputnik-modal-content">{this.props.children}</div>
       </div>
     </Overlay>
   }

src/components/modals/SourcesModal.jsx

@@ -27,7 +27,7 @@ class PublicSource extends React.Component {
   }
 
   render() {
-    return <div style={{
+    return <div className="maputnik-public-source" style={{
         verticalAlign: 'top',
         marginTop: margins[2],
         marginRight: margins[2],
@@ -83,7 +83,8 @@ class ActiveSourceTypeEditor extends React.Component {
     const inputProps = { }
     return <div style={{
     }}>
-      <div style={{
+      <div className="maputnik-active-source-type-editor"
+      style={{
         backgroundColor: colors.gray,
         color: colors.lowgray,
         padding: margins[1],

src/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import './favicon.ico'
+import './style.scss'
 import './index.css'
 import App from './components/App';
 

src/style.scss

@@ -0,0 +1,222 @@
+$color-black: #1c1f24;
+$color-gray: #26282e;
+$color-midgray: #36383e;
+$color-lowgray: #8e8e8e;
+$color-white: #f0f0f0;
+$margin-1: 3px;
+$margin-2: 5px;
+$margin-3: 10px;
+$margin-4: 30px;
+$margin-5: 40px;
+$font-size-1: 24px;
+$font-size-2: 20px;
+$font-size-3: 18px;
+$font-size-4: 16px;
+$font-size-5: 14px;
+$font-size-6: 12px;
+$font-family: Roboto, sans-serif;
+.maputnik-toolbar {
+  position: fixed;
+  height: 40px;
+  width: 100%;
+  z-index: 100;
+  left: 0;
+  top: 0;
+  background-color: $color-black;
+}
+.maputnik-layer-list-container {
+  padding: 0;
+  margin: 0;
+  padding-bottom: $margin-5;
+}
+.maputnik-layer-list-item {
+  font-weight: 400;
+  color: $color-lowgray;
+  font-size: $font-size-6;
+  border-width: 0px 0px 1px;
+  border-style: solid;
+  border-color: lighten($color-black, 0.1);
+  user-select: none;
+  list-style: none;
+  z-index: 2000;
+  cursor: pointer;
+  position: relative;
+  padding: 5px 10px;
+  background-color: $color-black;
+  line-height: 1.3;
+  display: flex;
+  flex-direction: row;
+}
+.maputnik-icon-action {
+  display: inline;
+  margin-left: $margin-1;
+}
+.maputnik-scroll-container {
+  overflow-x: visible;
+  overflow-y: scroll;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  top: 1px;
+  position: absolute;
+}
+.maputnik-layout {
+  font-family: $font-family;
+  color: $color-white;
+}
+.maputnik-layout-list {
+  position: fixed;
+  bottom: 0px;
+  height: 100%;
+  top: 40px;
+  left: 0px;
+  z-index: 1;
+  width: 200px;
+  overflow: hidden;
+  background-color: $color-black;
+}
+.maputnik-layout-drawer {
+  position: fixed;
+  bottom: 0px;
+  height: 100%;
+  top: 40px;
+  left: 200px;
+  z-index: 1;
+  width: 350px;
+  background-color: $color-black;
+}
+.maputnik-layout-bottom {
+  position: fixed;
+  height: 50px;
+  bottom: 0px;
+  left: 550px;
+  z-index: 1;
+  width: 100%;
+  background-color: $color-black;
+}
+.maputnik-layer-editor-group {
+  font-weight: bold;
+  font-size: $font-size-5;
+  background-color: darken($color-gray, 1.5);
+  color: $color-lowgray;
+  cursor: pointer;
+  user-select: none;
+  padding: $margin-2;
+  display: flex;
+  flex-direction: row;
+  line-height: 20px;
+}
+.maputnik-map {
+  position: fixed !important;
+  top: 40px;
+  right: 0px;
+  bottom: 0px;
+  height: 100%;
+  width: 75%;
+}
+.maputnik-toolbar-link {
+  display: inline-block;
+  padding: $margin-3;
+  font-size: $font-size-5;
+  cursor: pointer;
+  color: $color-white;
+  text-decoration: none;
+}
+.maputnik-toolbar-action {
+  @extend .maputnik-toolbar-link;
+  &:hover {
+  background-color: $color-gray;
+  }
+}
+.maputnik-doc-wrapper {
+  display: inline-block;
+  box-sizing: border-box;
+  font-size: $font-size-6;
+  line-height: 2;
+  color: $color-lowgray;
+  user-select: none;
+  position: relative;
+  vertical-align: top;
+  width: 50%;
+}
+.maputnik-base {
+  display: inline-block;
+  box-sizing: border-box;
+  font-size: $font-size-6;
+  line-height: 2;
+  padding-left: $margin-2;
+  padding-right: $margin-2;
+}
+.maputnik-input {
+  @extend .maputnik-base;
+  border: none;
+  background-color: $color-gray;
+  color: $color-lowgray;
+}
+.maputnik-string {
+  @extend .maputnik-input;
+  width: 50%;
+}
+.maputnik-number {
+  @extend .maputnik-input;
+}
+.maputnik-color {
+  @extend .maputnik-input;
+}
+.maputnik-color-wrapper {
+  position: relative;
+  display: inline;
+}
+.maputnik-color-picker-offset {
+}
+.maputnik-color-picker-overlay {
+}
+.maputnik-button {
+  cursor: pointer;
+  background-color: $color-midgray;
+  color: $color-lowgray;
+  font-size: $font-size-6;
+  padding: $margin-2;
+  user-select: none;
+  border-radius: 2px;
+  box-sizing: border-box;
+}
+.maputnik-layer-list-item-id {
+  width: 115px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.maputnik-filter-editor-property {
+  display: inline-block;
+  width: '22%';
+}
+.maputnik-filter-editor-operator {
+  display: inline-block;
+  width: 19%;
+  margin-left: 2%;
+}
+.maputnik-filter-editor-args {
+  display: inline-block;
+  width: 54%;
+  margin-left: 2%;
+}
+.maputnik-modal {
+  min-width: 350px;
+  max-width: 600px;
+  background-color: $color-black;
+  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
+}
+.maputnik-modal-header {
+  background-color: $color-gray;
+  display: flex;
+  flex-direction: row;
+  padding: $margin-3;
+  font-size: $font-size-5;
+}
+.maputnik-modal-header-toggle {
+  cursor: pointer;
+}
+.maputnik-modal-content {
+  padding: $margin-3;
+}

webpack.loaders.js

@@ -29,6 +29,10 @@ module.exports = [
     test: /\.json$/,
     loader: 'json-loader'
   },
+  {
+    test: /[\/\\](node_modules|global|src)[\/\\].*\.scss$/,
+    loaders: ["style-loader", "css-loader", "sass-loader"]
+  },
   {
     test: /[\/\\](node_modules|global|src)[\/\\].*\.css$/,
     loaders: [