Localized CSS

src/components/ControlPane.js

@@ -1,38 +0,0 @@
-import React, { PropTypes } from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { resolveWidget } from './Widgets';
-
-export default class ControlPane extends React.Component {
-  controlFor(field) {
-    const { entry, getMedia, onChange, onAddMedia, onRemoveMedia } = this.props;
-    const widget = resolveWidget(field.get('widget'));
-    return <div className="cms-control">
-      <label>{field.get('label')}</label>
-      {React.createElement(widget.control, {
-        field: field,
-        value: entry.getIn(['data', field.get('name')]),
-        onChange: (value) => onChange(entry.setIn(['data', field.get('name')], value)),
-        onAddMedia: onAddMedia,
-        onRemoveMedia: onRemoveMedia,
-        getMedia: getMedia
-      })}
-    </div>;
-  }
-
-  render() {
-    const { collection } = this.props;
-    if (!collection) { return null; }
-    return <div>
-      {collection.get('fields').map((field) => <div key={field.get('name')} className="cms-widget">{this.controlFor(field)}</div>)}
-    </div>;
-  }
-}
-
-ControlPane.propTypes = {
-  collection: ImmutablePropTypes.map.isRequired,
-  entry: ImmutablePropTypes.map.isRequired,
-  getMedia: PropTypes.func.isRequired,
-  onAddMedia: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
-  onRemoveMedia: PropTypes.func.isRequired,
-};

src/components/ControlPanel/ControlPane.css

@@ -0,0 +1,53 @@
+.control {
+  color: #7c8382;
+  position: relative;
+  padding: 20px 0;
+
+  & input,
+  & textarea,
+  & select {
+    font-family: monospace;
+    display: block;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    border: none;
+    outline: 0;
+    box-shadow: none;
+    background: 0 0;
+    font-size: 18px;
+    color: #7c8382;
+  }
+}
+.label {
+  color: #AAB0AF;
+  font-size: 12px;
+  margin-bottom: 18px;
+}
+.widget {
+  border-bottom: 1px solid #e8eae8;
+  position: relative;
+
+  &:after {
+    content: '';
+    position: absolute;
+    left: 42px;
+    bottom: -7px;
+    width: 12px;
+    height: 12px;
+    background-color: #f2f5f4;
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+    z-index: 1;
+    border-right: 1px solid #e8eae8;
+    border-bottom: 1px solid #e8eae8;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:last-child:after {
+    display: none;
+  }
+}

src/components/ControlPanel/ControlPane.js

@@ -0,0 +1,56 @@
+import React, { PropTypes } from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { resolveWidget } from '../Widgets';
+import styles from './ControlPane.css';
+
+export default class ControlPane extends React.Component {
+  controlFor(field) {
+    const { entry, getMedia, onChange, onAddMedia, onRemoveMedia } = this.props;
+    const widget = resolveWidget(field.get('widget'));
+    return (
+      <div className={styles.control}>
+        <label className={styles.label}>{field.get('label')}</label>
+        {React.createElement(widget.control, {
+          field: field,
+          value: entry.getIn(['data', field.get('name')]),
+          onChange: (value) => onChange(entry.setIn(['data', field.get('name')], value)),
+          onAddMedia: onAddMedia,
+          onRemoveMedia: onRemoveMedia,
+          getMedia: getMedia
+        })}
+      </div>
+    );
+  }
+
+  render() {
+    const { collection } = this.props;
+    if (!collection) {
+      return null;
+    }
+    return (
+      <div>
+        {
+          collection
+            .get('fields')
+            .map(field =>
+              <div
+                key={field.get('name')}
+                className={styles.widget}
+              >
+                {this.controlFor(field)}
+              </div>
+            )
+        }
+      </div>
+    );
+  }
+}
+
+ControlPane.propTypes = {
+  collection: ImmutablePropTypes.map.isRequired,
+  entry: ImmutablePropTypes.map.isRequired,
+  getMedia: PropTypes.func.isRequired,
+  onAddMedia: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onRemoveMedia: PropTypes.func.isRequired,
+};

src/components/EntryEditor.js

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import ControlPane from './ControlPane';
+import ControlPane from './ControlPanel/ControlPane';
 import PreviewPane from './PreviewPane';
 import styles from './EntryEditor.css';
 

src/components/Widgets/MarkdownControlElements/RawEditor/index.css

@@ -0,0 +1,13 @@
+.root {
+  font-family: monospace;
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  border: none;
+  outline: 0;
+  box-shadow: none;
+  background: 0 0;
+  font-size: 18px;
+  color: #7c8382;
+}

src/components/Widgets/MarkdownControlElements/RawEditor/index.js

@@ -3,6 +3,7 @@ import { Editor, Plain, Mark } from 'slate';
 import Prism from 'prismjs';
 import PluginDropImages from 'slate-drop-or-paste-images';
 import marks from './prismMarkdown';
+import styles from './index.css';
 
 Prism.languages.markdown = Prism.languages.extend('markup', {});
 Prism.languages.insertBefore('markdown', 'prolog', marks);
@@ -114,12 +115,13 @@ class RawEditor extends React.Component {
   render() {
     return (
       <Editor
-          placeholder={'Enter some rich text...'}
-          state={this.state.state}
-          schema={SCHEMA}
-          onChange={this.handleChange}
-          onDocumentChange={this.handleDocumentChange}
-          plugins={plugins}
+        className={styles.root}
+        placeholder={'Enter some rich text...'}
+        state={this.state.state}
+        schema={SCHEMA}
+        onChange={this.handleChange}
+        onDocumentChange={this.handleDocumentChange}
+        plugins={plugins}
       />
     );
   }

src/index.css

@@ -36,59 +36,6 @@ h1 {
   font-size: 25px;
 }
 
-:global {
-  & .cms-widget {
-    border-bottom: 1px solid #e8eae8;
-    position: relative;
-  }
-  & .cms-widget:after {
-    content: '';
-    position: absolute;
-    left: 42px;
-    bottom: -7px;
-    width: 12px;
-    height: 12px;
-    background-color: #f2f5f4;
-    -webkit-transform: rotate(45deg);
-    transform: rotate(45deg);
-    z-index: 1;
-    border-right: 1px solid #e8eae8;
-    border-bottom: 1px solid #e8eae8;
-  }
-  & .cms-widget:last-child {
-    border-bottom: none;
-  }
-  & .cms-widget:last-child:after {
-    display: none;
-  }
-  & .cms-control {
-    color: #7c8382;
-    position: relative;
-    padding: 20px 0;
-    & label {
-      color: #AAB0AF;
-      font-size: 12px;
-      margin-bottom: 18px;
-    }
-    & input,
-    & textarea,
-    & select,
-    & .cms-editor-raw {
-      font-family: monospace;
-      display: block;
-      width: 100%;
-      padding: 0;
-      margin: 0;
-      border: none;
-      outline: 0;
-      box-shadow: none;
-      background: 0 0;
-      font-size: 18px;
-      color: #7c8382;
-    }
-  }
-}
-
 :global {
   & .rdt {
     position: relative;