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
2017-10-18 09:29:38 -07:00 · 2017-10-18 09:29:38 -07:00 · 7dd8ca13c4
commit 7dd8ca13c4
parent 8a819be61e
70 changed files with 1521 additions and 1251 deletions
--- a/package.json
+++ b/package.json
@ -90,6 +90,7 @@
    "caniuse-lite": "^1.0.30000745",
    "cross-env": "^5.0.2",
    "css-loader": "^0.28.7",
+    "cssnano": "^v4.0.0-rc.2",
    "deep-equal": "^1.0.1",
    "enzyme": "^3.0.0",
    "enzyme-adapter-react-15": "^1.0.0",
--- a/postcss.config.js
+++ b/postcss.config.js
@ -12,5 +12,8 @@ module.exports = {
        },
      },
    }),
+    require('cssnano')({
+      preset: 'default',
+    }),
  ],
 };
--- a/src/backends/git-gateway/AuthenticationPage.css
+++ b/src/backends/git-gateway/AuthenticationPage.css
@ -1,31 +1,31 @@
-.root {
+.nc-gitGatewayAuthenticationPage-root {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
 }

-.card {
+.nc-gitGatewayAuthenticationPage-card {
  width: 350px;
  padding: 10px;
 }

-.card img {
+.nc-gitGatewayAuthenticationPage-card img {
  display: block;
  margin: auto;
  padding-bottom: 5px;
 }

-.errorMsg {
+.nc-gitGatewayAuthenticationPage-errorMsg {
  color: #dd0000;
 }

-.message {
+.nc-gitGatewayAuthenticationPage-message {
  font-size: 1.1em;
  margin: 20px 10px;
 }

-.button {
+.nc-gitGatewayAuthenticationPage-button {
  padding: .25em 1em;
  height: auto;
 }
--- a/src/backends/git-gateway/AuthenticationPage.js
+++ b/src/backends/git-gateway/AuthenticationPage.js
@ -6,7 +6,6 @@ import { Notifs } from 'redux-notifications';
 import { Toast } from '../../components/UI/index';
 import { Card, Icon } from "../../components/UI";
 import logo from "./netlify_logo.svg";
-import styles from "./AuthenticationPage.css";

 let component = null;

@ -94,24 +93,24 @@ export default class AuthenticationPage extends React.Component {
    const { error } = this.props;

    if (window.netlifyIdentity) {
-      return <section className={styles.root}>
+      return <section className="nc-gitGatewayAuthenticationPage-root">
        <Notifs CustomComponent={Toast} />
-        <Button className={styles.button} raised onClick={this.handleIdentity}>
+        <Button className="nc-gitGatewayAuthenticationPage-button" raised onClick={this.handleIdentity}>
          Login with Netlify Identity
        </Button>
      </section>
    }

    return (
-      <section className={styles.root}>
-        <Card className={styles.card}>
+      <section className="nc-gitGatewayAuthenticationPage-root">
+        <Card className="nc-gitGatewayAuthenticationPage-card">
          <form onSubmit={this.handleLogin}>
            <img src={logo} width={100} role="presentation" />
            {error && <p>
-              <span className={styles.errorMsg}>{error}</span>
+              <span className="nc-gitGatewayAuthenticationPage-errorMsg">{error}</span>
            </p>}
            {errors.server && <p>
-              <span className={styles.errorMsg}>{errors.server}</span>
+              <span className="nc-gitGatewayAuthenticationPage-errorMsg">{errors.server}</span>
            </p>}
            <Input
              type="text"
@ -130,7 +129,7 @@ export default class AuthenticationPage extends React.Component {
              onChange={this.handleChange.bind(this, "password")} // eslint-disable-line
            />
            <Button
-              className={styles.button}
+              className="nc-gitGatewayAuthenticationPage-button"
              raised
            >
              <Icon type="login" /> Login
--- a/src/backends/github/AuthenticationPage.css
+++ b/src/backends/github/AuthenticationPage.css
@ -1,4 +1,4 @@
-.root {
+.nc-githubAuthenticationPage-root {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
@ -6,7 +6,7 @@
  height: 100vh;
 }

-.button {
+.nc-githubAuthenticationPage-button {
  padding: .25em 1em;
  height: auto;
 }
--- a/src/backends/github/AuthenticationPage.js
+++ b/src/backends/github/AuthenticationPage.js
@ -5,7 +5,6 @@ import Authenticator from '../../lib/netlify-auth';
 import { Icon } from '../../components/UI';
 import { Notifs } from 'redux-notifications';
 import { Toast } from '../../components/UI/index';
-import styles from './AuthenticationPage.css';

 export default class AuthenticationPage extends React.Component {
  static propTypes = {
@ -35,11 +34,11 @@ export default class AuthenticationPage extends React.Component {
    const { loginError } = this.state;

    return (
-      <section className={styles.root}>
+      <section className="nc-githubAuthenticationPage-root">
        <Notifs CustomComponent={Toast} />
        {loginError && <p>{loginError}</p>}
        <Button
-          className={styles.button}
+          className="nc-githubAuthenticationPage-button"
          raised
          onClick={this.handleLogin}
        >
--- a/src/backends/test-repo/AuthenticationPage.js
+++ b/src/backends/test-repo/AuthenticationPage.js
@ -4,7 +4,6 @@ import Input from "react-toolbox/lib/input";
 import Button from "react-toolbox/lib/button";
 import { Card, Icon } from "../../components/UI";
 import logo from "../git-gateway/netlify_logo.svg";
-import styles from "../git-gateway/AuthenticationPage.css";

 export default class AuthenticationPage extends React.Component {
  static propTypes = {
@ -23,10 +22,10 @@ export default class AuthenticationPage extends React.Component {
  };

  render() {
-    return (<section className={styles.root}>
-      <Card className={styles.card}>
+    return (<section className="nc-gitGatewayAuthenticationPage-root">
+      <Card className="nc-gitGatewayAuthenticationPage-card">
        <img src={logo} width={100} role="presentation" />
-        <p className={styles.message}>This is a demo, enter your email to start</p>
+        <p className="nc-gitGatewayAuthenticationPage-message">This is a demo, enter your email to start</p>
        <Input
          type="text"
          label="Email"
@ -35,7 +34,7 @@ export default class AuthenticationPage extends React.Component {
          onChange={this.handleEmailChange}
        />
        <Button
-          className={styles.button}
+          className="nc-gitGatewayAuthenticationPage-button"
          raised
          onClick={this.handleLogin}
        >
--- a/src/components/AppHeader/AppHeader.css
+++ b/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;
--- a/src/components/AppHeader/AppHeader.js
+++ b/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>
--- a/src/components/ControlPanel/ControlPane.css
+++ b/src/components/ControlPanel/ControlPane.css
@ -1,15 +1,19 @@
-@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] {
+
+.nc-controlPane-control input,
+.nc-controlPane-control textarea,
+.nc-controlPane-control select,
+.nc-controlPane-control div[contenteditable=true] {
  display: block;
  width: 100%;
  padding: 12px;
@ -27,16 +31,16 @@
  &:active {
    border-color: var(--primaryColor);
  }
-  }
-
-  & input,
-  & textarea,
-  & select {
-    font-family: var(--fontFamilyMono);
-  }
 }

-.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;
-}
--- a/src/components/ControlPanel/ControlPane.js
+++ b/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>
--- a/src/components/EntryEditor/EntryEditor.css
+++ b/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);
 }
--- a/src/components/EntryEditor/EntryEditor.js
+++ b/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}
--- a/src/components/EntryListing/EntryListing.css
+++ b/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;
 }
--- a/src/components/EntryListing/EntryListing.js
+++ b/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>
--- a/src/components/FindBar/FindBar.css
+++ b/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;
--- a/src/components/FindBar/FindBar.js
+++ b/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}
--- a/src/components/PreviewPane/PreviewPane.css
+++ b/src/components/PreviewPane/PreviewPane.css
@ -1,4 +1,4 @@
-.frame {
+.nc-previewPane-frame {
  width: 100%;
  height: 100%;
  border: none;
--- a/src/components/PreviewPane/PreviewPane.js
+++ b/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>
--- a/src/components/UI/Sticky/Sticky.css
+++ b/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;
 }
-
--- a/src/components/UI/Sticky/Sticky.js
+++ b/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={
--- a/src/components/UI/card/Card.css
+++ b/src/components/UI/card/Card.css
@ -1,22 +1,18 @@
-@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 {
+  & > iframe,
+  & > video,
+  & > img {
    margin: -16px -24px 16px;
    width: calc(100% + 16px + 16px);
-}
+  }

-.card h1 {
+  & h1 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
@ -25,26 +21,27 @@
    padding: 0;
    border: none;
    color: var(--defaultColor);
-}
+  }

-.card p {
+  & 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) {
+  & > *:not(iframe, video, img, header, footer) {
    margin-right: 10px;
    margin-left: 10px;
-}
+  }

-.card > *:not(iframe, video, img, header, footer):first-child {
+  & > *:not(iframe, video, img, header, footer):first-child {
    margin-top: 10px;
-}
+  }

-.card > *:not(iframe, video, img, header, footer):last-child {
+  & > *:not(iframe, video, img, header, footer):last-child {
    margin-bottom: 10px;
+  }
 }
--- a/src/components/UI/card/Card.js
+++ b/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>;
 }
--- a/src/components/UI/icon/Icon.css
+++ b/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'; } /* '' */
--- a/src/components/UI/icon/Icon.js
+++ b/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 = {
--- a/src/components/UI/loader/Loader.css
+++ b/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 {
+.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;
 }
--- a/src/components/UI/loader/Loader.js
+++ b/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>;
  }
 }
--- a/src/components/UI/theme.css
+++ b/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;
--- a/src/components/UI/toast/Toast.css
+++ b/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);
 }
--- a/src/components/UI/toast/Toast.js
+++ b/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>
  );
--- a/src/components/UnpublishedListing/UnpublishedListing.css
+++ b/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;
--- a/src/components/UnpublishedListing/UnpublishedListing.js
+++ b/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>
--- a/src/components/UnpublishedListing/UnpublishedListingCardMeta.css
+++ b/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);

--- a/src/components/UnpublishedListing/UnpublishedListingCardMeta.js
+++ b/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>;

--- a/src/components/Widgets/BooleanControl.css
+++ b/src/components/Widgets/BooleanControl.css
@ -1,3 +1,3 @@
-.switch {
+.nc-booleanControl-switch {
  display: inline-block;
 }
--- a/src/components/Widgets/BooleanControl.js
+++ b/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}
      />
--- a/src/components/Widgets/FileControl.css
+++ b/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;
--- a/src/components/Widgets/FileControl.js
+++ b/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>
--- a/src/components/Widgets/ImageControl.js
+++ b/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>
--- a/src/components/Widgets/ListControl.css
+++ b/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;
--- a/src/components/Widgets/ListControl.js
+++ b/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>);
  }
--- a/src/components/Widgets/Markdown/MarkdownControl/RawEditor/index.css
+++ b/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;
--- a/src/components/Widgets/Markdown/MarkdownControl/RawEditor/index.js
+++ b/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}
--- a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/Toolbar.css
+++ b/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;
--- a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/Toolbar.js
+++ b/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>
    );
  }
--- a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarButton.css
+++ b/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);
 }
--- a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarButton.js
+++ b/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}
--- a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarComponentsMenu.css
+++ b/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;
--- a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarComponentsMenu.js
+++ b/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>
--- a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginForm.css
+++ b/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 {
+}
+
+/* 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);
-  }
 }

-.body {
+.nc-toolbarPluginForm-body {
  padding: 0 12px 16px;
 }

-.footer {
+.nc-toolbarPluginForm-footer {
  background-color: var(--backgroundColor);
  padding: 10px 20px;
  text-align: right;
--- a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginForm.js
+++ b/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>
--- a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginFormControl.css
+++ b/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";
-}
--- a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginFormControl.js
+++ b/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>
  );
--- a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/components.js
+++ b/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>;
  },
 };
--- a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.css
+++ b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.css
@ -1,90 +1,94 @@
-@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 {
+.nc-visualEditor-editor h1 {
  font-size: 32px;
  margin-top: 16px;
-  }
+}

-  & h2 {
+.nc-visualEditor-editor h2 {
  font-size: 24px;
  margin-top: 12px;
-  }
+}

-  & h3 {
+.nc-visualEditor-editor h3 {
  font-size: 20px;
  margin-top: 8px;
-  }
+}

-  & h4 {
+.nc-visualEditor-editor h4 {
  font-size: 18px;
  margin-top: 8px;
-  }
+}

-  & h5,
-  & h6 {
+.nc-visualEditor-editor h5,
+.nc-visualEditor-editor h6 {
  font-size: 16px;
  margin-top: 8px;
-  }
+}

-  & h1, & h2, & h3, & h4, & h5, & h6 {
+.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;
-  }
+}

-  & p,
-  & pre,
-  & blockquote,
-  & ul,
-  & ol {
+.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;
-  }
+}

-  & a {
+.nc-visualEditor-editor a {
  text-decoration: underline;
-  }
+}

-  & hr {
+.nc-visualEditor-editor hr {
  border: 1px solid;
  margin-bottom: 16px;
-  }
+}

-  & li > p {
+.nc-visualEditor-editor li > p {
  margin: 0;
-  }
+}

-  & ul,
-  & ol {
+.nc-visualEditor-editor ul,
+.nc-visualEditor-editor ol {
  padding-left: 30px;
-  }
+}

-  & pre {
+.nc-visualEditor-editor pre {
  white-space: pre-wrap;
-  }
+}

-  & pre > code {
+.nc-visualEditor-editor pre > code {
  display: block;
  width: 100%;
  overflow-y: auto;
@ -92,42 +96,41 @@
  color: #ccc;
  border-radius: var(--borderRadius);
  padding: 10px;
-  }
+}

-  & code {
+.nc-visualEditor-editor code {
  background-color: var(--backgroundColorShaded);
  border-radius: var(--borderRadius);
  padding: 0 2px;
  font-size: 85%;
-  }
+}

-  & blockquote {
+.nc-visualEditor-editor blockquote {
  padding-left: 16px;
  border-left: 3px solid var(--backgroundColorShaded);
  margin-left: 0;
  margin-right: 0;
-  }
+}

-  & table {
+.nc-visualEditor-editor table {
  border-collapse: collapse;
-  }
+}

-  & td,
-  & th {
+.nc-visualEditor-editor td,
+.nc-visualEditor-editor th {
  border: 2px solid black;
  padding: 8px;
  text-align: left;
-  }
 }

-.shortcode {
+.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);
 }
--- a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.js
+++ b/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}
--- a/src/components/Widgets/ObjectControl.css
+++ b/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);
--- a/src/components/Widgets/ObjectControl.js
+++ b/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) {
--- a/src/components/stories/Card.js
+++ b/src/components/stories/Card.js
@ -8,8 +8,8 @@ const styles = {
    backgroundColor: '#555',
    textAlign: 'center',
    marginTop: 5,
-    padding: 10
-  }
+    padding: 10,
+  },
 };

 storiesOf('Card', module)
--- a/src/containers/App.css
+++ b/src/containers/App.css
@ -1,4 +1,4 @@
-.entriesPanel {
+.nc-app-entriesPanel {
  padding: 0 40px;
 }

--- a/src/containers/App.js
+++ b/src/containers/App.js
@ -26,8 +26,6 @@ import CollectionPage from './CollectionPage';
 import EntryPage from './EntryPage';
 import SearchPage from './SearchPage';
 import NotFoundPage from './NotFoundPage';
-import styles from './App.css';
-import sidebarStyles from './Sidebar.css';

 TopBarProgress.config({
  barColors: {
@ -137,26 +135,26 @@ class App extends React.Component {

    const sidebarContent = (
      <div>
-        <Navigation type="vertical" className={sidebarStyles.nav}>
+        <Navigation type="vertical" className="nc-sidebar-nav">
          {
            publishMode === SIMPLE ? null :
            <section>
-              <h1 className={sidebarStyles.heading}>Publishing</h1>
-              <div className={sidebarStyles.linkWrapper}>
-                <Link to="/" className={sidebarStyles.viewEntriesLink}>Editorial Workflow</Link>
+              <h1 className="nc-sidebar-heading">Publishing</h1>
+              <div className="nc-sidebar-linkWrapper">
+                <Link to="/" className="nc-sidebar-viewEntriesLink">Editorial Workflow</Link>
              </div>
            </section>
          }
          <section>
-            <h1 className={sidebarStyles.heading}>Collections</h1>
+            <h1 className="nc-sidebar-heading">Collections</h1>
            {
              collections.valueSeq().map((collection) => {
                const collectionName = collection.get('name');
                return (
-                  <div key={collectionName} className={sidebarStyles.linkWrapper}>
+                  <div key={collectionName} className="nc-sidebar-linkWrapper">
                    <a
                      href={getCollectionUrl(collectionName, true)}
-                      className={sidebarStyles.viewEntriesLink}
+                      className="nc-sidebar-viewEntriesLink"
                      onClick={e => this.handleLinkClick(e, navigateToCollection, collectionName)}
                    >
                      {collection.get('label')}
@ -165,7 +163,7 @@ class App extends React.Component {
                      collection.get('create') ? (
                        <a
                          href={getNewEntryUrl(collectionName, true)}
-                          className={sidebarStyles.createEntryLink}
+                          className="nc-sidebar-createEntryLink"
                          onClick={e => this.handleLinkClick(e, createNewEntryInCollection, collectionName)}
                        >
                          <FontIcon value="add_circle_outline" />
@ -193,7 +191,7 @@ class App extends React.Component {
            onLogoutClick={logoutUser}
            toggleDrawer={toggleSidebar}
          />
-          <div className={styles.entriesPanel}>
+          <div className="nc-app-entriesPanel">
            { isFetching && <TopBarProgress /> }
            <div>
              <Switch>
--- a/src/containers/CollectionPage.css
+++ b/src/containers/CollectionPage.css
@ -1,4 +1,4 @@
-.noEntries {
+.nc-collectionPage-noEntries {
  position: absolute;
  top: 50%;
  left: 50%;
--- a/src/containers/CollectionPage.js
+++ b/src/containers/CollectionPage.js
@ -6,7 +6,6 @@ import { loadEntries } from '../actions/entries';
 import { selectEntries } from '../reducers';
 import { Loader } from '../components/UI';
 import EntryListing from '../components/EntryListing/EntryListing';
-import styles from "./CollectionPage.css";

 class CollectionPage extends React.Component {

@ -58,7 +57,7 @@ class CollectionPage extends React.Component {
    const fetchingEntriesContent = (<Loader active>
        {['Loading Entries', 'Caching Entries', 'This might take several minutes']}
    </Loader>);
-    const noEntriesContent = <div className={styles.noEntries}>No Entries</div>;
+    const noEntriesContent = <div className="nc-collectionPage-noEntries">No Entries</div>;
    const fallbackContent = isFetching ? fetchingEntriesContent : noEntriesContent;

    return (<div>{entries ? entriesContent : fallbackContent}</div>);
--- a/src/containers/Sidebar.css
+++ b/src/containers/Sidebar.css
@ -1,26 +1,24 @@
-@import '../components/UI/theme';
-
-.root {
+.nc-sidebar-root {
  margin-top: 54px;
 }

-.sidebar {
+.nc-sidebar-sidebar {
  padding: 0 16px;
  width: 220px;
  background-color: var(--backgroundAltColor);
  color: var(--defaultColorLight);
 }

-.heading {
+.nc-sidebar-heading {
  margin-bottom: 8px;
  color: var(--defaultColorLight);
 }

-.nav {
+.nc-sidebar-nav {
  padding: 0;
 }

-.linkWrapper {
+.nc-sidebar-linkWrapper {
  color: #fff;
  border-radius: var(--borderRadius);
  display: flex;
@ -32,7 +30,7 @@
  }
 }

-.viewEntriesLink {
+.nc-sidebar-viewEntriesLink {
  font-size: 18px;
  color: inherit;
  padding: 10px 6px;
@ -40,7 +38,7 @@
  width: 100%;
 }

-.createEntryLink {
+.nc-sidebar-createEntryLink {
  color: inherit;
  padding: 0 6px;
  display: block;
--- a/src/containers/Sidebar.js
+++ b/src/containers/Sidebar.js
@ -4,7 +4,6 @@ import { connect } from 'react-redux';
 import ReactSidebar from 'react-sidebar';
 import _ from 'lodash';
 import { openSidebar } from '../actions/globalUI';
-import styles from './Sidebar.css';

 class Sidebar extends React.Component {

@ -43,8 +42,8 @@ class Sidebar extends React.Component {
    return (
      <ReactSidebar
        sidebar={content}
-        rootClassName={styles.root}
-        sidebarClassName={styles.sidebar}
+        rootClassName="nc-sidebar-root"
+        sidebarClassName="nc-sidebar-sidebar"
        docked={sidebarIsOpen && this.state.sidebarDocked} // ALWAYS can hide sidebar
        open={sidebarIsOpen}
        onSetOpen={openSidebar}
--- a/src/index.css
+++ b/src/index.css
@ -1,6 +1,37 @@
@import "react-toolbox-global.css";
-@import "material-icons.css";
-@import "components/UI/theme.css";
+@import "./material-icons.css";
+@import "./components/UI/theme.css";
+
+@import "./backends/git-gateway/AuthenticationPage.css";
+@import "./backends/github/AuthenticationPage.css";
+
+@import "./components/AppHeader/AppHeader.css";
+@import "./components/ControlPanel/ControlPane.css";
+@import "./components/EntryEditor/EntryEditor.css";
+@import "./components/EntryListing/EntryListing.css";
+@import "./components/FindBar/FindBar.css";
+@import "./components/PreviewPane/PreviewPane.css";
+@import "./components/UI/Sticky/Sticky.css";
+@import "./components/UI/card/Card.css";
+@import "./components/UI/icon/Icon.css";
+@import "./components/UI/loader/Loader.css";
+@import "./components/UI/toast/Toast.css";
+@import "./components/UnpublishedListing/UnpublishedListing.css";
+@import "./components/UnpublishedListing/UnpublishedListingCardMeta.css";
+@import "./components/Widgets/BooleanControl.css";
+@import "./components/Widgets/FileControl.css";
+@import "./components/Widgets/ListControl.css";
+@import "./components/Widgets/Markdown/MarkdownControl/RawEditor/index.css";
+@import "./components/Widgets/Markdown/MarkdownControl/Toolbar/Toolbar.css";
+@import "./components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarButton.css";
+@import "./components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarComponentsMenu.css";
+@import "./components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginForm.css";
+@import "./components/Widgets/Markdown/MarkdownControl/VisualEditor/index.css";
+@import "./components/Widgets/ObjectControl.css";
+
+@import "./containers/App.css";
+@import "./containers/CollectionPage.css";
+@import "./containers/Sidebar.css";

 html {
  box-sizing: border-box;
@ -40,13 +71,11 @@ img {
  max-width: 100%;
 }

-:global {
-
-  & .react-autosuggest__container {
+.react-autosuggest__container {
  position: relative;
-  }
+}

-  & .react-autosuggest__input {
+.react-autosuggest__input {
  width: 240px;
  height: 30px;
  padding: 10px 20px;
@ -55,22 +84,22 @@ img {
  font-size: 16px;
  border: 1px solid #aaa;
  border-radius: 4px;
-  }
+}

-  & .react-autosuggest__input:focus {
+.react-autosuggest__input:focus {
  outline: none;
-  }
+}

-  & .react-autosuggest__container--open .react-autosuggest__input {
+.react-autosuggest__container--open .react-autosuggest__input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
-  }
+}

-  & .react-autosuggest__suggestions-container {
+.react-autosuggest__suggestions-container {
  display: none;
-  }
+}

-  & .react-autosuggest__container--open .react-autosuggest__suggestions-container {
+.react-autosuggest__container--open .react-autosuggest__suggestions-container {
  display: block;
  position: absolute;
  top: 51px;
@ -83,60 +112,60 @@ img {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  z-index: 2;
-  }
+}

-  & .react-autosuggest__suggestions-list {
+.react-autosuggest__suggestions-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
-  }
+}

-  & .react-autosuggest__suggestion {
+.react-autosuggest__suggestion {
  cursor: pointer;
  padding: 10px 20px;
-  }
+}

-  & .react-autosuggest__suggestion--focused {
+.react-autosuggest__suggestion--focused {
  background-color: #ddd;
-  }
+}

-  & .Resizer {
+.Resizer {
  background: #000;
  opacity: .2;
  z-index: 1;
  box-sizing: border-box;
  background-clip: padding-box;
-  }
+}

-  & .Resizer:hover {
+.Resizer:hover {
  -webkit-transition: all 2s ease;
  transition: all 2s ease;
-  }
+}

-  & .Resizer.vertical {
+.Resizer.vertical {
  width: 11px;
  margin: 0 -5px;
  border-left: 5px solid rgba(255, 255, 255, 0);
  border-right: 5px solid rgba(255, 255, 255, 0);
  cursor: col-resize;
-  }
+}

-  & .Resizer.vertical:hover {
+.Resizer.vertical:hover {
  border-left: 5px solid rgba(0, 0, 0, 0.5);
  border-right: 5px solid rgba(0, 0, 0, 0.5);
-  }
-  & .Resizer.disabled {
+}
+.Resizer.disabled {
  cursor: not-allowed;
-  }
-  & .Resizer.disabled:hover {
+}
+.Resizer.disabled:hover {
  border-color: transparent;
-  }
+}


-  & .rdt {
+.rdt {
  position: relative;
-  }
-  & .rdtPicker {
+}
+.rdtPicker {
  display: none;
  position: absolute;
  width: 250px;
@ -147,47 +176,47 @@ img {
  border: 2px solid var(--secondaryColor);
  border-radius: 2px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .16);
-  }
-  & .rdtOpen .rdtPicker {
+}
+.rdtOpen .rdtPicker {
  display: block;
-  }
-  & .rdtStatic .rdtPicker {
+}
+.rdtStatic .rdtPicker {
  box-shadow: none;
  position: static;
-  }
+}

-  & .rdtPicker .rdtTimeToggle {
+.rdtPicker .rdtTimeToggle {
  text-align: center;
-  }
+}

-  & .rdtPicker table {
+.rdtPicker table {
  width: 100%;
  margin: 0;
-  }
-  & .rdtPicker td,
-  & .rdtPicker th {
+}
+.rdtPicker td,
+.rdtPicker th {
  text-align: center;
  height: 28px;
-  }
-  & .rdtPicker td {
+}
+.rdtPicker td {
  cursor: pointer;
-  }
-  & .rdtPicker td.rdtDay:hover,
-  & .rdtPicker td.rdtHour:hover,
-  & .rdtPicker td.rdtMinute:hover,
-  & .rdtPicker td.rdtSecond:hover,
-  & .rdtPicker .rdtTimeToggle:hover {
+}
+.rdtPicker td.rdtDay:hover,
+.rdtPicker td.rdtHour:hover,
+.rdtPicker td.rdtMinute:hover,
+.rdtPicker td.rdtSecond:hover,
+.rdtPicker .rdtTimeToggle:hover {
  background: #eeeeee;
  cursor: pointer;
-  }
-  & .rdtPicker td.rdtOld,
-  & .rdtPicker td.rdtNew {
+}
+.rdtPicker td.rdtOld,
+.rdtPicker td.rdtNew {
  color: #999999;
-  }
-  & .rdtPicker td.rdtToday {
+}
+.rdtPicker td.rdtToday {
  position: relative;
-  }
-  & .rdtPicker td.rdtToday:before {
+}
+.rdtPicker td.rdtToday:before {
  content: '';
  display: inline-block;
  border-left: 7px solid transparent;
@ -196,50 +225,50 @@ img {
  position: absolute;
  bottom: 4px;
  right: 4px;
-  }
-  & .rdtPicker td.rdtActive,
-  & .rdtPicker td.rdtActive:hover {
+}
+.rdtPicker td.rdtActive,
+.rdtPicker td.rdtActive:hover {
  background-color: #428bca;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  }
-  & .rdtPicker td.rdtActive.rdtToday:before {
+}
+.rdtPicker td.rdtActive.rdtToday:before {
  border-bottom-color: #fff;
-  }
-  & .rdtPicker td.rdtDisabled,
-  & .rdtPicker td.rdtDisabled:hover {
+}
+.rdtPicker td.rdtDisabled,
+.rdtPicker td.rdtDisabled:hover {
  background: none;
  color: #999999;
  cursor: not-allowed;
-  }
+}

-  & .rdtPicker td span.rdtOld {
+.rdtPicker td span.rdtOld {
  color: #999999;
-  }
-  & .rdtPicker td span.rdtDisabled,
-  & .rdtPicker td span.rdtDisabled:hover {
+}
+.rdtPicker td span.rdtDisabled,
+.rdtPicker td span.rdtDisabled:hover {
  background: none;
  color: #999999;
  cursor: not-allowed;
-  }
-  & .rdtPicker th {
+}
+.rdtPicker th {
  border-bottom: 1px solid #f9f9f9;
-  }
-  & .rdtPicker .dow {
+}
+.rdtPicker .dow {
  width: 14.2857%;
  border-bottom: none;
-  }
-  & .rdtPicker th.rdtSwitch {
+}
+.rdtPicker th.rdtSwitch {
  width: 100px;
-  }
-  & .rdtPicker th.rdtNext,
-  & .rdtPicker th.rdtPrev {
+}
+.rdtPicker th.rdtNext,
+.rdtPicker th.rdtPrev {
  font-size: 21px;
  vertical-align: top;
-  }
+}

-  & .rdtPrev span,
-  & .rdtNext span {
+.rdtPrev span,
+.rdtNext span {
  display: block;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
@ -247,71 +276,71 @@ img {
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
-  }
+}

-  & .rdtPicker th.rdtDisabled,
-  & .rdtPicker th.rdtDisabled:hover {
+.rdtPicker th.rdtDisabled,
+.rdtPicker th.rdtDisabled:hover {
  background: none;
  color: #999999;
  cursor: not-allowed;
-  }
-  & .rdtPicker thead tr:first-child th {
+}
+.rdtPicker thead tr:first-child th {
  cursor: pointer;
-  }
-  & .rdtPicker thead tr:first-child th:hover {
+}
+.rdtPicker thead tr:first-child th:hover {
  background: #eeeeee;
-  }
+}

-  & .rdtPicker tfoot {
+.rdtPicker tfoot {
  border-top: 1px solid #f9f9f9;
-  }
+}

-  & .rdtPicker button {
+.rdtPicker button {
  border: none;
  background: none;
  cursor: pointer;
-  }
-  & .rdtPicker button:hover {
+}
+.rdtPicker button:hover {
  background-color: #eee;
-  }
+}

-  & .rdtPicker thead button {
+.rdtPicker thead button {
  width: 100%;
  height: 100%;
-  }
+}

-  & td.rdtMonth,
-  & td.rdtYear {
+td.rdtMonth,
+td.rdtYear {
  height: 50px;
  width: 25%;
  cursor: pointer;
-  }
-  & td.rdtMonth:hover,
-  & td.rdtYear:hover {
+}
+td.rdtMonth:hover,
+td.rdtYear:hover {
  background: #eee;
-  }
+}

-  & .rdtCounters {
+.rdtCounters {
  display: inline-block;
-  }
+}

-  & .rdtCounters > div {
+.rdtCounters > div {
  float: left;
-  }
+}

-  & .rdtCounter {
+.rdtCounter {
  height: 100px;
-  }
+}

-  & .rdtCounter {
+.rdtCounter {
  width: 40px;
-  }
+}

-  & .rdtCounterSeparator {
+.rdtCounterSeparator {
  line-height: 100px;
-  }
+}

-  & .rdtCounter .rdtBtn {
+.rdtCounter .rdtBtn {
  height: 40%;
  line-height: 40px;
  cursor: pointer;
@ -323,24 +352,23 @@ img {
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
-  }
-  & .rdtCounter .rdtBtn:hover {
+}
+.rdtCounter .rdtBtn:hover {
  background: #eee;
-  }
-  & .rdtCounter .rdtCount {
+}
+.rdtCounter .rdtCount {
  height: 20%;
  font-size: 1.2em;
-  }
+}

-  & .rdtMilli {
+.rdtMilli {
  vertical-align: middle;
  padding-left: 8px;
  width: 48px;
-  }
+}

-  & .rdtMilli input {
+.rdtMilli input {
  width: 100%;
  font-size: 1.2em;
  margin-top: 37px;
-  }
 }
--- a/src/material-icons.css
+++ b/src/material-icons.css
@ -4,12 +4,13 @@
  font-weight: 400;
  src: local('Material Icons'),
  local('MaterialIcons-Regular'),
-  url('material-design-icons/iconfont/MaterialIcons-Regular.woff2') format('woff2'),
-  url('material-design-icons/iconfont/MaterialIcons-Regular.woff') format('woff'),
-  url('material-design-icons/iconfont/MaterialIcons-Regular.ttf') format('truetype');
+
+  url('~material-design-icons/iconfont/MaterialIcons-Regular.woff2') format('woff2'),
+  url('~material-design-icons/iconfont/MaterialIcons-Regular.woff') format('woff'),
+  url('~material-design-icons/iconfont/MaterialIcons-Regular.ttf') format('truetype');
 }

-:global .material-icons {
+.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
--- a/src/utils.css
+++ b/src/utils.css
@ -1,7 +1,6 @@
 /* stylelint-disable */
 /* This is an utility file that should not be included in production build */
-:global {
-  & .undefined {
+.undefined {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
@ -14,12 +13,11 @@
  color: white !important;
  font-weight: bold !important;
  font-size: 30px !important;
-  }
+}

-  & .undefined::after {
+.undefined::after {
  display: block !important;
  padding: 15px 30px !important;
  content: 'ERROR! You are missing a class definition in your css module! Inspect me to find out where.' !important;
-  }
 }
 /* stylelint-enable */
--- a/webpack.base.js
+++ b/webpack.base.js
@ -43,7 +43,7 @@ module.exports = {
        }),
      },
      {
-        /* We use CSS-modules and PostCSS for CMS styles */
+        /* We use PostCSS for CMS styles */
        test: /\.css$/,
        exclude: [/node_modules/],
        use: ExtractTextPlugin.extract({
@ -52,9 +52,7 @@ module.exports = {
            {
              loader: 'css-loader',
              options: {
-                modules: true,
                importLoaders: 1,
-                localIdentName: "cms__[name]__[local]"
              },
            },
            { loader: 'postcss-loader' },
--- a/yarn.lock
+++ b/yarn.lock
@ -170,7 +170,7 @@ all-contributors-cli@^4.4.0:
    request "^2.72.0"
    yargs "^4.7.0"

-alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
+alphanum-sort@^1.0.0, alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"

@ -242,6 +242,10 @@ are-we-there-yet@~1.1.2:
    delegates "^1.0.0"
    readable-stream "^2.0.6"

+argh@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/argh/-/argh-0.1.4.tgz#3eb4d612973fc6b6dc6ef338f56f759f2ac5c3a6"
+
 argparse@^1.0.7:
  version "1.0.9"
  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86"
@ -1740,7 +1744,7 @@ color@^0.11.0:
    color-convert "^1.3.0"
    color-string "^0.3.0"

-color@^1.0.3:
+color@^1.0.0, color@^1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/color/-/color-1.0.3.tgz#e48e832d85f14ef694fb468811c2d5cfe729b55d"
  dependencies:
@ -1914,7 +1918,7 @@ cosmiconfig@^1.1.0:
    pinkie-promise "^2.0.0"
    require-from-string "^1.1.0"

-cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
+cosmiconfig@^2.0.0, cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
  version "2.2.2"
  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.2.2.tgz#6173cebd56fac042c1f4390edf7af6c07c7cb892"
  dependencies:
@ -2052,10 +2056,20 @@ css-color-names@0.0.3:
  version "0.0.3"
  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.3.tgz#de0cef16f4d8aa8222a320d5b6d7e9bbada7b9f6"

-css-color-names@0.0.4:
+css-color-names@0.0.4, css-color-names@^0.0.4:
  version "0.0.4"
  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"

+css-declaration-sorter@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-2.1.0.tgz#ac342d22883467cab81271d8427ae2699688855d"
+  dependencies:
+    argh "^0.1.4"
+    postcss "^6.0.0"
+    read-file-stdin "^0.2.0"
+    timsort "^0.3.0"
+    write-file-stdout "0.0.2"
+
 css-in-js-utils@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.0.tgz#5af1dd70f4b06b331f48d22a3d86e0786c0b9435"
@ -2126,6 +2140,59 @@ cssesc@^0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"

+cssnano-preset-default@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.0-rc.2.tgz#c5f38cdf858fa6e00e52186f77a96c6be48bbced"
+  dependencies:
+    css-declaration-sorter "^2.0.1"
+    cssnano-util-raw-cache "^4.0.0-rc.2"
+    postcss "^6.0.0"
+    postcss-calc "^6.0.0"
+    postcss-colormin "^4.0.0-rc.2"
+    postcss-convert-values "^4.0.0-rc.2"
+    postcss-discard-comments "^4.0.0-rc.2"
+    postcss-discard-duplicates "^4.0.0-rc.2"
+    postcss-discard-empty "^4.0.0-rc.2"
+    postcss-discard-overridden "^4.0.0-rc.2"
+    postcss-merge-longhand "^4.0.0-rc.2"
+    postcss-merge-rules "^4.0.0-rc.2"
+    postcss-minify-font-values "^4.0.0-rc.2"
+    postcss-minify-gradients "^4.0.0-rc.2"
+    postcss-minify-params "^4.0.0-rc.2"
+    postcss-minify-selectors "^4.0.0-rc.2"
+    postcss-normalize-charset "^4.0.0-rc.2"
+    postcss-normalize-display-values "^4.0.0-rc.2"
+    postcss-normalize-positions "^4.0.0-rc.2"
+    postcss-normalize-repeat-style "^4.0.0-rc.2"
+    postcss-normalize-string "^4.0.0-rc.2"
+    postcss-normalize-timing-functions "^4.0.0-rc.2"
+    postcss-normalize-unicode "^4.0.0-rc.2"
+    postcss-normalize-url "^4.0.0-rc.2"
+    postcss-normalize-whitespace "^4.0.0-rc.2"
+    postcss-ordered-values "^4.0.0-rc.2"
+    postcss-reduce-initial "^4.0.0-rc.2"
+    postcss-reduce-transforms "^4.0.0-rc.2"
+    postcss-svgo "^4.0.0-rc.2"
+    postcss-unique-selectors "^4.0.0-rc.2"
+
+cssnano-util-get-arguments@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0-rc.2.tgz#39d5cf9caee9e9027066c37954655c14419c06d4"
+
+cssnano-util-get-match@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/cssnano-util-get-match/-/cssnano-util-get-match-4.0.0-rc.2.tgz#e48fad41c5d14875f7401fa7c87c5f0ae6d6ff9b"
+
+cssnano-util-raw-cache@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/cssnano-util-raw-cache/-/cssnano-util-raw-cache-4.0.0-rc.2.tgz#8b33cec7ba839bfc6a59a2c90fbd80dd404bef75"
+  dependencies:
+    postcss "^6.0.0"
+
+cssnano-util-same-parent@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.0-rc.2.tgz#b036b89f0d7c7516aafd1dc9e70f0ed05768834a"
+
 "cssnano@>=2.6.1 <4":
  version "3.10.0"
  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38"
@ -2163,6 +2230,15 @@ cssesc@^0.1.0:
    postcss-value-parser "^3.2.3"
    postcss-zindex "^2.0.1"

+cssnano@^v4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.0.0-rc.2.tgz#bcc06fe303d4f0f14070e59c121667c1727e2feb"
+  dependencies:
+    cosmiconfig "^2.0.0"
+    cssnano-preset-default "^4.0.0-rc.2"
+    is-resolvable "^1.0.0"
+    postcss "^6.0.0"
+
 csso@~2.3.1:
  version "2.3.2"
  resolved "https://registry.yarnpkg.com/csso/-/csso-2.3.2.tgz#ddd52c587033f49e94b71fc55569f252e8ff5f85"
@ -2391,20 +2467,13 @@ dns-txt@^2.0.2:
  dependencies:
    buffer-indexof "^1.0.0"

-doctrine@1.3.x:
+doctrine@1.3.x, doctrine@^1.2.2:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.3.0.tgz#13e75682b55518424276f7c173783456ef913d26"
  dependencies:
    esutils "^2.0.2"
    isarray "^1.0.0"

-doctrine@^1.2.2:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
-  dependencies:
-    esutils "^2.0.2"
-    isarray "^1.0.0"
-
 doctrine@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.0.tgz#c73d8d2909d22291e1a007a395804da8b665fe63"
@ -2462,21 +2531,14 @@ domhandler@^2.3.0:
  dependencies:
    domelementtype "1"

-domutils@1.5.1:
+domutils@1.5.1, domutils@^1.5.1:
  version "1.5.1"
  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
  dependencies:
    dom-serializer "0"
    domelementtype "1"

-domutils@^1.5.1:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.6.2.tgz#1958cc0b4c9426e9ed367fb1c8e854891b0fa3ff"
-  dependencies:
-    dom-serializer "0"
-    domelementtype "1"
-
-dot-prop@^4.1.0:
+dot-prop@^4.1.0, dot-prop@^4.1.1:
  version "4.2.0"
  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
  dependencies:
@ -3642,7 +3704,7 @@ has-unicode@^2.0.0:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"

-has@^1.0.1, has@~1.0.1:
+has@^1.0.0, has@^1.0.1, has@~1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
  dependencies:
@ -3767,6 +3829,10 @@ hawk@~6.0.2:
    hoek "4.x.x"
    sntp "2.x.x"

+hex-color-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
+
 highlight-es@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/highlight-es/-/highlight-es-1.0.1.tgz#3bb01eb1f2062ddaab72f8b23766a3bf8c1a771f"
@ -3835,6 +3901,14 @@ hpack.js@^2.1.6:
    readable-stream "^2.0.1"
    wbuf "^1.1.0"

+hsl-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
+
+hsla-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
+
 html-comment-regex@^1.1.0:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
@ -4172,6 +4246,17 @@ is-ci@^1.0.10, is-ci@^1.0.8:
  dependencies:
    ci-info "^1.0.0"

+is-color-stop@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
+  dependencies:
+    css-color-names "^0.0.4"
+    hex-color-regex "^1.1.0"
+    hsl-regex "^1.0.0"
+    hsla-regex "^1.0.0"
+    rgb-regex "^1.0.1"
+    rgba-regex "^1.0.0"
+
 is-date-object@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
@ -5438,11 +5523,11 @@ mime-types@^2.1.12, mime-types@~2.1.15, mime-types@~2.1.16, mime-types@~2.1.17,
  dependencies:
    mime-db "~1.30.0"

-mime@1.3.x:
+mime@1.3.x, mime@^1.3.4:
  version "1.3.6"
  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.6.tgz#591d84d3653a6b0b4a3b9df8de5aa8108e72e5e0"

-mime@1.4.1, mime@^1.3.4:
+mime@1.4.1:
  version "1.4.1"
  resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"

@ -5476,7 +5561,7 @@ minimatch@3.0.3:
  dependencies:
    brace-expansion "^1.0.0"

-minimist@0.0.8:
+minimist@0.0.8, minimist@~0.0.1:
  version "0.0.8"
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"

@ -5484,10 +5569,6 @@ minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0, minimist@~1.
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"

-minimist@~0.0.1:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
-
 mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
  version "0.5.1"
  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
@ -5720,7 +5801,7 @@ normalize-selector@^0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/normalize-selector/-/normalize-selector-0.2.0.tgz#d0b145eb691189c63a78d201dc4fdb1293ef0c03"

-normalize-url@^1.4.0:
+normalize-url@^1.0.0, normalize-url@^1.4.0:
  version "1.9.1"
  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
  dependencies:
@ -6354,6 +6435,16 @@ postcss-colormin@^2.1.8:
    postcss "^5.0.13"
    postcss-value-parser "^3.2.3"

+postcss-colormin@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.0-rc.2.tgz#978e17b77552cdde52e5e15503062b5cb7579272"
+  dependencies:
+    browserslist "^2.0.0"
+    color "^1.0.0"
+    has "^1.0.0"
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
 postcss-convert-values@^2.3.4:
  version "2.6.1"
  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-2.6.1.tgz#bbd8593c5c1fd2e3d1c322bb925dcae8dae4d62d"
@ -6361,6 +6452,13 @@ postcss-convert-values@^2.3.4:
    postcss "^5.0.11"
    postcss-value-parser "^3.1.2"

+postcss-convert-values@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-4.0.0-rc.2.tgz#6255e099cfc064212ace00fa68bca74ecf6b4b7d"
+  dependencies:
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
 postcss-cssnext@^3.0.2:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/postcss-cssnext/-/postcss-cssnext-3.0.2.tgz#63b77adb0b8a4c1d5ec32cd345539535a3417d48"
@ -6423,24 +6521,48 @@ postcss-discard-comments@^2.0.4:
  dependencies:
    postcss "^5.0.14"

+postcss-discard-comments@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.0-rc.2.tgz#9874d406414f554d017e1a1c8938d9b1ff0f2aa9"
+  dependencies:
+    postcss "^6.0.0"
+
 postcss-discard-duplicates@^2.0.1:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-2.1.0.tgz#b9abf27b88ac188158a5eb12abcae20263b91932"
  dependencies:
    postcss "^5.0.4"

+postcss-discard-duplicates@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-4.0.0-rc.2.tgz#6218b98f65862dfc1dd35525ab954fc4bb78188d"
+  dependencies:
+    postcss "^6.0.0"
+
 postcss-discard-empty@^2.0.1:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz#d2b4bd9d5ced5ebd8dcade7640c7d7cd7f4f92b5"
  dependencies:
    postcss "^5.0.14"

+postcss-discard-empty@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-4.0.0-rc.2.tgz#3791106c7711d4468fe08bf0bf644a477788c880"
+  dependencies:
+    postcss "^6.0.0"
+
 postcss-discard-overridden@^0.1.1:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz#8b1eaf554f686fb288cd874c55667b0aa3668d58"
  dependencies:
    postcss "^5.0.16"

+postcss-discard-overridden@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-4.0.0-rc.2.tgz#88507319a505afaa58acb93d3ef760270053388b"
+  dependencies:
+    postcss "^6.0.0"
+
 postcss-discard-unused@^2.2.1:
  version "2.2.3"
  resolved "https://registry.yarnpkg.com/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz#bce30b2cc591ffc634322b5fb3464b6d934f4433"
@ -6554,6 +6676,14 @@ postcss-merge-longhand@^2.0.1:
  dependencies:
    postcss "^5.0.4"

+postcss-merge-longhand@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-4.0.0-rc.2.tgz#5aae5b86750d9a16e7bef6482dab65a9d4b3c03a"
+  dependencies:
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+    stylehacks "^4.0.0-rc.2"
+
 postcss-merge-rules@^2.0.3:
  version "2.1.2"
  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz#d1df5dfaa7b1acc3be553f0e9e10e87c61b5f721"
@ -6564,6 +6694,17 @@ postcss-merge-rules@^2.0.3:
    postcss-selector-parser "^2.2.2"
    vendors "^1.0.0"

+postcss-merge-rules@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-4.0.0-rc.2.tgz#18d89d1a6ddcf91c7288775bfbefb881367ab944"
+  dependencies:
+    browserslist "^2.0.0"
+    caniuse-api "^2.0.0"
+    cssnano-util-same-parent "^4.0.0-rc.2"
+    postcss "^6.0.0"
+    postcss-selector-parser "^3.0.0-rc.0"
+    vendors "^1.0.0"
+
 postcss-message-helpers@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz#a4f2f4fab6e4fe002f0aed000478cdf52f9ba60e"
@ -6576,6 +6717,13 @@ postcss-minify-font-values@^1.0.2:
    postcss "^5.0.4"
    postcss-value-parser "^3.0.2"

+postcss-minify-font-values@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-4.0.0-rc.2.tgz#e5fd79c97525e79421ea736d857baedce65a5ea9"
+  dependencies:
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
 postcss-minify-gradients@^1.0.1:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz#5dbda11373703f83cfb4a3ea3881d8d75ff5e6e1"
@ -6583,6 +6731,15 @@ postcss-minify-gradients@^1.0.1:
    postcss "^5.0.12"
    postcss-value-parser "^3.3.0"

+postcss-minify-gradients@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-4.0.0-rc.2.tgz#c07e95a4f4f9f8a056e59ac0817e72e891bc62dc"
+  dependencies:
+    cssnano-util-get-arguments "^4.0.0-rc.2"
+    is-color-stop "^1.1.0"
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
 postcss-minify-params@^1.0.4:
  version "1.2.2"
  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz#ad2ce071373b943b3d930a3fa59a358c28d6f1f3"
@ -6592,6 +6749,16 @@ postcss-minify-params@^1.0.4:
    postcss-value-parser "^3.0.2"
    uniqs "^2.0.0"

+postcss-minify-params@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-4.0.0-rc.2.tgz#4bd747f4ba7fd5b1f31ecc8823aa9a589e7f8980"
+  dependencies:
+    alphanum-sort "^1.0.0"
+    cssnano-util-get-arguments "^4.0.0-rc.2"
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+    uniqs "^2.0.0"
+
 postcss-minify-selectors@^2.0.4:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz#b2c6a98c0072cf91b932d1a496508114311735bf"
@ -6601,6 +6768,15 @@ postcss-minify-selectors@^2.0.4:
    postcss "^5.0.14"
    postcss-selector-parser "^2.0.0"

+postcss-minify-selectors@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-4.0.0-rc.2.tgz#86089c9d8a6a9166815f19bfa2d01b7da5d173f6"
+  dependencies:
+    alphanum-sort "^1.0.0"
+    has "^1.0.0"
+    postcss "^6.0.0"
+    postcss-selector-parser "^3.0.0-rc.0"
+
 postcss-modules-extract-imports@^1.0.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.0.tgz#66140ecece38ef06bf0d3e355d69bf59d141ea85"
@ -6640,6 +6816,61 @@ postcss-normalize-charset@^1.1.0:
  dependencies:
    postcss "^5.0.5"

+postcss-normalize-charset@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-4.0.0-rc.2.tgz#898b67c77bea2ff7c318cf56b427bce10bc35db6"
+  dependencies:
+    postcss "^6.0.0"
+
+postcss-normalize-display-values@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.0-rc.2.tgz#d802d77dc7fba66f72a201e94804029b24acd271"
+  dependencies:
+    cssnano-util-get-match "^4.0.0-rc.2"
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-positions@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-4.0.0-rc.2.tgz#f12cb691438e8cb91abe914052ac2381e563da32"
+  dependencies:
+    cssnano-util-get-arguments "^4.0.0-rc.2"
+    has "^1.0.0"
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-repeat-style@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.0-rc.2.tgz#c949358201116a20d01975c6e471611a5ddc9083"
+  dependencies:
+    cssnano-util-get-arguments "^4.0.0-rc.2"
+    cssnano-util-get-match "^4.0.0-rc.2"
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-string@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-4.0.0-rc.2.tgz#924f2a98bf9b44d40591434acf8f31b71a977606"
+  dependencies:
+    has "^1.0.0"
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-timing-functions@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.0-rc.2.tgz#a03474b4ddc4a1278ec276557105cf552fa501f0"
+  dependencies:
+    cssnano-util-get-match "^4.0.0-rc.2"
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-unicode@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-unicode/-/postcss-normalize-unicode-4.0.0-rc.2.tgz#953650b1449ec23da462fa45570435c43bed9dd6"
+  dependencies:
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
 postcss-normalize-url@^3.0.7:
  version "3.0.8"
  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-3.0.8.tgz#108f74b3f2fcdaf891a2ffa3ea4592279fc78222"
@ -6649,6 +6880,22 @@ postcss-normalize-url@^3.0.7:
    postcss "^5.0.14"
    postcss-value-parser "^3.2.3"

+postcss-normalize-url@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-4.0.0-rc.2.tgz#3ccad023b8e30ff434546a6e4b7baab1fa112c42"
+  dependencies:
+    is-absolute-url "^2.0.0"
+    normalize-url "^1.0.0"
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-whitespace@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.0-rc.2.tgz#d8df79a51bab0003d009226be0cb1af87f308f43"
+  dependencies:
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
 postcss-ordered-values@^2.1.0:
  version "2.2.3"
  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-2.2.3.tgz#eec6c2a67b6c412a8db2042e77fe8da43f95c11d"
@ -6656,6 +6903,14 @@ postcss-ordered-values@^2.1.0:
    postcss "^5.0.4"
    postcss-value-parser "^3.0.1"

+postcss-ordered-values@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-4.0.0-rc.2.tgz#7894a80b65be50c9361128087b48ea6e7a1db8bf"
+  dependencies:
+    cssnano-util-get-arguments "^4.0.0-rc.2"
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
 postcss-pseudo-class-any-link@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-4.0.0.tgz#9152a0613d3450720513e8892854bae42d0ee68e"
@ -6682,6 +6937,15 @@ postcss-reduce-initial@^1.0.0:
  dependencies:
    postcss "^5.0.4"

+postcss-reduce-initial@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-4.0.0-rc.2.tgz#ab2e1cca7903745a77b99630445c939152e0cd62"
+  dependencies:
+    browserslist "^2.0.0"
+    caniuse-api "^2.0.0"
+    has "^1.0.0"
+    postcss "^6.0.0"
+
 postcss-reduce-transforms@^1.0.3:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz#ff76f4d8212437b31c298a42d2e1444025771ae1"
@ -6690,6 +6954,15 @@ postcss-reduce-transforms@^1.0.3:
    postcss "^5.0.8"
    postcss-value-parser "^3.0.1"

+postcss-reduce-transforms@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.0-rc.2.tgz#1c92610e9c595edd367a0988d64f59c371fe66d1"
+  dependencies:
+    cssnano-util-get-match "^4.0.0-rc.2"
+    has "^1.0.0"
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
 postcss-replace-overflow-wrap@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-2.0.0.tgz#794db6faa54f8db100854392a93af45768b4e25b"
@ -6752,6 +7025,14 @@ postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.1.1, postcss-selector
    indexes-of "^1.0.1"
    uniq "^1.0.1"

+postcss-selector-parser@^3.0.0-rc.0:
+  version "3.0.0-rc.0"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.0.0-rc.0.tgz#dfb74f1cf3bc043d5692e37203170ac2da40a150"
+  dependencies:
+    dot-prop "^4.1.1"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
 postcss-sorting@^1.7.0:
  version "1.7.0"
  resolved "https://registry.yarnpkg.com/postcss-sorting/-/postcss-sorting-1.7.0.tgz#69b92db051ed4181c5b8c585ee8b8c5f40915a82"
@ -6768,6 +7049,15 @@ postcss-svgo@^2.1.1:
    postcss-value-parser "^3.2.3"
    svgo "^0.7.0"

+postcss-svgo@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.0-rc.2.tgz#c9a650e895bf6fcf517612d26331190ad696f30f"
+  dependencies:
+    is-svg "^2.0.0"
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+    svgo "^0.7.0"
+
 postcss-unique-selectors@^2.0.2:
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz#981d57d29ddcb33e7b1dfe1fd43b8649f933ca1d"
@ -6776,7 +7066,15 @@ postcss-unique-selectors@^2.0.2:
    postcss "^5.0.4"
    uniqs "^2.0.0"

-postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0:
+postcss-unique-selectors@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-4.0.0-rc.2.tgz#bb7773d522748bd87595248739ee045bed6f280b"
+  dependencies:
+    alphanum-sort "^1.0.0"
+    postcss "^6.0.0"
+    uniqs "^2.0.0"
+
+postcss-value-parser@^3.0.0, postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0:
  version "3.3.0"
  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"

@ -7302,7 +7600,7 @@ read-cache@^1.0.0:
  dependencies:
    pify "^2.3.0"

-read-file-stdin@^0.2.1:
+read-file-stdin@^0.2.0, read-file-stdin@^0.2.1:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/read-file-stdin/-/read-file-stdin-0.2.1.tgz#25eccff3a153b6809afacb23ee15387db9e0ee61"
  dependencies:
@ -7771,10 +8069,18 @@ rgb-hex@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/rgb-hex/-/rgb-hex-2.1.0.tgz#c773c5fe2268a25578d92539a82a7a5ce53beda6"

+rgb-regex@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
+
 rgb@~0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/rgb/-/rgb-0.1.0.tgz#be27b291e8feffeac1bd99729721bfa40fc037b5"

+rgba-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
+
 right-align@^0.1.1:
  version "0.1.3"
  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
@ -8472,6 +8778,14 @@ stylehacks@^2.3.0, stylehacks@^2.3.2:
    text-table "^0.2.0"
    write-file-stdout "0.0.2"

+stylehacks@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.0-rc.2.tgz#6626611341fd09fcdf0d87042306483f22949a2f"
+  dependencies:
+    browserslist "^2.0.0"
+    postcss "^6.0.0"
+    postcss-selector-parser "^3.0.0-rc.0"
+
 stylelint-config-css-modules@^0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/stylelint-config-css-modules/-/stylelint-config-css-modules-0.1.0.tgz#6fc47c31836caad878e8daabde2b675899c2f4b6"
@ -8771,6 +9085,10 @@ timers-browserify@^2.0.2:
  dependencies:
    setimmediate "^1.0.4"

+timsort@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
+
 tmp@0.0.30:
  version "0.0.30"
  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.30.tgz#72419d4a8be7d6ce75148fd8b324e593a711c2ed"