Migrate to plain CSS (remove CSS modules) (#659)

* Migrate to plain CSS (remove CSS modules)

Change `prefixer` to a function instead of a proxy

* Switch prefix to `nc`

* Replace prefixer with literal class names

* Remove prefixer

* Fix migration errors

* fix compose migrations

* Remove unnecessary theme imports

* Remove old CSS import

* fix sticky toolbar positioning

* update to cssnano v4 so preset is used

* fix css pseudo selectors

* update lockfile

src/components/AppHeader/AppHeader.css

@@ -1,6 +1,4 @@
-@import '../UI/theme';
-
-.appBar {
+.nc-appHeader-appBar {
   padding: 8px 24px;
   height: auto;
   background-color: var(--backgroundAltColor);
@@ -9,18 +7,18 @@
 
 /* Gross stuff below, React Toolbox hacks */
 
-.homeLink,
-.iconMenu {
+.nc-appHeader-homeLink,
+.nc-appHeader-iconMenu {
   margin-left: 2%;
 }
 
-.homeLink .icon {
+.nc-appHeader-homeLink &icon {
   vertical-align: top;
 }
 
-.icon,
-.icon span,
-.leftIcon span {
+.nc-appHeader-icon,
+.nc-appHeader-icon span,
+.nc-appHeader-leftIcon span {
   /* stylelint-disable */
 
   color: var(--defaultColorLight) !important;

src/components/AppHeader/AppHeader.js

@@ -8,7 +8,6 @@ import AppBar from "react-toolbox/lib/app_bar";
 import FontIcon from "react-toolbox/lib/font_icon";
 import FindBar from "../FindBar/FindBar";
 import { stringToRGB } from "../../lib/textHelper";
-import styles from "./AppHeader.css";
 
 export default class AppHeader extends React.Component {
 
@@ -58,19 +57,32 @@ export default class AppHeader extends React.Component {
       backgroundColor: `#${ stringToRGB(user.get("name")) }`,
     };
 
+    const theme = {
+      appBar: 'nc-appHeader-appBar',
+      homeLink: 'nc-appHeader-homeLink',
+      iconMenu: 'nc-appHeader-iconMenu',
+      icon: 'nc-appHeader-icon',
+      leftIcon: 'nc-appHeader-leftIcon',
+      base: 'nc-theme-base',
+      container: 'nc-theme-container',
+      rounded: 'nc-theme-rounded',
+      depth: 'nc-theme-depth',
+      clearfix: 'nc-theme-clearfix',
+    };
+
     return (
       <AppBar
         fixed
-        theme={styles}
+        theme={theme}
         leftIcon="menu"
         onLeftIconClick={toggleDrawer}
         onRightIconClick={this.handleRightIconClick}
       >
-        <Link to="/" className={styles.homeLink}>
-          <FontIcon value="home" className={styles.icon} />
+        <Link to="/" className="nc-appHeader-homeLink">
+          <FontIcon value="home" className="nc-appHeader-icon" />
         </Link>
         <IconMenu
-          theme={styles}
+          theme={theme}
           icon="add"
           onClick={this.handleCreateButtonClick}
           onHide={this.handleCreateMenuHide}
@@ -88,7 +100,7 @@ export default class AppHeader extends React.Component {
         </IconMenu>
         <FindBar runCommand={runCommand} />
         <Avatar style={avatarStyle} title={user.get("name")} image={user.get("avatar_url")} />
-        <IconMenu icon="settings" position="topRight" theme={styles}>
+        <IconMenu icon="settings" position="topRight" theme={theme}>
           <MenuItem onClick={onLogoutClick} value="log out" caption="Log Out" />
         </IconMenu>
       </AppBar>

src/components/ControlPanel/ControlPane.css

@@ -1,42 +1,46 @@
-@import "../UI/theme";
+.nc-controlPane-root p {
+  font-size: 16px;
+}
 
-.control {
+.nc-controlPane-control {
   color: var(--textColor);
   position: relative;
   padding: 20px 0 10px 0;
   margin-top: 16px;
+}
 
-  & input,
-  & textarea,
-  & select,
-  & div[contenteditable=true] {
-    display: block;
-    width: 100%;
-    padding: 12px;
-    margin: 0;
-    border: var(--textFieldBorder);
-    border-radius: var(--borderRadius);
-    outline: 0;
-    box-shadow: none;
-    background-color: var(--controlBGColor);
-    font-size: 16px;
-    color: var(--textColor);
-    transition: border-color .3s ease;
 
-    &:focus,
-    &:active {
-      border-color: var(--primaryColor);
-    }
-  }
+.nc-controlPane-control input,
+.nc-controlPane-control textarea,
+.nc-controlPane-control select,
+.nc-controlPane-control div[contenteditable=true] {
+  display: block;
+  width: 100%;
+  padding: 12px;
+  margin: 0;
+  border: var(--textFieldBorder);
+  border-radius: var(--borderRadius);
+  outline: 0;
+  box-shadow: none;
+  background-color: var(--controlBGColor);
+  font-size: 16px;
+  color: var(--textColor);
+  transition: border-color .3s ease;
 
-  & input,
-  & textarea,
-  & select {
-    font-family: var(--fontFamilyMono);
+  &:focus,
+  &:active {
+    border-color: var(--primaryColor);
   }
 }
 
-.label {
+.nc-controlPane-control input,
+.nc-controlPane-control textarea,
+.nc-controlPane-control select {
+  font-family: var(--fontFamilyMono);
+}
+
+
+.nc-controlPane-label {
   display: block;
   color: var(--controlLabelColor);
   font-size: 12px;
@@ -44,18 +48,13 @@
   font-weight: 600;
 }
 
-.labelWithError {
-  composes: label;
+.nc-controlPane-labelWithError {
   color: #FF706F;
 }
 
-.errors {
+.nc-controlPane-errors {
   list-style-type: none;
   font-size: 10px;
   color: #FF706F;
   margin-bottom: 5px;
 }
-
-p {
-  font-size: 16px;
-}

src/components/ControlPanel/ControlPane.js

@@ -4,7 +4,6 @@ import { Map, fromJS } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { resolveWidget } from '../Widgets';
 import ControlHOC from '../Widgets/ControlHOC';
-import styles from './ControlPane.css';
 
 function isHidden(field) {
   return field.get('widget') === 'hidden';
@@ -31,12 +30,12 @@ export default class ControlPane extends Component {
     const value = entry.getIn(['data', fieldName]);
     const metadata = fieldsMetaData.get(fieldName);
     const errors = fieldsErrors.get(fieldName);
-    const labelClass = errors ? styles.labelWithError : styles.label;
+    const labelClass = errors ? 'nc-controlPane-label nc-controlPane-labelWithError' : 'nc-controlPane-label';
     if (entry.size === 0 || entry.get('partial') === true) return null;
     return (
-      <div className={styles.control}>
+      <div className="nc-controlPane-control">
         <label className={labelClass} htmlFor={fieldName}>{field.get('label')}</label>
-        <ul className={styles.errors}>
+        <ul className="nc-controlPane-errors">
           {
             errors && errors.map(error => (
               typeof error === 'string' && <li key={error.trim().replace(/[^a-z0-9]+/gi, '-')}>{error}</li>
@@ -66,13 +65,13 @@ export default class ControlPane extends Component {
     }
 
     return (
-      <div>
+      <div className="nc-controlPane-root">
         {
           fields.map((field, i) => {
             if (isHidden(field)) {
               return null;
             }
-            return <div key={i} className={styles.widget}>{this.controlFor(field)}</div>;
+            return <div key={i} className="nc-controlPane-widget">{this.controlFor(field)}</div>;
           })
         }
       </div>

src/components/EntryEditor/EntryEditor.css

@@ -1,11 +1,9 @@
-@import '../UI/theme';
-
 /* Quick fix for preview pane not fully displaying in Safari */
-:global(.SplitPane .Pane) {
+.SplitPane .Pane {
   height: 100%;
 }
 
-.previewToggle {
+.nc-entryEditor-previewToggle {
   position: absolute;
   top: 8px;
   right: 40px;
@@ -13,11 +11,11 @@
   opacity: 0.8;
 }
 
-.previewToggleShow {
+.nc-entryEditor-previewToggleShow {
   right: 60px;
 }
 
-.controlPane {
+.nc-entryEditor-controlPane {
   overflow: auto;
   padding: 20px 20px 0;
   height: calc(100% - 55px);
@@ -25,15 +23,15 @@
   background-color: var(--backgroundColor);
 }
 
-.previewPane {
+.nc-entryEditor-previewPane {
   height: calc(100% - 55px);
 }
 
-.blocker > * {
+.nc-entryEditor-blocker > * {
   pointer-events: none;
 }
 
-.footer {
+.nc-entryEditor-footer {
   height: 55px;
   padding: 10px 20px;
   position: absolute;
@@ -46,13 +44,13 @@
   text-align: right;
 }
 
-.noPreviewEditorContainer {
+.nc-entryEditor-noPreviewEditorContainer {
   position: absolute;
   left: 0;
   right: 0;
   height: 100%;
 }
 
-.ProseMirror {
+.nc-entryEditor-ProseMirror {
   border: var(--textFieldBorder);
 }

src/components/EntryEditor/EntryEditor.js

@@ -9,8 +9,6 @@ import ControlPane from '../ControlPanel/ControlPane';
 import PreviewPane from '../PreviewPane/PreviewPane';
 import Toolbar from './EntryEditorToolbar';
 import { StickyContext } from '../UI/Sticky/Sticky';
-import styles from './EntryEditor.css';
-import stickyStyles from '../UI/Sticky/Sticky.css';
 
 const PREVIEW_VISIBLE = 'cms.preview-visible';
 
@@ -63,7 +61,7 @@ class EntryEditor extends Component {
 
     const togglePreviewButton = (
       <Button
-        className={classnames(styles.previewToggle, { previewVisible: styles.previewToggleShow })}
+        className={classnames('nc-entryEditor-previewToggle', { previewVisible: 'nc-entryEditor-previewToggleShow' })}
         onClick={this.handleTogglePreview}
         icon={previewVisible ? 'visibility_off' : 'visibility'}
         floating
@@ -73,7 +71,7 @@ class EntryEditor extends Component {
 
     const editor = (
       <StickyContext
-        className={classnames(styles.controlPane, { [styles.blocker]: showEventBlocker })}
+        className={classnames('nc-entryEditor-controlPane', { ['nc-entryEditor-blocker']: showEventBlocker })}
         registerListener={fn => this.updateStickyContext = fn}
       >
         { collectionPreviewEnabled ? togglePreviewButton : null }
@@ -95,7 +93,7 @@ class EntryEditor extends Component {
 
     const editorWithPreview = (
       <ScrollSync>
-        <div className={styles.container}>
+        <div className="nc-entryEditor-container">
           <SplitPane
             defaultSize="50%"
             onDragStarted={this.handleSplitPaneDragStart}
@@ -103,7 +101,7 @@ class EntryEditor extends Component {
             onChange={this.updateStickyContext}
           >
             <ScrollSyncPane>{editor}</ScrollSyncPane>
-            <div className={classnames(styles.previewPane, { [styles.blocker]: showEventBlocker })}>
+            <div className={classnames('nc-entryEditor-previewPane', { ['nc-entryEditor-blocker']: showEventBlocker })}>
               <PreviewPane
                 collection={collection}
                 entry={entry}
@@ -118,15 +116,15 @@ class EntryEditor extends Component {
     );
 
     const editorWithoutPreview = (
-      <div className={styles.noPreviewEditorContainer}>
+      <div className="nc-entryEditor-noPreviewEditorContainer">
         {editor}
       </div>
     );
 
     return (
-      <div className={styles.root}>
+      <div className="nc-entryEditor-root">
         { collectionPreviewEnabled && this.state.previewVisible ? editorWithPreview : editorWithoutPreview }
-        <div className={styles.footer}>
+        <div className="nc-entryEditor-footer">
           <Toolbar
             isPersisting={entry.get('isPersisting')}
             onPersist={this.handleOnPersist}

src/components/EntryListing/EntryListing.css

@@ -1,4 +1,4 @@
-.card {
+.nc-entryListing-card {
   flex: 0 300px;
   overflow: hidden;
   margin-bottom: 16px;
@@ -8,12 +8,12 @@
   cursor: pointer;
 }
 
-.card:hover {
+.nc-entryListing-card:hover {
   background: #f8f9fa;
   transform: translateY(-8px);
 }
 
-.cardImage {
+.nc-entryListing-cardImage {
   margin: -16px -24px 16px -24px;
   width: calc(100% + 24px + 24px);
   height: 135px;
@@ -22,17 +22,17 @@
   background-repeat: no-repeat;
 }
 
-.cardsGrid {
+.nc-entryListing-cardsGrid {
   display: flex;
   flex-flow: row wrap;
   margin-left: -16px;
 }
 
-.cardList {
+.nc-entryListing-cardList {
   margin-bottom: 1.1rem;
 }
 
-.cardListLabel {
+.nc-entryListing-cardListLabel {
   white-space: nowrap;
   font-weight: bold;
 }

src/components/EntryListing/EntryListing.js

@@ -7,7 +7,6 @@ import history from '../../routing/history';
 import { resolvePath } from '../../lib/pathHelper';
 import { selectFields, selectInferedField } from '../../reducers/collections';
 import { Card } from '../UI';
-import styles from './EntryListing.css';
 
 export default class EntryListing extends React.Component {
   static propTypes = {
@@ -50,17 +49,17 @@ export default class EntryListing extends React.Component {
       <Card
         key={entry.get('slug')}
         onClick={history.push.bind(this, path)} // eslint-disable-line
-        className={styles.card}
+        className="nc-entryListing-card"
       >
         { image &&
-        <header className={styles.cardImage} style={{ backgroundImage: `url(${ image })` }} />
+        <header className="nc-entryListing-cardImage" style={{ backgroundImage: `url(${ image })` }} />
         }
         <h1>{title}</h1>
         {inferedFields.descriptionField ?
           <p>{entry.getIn(['data', inferedFields.descriptionField])}</p>
           : inferedFields.remainingFields && inferedFields.remainingFields.map(f => (
-            <p key={f.get('name')} className={styles.cardList}>
-              <span className={styles.cardListLabel}>{f.get('label')}:</span>{' '}
+            <p key={f.get('name')} className="nc-entryListing-cardList">
+              <span className="nc-entryListing-cardListLabel">{f.get('label')}:</span>{' '}
               { (entry.getIn(['data', f.get('name')]) || '').toString() }
             </p>
           ))
@@ -88,7 +87,7 @@ export default class EntryListing extends React.Component {
     return (
       <div>
         <h1>{children}</h1>
-        <div className={styles.cardsGrid}>
+        <div className="nc-entryListing-cardsGrid">
           { this.renderCards() }
           <Waypoint onEnter={this.handleLoadMore} />
         </div>

src/components/FindBar/FindBar.css

@@ -1,11 +1,9 @@
-@import '../UI/theme';
-
-.root {
+.nc-findBar-root {
   flex: 1;
   background-color: var(--backgroundAltColor);
 }
 
-.inputField {
+.nc-findBar-inputField {
   width: 100%;
   max-width: 500px;
   display: block;

src/components/FindBar/FindBar.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import styles from './FindBar.css';
 
 export const SEARCH = 'SEARCH';
 const PLACEHOLDER = 'Search entry titles...';
@@ -38,11 +37,11 @@ class FindBar extends Component {
 
   render() {
     return (
-      <div className={styles.root}>
+      <div className="nc-findBar-root">
         <label htmlFor="searchInput" />
         <input
           id="searchInput"
-          className={styles.inputField}
+          className="nc-findBar-inputField"
           ref={c => this._input = c} // eslint-disable-line no-return-assign
           onChange={this.handleChange}
           onKeyDown={this.handleKeyDown}

src/components/PreviewPane/PreviewPane.css

@@ -1,4 +1,4 @@
-.frame {
+.nc-previewPane-frame {
   width: 100%;
   height: 100%;
   border: none;

src/components/PreviewPane/PreviewPane.js

@@ -10,7 +10,6 @@ import { INFERABLE_FIELDS } from '../../constants/fieldInference';
 import PreviewContent from './PreviewContent.js';
 import PreviewHOC from '../Widgets/PreviewHOC';
 import Preview from './Preview';
-import styles from './PreviewPane.css';
 
 export default class PreviewPane extends React.Component {
 
@@ -142,11 +141,11 @@ export default class PreviewPane extends React.Component {
        .map((style, i) => <link key={i} href={style} type="text/css" rel="stylesheet" />);
 
     if (!collection) {
-      return <Frame className={styles.frame} head={styleEls} />;
+      return <Frame className="nc-previewPane-frame" head={styleEls} />;
     }
 
     return (<Frame
-      className={styles.frame}
+      className="nc-previewPane-frame"
       head={styleEls}
       initialContent={`
 <!DOCTYPE html>

src/components/UI/Sticky/Sticky.css

@@ -1,19 +1,18 @@
-.stickyContainer {
+.nc-sticky-stickyContainer {
   position: relative !important;
 }
 
-.sticky {
+.nc-sticky-sticky {
   width: 100%;
 }
 
-.stickyActive:not(.stickyAtBottom) {
+.nc-sticky-stickyActive:not(.nc-sticky-stickyAtBottom) {
   position: fixed !important;
   top: 54px !important;
 }
 
-.stickyAtBottom {
+.nc-sticky-stickyAtBottom {
   position: absolute !important;
   top: auto !important;
   bottom: 30px !important;
 }
-

src/components/UI/Sticky/Sticky.js

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import { partial, without } from 'lodash';
-import styles from './Sticky.css';
 
 /**
  * Sticky is a collection of three components meant to facilitate "sticky" UI
@@ -147,7 +146,7 @@ export class StickyContainer extends Component {
     return (
       <div
         id={this.context.string}
-        className={classnames(this.props.className, styles.stickyContainer)}
+        className={classnames(this.props.className, 'nc-sticky-stickyContainer')}
         ref={(ref) => { this.ref = ref }}
       >
         {this.props.children}
@@ -206,11 +205,11 @@ export class Sticky extends Component {
         <div
           className={classnames(
             props.className,
-            styles.sticky,
+            'nc-sticky-sticky',
             {
-              [styles.stickyActive]: state.shouldStick,
+              ['nc-sticky-stickyActive']: state.shouldStick,
               [props.classNameActive]: state.shouldStick,
-              [styles.stickyAtBottom]: state.shouldStickAtBottom,
+              ['nc-sticky-stickyAtBottom']: state.shouldStickAtBottom,
             },
           )}
           style={

src/components/UI/card/Card.css

@@ -1,50 +1,47 @@
-@import '../theme.css';
-
-.card {
-  composes: base container rounded;
+.nc-card-card {
   overflow: hidden;
   border: var(--textFieldBorder);
   transition: all .1s ease-in-out;
   transform: translateY(0);
   padding: 16px 24px;
-}
 
-.card > iframe,
-.card > video,
-.card > img {
-  margin: -16px -24px 16px;
-  width: calc(100% + 16px + 16px);
-}
+  & > iframe,
+  & > video,
+  & > img {
+    margin: -16px -24px 16px;
+    width: calc(100% + 16px + 16px);
+  }
 
-.card h1 {
-  font-size: 16px;
-  font-weight: 600;
-  letter-spacing: 0;
-  line-height: 24px;
-  margin: 0;
-  padding: 0;
-  border: none;
-  color: var(--defaultColor);
-}
+  & h1 {
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: 0;
+    line-height: 24px;
+    margin: 0;
+    padding: 0;
+    border: none;
+    color: var(--defaultColor);
+  }
 
-.card p {
-  font-size: 14px;
-  font-weight: 400;
-  letter-spacing: 0;
-  line-height: 24px;
-  padding: 0;
-  color: var(--textMutedColor);
-}
+  & p {
+    font-size: 14px;
+    font-weight: 400;
+    letter-spacing: 0;
+    line-height: 24px;
+    padding: 0;
+    color: var(--textMutedColor);
+  }
 
-.card > *:not(iframe, video, img, header, footer) {
-  margin-right: 10px;
-  margin-left: 10px;
-}
+  & > *:not(iframe, video, img, header, footer) {
+    margin-right: 10px;
+    margin-left: 10px;
+  }
 
-.card > *:not(iframe, video, img, header, footer):first-child {
-  margin-top: 10px;
-}
+  & > *:not(iframe, video, img, header, footer):first-child {
+    margin-top: 10px;
+  }
 
-.card > *:not(iframe, video, img, header, footer):last-child {
-  margin-bottom: 10px;
+  & > *:not(iframe, video, img, header, footer):last-child {
+    margin-bottom: 10px;
+  }
 }

src/components/UI/card/Card.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import styles from './Card.css';
+
+const themeClasses = `nc-theme-base nc-theme-container nc-theme-rounded`;
 
 export default function Card({ style, className = '', onClick, children }) {
-  return <div className={`${styles.card} ${className}`} style={style} onClick={onClick}>{children}</div>;
+  return <div className={`${ themeClasses } nc-card-card ${ className }`} style={style} onClick={onClick}>{children}</div>;
 }

src/components/UI/icon/Icon.css

@@ -4,17 +4,17 @@
 
 @font-face {
   font-family: 'icons';
-  src: url('./icons.eot');
-  src: url('./icons.eot#iefix') format('embedded-opentype'),
-       url('./icons.woff2') format('woff2'),
-       url('./icons.woff') format('woff'),
-       url('./icons.ttf') format('truetype'),
-       url('./icons.svg#icons') format('svg');
+  src: url('./components/UI/icon/icons.eot');
+  src: url('./components/UI/icon/icons.eot#iefix') format('embedded-opentype'),
+       url('./components/UI/icon/icons.woff2') format('woff2'),
+       url('./components/UI/icon/icons.woff') format('woff'),
+       url('./components/UI/icon/icons.ttf') format('truetype'),
+       url('./components/UI/icon/icons.svg#icons') format('svg');
   font-weight: normal;
   font-style: normal;
 }
 
-.root {
+.nc-icon-root {
   font-family: 'icons';
   font-style: normal;
   font-weight: normal;
@@ -32,321 +32,321 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.bold:before { content: '\e800'; } /* '' */
-.italic:before { content: '\e801'; } /* '' */
-.list:before { content: '\e802'; } /* '' */
-.font:before { content: '\e803'; } /* '' */
-.text-height:before { content: '\e804'; } /* '' */
-.text-width:before { content: '\e805'; } /* '' */
-.align-left:before { content: '\e806'; } /* '' */
-.align-center:before { content: '\e807'; } /* '' */
-.align-right:before { content: '\e808'; } /* '' */
-.align-justify:before { content: '\e809'; } /* '' */
-.indent-left:before { content: '\e80a'; } /* '' */
-.indent-right:before { content: '\e80b'; } /* '' */
-.note:before { content: '\e80c'; } /* '' */
-.note-beamed:before { content: '\e80d'; } /* '' */
-.music:before { content: '\e80e'; } /* '' */
-.search:before { content: '\e80f'; } /* '' */
-.flashlight:before { content: '\e810'; } /* '' */
-.mail:before { content: '\e811'; } /* '' */
-.heart:before { content: '\e812'; } /* '' */
-.heart-empty:before { content: '\e813'; } /* '' */
-.star:before { content: '\e814'; } /* '' */
-.star-empty:before { content: '\e815'; } /* '' */
-.user:before { content: '\e816'; } /* '' */
-.users:before { content: '\e817'; } /* '' */
-.user-add:before { content: '\e818'; } /* '' */
-.video-alt:before { content: '\e819'; } /* '' */
-.picture-alt:before { content: '\e81a'; } /* '' */
-.camera:before { content: '\e81b'; } /* '' */
-.layout:before { content: '\e81c'; } /* '' */
-.menu:before { content: '\e81d'; } /* '' */
-.check:before { content: '\e81e'; } /* '' */
-.cancel:before { content: '\e81f'; } /* '' */
-.leaf:before { content: '\e820'; } /* '' */
-.lifebuoy:before { content: '\e821'; } /* '' */
-.water:before { content: '\e822'; } /* '' */
-.droplet:before { content: '\e823'; } /* '' */
-.cc:before { content: '\e824'; } /* '' */
-.cc-by:before { content: '\e825'; } /* '' */
-.lamp:before { content: '\e826'; } /* '' */
-.light-down:before { content: '\e827'; } /* '' */
-.light-up:before { content: '\e828'; } /* '' */
-.adjust:before { content: '\e829'; } /* '' */
-.block:before { content: '\e82a'; } /* '' */
-.resize-full:before { content: '\e82b'; } /* '' */
-.resize-small:before { content: '\e82c'; } /* '' */
-.popup:before { content: '\e82d'; } /* '' */
-.publish:before { content: '\e82e'; } /* '' */
-.window:before { content: '\e82f'; } /* '' */
-.arrow-combo:before { content: '\e830'; } /* '' */
-.down-circled:before { content: '\e831'; } /* '' */
-.left-circled:before { content: '\e832'; } /* '' */
-.right-circled:before { content: '\e833'; } /* '' */
-.up-circled:before { content: '\e834'; } /* '' */
-.down-open:before { content: '\e835'; } /* '' */
-.left-open:before { content: '\e836'; } /* '' */
-.right-open:before { content: '\e837'; } /* '' */
-.up-open:before { content: '\e838'; } /* '' */
-.down-open-mini:before { content: '\e839'; } /* '' */
-.left-open-mini:before { content: '\e83a'; } /* '' */
-.right-open-mini:before { content: '\e83b'; } /* '' */
-.up-open-mini:before { content: '\e83c'; } /* '' */
-.down-open-big:before { content: '\e83d'; } /* '' */
-.left-open-big:before { content: '\e83e'; } /* '' */
-.right-open-big:before { content: '\e83f'; } /* '' */
-.up-open-big:before { content: '\e840'; } /* '' */
-.down:before { content: '\e841'; } /* '' */
-.left:before { content: '\e842'; } /* '' */
-.right:before { content: '\e843'; } /* '' */
-.up:before { content: '\e844'; } /* '' */
-.down-dir:before { content: '\e845'; } /* '' */
-.left-dir:before { content: '\e846'; } /* '' */
-.right-dir:before { content: '\e847'; } /* '' */
-.up-dir:before { content: '\e848'; } /* '' */
-.down-bold:before { content: '\e849'; } /* '' */
-.left-bold:before { content: '\e84a'; } /* '' */
-.right-bold:before { content: '\e84b'; } /* '' */
-.up-bold:before { content: '\e84c'; } /* '' */
-.down-thin:before { content: '\e84d'; } /* '' */
-.left-thin:before { content: '\e84e'; } /* '' */
-.right-thin:before { content: '\e84f'; } /* '' */
-.up-thin:before { content: '\e850'; } /* '' */
-.ccw:before { content: '\e851'; } /* '' */
-.cw:before { content: '\e852'; } /* '' */
-.arrows-ccw:before { content: '\e853'; } /* '' */
-.level-down:before { content: '\e854'; } /* '' */
-.level-up:before { content: '\e855'; } /* '' */
-.shuffle:before { content: '\e856'; } /* '' */
-.loop:before { content: '\e857'; } /* '' */
-.switch:before { content: '\e858'; } /* '' */
-.play:before { content: '\e859'; } /* '' */
-.stop:before { content: '\e85a'; } /* '' */
-.pause:before { content: '\e85b'; } /* '' */
-.record:before { content: '\e85c'; } /* '' */
-.to-end:before { content: '\e85d'; } /* '' */
-.to-start:before { content: '\e85e'; } /* '' */
-.fast-forward:before { content: '\e85f'; } /* '' */
-.fast-backward:before { content: '\e860'; } /* '' */
-.progress-0:before { content: '\e861'; } /* '' */
-.progress-alt:before { content: '\e862'; } /* '' */
-.progress-2:before { content: '\e863'; } /* '' */
-.progress-3:before { content: '\e864'; } /* '' */
-.target:before { content: '\e865'; } /* '' */
-.palette:before { content: '\e866'; } /* '' */
-.list-alt:before { content: '\e867'; } /* '' */
-.list-add:before { content: '\e868'; } /* '' */
-.signal:before { content: '\e869'; } /* '' */
-.trophy:before { content: '\e86a'; } /* '' */
-.battery:before { content: '\e86b'; } /* '' */
-.back-in-time:before { content: '\e86c'; } /* '' */
-.monitor:before { content: '\e86d'; } /* '' */
-.mobile:before { content: '\e86e'; } /* '' */
-.network:before { content: '\e86f'; } /* '' */
-.cd:before { content: '\e870'; } /* '' */
-.inbox:before { content: '\e871'; } /* '' */
-.install:before { content: '\e872'; } /* '' */
-.globe:before { content: '\e873'; } /* '' */
-.cloud:before { content: '\e874'; } /* '' */
-.cloud-thunder:before { content: '\e875'; } /* '' */
-.flash:before { content: '\e876'; } /* '' */
-.moon:before { content: '\e877'; } /* '' */
-.mouse:before { content: '\e878'; } /* '' */
-.briefcase:before { content: '\e879'; } /* '' */
-.suitcase:before { content: '\e87a'; } /* '' */
-.dot:before { content: '\e87b'; } /* '' */
-.dot-2:before { content: '\e87c'; } /* '' */
-.dot-3:before { content: '\e87d'; } /* '' */
-.brush:before { content: '\e87e'; } /* '' */
-.magnet:before { content: '\e87f'; } /* '' */
-.infinity:before { content: '\e880'; } /* '' */
-.erase:before { content: '\e881'; } /* '' */
-.chart-pie:before { content: '\e882'; } /* '' */
-.chart-line:before { content: '\e883'; } /* '' */
-.chart-bar:before { content: '\e884'; } /* '' */
-.chart-area:before { content: '\e885'; } /* '' */
-.tape:before { content: '\e886'; } /* '' */
-.graduation-cap:before { content: '\e887'; } /* '' */
-.air:before { content: '\e888'; } /* '' */
-.credit-card:before { content: '\e889'; } /* '' */
-.floppy:before { content: '\e88a'; } /* '' */
-.clipboard:before { content: '\e88b'; } /* '' */
-.megaphone:before { content: '\e88c'; } /* '' */
-.database:before { content: '\e88d'; } /* '' */
-.drive:before { content: '\e88e'; } /* '' */
-.bucket:before { content: '\e88f'; } /* '' */
-.thermometer:before { content: '\e890'; } /* '' */
-.key:before { content: '\e891'; } /* '' */
-.flow-cascade:before { content: '\e892'; } /* '' */
-.flow-branch:before { content: '\e893'; } /* '' */
-.flow-tree:before { content: '\e894'; } /* '' */
-.flow-line:before { content: '\e895'; } /* '' */
-.flow-parallel:before { content: '\e896'; } /* '' */
-.rocket:before { content: '\e897'; } /* '' */
-.cc-nc:before { content: '\e898'; } /* '' */
-.cc-nc-eu:before { content: '\e899'; } /* '' */
-.cc-nc-jp:before { content: '\e89a'; } /* '' */
-.cc-sa:before { content: '\e89b'; } /* '' */
-.cc-nd:before { content: '\e89c'; } /* '' */
-.cc-pd:before { content: '\e89d'; } /* '' */
-.cc-zero:before { content: '\e89e'; } /* '' */
-.cc-share:before { content: '\e89f'; } /* '' */
-.cc-remix:before { content: '\e8a0'; } /* '' */
-.flight:before { content: '\e8a1'; } /* '' */
-.paper-plane:before { content: '\e8a2'; } /* '' */
-.language:before { content: '\e8a3'; } /* '' */
-.ticket:before { content: '\e8a4'; } /* '' */
-.gauge:before { content: '\e8a5'; } /* '' */
-.traffic-cone:before { content: '\e8a6'; } /* '' */
-.cancel-circled:before { content: '\e8a7'; } /* '' */
-.cancel-squared:before { content: '\e8a8'; } /* '' */
-.plus:before { content: '\e8a9'; } /* '' */
-.plus-circled:before { content: '\e8aa'; } /* '' */
-.plus-squared:before { content: '\e8ab'; } /* '' */
-.minus:before { content: '\e8ac'; } /* '' */
-.minus-circled:before { content: '\e8ad'; } /* '' */
-.minus-squared:before { content: '\e8ae'; } /* '' */
-.help:before { content: '\e8af'; } /* '' */
-.help-circled:before { content: '\e8b0'; } /* '' */
-.info:before { content: '\e8b1'; } /* '' */
-.info-circled:before { content: '\e8b2'; } /* '' */
-.back:before { content: '\e8b3'; } /* '' */
-.home:before { content: '\e8b4'; } /* '' */
-.link:before { content: '\e8b5'; } /* '' */
-.attach:before { content: '\e8b6'; } /* '' */
-.lock:before { content: '\e8b7'; } /* '' */
-.lock-open:before { content: '\e8b8'; } /* '' */
-.eye:before { content: '\e8b9'; } /* '' */
-.tag:before { content: '\e8ba'; } /* '' */
-.bookmark:before { content: '\e8bb'; } /* '' */
-.bookmarks:before { content: '\e8bc'; } /* '' */
-.flag:before { content: '\e8bd'; } /* '' */
-.thumbs-up:before { content: '\e8be'; } /* '' */
-.thumbs-down:before { content: '\e8bf'; } /* '' */
-.download:before { content: '\e8c0'; } /* '' */
-.upload:before { content: '\e8c1'; } /* '' */
-.upload-cloud:before { content: '\e8c2'; } /* '' */
-.reply:before { content: '\e8c3'; } /* '' */
-.reply-all:before { content: '\e8c4'; } /* '' */
-.forward:before { content: '\e8c5'; } /* '' */
-.quote:before { content: '\e8c6'; } /* '' */
-.code:before { content: '\e8c7'; } /* '' */
-.export:before { content: '\e8c8'; } /* '' */
-.pencil:before { content: '\e8c9'; } /* '' */
-.feather:before { content: '\e8ca'; } /* '' */
-.print:before { content: '\e8cb'; } /* '' */
-.retweet:before { content: '\e8cc'; } /* '' */
-.keyboard:before { content: '\e8cd'; } /* '' */
-.comment:before { content: '\e8ce'; } /* '' */
-.chat:before { content: '\e8cf'; } /* '' */
-.bell:before { content: '\e8d0'; } /* '' */
-.attention:before { content: '\e8d1'; } /* '' */
-.alert:before { content: '\e8d2'; } /* '' */
-.vcard:before { content: '\e8d3'; } /* '' */
-.address:before { content: '\e8d4'; } /* '' */
-.location:before { content: '\e8d5'; } /* '' */
-.map:before { content: '\e8d6'; } /* '' */
-.direction:before { content: '\e8d7'; } /* '' */
-.compass:before { content: '\e8d8'; } /* '' */
-.cup:before { content: '\e8d9'; } /* '' */
-.trash:before { content: '\e8da'; } /* '' */
-.doc:before { content: '\e8db'; } /* '' */
-.docs:before { content: '\e8dc'; } /* '' */
-.doc-landscape:before { content: '\e8dd'; } /* '' */
-.doc-text:before { content: '\e8de'; } /* '' */
-.doc-text-inv:before { content: '\e8df'; } /* '' */
-.newspaper:before { content: '\e8e0'; } /* '' */
-.book-open:before { content: '\e8e1'; } /* '' */
-.book:before { content: '\e8e2'; } /* '' */
-.folder:before { content: '\e8e3'; } /* '' */
-.archive:before { content: '\e8e4'; } /* '' */
-.box:before { content: '\e8e5'; } /* '' */
-.rss:before { content: '\e8e6'; } /* '' */
-.phone:before { content: '\e8e7'; } /* '' */
-.cog:before { content: '\e8e8'; } /* '' */
-.tools:before { content: '\e8e9'; } /* '' */
-.share:before { content: '\e8ea'; } /* '' */
-.shareable:before { content: '\e8eb'; } /* '' */
-.basket:before { content: '\e8ec'; } /* '' */
-.bag:before { content: '\e8ed'; } /* '' */
-.calendar:before { content: '\e8ee'; } /* '' */
-.login:before { content: '\e8ef'; } /* '' */
-.logout:before { content: '\e8f0'; } /* '' */
-.mic:before { content: '\e8f1'; } /* '' */
-.mute:before { content: '\e8f2'; } /* '' */
-.sound:before { content: '\e8f3'; } /* '' */
-.volume:before { content: '\e8f4'; } /* '' */
-.clock:before { content: '\e8f5'; } /* '' */
-.hourglass:before { content: '\e8f6'; } /* '' */
-.link-alt:before { content: '\e8f7'; } /* '' */
-.video:before { content: '\e8f8'; } /* '' */
-.h1:before { content: '\e8f9'; } /* '' */
-.picture:before { content: '\e8fa'; } /* '' */
-.scissors:before { content: '\e8fb'; } /* '' */
-.h2:before { content: '\e8fc'; } /* '' */
-.list-bullet:before { content: '\f0ca'; } /* '' */
-.list-numbered:before { content: '\f0cb'; } /* '' */
-.strike:before { content: '\f0cc'; } /* '' */
-.underline:before { content: '\f0cd'; } /* '' */
-.table:before { content: '\f0ce'; } /* '' */
-.columns:before { content: '\f0db'; } /* '' */
-.paste:before { content: '\f0ea'; } /* '' */
-.quote-left:before { content: '\f10d'; } /* '' */
-.quote-right:before { content: '\f10e'; } /* '' */
-.code-alt:before { content: '\f121'; } /* '' */
-.crop:before { content: '\f125'; } /* '' */
-.unlink:before { content: '\f127'; } /* '' */
-.superscript:before { content: '\f12b'; } /* '' */
-.subscript:before { content: '\f12c'; } /* '' */
-.header:before { content: '\f1dc'; } /* '' */
-.paragraph:before { content: '\f1dd'; } /* '' */
-.github:before { content: '\f300'; } /* '' */
-.github-circled:before { content: '\f301'; } /* '' */
-.flickr:before { content: '\f303'; } /* '' */
-.flickr-circled:before { content: '\f304'; } /* '' */
-.vimeo:before { content: '\f306'; } /* '' */
-.vimeo-circled:before { content: '\f307'; } /* '' */
-.twitter:before { content: '\f309'; } /* '' */
-.twitter-circled:before { content: '\f30a'; } /* '' */
-.facebook:before { content: '\f30c'; } /* '' */
-.facebook-circled:before { content: '\f30d'; } /* '' */
-.facebook-squared:before { content: '\f30e'; } /* '' */
-.gplus:before { content: '\f30f'; } /* '' */
-.gplus-circled:before { content: '\f310'; } /* '' */
-.pinterest:before { content: '\f312'; } /* '' */
-.pinterest-circled:before { content: '\f313'; } /* '' */
-.tumblr:before { content: '\f315'; } /* '' */
-.tumblr-circled:before { content: '\f316'; } /* '' */
-.linkedin:before { content: '\f318'; } /* '' */
-.linkedin-circled:before { content: '\f319'; } /* '' */
-.dribbble:before { content: '\f31b'; } /* '' */
-.dribbble-circled:before { content: '\f31c'; } /* '' */
-.stumbleupon:before { content: '\f31e'; } /* '' */
-.stumbleupon-circled:before { content: '\f31f'; } /* '' */
-.lastfm:before { content: '\f321'; } /* '' */
-.lastfm-circled:before { content: '\f322'; } /* '' */
-.rdio:before { content: '\f324'; } /* '' */
-.rdio-circled:before { content: '\f325'; } /* '' */
-.spotify:before { content: '\f327'; } /* '' */
-.spotify-circled:before { content: '\f328'; } /* '' */
-.qq:before { content: '\f32a'; } /* '' */
-.instagram:before { content: '\f32d'; } /* '' */
-.dropbox:before { content: '\f330'; } /* '' */
-.evernote:before { content: '\f333'; } /* '' */
-.flattr:before { content: '\f336'; } /* '' */
-.skype:before { content: '\f339'; } /* '' */
-.skype-circled:before { content: '\f33a'; } /* '' */
-.renren:before { content: '\f33c'; } /* '' */
-.sina-weibo:before { content: '\f33f'; } /* '' */
-.paypal:before { content: '\f342'; } /* '' */
-.picasa:before { content: '\f345'; } /* '' */
-.soundcloud:before { content: '\f348'; } /* '' */
-.mixi:before { content: '\f34b'; } /* '' */
-.behance:before { content: '\f34e'; } /* '' */
-.google-circles:before { content: '\f351'; } /* '' */
-.vkontakte:before { content: '\f354'; } /* '' */
-.smashing:before { content: '\f357'; } /* '' */
-.db-shape:before { content: '\f600'; } /* '' */
-.sweden:before { content: '\f601'; } /* '' */
-.logo-db:before { content: '\f603'; } /* '' */
+.nc-icon-bold:before { content: '\e800'; } /* '' */
+.nc-icon-italic:before { content: '\e801'; } /* '' */
+.nc-icon-list:before { content: '\e802'; } /* '' */
+.nc-icon-font:before { content: '\e803'; } /* '' */
+.nc-icon-text-height:before { content: '\e804'; } /* '' */
+.nc-icon-text-width:before { content: '\e805'; } /* '' */
+.nc-icon-align-left:before { content: '\e806'; } /* '' */
+.nc-icon-align-center:before { content: '\e807'; } /* '' */
+.nc-icon-align-right:before { content: '\e808'; } /* '' */
+.nc-icon-align-justify:before { content: '\e809'; } /* '' */
+.nc-icon-indent-left:before { content: '\e80a'; } /* '' */
+.nc-icon-indent-right:before { content: '\e80b'; } /* '' */
+.nc-icon-note:before { content: '\e80c'; } /* '' */
+.nc-icon-note-beamed:before { content: '\e80d'; } /* '' */
+.nc-icon-music:before { content: '\e80e'; } /* '' */
+.nc-icon-search:before { content: '\e80f'; } /* '' */
+.nc-icon-flashlight:before { content: '\e810'; } /* '' */
+.nc-icon-mail:before { content: '\e811'; } /* '' */
+.nc-icon-heart:before { content: '\e812'; } /* '' */
+.nc-icon-heart-empty:before { content: '\e813'; } /* '' */
+.nc-icon-star:before { content: '\e814'; } /* '' */
+.nc-icon-star-empty:before { content: '\e815'; } /* '' */
+.nc-icon-user:before { content: '\e816'; } /* '' */
+.nc-icon-users:before { content: '\e817'; } /* '' */
+.nc-icon-user-add:before { content: '\e818'; } /* '' */
+.nc-icon-video-alt:before { content: '\e819'; } /* '' */
+.nc-icon-picture-alt:before { content: '\e81a'; } /* '' */
+.nc-icon-camera:before { content: '\e81b'; } /* '' */
+.nc-icon-layout:before { content: '\e81c'; } /* '' */
+.nc-icon-menu:before { content: '\e81d'; } /* '' */
+.nc-icon-check:before { content: '\e81e'; } /* '' */
+.nc-icon-cancel:before { content: '\e81f'; } /* '' */
+.nc-icon-leaf:before { content: '\e820'; } /* '' */
+.nc-icon-lifebuoy:before { content: '\e821'; } /* '' */
+.nc-icon-water:before { content: '\e822'; } /* '' */
+.nc-icon-droplet:before { content: '\e823'; } /* '' */
+.nc-icon-cc:before { content: '\e824'; } /* '' */
+.nc-icon-cc-by:before { content: '\e825'; } /* '' */
+.nc-icon-lamp:before { content: '\e826'; } /* '' */
+.nc-icon-light-down:before { content: '\e827'; } /* '' */
+.nc-icon-light-up:before { content: '\e828'; } /* '' */
+.nc-icon-adjust:before { content: '\e829'; } /* '' */
+.nc-icon-block:before { content: '\e82a'; } /* '' */
+.nc-icon-resize-full:before { content: '\e82b'; } /* '' */
+.nc-icon-resize-small:before { content: '\e82c'; } /* '' */
+.nc-icon-popup:before { content: '\e82d'; } /* '' */
+.nc-icon-publish:before { content: '\e82e'; } /* '' */
+.nc-icon-window:before { content: '\e82f'; } /* '' */
+.nc-icon-arrow-combo:before { content: '\e830'; } /* '' */
+.nc-icon-down-circled:before { content: '\e831'; } /* '' */
+.nc-icon-left-circled:before { content: '\e832'; } /* '' */
+.nc-icon-right-circled:before { content: '\e833'; } /* '' */
+.nc-icon-up-circled:before { content: '\e834'; } /* '' */
+.nc-icon-down-open:before { content: '\e835'; } /* '' */
+.nc-icon-left-open:before { content: '\e836'; } /* '' */
+.nc-icon-right-open:before { content: '\e837'; } /* '' */
+.nc-icon-up-open:before { content: '\e838'; } /* '' */
+.nc-icon-down-open-mini:before { content: '\e839'; } /* '' */
+.nc-icon-left-open-mini:before { content: '\e83a'; } /* '' */
+.nc-icon-right-open-mini:before { content: '\e83b'; } /* '' */
+.nc-icon-up-open-mini:before { content: '\e83c'; } /* '' */
+.nc-icon-down-open-big:before { content: '\e83d'; } /* '' */
+.nc-icon-left-open-big:before { content: '\e83e'; } /* '' */
+.nc-icon-right-open-big:before { content: '\e83f'; } /* '' */
+.nc-icon-up-open-big:before { content: '\e840'; } /* '' */
+.nc-icon-down:before { content: '\e841'; } /* '' */
+.nc-icon-left:before { content: '\e842'; } /* '' */
+.nc-icon-right:before { content: '\e843'; } /* '' */
+.nc-icon-up:before { content: '\e844'; } /* '' */
+.nc-icon-down-dir:before { content: '\e845'; } /* '' */
+.nc-icon-left-dir:before { content: '\e846'; } /* '' */
+.nc-icon-right-dir:before { content: '\e847'; } /* '' */
+.nc-icon-up-dir:before { content: '\e848'; } /* '' */
+.nc-icon-down-bold:before { content: '\e849'; } /* '' */
+.nc-icon-left-bold:before { content: '\e84a'; } /* '' */
+.nc-icon-right-bold:before { content: '\e84b'; } /* '' */
+.nc-icon-up-bold:before { content: '\e84c'; } /* '' */
+.nc-icon-down-thin:before { content: '\e84d'; } /* '' */
+.nc-icon-left-thin:before { content: '\e84e'; } /* '' */
+.nc-icon-right-thin:before { content: '\e84f'; } /* '' */
+.nc-icon-up-thin:before { content: '\e850'; } /* '' */
+.nc-icon-ccw:before { content: '\e851'; } /* '' */
+.nc-icon-cw:before { content: '\e852'; } /* '' */
+.nc-icon-arrows-ccw:before { content: '\e853'; } /* '' */
+.nc-icon-level-down:before { content: '\e854'; } /* '' */
+.nc-icon-level-up:before { content: '\e855'; } /* '' */
+.nc-icon-shuffle:before { content: '\e856'; } /* '' */
+.nc-icon-loop:before { content: '\e857'; } /* '' */
+.nc-icon-switch:before { content: '\e858'; } /* '' */
+.nc-icon-play:before { content: '\e859'; } /* '' */
+.nc-icon-stop:before { content: '\e85a'; } /* '' */
+.nc-icon-pause:before { content: '\e85b'; } /* '' */
+.nc-icon-record:before { content: '\e85c'; } /* '' */
+.nc-icon-to-end:before { content: '\e85d'; } /* '' */
+.nc-icon-to-start:before { content: '\e85e'; } /* '' */
+.nc-icon-fast-forward:before { content: '\e85f'; } /* '' */
+.nc-icon-fast-backward:before { content: '\e860'; } /* '' */
+.nc-icon-progress-0:before { content: '\e861'; } /* '' */
+.nc-icon-progress-alt:before { content: '\e862'; } /* '' */
+.nc-icon-progress-2:before { content: '\e863'; } /* '' */
+.nc-icon-progress-3:before { content: '\e864'; } /* '' */
+.nc-icon-target:before { content: '\e865'; } /* '' */
+.nc-icon-palette:before { content: '\e866'; } /* '' */
+.nc-icon-list-alt:before { content: '\e867'; } /* '' */
+.nc-icon-list-add:before { content: '\e868'; } /* '' */
+.nc-icon-signal:before { content: '\e869'; } /* '' */
+.nc-icon-trophy:before { content: '\e86a'; } /* '' */
+.nc-icon-battery:before { content: '\e86b'; } /* '' */
+.nc-icon-back-in-time:before { content: '\e86c'; } /* '' */
+.nc-icon-monitor:before { content: '\e86d'; } /* '' */
+.nc-icon-mobile:before { content: '\e86e'; } /* '' */
+.nc-icon-network:before { content: '\e86f'; } /* '' */
+.nc-icon-cd:before { content: '\e870'; } /* '' */
+.nc-icon-inbox:before { content: '\e871'; } /* '' */
+.nc-icon-install:before { content: '\e872'; } /* '' */
+.nc-icon-globe:before { content: '\e873'; } /* '' */
+.nc-icon-cloud:before { content: '\e874'; } /* '' */
+.nc-icon-cloud-thunder:before { content: '\e875'; } /* '' */
+.nc-icon-flash:before { content: '\e876'; } /* '' */
+.nc-icon-moon:before { content: '\e877'; } /* '' */
+.nc-icon-mouse:before { content: '\e878'; } /* '' */
+.nc-icon-briefcase:before { content: '\e879'; } /* '' */
+.nc-icon-suitcase:before { content: '\e87a'; } /* '' */
+.nc-icon-dot:before { content: '\e87b'; } /* '' */
+.nc-icon-dot-2:before { content: '\e87c'; } /* '' */
+.nc-icon-dot-3:before { content: '\e87d'; } /* '' */
+.nc-icon-brush:before { content: '\e87e'; } /* '' */
+.nc-icon-magnet:before { content: '\e87f'; } /* '' */
+.nc-icon-infinity:before { content: '\e880'; } /* '' */
+.nc-icon-erase:before { content: '\e881'; } /* '' */
+.nc-icon-chart-pie:before { content: '\e882'; } /* '' */
+.nc-icon-chart-line:before { content: '\e883'; } /* '' */
+.nc-icon-chart-bar:before { content: '\e884'; } /* '' */
+.nc-icon-chart-area:before { content: '\e885'; } /* '' */
+.nc-icon-tape:before { content: '\e886'; } /* '' */
+.nc-icon-graduation-cap:before { content: '\e887'; } /* '' */
+.nc-icon-air:before { content: '\e888'; } /* '' */
+.nc-icon-credit-card:before { content: '\e889'; } /* '' */
+.nc-icon-floppy:before { content: '\e88a'; } /* '' */
+.nc-icon-clipboard:before { content: '\e88b'; } /* '' */
+.nc-icon-megaphone:before { content: '\e88c'; } /* '' */
+.nc-icon-database:before { content: '\e88d'; } /* '' */
+.nc-icon-drive:before { content: '\e88e'; } /* '' */
+.nc-icon-bucket:before { content: '\e88f'; } /* '' */
+.nc-icon-thermometer:before { content: '\e890'; } /* '' */
+.nc-icon-key:before { content: '\e891'; } /* '' */
+.nc-icon-flow-cascade:before { content: '\e892'; } /* '' */
+.nc-icon-flow-branch:before { content: '\e893'; } /* '' */
+.nc-icon-flow-tree:before { content: '\e894'; } /* '' */
+.nc-icon-flow-line:before { content: '\e895'; } /* '' */
+.nc-icon-flow-parallel:before { content: '\e896'; } /* '' */
+.nc-icon-rocket:before { content: '\e897'; } /* '' */
+.nc-icon-cc-nc:before { content: '\e898'; } /* '' */
+.nc-icon-cc-nc-eu:before { content: '\e899'; } /* '' */
+.nc-icon-cc-nc-jp:before { content: '\e89a'; } /* '' */
+.nc-icon-cc-sa:before { content: '\e89b'; } /* '' */
+.nc-icon-cc-nd:before { content: '\e89c'; } /* '' */
+.nc-icon-cc-pd:before { content: '\e89d'; } /* '' */
+.nc-icon-cc-zero:before { content: '\e89e'; } /* '' */
+.nc-icon-cc-share:before { content: '\e89f'; } /* '' */
+.nc-icon-cc-remix:before { content: '\e8a0'; } /* '' */
+.nc-icon-flight:before { content: '\e8a1'; } /* '' */
+.nc-icon-paper-plane:before { content: '\e8a2'; } /* '' */
+.nc-icon-language:before { content: '\e8a3'; } /* '' */
+.nc-icon-ticket:before { content: '\e8a4'; } /* '' */
+.nc-icon-gauge:before { content: '\e8a5'; } /* '' */
+.nc-icon-traffic-cone:before { content: '\e8a6'; } /* '' */
+.nc-icon-cancel-circled:before { content: '\e8a7'; } /* '' */
+.nc-icon-cancel-squared:before { content: '\e8a8'; } /* '' */
+.nc-icon-plus:before { content: '\e8a9'; } /* '' */
+.nc-icon-plus-circled:before { content: '\e8aa'; } /* '' */
+.nc-icon-plus-squared:before { content: '\e8ab'; } /* '' */
+.nc-icon-minus:before { content: '\e8ac'; } /* '' */
+.nc-icon-minus-circled:before { content: '\e8ad'; } /* '' */
+.nc-icon-minus-squared:before { content: '\e8ae'; } /* '' */
+.nc-icon-help:before { content: '\e8af'; } /* '' */
+.nc-icon-help-circled:before { content: '\e8b0'; } /* '' */
+.nc-icon-info:before { content: '\e8b1'; } /* '' */
+.nc-icon-info-circled:before { content: '\e8b2'; } /* '' */
+.nc-icon-back:before { content: '\e8b3'; } /* '' */
+.nc-icon-home:before { content: '\e8b4'; } /* '' */
+.nc-icon-link:before { content: '\e8b5'; } /* '' */
+.nc-icon-attach:before { content: '\e8b6'; } /* '' */
+.nc-icon-lock:before { content: '\e8b7'; } /* '' */
+.nc-icon-lock-open:before { content: '\e8b8'; } /* '' */
+.nc-icon-eye:before { content: '\e8b9'; } /* '' */
+.nc-icon-tag:before { content: '\e8ba'; } /* '' */
+.nc-icon-bookmark:before { content: '\e8bb'; } /* '' */
+.nc-icon-bookmarks:before { content: '\e8bc'; } /* '' */
+.nc-icon-flag:before { content: '\e8bd'; } /* '' */
+.nc-icon-thumbs-up:before { content: '\e8be'; } /* '' */
+.nc-icon-thumbs-down:before { content: '\e8bf'; } /* '' */
+.nc-icon-download:before { content: '\e8c0'; } /* '' */
+.nc-icon-upload:before { content: '\e8c1'; } /* '' */
+.nc-icon-upload-cloud:before { content: '\e8c2'; } /* '' */
+.nc-icon-reply:before { content: '\e8c3'; } /* '' */
+.nc-icon-reply-all:before { content: '\e8c4'; } /* '' */
+.nc-icon-forward:before { content: '\e8c5'; } /* '' */
+.nc-icon-quote:before { content: '\e8c6'; } /* '' */
+.nc-icon-code:before { content: '\e8c7'; } /* '' */
+.nc-icon-export:before { content: '\e8c8'; } /* '' */
+.nc-icon-pencil:before { content: '\e8c9'; } /* '' */
+.nc-icon-feather:before { content: '\e8ca'; } /* '' */
+.nc-icon-print:before { content: '\e8cb'; } /* '' */
+.nc-icon-retweet:before { content: '\e8cc'; } /* '' */
+.nc-icon-keyboard:before { content: '\e8cd'; } /* '' */
+.nc-icon-comment:before { content: '\e8ce'; } /* '' */
+.nc-icon-chat:before { content: '\e8cf'; } /* '' */
+.nc-icon-bell:before { content: '\e8d0'; } /* '' */
+.nc-icon-attention:before { content: '\e8d1'; } /* '' */
+.nc-icon-alert:before { content: '\e8d2'; } /* '' */
+.nc-icon-vcard:before { content: '\e8d3'; } /* '' */
+.nc-icon-address:before { content: '\e8d4'; } /* '' */
+.nc-icon-location:before { content: '\e8d5'; } /* '' */
+.nc-icon-map:before { content: '\e8d6'; } /* '' */
+.nc-icon-direction:before { content: '\e8d7'; } /* '' */
+.nc-icon-compass:before { content: '\e8d8'; } /* '' */
+.nc-icon-cup:before { content: '\e8d9'; } /* '' */
+.nc-icon-trash:before { content: '\e8da'; } /* '' */
+.nc-icon-doc:before { content: '\e8db'; } /* '' */
+.nc-icon-docs:before { content: '\e8dc'; } /* '' */
+.nc-icon-doc-landscape:before { content: '\e8dd'; } /* '' */
+.nc-icon-doc-text:before { content: '\e8de'; } /* '' */
+.nc-icon-doc-text-inv:before { content: '\e8df'; } /* '' */
+.nc-icon-newspaper:before { content: '\e8e0'; } /* '' */
+.nc-icon-book-open:before { content: '\e8e1'; } /* '' */
+.nc-icon-book:before { content: '\e8e2'; } /* '' */
+.nc-icon-folder:before { content: '\e8e3'; } /* '' */
+.nc-icon-archive:before { content: '\e8e4'; } /* '' */
+.nc-icon-box:before { content: '\e8e5'; } /* '' */
+.nc-icon-rss:before { content: '\e8e6'; } /* '' */
+.nc-icon-phone:before { content: '\e8e7'; } /* '' */
+.nc-icon-cog:before { content: '\e8e8'; } /* '' */
+.nc-icon-tools:before { content: '\e8e9'; } /* '' */
+.nc-icon-share:before { content: '\e8ea'; } /* '' */
+.nc-icon-shareable:before { content: '\e8eb'; } /* '' */
+.nc-icon-basket:before { content: '\e8ec'; } /* '' */
+.nc-icon-bag:before { content: '\e8ed'; } /* '' */
+.nc-icon-calendar:before { content: '\e8ee'; } /* '' */
+.nc-icon-login:before { content: '\e8ef'; } /* '' */
+.nc-icon-logout:before { content: '\e8f0'; } /* '' */
+.nc-icon-mic:before { content: '\e8f1'; } /* '' */
+.nc-icon-mute:before { content: '\e8f2'; } /* '' */
+.nc-icon-sound:before { content: '\e8f3'; } /* '' */
+.nc-icon-volume:before { content: '\e8f4'; } /* '' */
+.nc-icon-clock:before { content: '\e8f5'; } /* '' */
+.nc-icon-hourglass:before { content: '\e8f6'; } /* '' */
+.nc-icon-link-alt:before { content: '\e8f7'; } /* '' */
+.nc-icon-video:before { content: '\e8f8'; } /* '' */
+.nc-icon-h1:before { content: '\e8f9'; } /* '' */
+.nc-icon-picture:before { content: '\e8fa'; } /* '' */
+.nc-icon-scissors:before { content: '\e8fb'; } /* '' */
+.nc-icon-h2:before { content: '\e8fc'; } /* '' */
+.nc-icon-list-bullet:before { content: '\f0ca'; } /* '' */
+.nc-icon-list-numbered:before { content: '\f0cb'; } /* '' */
+.nc-icon-strike:before { content: '\f0cc'; } /* '' */
+.nc-icon-underline:before { content: '\f0cd'; } /* '' */
+.nc-icon-table:before { content: '\f0ce'; } /* '' */
+.nc-icon-columns:before { content: '\f0db'; } /* '' */
+.nc-icon-paste:before { content: '\f0ea'; } /* '' */
+.nc-icon-quote-left:before { content: '\f10d'; } /* '' */
+.nc-icon-quote-right:before { content: '\f10e'; } /* '' */
+.nc-icon-code-alt:before { content: '\f121'; } /* '' */
+.nc-icon-crop:before { content: '\f125'; } /* '' */
+.nc-icon-unlink:before { content: '\f127'; } /* '' */
+.nc-icon-superscript:before { content: '\f12b'; } /* '' */
+.nc-icon-subscript:before { content: '\f12c'; } /* '' */
+.nc-icon-header:before { content: '\f1dc'; } /* '' */
+.nc-icon-paragraph:before { content: '\f1dd'; } /* '' */
+.nc-icon-github:before { content: '\f300'; } /* '' */
+.nc-icon-github-circled:before { content: '\f301'; } /* '' */
+.nc-icon-flickr:before { content: '\f303'; } /* '' */
+.nc-icon-flickr-circled:before { content: '\f304'; } /* '' */
+.nc-icon-vimeo:before { content: '\f306'; } /* '' */
+.nc-icon-vimeo-circled:before { content: '\f307'; } /* '' */
+.nc-icon-twitter:before { content: '\f309'; } /* '' */
+.nc-icon-twitter-circled:before { content: '\f30a'; } /* '' */
+.nc-icon-facebook:before { content: '\f30c'; } /* '' */
+.nc-icon-facebook-circled:before { content: '\f30d'; } /* '' */
+.nc-icon-facebook-squared:before { content: '\f30e'; } /* '' */
+.nc-icon-gplus:before { content: '\f30f'; } /* '' */
+.nc-icon-gplus-circled:before { content: '\f310'; } /* '' */
+.nc-icon-pinterest:before { content: '\f312'; } /* '' */
+.nc-icon-pinterest-circled:before { content: '\f313'; } /* '' */
+.nc-icon-tumblr:before { content: '\f315'; } /* '' */
+.nc-icon-tumblr-circled:before { content: '\f316'; } /* '' */
+.nc-icon-linkedin:before { content: '\f318'; } /* '' */
+.nc-icon-linkedin-circled:before { content: '\f319'; } /* '' */
+.nc-icon-dribbble:before { content: '\f31b'; } /* '' */
+.nc-icon-dribbble-circled:before { content: '\f31c'; } /* '' */
+.nc-icon-stumbleupon:before { content: '\f31e'; } /* '' */
+.nc-icon-stumbleupon-circled:before { content: '\f31f'; } /* '' */
+.nc-icon-lastfm:before { content: '\f321'; } /* '' */
+.nc-icon-lastfm-circled:before { content: '\f322'; } /* '' */
+.nc-icon-rdio:before { content: '\f324'; } /* '' */
+.nc-icon-rdio-circled:before { content: '\f325'; } /* '' */
+.nc-icon-spotify:before { content: '\f327'; } /* '' */
+.nc-icon-spotify-circled:before { content: '\f328'; } /* '' */
+.nc-icon-qq:before { content: '\f32a'; } /* '' */
+.nc-icon-instagram:before { content: '\f32d'; } /* '' */
+.nc-icon-dropbox:before { content: '\f330'; } /* '' */
+.nc-icon-evernote:before { content: '\f333'; } /* '' */
+.nc-icon-flattr:before { content: '\f336'; } /* '' */
+.nc-icon-skype:before { content: '\f339'; } /* '' */
+.nc-icon-skype-circled:before { content: '\f33a'; } /* '' */
+.nc-icon-renren:before { content: '\f33c'; } /* '' */
+.nc-icon-sina-weibo:before { content: '\f33f'; } /* '' */
+.nc-icon-paypal:before { content: '\f342'; } /* '' */
+.nc-icon-picasa:before { content: '\f345'; } /* '' */
+.nc-icon-soundcloud:before { content: '\f348'; } /* '' */
+.nc-icon-mixi:before { content: '\f34b'; } /* '' */
+.nc-icon-behance:before { content: '\f34e'; } /* '' */
+.nc-icon-google-circles:before { content: '\f351'; } /* '' */
+.nc-icon-vkontakte:before { content: '\f354'; } /* '' */
+.nc-icon-smashing:before { content: '\f357'; } /* '' */
+.nc-icon-db-shape:before { content: '\f600'; } /* '' */
+.nc-icon-sweden:before { content: '\f601'; } /* '' */
+.nc-icon-logo-db:before { content: '\f603'; } /* '' */

src/components/UI/icon/Icon.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import styles from './Icon.css';
 
 const availableIcons = [
   // Font Awesome Editor Icons
@@ -200,7 +199,7 @@ const iconPropType = (props, propName) => {
 const noop = function () {};
 
 export default function Icon({ style, className = '', type, onClick = noop }) {
-  return <span className={`${ styles.root } ${ styles[type] } ${ className }`} style={style} onClick={onClick} />;
+  return <span className={`nc-icon-root nc-icon-${ type } ${ className }`} style={style} onClick={onClick} />;
 }
 
 Icon.propTypes = {

src/components/UI/loader/Loader.css

@@ -1,47 +1,3 @@
-.loader {
-  display: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin: 0px;
-  text-align: center;
-  z-index: 1000;
-  -webkit-transform: translateX(-50%) translateY(-50%);
-  -ms-transform: translateX(-50%) translateY(-50%);
-  transform: translateX(-50%) translateY(-50%);
-}
-
-/* Static Shape */
-
-.loader:before {
-  position: absolute;
-  content: '';
-  top: 0%;
-  left: 50%;
-  width: 100%;
-  height: 100%;
-  border-radius: 500rem;
-  border: 0.2em solid rgba(0, 0, 0, 0.1);
-}
-
-/* Active Shape */
-
-.loader:after {
-  position: absolute;
-  content: '';
-  top: 0%;
-  left: 50%;
-  width: 100%;
-  height: 100%;
-  animation: loader 0.6s linear;
-  animation-iteration-count: infinite;
-  border-radius: 500rem;
-  border-color: #767676 transparent transparent;
-  border-style: solid;
-  border-width: 0.2em;
-  box-shadow: 0px 0px 0px 1px transparent;
-}
-
 /* Active Animation */
 
 @-webkit-keyframes loader {
@@ -68,15 +24,52 @@
   }
 }
 
-.loader:before,
-.loader:after {
-  width: 2.28571429rem;
-  height: 2.28571429rem;
-  margin: 0em 0em 0em -1.14285714rem;
+.nc-loader-root {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: 0px;
+  text-align: center;
+  z-index: 1000;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+  -ms-transform: translateX(-50%) translateY(-50%);
+  transform: translateX(-50%) translateY(-50%);
+
+  &:before,
+  &:after {
+    width: 2.28571429rem;
+    height: 2.28571429rem;
+    margin: 0em 0em 0em -1.14285714rem;
+  }
+
+  /* Static Shape */
+  &:before {
+    position: absolute;
+    content: '';
+    top: 0%;
+    left: 50%;
+    border-radius: 500rem;
+    border: 0.2em solid rgba(0, 0, 0, 0.1);
+  }
+
+  /* Active Shape */
+  &:after {
+    position: absolute;
+    content: '';
+    top: 0%;
+    left: 50%;
+    animation: loader 0.6s linear;
+    animation-iteration-count: infinite;
+    border-radius: 500rem;
+    border-color: #767676 transparent transparent;
+    border-style: solid;
+    border-width: 0.2em;
+    box-shadow: 0px 0px 0px 1px transparent;
+  }
 }
 
-
-.text {
+.nc-loader-text {
   width: auto !important;
   height: auto !important;
   text-align: center;
@@ -84,32 +77,32 @@
   margin-top: 35px;
 }
 
-.active {
+.nc-loader-active {
   display: block;
 }
 
-.disabled {
+.nc-loader-disabled {
   display: none;
 }
 
 /*Animations*/
-.animateItem{
+.nc-loader-animateItem{
   position: absolute;
   white-space: nowrap;
   transform: translateX(-50%);
 }
 
-.enter {
+.nc-loader-enter {
   opacity: 0.01;
 }
-.enter.enterActive {
+.nc-loader-enter.nc-loader-enterActive {
   opacity: 1;
   transition: opacity 500ms ease-in;
 }
-.exit {
+.nc-loader-exit {
   opacity: 1;
 }
-.exit.exitActive {
+.nc-loader-exit.nc-loader-exitActive {
   opacity: 0.01;
   transition: opacity 300ms ease-in;
 }

src/components/UI/loader/Loader.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
-import styles from './Loader.css';
+import classnames from 'classnames';
 
 export default class Loader extends React.Component {
 
@@ -30,32 +30,28 @@ export default class Loader extends React.Component {
     if (!children) {
       return null;
     } else if (typeof children == 'string') {
-      return <div className={styles.text}>{children}</div>;
+      return <div className="nc-loader-text">{children}</div>;
     } else if (Array.isArray(children)) {
       this.setAnimation();
-      return (<div className={styles.text}>
+      return (<div className="nc-loader-text">
         <CSSTransition
-          classNames={styles}
+          classNames={{
+            enter: 'nc-loader-enter',
+            enterActive: 'nc-loader-enterActive',
+            exit: 'nc-loader-exit',
+            exitActive: 'nc-loader-exitActive',
+          }}
           timeout={500}
         >
-          <div key={currentItem} className={styles.animateItem}>{children[currentItem]}</div>
+          <div key={currentItem} className="nc-loader-animateItem">{children[currentItem]}</div>
         </CSSTransition>
       </div>);
     }
   };
 
   render() {
-    const { active, style, className = '' } = this.props;
-
-    // Class names
-    let classNames = styles.loader;
-    if (active) {
-      classNames += ` ${ styles.active }`;
-    }
-    if (className.length > 0) {
-      classNames += ` ${ className }`;
-    }
-
-    return <div className={classNames} style={style}>{this.renderChild()}</div>;
+    const { active } = this.props;
+    const className = classnames('nc-loader-root', { 'nc-loader-active': active });
+    return <div className={className}>{this.renderChild()}</div>;
   }
 }

src/components/UI/theme.css

@@ -34,24 +34,24 @@
   --textFieldBorder: var(--border);
 }
 
-.base {
+.nc-theme-base {
   box-sizing: border-box;
 }
 
-.container {
+.nc-theme-container {
   background-color: var(--backgroundColor);
   color: var(--defaultColor);
 }
 
-.rounded {
+.nc-theme-rounded {
   border-radius: var(--borderRadius);
 }
 
-.depth {
+.nc-theme-depth {
   box-shadow: var(--dropShadow);
 }
 
-.clearfix:after {
+.nc-theme-clearfix:after {
   content: '';
   display: table;
   clear: both;

src/components/UI/toast/Toast.css

@@ -1,23 +1,20 @@
-@import '../theme.css';
+/* redux-notifications override */
+.notif__container {
+  z-index: 10000;
+}
 
 :root {
   --iconSize: 30px;
 }
 
-/* redux-notifications override */
-:global(.notif__container) {
-  z-index: 10000;
-}
-
-.root {
-  composes: base container rounded depth from '../theme.css';
+.nc-toast-root {
   overflow: hidden;
   margin: 10px;
   padding: 10px 10px 15px;
   color: var(--defaultColorLight);
 }
 
-.icon {
+.nc-toast-icon {
   position: relative;
   top: .15em;
   margin-right: .25em;
@@ -25,22 +22,18 @@
   line-height: var(--iconSize);
 }
 
-.info {
-  composes: root;
+.nc-toast-info {
   background-color: var(--infoColor);
 }
 
-.success {
-  composes: root;
+.nc-toast-success {
   background-color: var(--successColor);
 }
 
-.warning {
-  composes: root;
+.nc-toast-warning {
   background-color: var(--warningColor);
 }
 
-.danger {
-  composes: root;
+.nc-toast-danger {
   background-color: var(--errorColor);
 }

src/components/UI/toast/Toast.js

@@ -2,7 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Icon } from '../index';
 import 'redux-notifications/lib/styles.css'; // Import default redux-notifications styles into global scope.
-import styles from './Toast.css';
+
+const themeClasses = `nc-theme-base nc-theme-container nc-theme-rounded nc-theme-depth`;
 
 const icons = {
   info: 'info',
@@ -13,8 +14,8 @@ const icons = {
 
 export default function Toast({ kind, message }) {
   return (
-    <div className={styles[kind]}>
-      <Icon type={icons[kind]} className={styles.icon} />
+    <div className={`${ themeClasses } nc-toast-root nc-toast-${ kind }`}>
+      <Icon type={icons[kind]} className="nc-toast-icon" />
       {message}
     </div>
   );

src/components/UnpublishedListing/UnpublishedListing.css

@@ -1,16 +1,14 @@
-@import '../UI/theme.css';
-
 :root {
   --highlightColor: #38ab9b;
   --defaultFontSize: 1em;
 }
 
-.container {
+.nc-unpublishedListing-container {
   display: flex;
   justify-content: space-between;
 }
 
-.column {
+.nc-unpublishedListing-column {
   flex: 1 33%;
   margin: -10px;
   margin-top: 24px;
@@ -19,27 +17,26 @@
   transition: background-color .5s ease;
 }
 
-.columnHovered {
-  composes: column;
+.nc-unpublishedListing-column-hovered {
   border: 2px dashed var(--highlightColor);
   border-radius: 4px;
 }
 
-.columnHeading {
+.nc-unpublishedListing-columnHeading {
   font-size: var(--defaultFontSize);
 }
 
-.draggable {
+.nc-unpublishedListing-draggable {
   cursor: move;
 }
 
-.card {
+.nc-unpublishedListing-card {
   margin-bottom: 10px;
 }
 
 /* Gross stuff below, React Toolbox hacks */
 
-.cardTitle h5 {
+.nc-unpublishedListing-cardTitle h5 {
   color: var(--backgroundAltColor) !important;
   font-weight: 500 !important;
   font-size: 21px !important;

src/components/UnpublishedListing/UnpublishedListing.js

@@ -5,11 +5,11 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Link } from 'react-router-dom';
 import moment from 'moment';
 import { capitalize } from 'lodash'
+import classnames from 'classnames';
 import { Card, CardTitle, CardText, CardActions } from 'react-toolbox/lib/card';
 import Button from 'react-toolbox/lib/button';
 import UnpublishedListingCardMeta from './UnpublishedListingCardMeta.js';
 import { status, statusDescriptions } from '../../constants/publishModes';
-import styles from './UnpublishedListing.css';
 
 class UnpublishedListing extends React.Component {
   static propTypes = {
@@ -50,8 +50,11 @@ class UnpublishedListing extends React.Component {
           /* eslint-enable */
         >
           {isHovered => (
-            <div className={isHovered ? styles.columnHovered : styles.column}>
-              <h2 className={styles.columnHeading}>
+            <div className={classnames(
+              'nc-unpublishedListing-column',
+              { 'nc-unpublishedListing-column-hovered' : isHovered },
+            )}>
+              <h2 className="nc-unpublishedListing-columnHeading">
                 {statusDescriptions.get(currColumn)}
               </h2>
               {this.renderColumns(currEntries, currColumn)}
@@ -79,8 +82,8 @@ class UnpublishedListing extends React.Component {
                 collection={collection}
                 ownStatus={ownStatus}
               >
-                <div className={styles.draggable}>
-                  <Card className={styles.card}>
+                <div className="nc-unpublishedListing-draggable">
+                  <Card className="nc-unpublishedListing-card">
                     <UnpublishedListingCardMeta
                       meta={capitalize(collection)}
                       label={isModification ? "" : "New"}
@@ -88,7 +91,7 @@ class UnpublishedListing extends React.Component {
                     <CardTitle
                       title={entry.getIn(['data', 'title'])}
                       subtitle={`by ${ author }`}
-                      className={styles.cardTitle}
+                      className="nc-unpublishedListing-cardTitle"
                     />
                     <CardText>
                       Last updated: {timeStamp} by {entry.getIn(['metaData', 'user'])}
@@ -128,7 +131,7 @@ class UnpublishedListing extends React.Component {
     return (
       <div>
         <h5>Editorial Workflow</h5>
-        <div className={styles.container}>
+        <div className="nc-unpublishedListing-container">
           {columns}
         </div>
       </div>

src/components/UnpublishedListing/UnpublishedListingCardMeta.css

@@ -1,6 +1,4 @@
-@import '../UI/theme.css';
-
-.cardMeta {
+.nc-unpublishedListingCardMeta-cardMeta {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -16,8 +14,7 @@
   color: #fff;
 }
 
-.meta {}
-.label {
+.nc-unpublishedListingCardMeta-label {
   padding: 5px 8px 4px 8px;
   border-radius: var(--borderRadiusLarge);
 

src/components/UnpublishedListing/UnpublishedListingCardMeta.js

@@ -1,12 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import styles from './UnpublishedListingCardMeta.css';
 
 const UnpublishedListingCardMeta = ({ meta, label }) =>
-  <div className={styles.cardMeta}>
-    <span className={styles.meta}>{meta}</span>
+  <div className="nc-unpublishedListingCardMeta-cardMeta">
+    <span className="nc-unpublishedListingCardMeta-meta">{meta}</span>
     {(label && label.length > 0)
-      ? <span className={styles.label}>{label}</span>
+      ? <span className="nc-unpublishedListingCardMeta-label">{label}</span>
       : ""}
   </div>;
 

src/components/Widgets/BooleanControl.css

@@ -1,3 +1,3 @@
-.switch {
+.nc-booleanControl-switch {
   display: inline-block;
 }

src/components/Widgets/BooleanControl.js

@@ -3,7 +3,6 @@ import React from 'react';
 import ImmutablePropTypes from "react-immutable-proptypes";
 import Switch from 'react-toolbox/lib/switch';
 import { isBoolean } from 'lodash';
-import styles from './BooleanControl.css';
 
 export default class BooleanControl extends React.Component {
   render() {
@@ -11,7 +10,7 @@ export default class BooleanControl extends React.Component {
     return (
       <Switch
         id={forID}
-        className={styles.switch}
+        className="nc-booleanControl-switch"
         checked={isBoolean(value) ? value : field.get('defaultValue', false)}
         onChange={onChange}
       />

src/components/Widgets/FileControl.css

@@ -1,16 +1,14 @@
-@import "../UI/theme.css";
-
-.input {
+.nc-fileControl-input {
   display: none !important;
 }
 
-.message {
+.nc-fileControl-message {
   padding: 20px;
   display: block;
   font-size: 12px;
 }
 
-.imageUpload {
+.nc-fileControl-imageUpload {
   background-color: #fff;
   text-align: center;
   color: #999;

src/components/Widgets/FileControl.js

@@ -3,7 +3,6 @@ import React from 'react';
 import { truncateMiddle } from '../../lib/textHelper';
 import { Loader } from '../UI';
 import AssetProxy, { createAssetProxy } from '../../valueObjects/AssetProxy';
-import styles from './FileControl.css';
 
 const MAX_DISPLAY_LENGTH = 50;
 
@@ -79,8 +78,8 @@ export default class FileControl extends React.Component {
     const fileName = this.renderFileName();
     if (processing) {
       return (
-        <div className={styles.imageUpload}>
-          <span className={styles.message}>
+        <div className="nc-fileControl-imageUpload">
+          <span className="nc-fileControl-message">
             <Loader active />
           </span>
         </div>
@@ -88,18 +87,18 @@ export default class FileControl extends React.Component {
     }
     return (
       <div
-        className={styles.imageUpload}
+        className="nc-fileControl-imageUpload"
         onDragEnter={this.handleDragEnter}
         onDragOver={this.handleDragOver}
         onDrop={this.handleChange}
       >
-        <span className={styles.message} onClick={this.handleClick}>
+        <span className="nc-fileControl-message" onClick={this.handleClick}>
           {fileName ? fileName : 'Click here to upload a file from your computer, or drag and drop a file directly into this box'}
         </span>
         <input
           type="file"
           onChange={this.handleChange}
-          className={styles.input}
+          className="nc-fileControl-input"
           ref={this.handleFileInputRef}
         />
       </div>

src/components/Widgets/ImageControl.js

@@ -3,7 +3,6 @@ import React from 'react';
 import { truncateMiddle } from '../../lib/textHelper';
 import { Loader } from '../UI';
 import AssetProxy, { createAssetProxy } from '../../valueObjects/AssetProxy';
-import styles from './FileControl.css';
 
 const MAX_DISPLAY_LENGTH = 50;
 
@@ -83,8 +82,8 @@ export default class ImageControl extends React.Component {
     const imageName = this.renderImageName();
     if (processing) {
       return (
-        <div className={styles.imageUpload}>
-          <span className={styles.message}>
+        <div className="nc-fileControl-imageUpload">
+          <span className="nc-fileControl-message">
             <Loader active />
           </span>
         </div>
@@ -92,19 +91,19 @@ export default class ImageControl extends React.Component {
     }
     return (
       <div
-        className={styles.imageUpload}
+        className="nc-fileControl-imageUpload"
         onDragEnter={this.handleDragEnter}
         onDragOver={this.handleDragOver}
         onDrop={this.handleChange}
       >
-        <span className={styles.message} onClick={this.handleClick}>
+        <span className="nc-fileControl-message" onClick={this.handleClick}>
           {imageName ? imageName : 'Click here to upload an image from your computer, or drag and drop a file directly into this box'}
         </span>
         <input
           type="file"
           accept="image/*"
           onChange={this.handleChange}
-          className={styles.input}
+          className="nc-fileControl-input"
           ref={this.handleFileInputRef}
         />
       </div>

src/components/Widgets/ListControl.css

@@ -1,10 +1,8 @@
-@import "../UI/theme";
-
-:global(.list-item-dragging) {
+.list-item-dragging {
   opacity: 0.5;
 }
 
-.addButton {
+.nc-listControl-addButton {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -16,16 +14,16 @@
   background-color: var(--controlBGColor);
 }
 
-.addButtonIcon {
+.nc-listControl-addButtonIcon {
   font-size: 18px;
 }
 
-.addButtonText {
+.nc-listControl-addButtonText {
   margin-left: 4px;
   text-transform: lowercase;
 }
 
-.removeButton {
+.nc-listControl-removeButton {
   position: absolute;
   top: 2px;
   right: 2px;
@@ -38,7 +36,7 @@
   z-index: 1;
 }
 
-.toggleButton {
+.nc-listControl-toggleButton {
   position: absolute;
   top: 0;
   left: 0;
@@ -51,13 +49,13 @@
   background: rgba(0,0,0,0.1);
 }
 
-.item {
+.nc-listControl-item {
   position: relative;
   padding-left: 24px;
   cursor: move;
 }
 
-.objectLabel {
+.nc-listControl-objectLabel {
   border: 2px solid rgba(0,0,0,0.1);
   border-top-width: 28px;
   border-radius: var(--borderRadius);
@@ -67,25 +65,24 @@
   display: none;
 }
 
-.objectControl {
+.nc-listControl-objectControl {
   display: block;
   border-top: 28px solid rgba(0,0,0,0.1);
   border-top-left-radius: 0;
 }
 
-.expanded {
-}
+.nc-listControl-expanded {}
 
-.collapsed {
-  & .objectLabel {
+.nc-listControl-collapsed {
+  & .nc-listControl-objectLabel {
     display: block;
   }
-  & .objectControl {
+  & .nc-listControl-objectControl {
     display: none;
   }
 }
 
-.dragIcon {
+.nc-listControl-dragIcon {
   position: absolute;
   top: 2px;
   display: block;

src/components/Widgets/ListControl.js

@@ -4,7 +4,6 @@ import { List, Map, fromJS } from 'immutable';
 import { sortable } from 'react-sortable';
 import FontIcon from 'react-toolbox/lib/font_icon';
 import ObjectControl from './ObjectControl';
-import styles from './ListControl.css';
 
 function ListItem(props) {
   return <div {...props} className={`list-item ${ props.className }`}>{props.children}</div>;
@@ -138,7 +137,7 @@ export default class ListControl extends Component {
     const { value, field, getAsset, onAddAsset, onRemoveAsset } = this.props;
     const { itemStates } = this.state;
     const collapsed = itemStates.getIn([index, 'collapsed']);
-    const classNames = [styles.item, collapsed ? styles.collapsed : styles.expanded];
+    const classNames = ['nc-listControl-item', collapsed ? 'nc-listControl-collapsed' : 'nc-listControl-expanded'];
 
     return (<SortableListItem
       key={index}
@@ -149,18 +148,18 @@ export default class ListControl extends Component {
       outline="list"
     >
       <div className={classNames.join(' ')}>
-        <button className={styles.toggleButton} onClick={this.handleToggle(index)}>
+        <button className="nc-listControl-toggleButton" onClick={this.handleToggle(index)}>
           <FontIcon value={collapsed ? 'expand_more' : 'expand_less'} />
         </button>
-        <FontIcon value="drag_handle" className={styles.dragIcon} />
-        <button className={styles.removeButton} onClick={this.handleRemove(index)}>
+        <FontIcon value="drag_handle" className="nc-listControl-dragIcon" />
+        <button className="nc-listControl-removeButton" onClick={this.handleRemove(index)}>
           <FontIcon value="close" />
         </button>
-        <div className={styles.objectLabel}>{this.objectLabel(item)}</div>
+        <div className="nc-listControl-objectLabel">{this.objectLabel(item)}</div>
         <ObjectControl
           value={item}
           field={field}
-          className={styles.objectControl}
+          className="nc-listControl-objectControl"
           onChange={this.handleChangeFor(index)}
           getAsset={getAsset}
           onAddAsset={onAddAsset}
@@ -176,9 +175,9 @@ export default class ListControl extends Component {
 
     return (<div id={forID}>
       {value && value.map((item, index) => this.renderItem(item, index))}
-      <button className={styles.addButton} onClick={this.handleAdd}>
-        <FontIcon value="add" className={styles.addButtonIcon} />
-        <span className={styles.addButtonText}>new {listLabel}</span>
+      <button className="nc-listControl-addButton" onClick={this.handleAdd}>
+        <FontIcon value="add" className="nc-listControl-addButtonIcon" />
+        <span className="nc-listControl-addButtonText">new {listLabel}</span>
       </button>
     </div>);
   }

src/components/Widgets/Markdown/MarkdownControl/RawEditor/index.css

@@ -1,18 +1,8 @@
-@import "../../../../UI/theme";
-
-.rawWrapper {
+.nc-rawEditor-rawWrapper {
   position: relative;
 }
 
-.editorControlBar {
-  composes: editorControlBar from "../VisualEditor/index.css";
-}
-
-.editorControlBarSticky {
-  composes: editorControlBarSticky from "../VisualEditor/index.css";
-}
-
-.rawEditor {
+.nc-rawEditor-rawEditor {
   position: relative;
   overflow: hidden;
   overflow-x: auto;

src/components/Widgets/Markdown/MarkdownControl/RawEditor/index.js

@@ -5,7 +5,6 @@ import Plain from 'slate-plain-serializer';
 import { debounce } from 'lodash';
 import Toolbar from '../Toolbar/Toolbar';
 import { Sticky } from '../../../../UI/Sticky/Sticky';
-import styles from './index.css';
 
 export default class RawEditor extends React.Component {
   constructor(props) {
@@ -53,16 +52,16 @@ export default class RawEditor extends React.Component {
 
   render() {
     return (
-      <div className={styles.rawWrapper}>
+      <div className="nc-rawEditor-rawWrapper">
         <Sticky
-          className={styles.editorControlBar}
-          classNameActive={styles.editorControlBarSticky}
+          className="nc-visualEditor-editorControlBar"
+          classNameActive="nc-visualEditor-editorControlBarSticky"
           fillContainerWidth
         >
           <Toolbar onToggleMode={this.handleToggleMode} disabled rawMode />
         </Sticky>
         <Slate
-          className={styles.rawEditor}
+          className="nc-rawEditor-rawEditor"
           state={this.state.editorState}
           onChange={this.handleChange}
           onPaste={this.handlePaste}

src/components/Widgets/Markdown/MarkdownControl/Toolbar/Toolbar.css

@@ -1,11 +1,8 @@
-@import "../../../../UI/theme";
-
-.Toolbar {
-  composes: clearfix;
+.nc-toolbar-Toolbar {
   z-index: 1000;
 }
 
-.Toggle {
+.nc-toolbar-Toggle {
   float: right;
   margin-bottom: 0;
   padding-top: 4px;

src/components/Widgets/Markdown/MarkdownControl/Toolbar/Toolbar.js

@@ -7,7 +7,6 @@ import ToolbarButton from './ToolbarButton';
 import ToolbarComponentsMenu from './ToolbarComponentsMenu';
 import ToolbarPluginForm from './ToolbarPluginForm';
 import { Icon } from '../../../../UI';
-import styles from './Toolbar.css';
 
 export default class Toolbar extends React.Component {
   static propTypes = {
@@ -71,7 +70,7 @@ export default class Toolbar extends React.Component {
     ];
 
     return (
-      <div className={styles.Toolbar}>
+      <div className="nc-toolbar-Toolbar nc-theme-clearfix">
         { buttonsConfig.map((btn, i) => (
           <ToolbarButton
             key={i}
@@ -96,7 +95,7 @@ export default class Toolbar extends React.Component {
             getAsset={getAsset}
           />
         }
-        <Switch label="Markdown" onChange={onToggleMode} checked={rawMode} className={styles.Toggle}/>
+        <Switch label="Markdown" onChange={onToggleMode} checked={rawMode} className="nc-toolbar-Toggle"/>
       </div>
     );
   }

src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarButton.css

@@ -1,6 +1,4 @@
-@import "../../../../UI/theme";
-
-.button {
+.nc-toolbarButton-button {
   display: inline-block;
   padding: 6px;
   border: none;
@@ -11,6 +9,6 @@
   }
 }
 
-.active {
+.nc-toolbarButton-active {
   background-color: var(--highlightFGAltColor);
 }

src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarButton.js

@@ -2,11 +2,10 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
 import { Icon } from '../../../../UI';
-import styles from './ToolbarButton.css';
 
 const ToolbarButton = ({ label, icon, action, active, disabled }) => (
   <button
-    className={classnames(styles.button, { [styles.active]: active })}
+    className={classnames('nc-toolbarButton-button', { ['nc-toolbarButton-active']: active })}
     onClick={action}
     title={label}
     disabled={disabled}

src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarComponentsMenu.css

@@ -1,9 +1,9 @@
-.root {
+.nc-toolbarComponentsMenu-root {
   display: inline-block;
   position: relative;
 }
 
-.menuItem {
+.nc-toolbarComponentsMenu-menuItem {
   height: auto;
   padding-top: 6px;
   padding-bottom: 6px;

src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarComponentsMenu.js

@@ -3,7 +3,6 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Menu, MenuItem } from 'react-toolbox/lib/menu';
 import ToolbarButton from './ToolbarButton';
-import styles from './ToolbarComponentsMenu.css';
 
 export default class ToolbarComponentsMenu extends React.Component {
   static PropTypes = {
@@ -29,7 +28,7 @@ export default class ToolbarComponentsMenu extends React.Component {
   render() {
     const { plugins, onComponentMenuItemClick, disabled } = this.props;
     return (
-      <div className={styles.root}>
+      <div className="nc-toolbarComponentsMenu-root">
         <ToolbarButton
           label="Add Component"
           icon="plus"
@@ -48,7 +47,7 @@ export default class ToolbarComponentsMenu extends React.Component {
               value={plugin.get('id')}
               caption={plugin.get('label')}
               onClick={() => onComponentMenuItemClick(plugin)}
-              className={styles.menuItem}
+              className="nc-toolbarComponentsMenu-menuItem"
             />
           ))}
         </Menu>

src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginForm.css

@@ -1,6 +1,4 @@
-@import "../../../../UI/theme";
-
-.pluginForm {
+.nc-toolbarPluginForm-pluginForm {
   position: absolute;
   background-color: var(--backgroundColor);
   margin-top: -20px;
@@ -12,20 +10,21 @@
   overflow: hidden;
   z-index: 1;
 
-  /* Nested to override high specificity React Toolbox styles */
-  & .header {
-    padding: 12px;
-    margin: 0;
-    color: var(--textColor);
-    background-color: var(--backgroundColor);
-  }
 }
 
-.body {
+/* Nested to override high specificity React Toolbox styles */
+.nc-toolbarPluginForm-pluginForm .nc-toolbarPluginForm-header {
+  padding: 12px;
+  margin: 0;
+  color: var(--textColor);
+  background-color: var(--backgroundColor);
+}
+
+.nc-toolbarPluginForm-body {
   padding: 0 12px 16px;
 }
 
-.footer {
+.nc-toolbarPluginForm-footer {
   background-color: var(--backgroundColor);
   padding: 10px 20px;
   text-align: right;

src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginForm.js

@@ -3,7 +3,6 @@ import React from 'react';
 import { Map } from 'immutable';
 import { Button } from 'react-toolbox/lib/button';
 import ToolbarPluginFormControl from './ToolbarPluginFormControl';
-import styles from './ToolbarPluginForm.css';
 
 export default class ToolbarPluginForm extends React.Component {
   static propTypes = {
@@ -41,9 +40,9 @@ export default class ToolbarPluginForm extends React.Component {
     } = this.props;
 
     return (
-      <form className={styles.pluginForm} onSubmit={this.handleSubmit}>
-        <h3 className={styles.header}>Insert {plugin.get('label')}</h3>
-        <div className={styles.body}>
+      <form className="nc-toolbarPluginForm-pluginForm" onSubmit={this.handleSubmit}>
+        <h3 className="nc-toolbarPluginForm-header">Insert {plugin.get('label')}</h3>
+        <div className="nc-toolbarPluginForm-body">
           {plugin.get('fields').map((field, index) => (
             <ToolbarPluginFormControl
               key={index}
@@ -58,7 +57,7 @@ export default class ToolbarPluginForm extends React.Component {
             />
           ))}
         </div>
-        <div className={styles.footer}>
+        <div className="nc-toolbarPluginForm-footer">
           <Button raised onClick={this.handleSubmit}>Insert</Button>
           {' '}
           <Button onClick={onCancel}>Cancel</Button>

src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginFormControl.css

@@ -1,7 +0,0 @@
-.control {
-  composes: control from "../../../../ControlPanel/ControlPane.css"
-}
-
-.label {
-  composes: label from "../../../../ControlPanel/ControlPane.css";
-}

src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginFormControl.js

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { resolveWidget } from '../../../../Widgets';
-import styles from './ToolbarPluginFormControl.css';
 
 const ToolbarPluginFormControl = ({
   field,
@@ -18,8 +17,8 @@ const ToolbarPluginFormControl = ({
   const controlProps = { field, value, onAddAsset, onRemoveAsset, getAsset, onChange };
 
   return (
-    <div className={styles.control} key={key}>
-      <label className={styles.label} htmlFor={key}>{field.get('label')}</label>
+    <div className="nc-controlPane-control" key={key}>
+      <label className="nc-controlPane-label" htmlFor={key}>{field.get('label')}</label>
       <Control {...controlProps}/>
     </div>
   );

src/components/Widgets/Markdown/MarkdownControl/VisualEditor/components.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { List } from 'immutable';
 import cn from 'classnames';
-import styles from './index.css';
 
 /**
  * Slate uses React components to render each type of node that it receives.
@@ -62,7 +61,7 @@ export const NODE_COMPONENTS = {
   'shortcode': props => {
     const { attributes, node, state: editorState } = props;
     const isSelected = editorState.selection.hasFocusIn(node);
-    const className = cn(styles.shortcode, { [styles.shortcodeSelected]: isSelected });
+    const className = cn('nc-visualEditor-shortcode', { ['nc-visualEditor-shortcodeSelected']: isSelected });
     return <div {...attributes} className={className} draggable >{node.data.get('shortcode')}</div>;
   },
 };

src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.css

@@ -1,133 +1,136 @@
-@import "../../../../UI/theme";
-
-.editorControlBar {
+.nc-visualEditor-editorControlBar {
   z-index: 1;
   border: 2px solid transparent;
   border-top: 0;
   background-color: var(--controlBGColor);
 }
 
-.editorControlBarSticky {
+.nc-visualEditor-editorControlBarSticky {
   border-color: var(--textFieldBorderColor);
 }
 
-.wrapper {
+.nc-visualEditor-wrapper {
   position: relative;
 }
 
-.editor {
+.nc-visualEditor-editor {
   position: relative;
   overflow: hidden;
   overflow-x: auto;
   min-height: var(--richTextEditorMinHeight);
   font-family: var(--fontFamily);
-
-  & h1 {
-    font-size: 32px;
-    margin-top: 16px;
-  }
-
-  & h2 {
-    font-size: 24px;
-    margin-top: 12px;
-  }
-
-  & h3 {
-    font-size: 20px;
-    margin-top: 8px;
-  }
-
-  & h4 {
-    font-size: 18px;
-    margin-top: 8px;
-  }
-
-  & h5,
-  & h6 {
-    font-size: 16px;
-    margin-top: 8px;
-  }
-
-  & h1, & h2, & h3, & h4, & h5, & h6 {
-    font-weight: 700;
-    line-height: 1;
-  }
-
-  & p,
-  & pre,
-  & blockquote,
-  & ul,
-  & ol {
-    margin-top: 16px;
-    margin-bottom: 16px;
-  }
-
-  & a {
-    text-decoration: underline;
-  }
-
-  & hr {
-    border: 1px solid;
-    margin-bottom: 16px;
-  }
-
-  & li > p {
-    margin: 0;
-  }
-
-  & ul,
-  & ol {
-    padding-left: 30px;
-  }
-
-  & pre {
-    white-space: pre-wrap;
-  }
-
-  & pre > code {
-    display: block;
-    width: 100%;
-    overflow-y: auto;
-    background-color: #000;
-    color: #ccc;
-    border-radius: var(--borderRadius);
-    padding: 10px;
-  }
-
-  & code {
-    background-color: var(--backgroundColorShaded);
-    border-radius: var(--borderRadius);
-    padding: 0 2px;
-    font-size: 85%;
-  }
-
-  & blockquote {
-    padding-left: 16px;
-    border-left: 3px solid var(--backgroundColorShaded);
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  & table {
-    border-collapse: collapse;
-  }
-
-  & td,
-  & th {
-    border: 2px solid black;
-    padding: 8px;
-    text-align: left;
-  }
 }
 
-.shortcode {
+.nc-visualEditor-editor h1 {
+  font-size: 32px;
+  margin-top: 16px;
+}
+
+.nc-visualEditor-editor h2 {
+  font-size: 24px;
+  margin-top: 12px;
+}
+
+.nc-visualEditor-editor h3 {
+  font-size: 20px;
+  margin-top: 8px;
+}
+
+.nc-visualEditor-editor h4 {
+  font-size: 18px;
+  margin-top: 8px;
+}
+
+.nc-visualEditor-editor h5,
+.nc-visualEditor-editor h6 {
+  font-size: 16px;
+  margin-top: 8px;
+}
+
+.nc-visualEditor-editor h1,
+.nc-visualEditor-editor h2,
+.nc-visualEditor-editor h3,
+.nc-visualEditor-editor h4,
+.nc-visualEditor-editor h5,
+.nc-visualEditor-editor h6 {
+  font-weight: 700;
+  line-height: 1;
+}
+
+.nc-visualEditor-editor p,
+.nc-visualEditor-editor pre,
+.nc-visualEditor-editor blockquote,
+.nc-visualEditor-editor ul,
+.nc-visualEditor-editor ol {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+.nc-visualEditor-editor a {
+  text-decoration: underline;
+}
+
+.nc-visualEditor-editor hr {
+  border: 1px solid;
+  margin-bottom: 16px;
+}
+
+.nc-visualEditor-editor li > p {
+  margin: 0;
+}
+
+.nc-visualEditor-editor ul,
+.nc-visualEditor-editor ol {
+  padding-left: 30px;
+}
+
+.nc-visualEditor-editor pre {
+  white-space: pre-wrap;
+}
+
+.nc-visualEditor-editor pre > code {
+  display: block;
+  width: 100%;
+  overflow-y: auto;
+  background-color: #000;
+  color: #ccc;
+  border-radius: var(--borderRadius);
+  padding: 10px;
+}
+
+.nc-visualEditor-editor code {
+  background-color: var(--backgroundColorShaded);
+  border-radius: var(--borderRadius);
+  padding: 0 2px;
+  font-size: 85%;
+}
+
+.nc-visualEditor-editor blockquote {
+  padding-left: 16px;
+  border-left: 3px solid var(--backgroundColorShaded);
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.nc-visualEditor-editor table {
+  border-collapse: collapse;
+}
+
+.nc-visualEditor-editor td,
+.nc-visualEditor-editor th {
+  border: 2px solid black;
+  padding: 8px;
+  text-align: left;
+}
+
+.nc-visualEditor-shortcode {
   border: 2px solid black;
   padding: 8px;
   margin: 2px 0;
   cursor: pointer;
 }
 
-.shortcodeSelected {
+.nc-visualEditor-shortcodeSelected {
   border-color: var(--primaryColor);
   color: var(--primaryColor);
 }

src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.js

@@ -11,7 +11,6 @@ import { MARK_COMPONENTS, NODE_COMPONENTS } from './components';
 import RULES from './rules';
 import plugins, { EditListConfigured } from './plugins';
 import onKeyDown from './keys';
-import styles from './index.css';
 
 export default class Editor extends Component {
   constructor(props) {
@@ -179,10 +178,10 @@ export default class Editor extends Component {
     const { onAddAsset, onRemoveAsset, getAsset } = this.props;
 
     return (
-      <div className={styles.wrapper}>
+      <div className="nc-visualEditor-wrapper">
         <Sticky
-          className={styles.editorControlBar}
-          classNameActive={styles.editorControlBarSticky}
+          className="nc-visualEditor-editorControlBar"
+          classNameActive="nc-visualEditor-editorControlBarSticky"
           fillContainerWidth
         >
           <Toolbar
@@ -207,7 +206,7 @@ export default class Editor extends Component {
           />
         </Sticky>
         <Slate
-          className={styles.editor}
+          className="nc-visualEditor-editor"
           state={this.state.editorState}
           schema={this.state.schema}
           plugins={plugins}

src/components/Widgets/ObjectControl.css

@@ -1,6 +1,4 @@
-@import "../UI/theme";
-
-.root {
+.nc-objectControl-root {
   position: relative;
   border: 2px solid rgba(0,0,0,0.1);
   border-radius: var(--borderRadius);

src/components/Widgets/ObjectControl.js

@@ -2,8 +2,6 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Map } from 'immutable';
 import { resolveWidget } from '../Widgets';
-import controlStyles from '../ControlPanel/ControlPane.css';
-import styles from './ObjectControl.css';
 
 export default class ObjectControl extends Component {
   static propTypes = {
@@ -36,9 +34,9 @@ export default class ObjectControl extends Component {
     const widget = resolveWidget(field.get('widget') || 'string');
     const fieldValue = value && Map.isMap(value) ? value.get(field.get('name')) : value;
 
-    return (<div className={controlStyles.widget} key={field.get('name')}>
-      <div className={controlStyles.control} key={field.get('name')}>
-        <label className={controlStyles.label} htmlFor={field.get('name')}>{field.get('label')}</label>
+    return (<div className="nc-controlPane-widget" key={field.get('name')}>
+      <div className="nc-controlPane-control" key={field.get('name')}>
+        <label className="nc-controlPane-label" htmlFor={field.get('name')}>{field.get('label')}</label>
         {
           React.createElement(widget.control, {
             id: field.get('name'),
@@ -64,7 +62,7 @@ export default class ObjectControl extends Component {
     const className = this.props.className || '';
 
     if (multiFields) {
-      return (<div id={forID} className={`${ className } ${ styles.root }`}>
+      return (<div id={forID} className={`${ className } nc-objectControl-root`}>
         {multiFields.map(f => this.controlFor(f))}
       </div>);
     } else if (singleField) {

src/components/stories/Card.js

@@ -8,8 +8,8 @@ const styles = {
     backgroundColor: '#555',
     textAlign: 'center',
     marginTop: 5,
-    padding: 10
-  }
+    padding: 10,
+  },
 };
 
 storiesOf('Card', module)