diff --git a/src/components/ControlPane.js b/src/components/ControlPane.js
deleted file mode 100644
index fc39041e..00000000
--- a/src/components/ControlPane.js
+++ /dev/null
@@ -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
-
- {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
- })}
-
;
- }
-
- render() {
- const { collection } = this.props;
- if (!collection) { return null; }
- return
- {collection.get('fields').map((field) =>
{this.controlFor(field)}
)}
-
;
- }
-}
-
-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,
-};
diff --git a/src/components/ControlPanel/ControlPane.css b/src/components/ControlPanel/ControlPane.css
new file mode 100644
index 00000000..328ddf27
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/components/ControlPanel/ControlPane.js b/src/components/ControlPanel/ControlPane.js
new file mode 100644
index 00000000..fed6425f
--- /dev/null
+++ b/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 (
+
+
+ {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
+ })}
+
+ );
+ }
+
+ render() {
+ const { collection } = this.props;
+ if (!collection) {
+ return null;
+ }
+ return (
+
+ {
+ collection
+ .get('fields')
+ .map(field =>
+
+ {this.controlFor(field)}
+
+ )
+ }
+
+ );
+ }
+}
+
+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,
+};
diff --git a/src/components/EntryEditor.js b/src/components/EntryEditor.js
index 2bd872ea..d3a07f2a 100644
--- a/src/components/EntryEditor.js
+++ b/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';
diff --git a/src/components/Widgets/MarkdownControlElements/RawEditor/index.css b/src/components/Widgets/MarkdownControlElements/RawEditor/index.css
new file mode 100644
index 00000000..eca2a8d4
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/Widgets/MarkdownControlElements/RawEditor/index.js b/src/components/Widgets/MarkdownControlElements/RawEditor/index.js
index c9e640c0..0670e1fe 100644
--- a/src/components/Widgets/MarkdownControlElements/RawEditor/index.js
+++ b/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 (
);
}
diff --git a/src/index.css b/src/index.css
index 296bdf5a..69aac2cf 100644
--- a/src/index.css
+++ b/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;