Style open modal

package.json

@@ -19,6 +19,7 @@
   "license": "MIT",
   "homepage": "https://github.com/maputnik/editor#readme",
   "dependencies": {
+    "classnames": "^2.2.5",
     "codemirror": "^5.18.2",
     "color": "^1.0.3",
     "file-saver": "^1.3.2",

src/components/Button.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import classnames from 'classnames'
 import colors from '../config/colors'
 import { margins, fontSizes } from '../config/scales'
 
@@ -6,12 +7,13 @@ class Button extends React.Component {
   static propTypes = {
     onClick: React.PropTypes.func,
     style: React.PropTypes.object,
+    className: React.PropTypes.string,
   }
 
   render() {
     return <a
       onClick={this.props.onClick}
-      className="maputnik-button"
+      className={classnames("maputnik-button", this.props.className)}
       style={this.props.style}>
       {this.props.children}
     </a>

src/components/Toolbar.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import FileReaderInput from 'react-file-reader-input'
+import classnames from 'classnames'
 
 import MdFileDownload from 'react-icons/lib/md/file-download'
 import MdFileUpload from 'react-icons/lib/md/file-upload'
@@ -23,39 +24,28 @@ import SourcesModal from './modals/SourcesModal'
 import OpenModal from './modals/OpenModal'
 
 import style from '../libs/style'
-import colors from '../config/colors'
-import { margins, fontSizes } from '../config/scales'
 
-const IconText = props => <span style={{ paddingLeft: margins[0] }}>
-  {props.children}
-</span>
+function IconText(props) {
+  return <span className="maputnik-icon-text">{props.children}</span>
+}
 
-const ToolbarLink = props => <a
-  className='maputnik-toolbar-link'
-  href={props.href}
-  target={"blank"}
-  style={{
-    ...props.style,
-  }}
+function ToolbarLink(props) {
+  return <a
+    className={classnames('maputnik-toolbar-link', props.className)}
+    href={props.href}
+    target={"blank"}
   >
-  {props.children}
-</a>
+    {props.children}
+  </a>
+}
 
-class ToolbarAction extends React.Component {
-  static propTypes = {
-    onClick: React.PropTypes.func.isRequired,
-  }
-
-  render() {
-    return <a
-      className='maputnik-toolbar-action'
-      onClick={this.props.onClick}
-      style={{
-        ...this.props.style,
-      }}>
-      {this.props.children}
-    </a>
-  }
+function ToolbarAction(props) {
+  return <a
+    className='maputnik-toolbar-action'
+    onClick={props.onClick}
+  >
+    {props.children}
+  </a>
 }
 
 export default class Toolbar extends React.Component {
@@ -127,15 +117,10 @@ export default class Toolbar extends React.Component {
       />
       <ToolbarLink
         href={"https://github.com/maputnik/editor"}
-        style={{
-          width: 180,
-          textAlign: 'left',
-          backgroundColor: colors.black,
-          padding: 5,
-        }}
+        className="maputnik-toolbar-logo"
       >
-        <img src={logoImage} alt="Maputnik" style={{width: 30, height: 30, paddingRight: 5, verticalAlign: 'middle'}}/>
-        <span style={{fontSize: 20, verticalAlign: 'middle' }}>Maputnik</span>
+        <img src={logoImage} alt="Maputnik" />
+        <h1>Maputnik</h1>
       </ToolbarLink>
       <ToolbarAction onClick={this.toggleModal.bind(this, 'open')}>
         <OpenIcon />

src/components/inputs/InputBlock.jsx

@@ -30,7 +30,6 @@ class InputBlock extends React.Component {
 
   render() {
     return <div style={{
-      ...input.property,
       ...this.props.style,
     }}
       className="maputnik-input-block"

src/components/inputs/NumberInput.jsx

@@ -69,9 +69,7 @@ class NumberInput extends React.Component {
   render() {
     return <input
       className="maputnik-number"
-      style={{
-        ...this.props.style
-      }}
+      style={this.props.style}
       placeholder={this.props.default}
       value={this.state.value}
       onChange={e => this.changeValue(e.target.value)}

src/components/inputs/StringInput.jsx

@@ -23,10 +23,7 @@ class StringInput extends React.Component {
   render() {
     return <input
       className="maputnik-string"
-      style={{
-        ...input.input,
-        ...this.props.style
-      }}
+      style={this.props.style}
       value={this.state.value}
       placeholder={this.props.default}
       onChange={e => this.setState({ value: e.target.value })}

src/components/layers/LayerListItem.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import Color from 'color'
+import classnames from 'classnames'
 
 import CopyIcon from 'react-icons/lib/md/content-copy'
 import VisibilityIcon from 'react-icons/lib/md/visibility'
@@ -34,32 +35,15 @@ class LayerTypeDragHandle extends React.Component {
 class IconAction extends React.Component {
   static propTypes = {
     action: React.PropTypes.string.isRequired,
-    active: React.PropTypes.bool,
     onClick: React.PropTypes.func.isRequired,
   }
 
-  constructor(props) {
-    super(props)
-    this.state = { hover: false }
-  }
-
   renderIcon() {
-    const iconStyle = {
-      fill: colors.black
-    }
-
-    if(this.props.active) {
-      iconStyle.fill = colors.midgray
-    }
-    if(this.state.hover) {
-      iconStyle.fill = colors.lowgray
-    }
-
     switch(this.props.action) {
-      case 'copy': return <CopyIcon style={iconStyle} />
-      case 'show': return <VisibilityIcon style={iconStyle} />
-      case 'hide': return <VisibilityOffIcon style={iconStyle} />
-      case 'delete': return <DeleteIcon style={iconStyle} />
+      case 'copy': return <CopyIcon />
+      case 'show': return <VisibilityIcon />
+      case 'hide': return <VisibilityOffIcon />
+      case 'delete': return <DeleteIcon />
       default: return null
     }
   }
@@ -67,10 +51,7 @@ class IconAction extends React.Component {
   render() {
     return <a
       className="maputnik-icon-action"
-      style={this.props.style}
       onClick={this.props.onClick}
-      onMouseOver={e => this.setState({hover: true})}
-      onMouseOut={e => this.setState({hover: false})}
     >
       {this.renderIcon()}
     </a>
@@ -105,9 +86,6 @@ class LayerListItem extends React.Component {
 
   constructor(props) {
     super(props)
-    this.state = {
-      hover: false
-    }
   }
 
   getChildContext() {
@@ -117,42 +95,25 @@ class LayerListItem extends React.Component {
   }
 
   render() {
-    const itemStyle = {
-      backgroundColor: colors.black,
-    }
-
-    if(this.state.hover) {
-      itemStyle.backgroundColor = Color(colors.black).lighten(0.10).string()
-    }
-
-    if(this.props.isSelected) {
-      itemStyle.backgroundColor = Color(colors.black).lighten(0.15).string()
-    }
-
-    const iconProps = {
-      active: this.state.hover || this.props.isSelected
-    }
-
     return <li
       key={this.props.layerId}
       onClick={e => this.props.onLayerSelect(this.props.layerId)}
-      onMouseOver={e => this.setState({hover: true})}
-      onMouseOut={e => this.setState({hover: false})}
-      className="maputnik-layer-list-item"
-      >
+      className={classnames({
+        "maputnik-layer-list-item": true,
+        "maputnik-layer-list-item-selected": this.props.isSelected,
+      })}>
         <LayerTypeDragHandle type={this.props.layerType} />
         <span className="maputnik-layer-list-item-id">{this.props.layerId}</span>
         <span style={{flexGrow: 1}} />
-        <IconAction {...iconProps}
+        <IconAction
           action={'delete'}
           onClick={e => this.props.onLayerDestroy(this.props.layerId)}
         />
-        <IconAction {...iconProps}
+        <IconAction
           action={'copy'}
           onClick={e => this.props.onLayerCopy(this.props.layerId)}
         />
-        <IconAction {...iconProps}
-          active={this.state.hover || this.props.isSelected || this.props.visibility === 'none'}
+        <IconAction
           action={this.props.visibility === 'visible' ? 'hide' : 'show'}
           onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
         />

src/components/modals/AddModal.jsx

@@ -100,7 +100,7 @@ class AddModal extends React.Component {
         onChange={v => this.setState({ 'source-layer': v })}
       />
       }
-      <Button onClick={this.addLayer.bind(this)}>
+      <Button className="maputnik-add-layer-button" onClick={this.addLayer.bind(this)}>
         Add Layer
       </Button>
     </Modal>

src/components/modals/Modal.jsx

@@ -1,10 +1,6 @@
 import React from 'react'
-
 import CloseIcon from 'react-icons/lib/md/close'
-
 import Overlay from './Overlay'
-import colors from '../../config/colors'
-import { margins, fontSizes } from '../../config/scales'
 
 class Modal extends React.Component {
   static propTypes = {
@@ -16,15 +12,15 @@ class Modal extends React.Component {
   render() {
     return <Overlay isOpen={this.props.isOpen}>
       <div className="maputnik-modal">
-        <div className="maputnik-modal-header">
-          <span className="maputnik-modal-header-title">{this.props.title}</span>
-          <span style={{flexGrow: 1}} />
+        <header className="maputnik-modal-header">
+          <h1 className="maputnik-modal-header-title">{this.props.title}</h1>
+          <span className="maputnik-modal-header-space"></span>
           <a className="maputnik-modal-header-toggle"
             onClick={() => this.props.onOpenToggle(false)}
-            style={{ cursor: 'pointer' }} >
+          >
             <CloseIcon />
           </a>
-        </div>
+        </header>
         <div className="maputnik-modal-content">{this.props.children}</div>
       </div>
     </Overlay>

src/components/modals/OpenModal.jsx

@@ -10,8 +10,6 @@ import FileUploadIcon from 'react-icons/lib/md/file-upload'
 import AddIcon from 'react-icons/lib/md/add-circle-outline'
 
 import style from '../../libs/style.js'
-import colors from '../../config/colors'
-import { margins, fontSizes } from '../../config/scales'
 import publicStyles from '../../config/styles.json'
 
 class PublicStyle extends React.Component {
@@ -23,38 +21,18 @@ class PublicStyle extends React.Component {
   }
 
   render() {
-    return <div style={{
-        verticalAlign: 'top',
-        marginTop: margins[2],
-        marginRight: margins[2],
-        backgroundColor: colors.gray,
-        display: 'inline-block',
-        width: 180,
-        fontSize: fontSizes[4],
-        color: colors.lowgray,
-    }}>
+    return <div className="maputnik-public-style">
       <Button
+        className="maputnik-public-style-button"
         onClick={() => this.props.onSelect(this.props.url)}
-        style={{
-          backgroundColor: 'transparent',
-          padding: margins[2],
-          display: 'block',
-        }}
       >
-        <div style={{
-          display: 'flex',
-          flexDirection: 'row',
-        }}>
-          <span style={{fontWeight: 700}}>{this.props.title}</span>
-          <span style={{flexGrow: 1}} />
+        <header className="maputnik-public-style-header">
+          <h4>{this.props.title}</h4>
+          <span className="maputnik-space" />
           <AddIcon />
-        </div>
+        </header>
         <img
-          style={{
-            display: 'block',
-            marginTop: margins[1],
-            maxWidth: '100%',
-          }}
+          className="maputnik-public-style-thumbnail"
           src={this.props.thumbnailUrl}
           alt={this.props.title}
         />
@@ -113,22 +91,20 @@ class OpenModal extends React.Component {
       onOpenToggle={this.props.onOpenToggle}
       title={'Open Style'}
     >
-      <Heading level={4}>Upload Style</Heading>
-      <Paragraph>
-        Upload a JSON style from your computer.
-      </Paragraph>
-      <FileReaderInput onChange={this.onUpload.bind(this)}>
-        <Button>
-          <FileUploadIcon />
-          Upload
-        </Button>
-      </FileReaderInput>
-
-      <Heading level={4}>Gallery Styles</Heading>
-      <Paragraph>
-        Open one of the publicly available styles to start from.
-      </Paragraph>
-      {styleOptions}
+      <section className="maputnik-modal-section">
+        <h2>Upload Style</h2>
+        <p>Upload a JSON style from your computer.</p>
+        <FileReaderInput onChange={this.onUpload.bind(this)}>
+          <Button className="maputnik-upload-button"><FileUploadIcon /> Upload</Button>
+        </FileReaderInput>
+      </section>
+      <section className="maputnik-modal-section">
+        <h2>Gallery Styles</h2>
+        <p>
+          Open one of the publicly available styles to start from.
+        </p>
+        {styleOptions}
+      </section>
     </Modal>
   }
 }

src/components/modals/Overlay.jsx

@@ -1,26 +1,5 @@
 import React from 'react'
 
-class ViewportOverlay extends React.Component {
-  static propTypes = {
-    style: React.PropTypes.object
-  }
-
-  render() {
-    const overlayStyle = {
-      position: 'fixed',
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      zIndex: 2,
-      opacity: 0.875,
-      backgroundColor: 'rgb(28, 31, 36)',
-      ...this.props.style
-    }
-
-    return <div style={overlayStyle} />
-  }
-}
 
 class Overlay extends React.Component {
   static propTypes = {
@@ -29,23 +8,14 @@ class Overlay extends React.Component {
   }
 
   render() {
-    return <div style={{
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      position: 'fixed',
-      display: this.props.isOpen ? 'flex' : 'none',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }}>
-      <ViewportOverlay />
-      <div style={{
-        zIndex: 3,
-      }}>
+		let overlayStyle = {}
+		if(!this.props.isOpen) {
+			overlayStyle['display'] = 'none';
+		}
+
+    return <div className={"maputnik-overlay"} style={overlayStyle}>
+			<div className={"maputnik-overlay-viewport"} />
       {this.props.children}
-      </div>
     </div>
   }
 }

src/index.jsx

@@ -2,8 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import './favicon.ico'
-import './style.scss'
-import './index.css'
+import './styles/index.scss'
 import App from './components/App';
 
 ReactDOM.render(<App/>, document.querySelector("#app"));

src/style.scss

@@ -1,222 +0,0 @@
-$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;
-}

src/styles/_base.scss

@@ -0,0 +1,58 @@
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Medium.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+}
+
+html {
+  color: $color-white;
+  font-size: $font-size-2;
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+p {
+  font-size: $font-size-6;
+  padding-top: $margin-2;
+  padding-bottom: $margin-2;
+  color: $color-lowgray;
+}
+
+h1 {
+  font-size: $font-size-2;
+  margin-bottom: $margin-3;
+}
+
+h2 {
+  font-size: $font-size-3;
+  margin-bottom: $margin-3;
+}
+
+h3 {
+  font-size: $font-size-4;
+  margin-bottom: $margin-3;
+}
+
+h4 {
+  font-size: $font-size-5;
+  margin-bottom: $margin-3;
+}
+
+input:focus {
+  color: $color-white !important;
+  outline: #8e8e8e auto 1px !important;
+}
+label:hover {
+  color: $color-white;
+}

src/styles/_components.scss

@@ -0,0 +1,57 @@
+
+.maputnik-icon-text {
+  padding-left: $margin-1;
+}
+
+.maputnik-icon-action {
+  display: inline;
+  margin-left: $margin-1;
+}
+.maputnik-map {
+  position: fixed !important;
+  top: 40px;
+  right: 0px;
+  bottom: 0px;
+  height: 100%;
+  width: 75%;
+}
+.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-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;
+
+  &:hover {
+    background-color: lighten($color-midgray, 6);
+    color: $color-white;
+  }
+}
+
+.maputnik-big-button {
+  margin-top: $margin-3;
+  display: inline-block;
+  padding: $margin-3;
+  font-size: $font-size-5;
+}
+.maputnik-input-block {
+  margin: $margin-3;
+}
+
+.maputnik-space {
+	flex-grow: 1;
+}

src/styles/_input.scss

@@ -0,0 +1,34 @@
+.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;
+}
+
+//COLOR PICKER
+.maputnik-color {
+  @extend .maputnik-input;
+}
+.maputnik-color-wrapper {
+  position: relative;
+  display: inline;
+}
+.maputnik-color-picker-offset {
+}
+.maputnik-color-picker-overlay {
+}

src/styles/_layer.scss

@@ -0,0 +1,74 @@
+
+// LAYER LIST
+.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 svg {
+  fill: $color-black;
+}
+
+.maputnik-layer-list-item:hover, .maputnik-layer-list-item-selected {
+  background-color: lighten($color-black, 0.8);
+
+  .maputnik-icon-action svg {
+    fill: $color-midgray;
+    &:hover {
+      fill: $color-lowgray;
+    }
+  }
+}
+.maputnik-layer-list-item-id {
+  width: 115px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// FILTER EDITOR
+.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-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%;
+}

src/styles/_layout.scss

@@ -0,0 +1,46 @@
+//SCROLLING
+.maputnik-scroll-container {
+  overflow-x: visible;
+  overflow-y: scroll;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  top: 1px;
+  position: absolute;
+}
+
+//APP LAYOUT
+.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;
+}

src/styles/_modal.scss

@@ -0,0 +1,102 @@
+//MODAL
+.maputnik-modal {
+  min-width: 350px;
+  max-width: 600px;
+  background-color: $color-black;
+  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
+  z-index: 3;
+}
+.maputnik-modal-section {
+  padding-top: $margin-3;
+  padding-bottom: $margin-3;
+}
+.maputnik-modal-header {
+  background-color: $color-gray;
+  display: flex;
+  flex-direction: row;
+  padding: $margin-3;
+}
+.maputnik-modal-header-title {
+  font-size: $font-size-5;
+  margin: 0;
+}
+
+.maputnik-modal-header-toggle {
+  cursor: pointer;
+}
+.maputnik-modal-content {
+  padding: $margin-3;
+}
+
+.maputnik-modal-header-space {
+  @extend .maputnik-space;
+}
+
+//OVERLAY
+.maputnik-overlay-viewport {
+    position: fixed;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    z-index: 2;
+    opacity: 0.875;
+    background-color: rgb(28, 31, 36);
+}
+
+.maputnik-overlay {
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+//OPEN MODAL
+.maputnik-upload-button {
+  @extend .maputnik-big-button;
+}
+.maputnik-public-style {
+  vertical-align: top;
+  margin-top: 10px;
+  margin-right: 10px;
+  background-color: $color-gray;
+  display: inline-block;
+  width: 180px;
+  font-size: $font-size-2;
+  color: $color-lowgray;
+}
+.maputnik-public-style-button {
+  background-color: $color-gray;
+  padding: $margin-3;
+  display: block;
+
+  &:hover {
+    background-color: $color-midgray;
+  }
+}
+.maputnik-public-style-header {
+	display: flex;
+	flex-direction: row;
+}
+
+.maputnik-public-style-thumbnail {
+  display: block;
+  margin-top: $margin-2;
+  max-width: 100%;
+}
+
+//ADD MODAL
+.maputnik-add-layer-button {
+  margin-right: $margin-3;
+  float: right;
+  display: inline-block;
+  margin-top: 3;
+  margin-bottom: $margin-3;
+  text-align: right;
+  @extend .maputnik-big-button;
+}

src/styles/_picker.scss

@@ -0,0 +1,12 @@
+
+
+.chrome-picker {
+  background-color: #1c1f24 !important;
+  font-family: inherit !important;
+}
+
+.chrome-picker input {
+  background-color: rgb(38, 40, 46) !important;
+  color: rgb(142, 142, 142) !important;
+  box-shadow: none !important;
+}

src/styles/_reset.scss

@@ -1,17 +1,3 @@
-@font-face {
-  font-family: 'Roboto';
-  src: url('./fonts/Roboto-Regular.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  src: url('./fonts/Roboto-Medium.ttf') format('truetype');
-  font-weight: bold;
-  font-style: normal;
-}
-
 html {
   background-color: rgb(28, 31, 36);
 }
@@ -60,32 +46,3 @@ table {
   border-collapse: collapse;
   border-spacing: 0;
 }
-
-.chrome-picker {
-  background-color: #1c1f24 !important;
-  font-family: inherit !important;
-}
-
-.chrome-picker input {
-  background-color: rgb(38, 40, 46) !important;
-  color: rgb(142, 142, 142) !important;
-  box-shadow: none !important;
-}
-
-::-webkit-scrollbar {
-    background-color: #26282e;
-    width: 5px;
-}
-
-::-webkit-scrollbar-thumb {
-    border-radius: 6px;
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
-    background-color: #666;
-    padding-left: 2px;
-    padding-right: 2px;
-}
-
-input:focus {
-  color: white !important;
-  outline: #8e8e8e auto 1px !important;
-}

src/styles/_scrollbar.scss

@@ -0,0 +1,12 @@
+::-webkit-scrollbar {
+    background-color: #26282e;
+    width: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+    background-color: #666;
+    padding-left: 2px;
+    padding-right: 2px;
+}

src/styles/_toolbar.scss

@@ -0,0 +1,47 @@
+// TOOLBAR
+.maputnik-toolbar {
+  position: fixed;
+  height: $toolbar-height;
+  width: 100%;
+  z-index: 100;
+  left: 0;
+  top: 0;
+  background-color: $color-black;
+}
+
+.maputnik-toolbar-logo {
+  width: 180px;
+  text-align: left;
+  background-color: $color-black;
+  padding: $margin-2;
+  height: $toolbar-height;
+
+  h1 {
+    display: inline; 
+  }
+
+  img {
+    width: 30px;
+    height: 30px;
+    padding-right: $margin-2;
+    vertical-align: middle;
+  }
+}
+
+.maputnik-toolbar-link {
+  vertical-align: top;
+  height: $toolbar-height;
+  display: inline-block;
+  padding: $margin-3;
+  font-size: $font-size-5;
+  cursor: pointer;
+  color: $color-white;
+  text-decoration: none;
+  &:hover {
+    background-color: $color-midgray;
+  }
+}
+
+.maputnik-toolbar-action {
+  @extend .maputnik-toolbar-link;
+}

src/styles/index.scss

@@ -0,0 +1,31 @@
+$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;
+
+$toolbar-height: 40px;
+
+@import 'reset';
+@import 'base';
+
+@import 'components';
+@import 'scrollbar';
+@import 'picker';
+@import 'toolbar';
+@import 'modal';
+@import 'layout';
+@import 'layer';
+@import 'input';