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

* Migrate to plain CSS (remove CSS modules)

Change `prefixer` to a function instead of a proxy

* Switch prefix to `nc`

* Replace prefixer with literal class names

* Remove prefixer

* Fix migration errors

* fix compose migrations

* Remove unnecessary theme imports

* Remove old CSS import

* fix sticky toolbar positioning

* update to cssnano v4 so preset is used

* fix css pseudo selectors

* update lockfile

src/components/UI/Sticky/Sticky.css

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

src/components/UI/Sticky/Sticky.js

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

src/components/UI/card/Card.css

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

src/components/UI/card/Card.js

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

src/components/UI/icon/Icon.css

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

src/components/UI/icon/Icon.js

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

src/components/UI/loader/Loader.css

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

src/components/UI/loader/Loader.js

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

src/components/UI/theme.css

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

src/components/UI/toast/Toast.css

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

src/components/UI/toast/Toast.js

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