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
This commit is contained in:
Benaiah Mischenko
2017-10-18 09:29:38 -07:00
committed by Shawn Erquhart
parent 8a819be61e
commit 7dd8ca13c4
70 changed files with 1521 additions and 1251 deletions

View File

@ -90,6 +90,7 @@
"caniuse-lite": "^1.0.30000745", "caniuse-lite": "^1.0.30000745",
"cross-env": "^5.0.2", "cross-env": "^5.0.2",
"css-loader": "^0.28.7", "css-loader": "^0.28.7",
"cssnano": "^v4.0.0-rc.2",
"deep-equal": "^1.0.1", "deep-equal": "^1.0.1",
"enzyme": "^3.0.0", "enzyme": "^3.0.0",
"enzyme-adapter-react-15": "^1.0.0", "enzyme-adapter-react-15": "^1.0.0",

View File

@ -12,5 +12,8 @@ module.exports = {
}, },
}, },
}), }),
require('cssnano')({
preset: 'default',
}),
], ],
}; };

View File

@ -1,31 +1,31 @@
.root { .nc-gitGatewayAuthenticationPage-root {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100vh; height: 100vh;
} }
.card { .nc-gitGatewayAuthenticationPage-card {
width: 350px; width: 350px;
padding: 10px; padding: 10px;
} }
.card img { .nc-gitGatewayAuthenticationPage-card img {
display: block; display: block;
margin: auto; margin: auto;
padding-bottom: 5px; padding-bottom: 5px;
} }
.errorMsg { .nc-gitGatewayAuthenticationPage-errorMsg {
color: #dd0000; color: #dd0000;
} }
.message { .nc-gitGatewayAuthenticationPage-message {
font-size: 1.1em; font-size: 1.1em;
margin: 20px 10px; margin: 20px 10px;
} }
.button { .nc-gitGatewayAuthenticationPage-button {
padding: .25em 1em; padding: .25em 1em;
height: auto; height: auto;
} }

View File

@ -6,7 +6,6 @@ import { Notifs } from 'redux-notifications';
import { Toast } from '../../components/UI/index'; import { Toast } from '../../components/UI/index';
import { Card, Icon } from "../../components/UI"; import { Card, Icon } from "../../components/UI";
import logo from "./netlify_logo.svg"; import logo from "./netlify_logo.svg";
import styles from "./AuthenticationPage.css";
let component = null; let component = null;
@ -94,24 +93,24 @@ export default class AuthenticationPage extends React.Component {
const { error } = this.props; const { error } = this.props;
if (window.netlifyIdentity) { if (window.netlifyIdentity) {
return <section className={styles.root}> return <section className="nc-gitGatewayAuthenticationPage-root">
<Notifs CustomComponent={Toast} /> <Notifs CustomComponent={Toast} />
<Button className={styles.button} raised onClick={this.handleIdentity}> <Button className="nc-gitGatewayAuthenticationPage-button" raised onClick={this.handleIdentity}>
Login with Netlify Identity Login with Netlify Identity
</Button> </Button>
</section> </section>
} }
return ( return (
<section className={styles.root}> <section className="nc-gitGatewayAuthenticationPage-root">
<Card className={styles.card}> <Card className="nc-gitGatewayAuthenticationPage-card">
<form onSubmit={this.handleLogin}> <form onSubmit={this.handleLogin}>
<img src={logo} width={100} role="presentation" /> <img src={logo} width={100} role="presentation" />
{error && <p> {error && <p>
<span className={styles.errorMsg}>{error}</span> <span className="nc-gitGatewayAuthenticationPage-errorMsg">{error}</span>
</p>} </p>}
{errors.server && <p> {errors.server && <p>
<span className={styles.errorMsg}>{errors.server}</span> <span className="nc-gitGatewayAuthenticationPage-errorMsg">{errors.server}</span>
</p>} </p>}
<Input <Input
type="text" type="text"
@ -130,7 +129,7 @@ export default class AuthenticationPage extends React.Component {
onChange={this.handleChange.bind(this, "password")} // eslint-disable-line onChange={this.handleChange.bind(this, "password")} // eslint-disable-line
/> />
<Button <Button
className={styles.button} className="nc-gitGatewayAuthenticationPage-button"
raised raised
> >
<Icon type="login" /> Login <Icon type="login" /> Login

View File

@ -1,4 +1,4 @@
.root { .nc-githubAuthenticationPage-root {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
align-items: center; align-items: center;
@ -6,7 +6,7 @@
height: 100vh; height: 100vh;
} }
.button { .nc-githubAuthenticationPage-button {
padding: .25em 1em; padding: .25em 1em;
height: auto; height: auto;
} }

View File

@ -5,7 +5,6 @@ import Authenticator from '../../lib/netlify-auth';
import { Icon } from '../../components/UI'; import { Icon } from '../../components/UI';
import { Notifs } from 'redux-notifications'; import { Notifs } from 'redux-notifications';
import { Toast } from '../../components/UI/index'; import { Toast } from '../../components/UI/index';
import styles from './AuthenticationPage.css';
export default class AuthenticationPage extends React.Component { export default class AuthenticationPage extends React.Component {
static propTypes = { static propTypes = {
@ -35,11 +34,11 @@ export default class AuthenticationPage extends React.Component {
const { loginError } = this.state; const { loginError } = this.state;
return ( return (
<section className={styles.root}> <section className="nc-githubAuthenticationPage-root">
<Notifs CustomComponent={Toast} /> <Notifs CustomComponent={Toast} />
{loginError && <p>{loginError}</p>} {loginError && <p>{loginError}</p>}
<Button <Button
className={styles.button} className="nc-githubAuthenticationPage-button"
raised raised
onClick={this.handleLogin} onClick={this.handleLogin}
> >

View File

@ -4,7 +4,6 @@ import Input from "react-toolbox/lib/input";
import Button from "react-toolbox/lib/button"; import Button from "react-toolbox/lib/button";
import { Card, Icon } from "../../components/UI"; import { Card, Icon } from "../../components/UI";
import logo from "../git-gateway/netlify_logo.svg"; import logo from "../git-gateway/netlify_logo.svg";
import styles from "../git-gateway/AuthenticationPage.css";
export default class AuthenticationPage extends React.Component { export default class AuthenticationPage extends React.Component {
static propTypes = { static propTypes = {
@ -23,10 +22,10 @@ export default class AuthenticationPage extends React.Component {
}; };
render() { render() {
return (<section className={styles.root}> return (<section className="nc-gitGatewayAuthenticationPage-root">
<Card className={styles.card}> <Card className="nc-gitGatewayAuthenticationPage-card">
<img src={logo} width={100} role="presentation" /> <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 <Input
type="text" type="text"
label="Email" label="Email"
@ -35,7 +34,7 @@ export default class AuthenticationPage extends React.Component {
onChange={this.handleEmailChange} onChange={this.handleEmailChange}
/> />
<Button <Button
className={styles.button} className="nc-gitGatewayAuthenticationPage-button"
raised raised
onClick={this.handleLogin} onClick={this.handleLogin}
> >

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,6 +1,7 @@
import React from 'react'; 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 }) { 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>;
} }

View File

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

View File

@ -1,5 +1,4 @@
import React from 'react'; import React from 'react';
import styles from './Icon.css';
const availableIcons = [ const availableIcons = [
// Font Awesome Editor Icons // Font Awesome Editor Icons
@ -200,7 +199,7 @@ const iconPropType = (props, propName) => {
const noop = function () {}; const noop = function () {};
export default function Icon({ style, className = '', type, onClick = noop }) { 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 = { Icon.propTypes = {

View File

@ -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 */ /* Active Animation */
@-webkit-keyframes loader { @-webkit-keyframes loader {
@ -68,15 +24,52 @@
} }
} }
.loader:before, .nc-loader-root {
.loader:after { display: none;
width: 2.28571429rem; position: absolute;
height: 2.28571429rem; top: 50%;
margin: 0em 0em 0em -1.14285714rem; 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;
}
} }
.nc-loader-text {
.text {
width: auto !important; width: auto !important;
height: auto !important; height: auto !important;
text-align: center; text-align: center;
@ -84,32 +77,32 @@
margin-top: 35px; margin-top: 35px;
} }
.active { .nc-loader-active {
display: block; display: block;
} }
.disabled { .nc-loader-disabled {
display: none; display: none;
} }
/*Animations*/ /*Animations*/
.animateItem{ .nc-loader-animateItem{
position: absolute; position: absolute;
white-space: nowrap; white-space: nowrap;
transform: translateX(-50%); transform: translateX(-50%);
} }
.enter { .nc-loader-enter {
opacity: 0.01; opacity: 0.01;
} }
.enter.enterActive { .nc-loader-enter.nc-loader-enterActive {
opacity: 1; opacity: 1;
transition: opacity 500ms ease-in; transition: opacity 500ms ease-in;
} }
.exit { .nc-loader-exit {
opacity: 1; opacity: 1;
} }
.exit.exitActive { .nc-loader-exit.nc-loader-exitActive {
opacity: 0.01; opacity: 0.01;
transition: opacity 300ms ease-in; transition: opacity 300ms ease-in;
} }

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,4 +1,4 @@
.entriesPanel { .nc-app-entriesPanel {
padding: 0 40px; padding: 0 40px;
} }

View File

@ -26,8 +26,6 @@ import CollectionPage from './CollectionPage';
import EntryPage from './EntryPage'; import EntryPage from './EntryPage';
import SearchPage from './SearchPage'; import SearchPage from './SearchPage';
import NotFoundPage from './NotFoundPage'; import NotFoundPage from './NotFoundPage';
import styles from './App.css';
import sidebarStyles from './Sidebar.css';
TopBarProgress.config({ TopBarProgress.config({
barColors: { barColors: {
@ -137,26 +135,26 @@ class App extends React.Component {
const sidebarContent = ( const sidebarContent = (
<div> <div>
<Navigation type="vertical" className={sidebarStyles.nav}> <Navigation type="vertical" className="nc-sidebar-nav">
{ {
publishMode === SIMPLE ? null : publishMode === SIMPLE ? null :
<section> <section>
<h1 className={sidebarStyles.heading}>Publishing</h1> <h1 className="nc-sidebar-heading">Publishing</h1>
<div className={sidebarStyles.linkWrapper}> <div className="nc-sidebar-linkWrapper">
<Link to="/" className={sidebarStyles.viewEntriesLink}>Editorial Workflow</Link> <Link to="/" className="nc-sidebar-viewEntriesLink">Editorial Workflow</Link>
</div> </div>
</section> </section>
} }
<section> <section>
<h1 className={sidebarStyles.heading}>Collections</h1> <h1 className="nc-sidebar-heading">Collections</h1>
{ {
collections.valueSeq().map((collection) => { collections.valueSeq().map((collection) => {
const collectionName = collection.get('name'); const collectionName = collection.get('name');
return ( return (
<div key={collectionName} className={sidebarStyles.linkWrapper}> <div key={collectionName} className="nc-sidebar-linkWrapper">
<a <a
href={getCollectionUrl(collectionName, true)} href={getCollectionUrl(collectionName, true)}
className={sidebarStyles.viewEntriesLink} className="nc-sidebar-viewEntriesLink"
onClick={e => this.handleLinkClick(e, navigateToCollection, collectionName)} onClick={e => this.handleLinkClick(e, navigateToCollection, collectionName)}
> >
{collection.get('label')} {collection.get('label')}
@ -165,7 +163,7 @@ class App extends React.Component {
collection.get('create') ? ( collection.get('create') ? (
<a <a
href={getNewEntryUrl(collectionName, true)} href={getNewEntryUrl(collectionName, true)}
className={sidebarStyles.createEntryLink} className="nc-sidebar-createEntryLink"
onClick={e => this.handleLinkClick(e, createNewEntryInCollection, collectionName)} onClick={e => this.handleLinkClick(e, createNewEntryInCollection, collectionName)}
> >
<FontIcon value="add_circle_outline" /> <FontIcon value="add_circle_outline" />
@ -193,7 +191,7 @@ class App extends React.Component {
onLogoutClick={logoutUser} onLogoutClick={logoutUser}
toggleDrawer={toggleSidebar} toggleDrawer={toggleSidebar}
/> />
<div className={styles.entriesPanel}> <div className="nc-app-entriesPanel">
{ isFetching && <TopBarProgress /> } { isFetching && <TopBarProgress /> }
<div> <div>
<Switch> <Switch>

View File

@ -1,4 +1,4 @@
.noEntries { .nc-collectionPage-noEntries {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -7,4 +7,4 @@
z-index: 1000; z-index: 1000;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
margin-top: 28px; margin-top: 28px;
} }

View File

@ -6,7 +6,6 @@ import { loadEntries } from '../actions/entries';
import { selectEntries } from '../reducers'; import { selectEntries } from '../reducers';
import { Loader } from '../components/UI'; import { Loader } from '../components/UI';
import EntryListing from '../components/EntryListing/EntryListing'; import EntryListing from '../components/EntryListing/EntryListing';
import styles from "./CollectionPage.css";
class CollectionPage extends React.Component { class CollectionPage extends React.Component {
@ -58,7 +57,7 @@ class CollectionPage extends React.Component {
const fetchingEntriesContent = (<Loader active> const fetchingEntriesContent = (<Loader active>
{['Loading Entries', 'Caching Entries', 'This might take several minutes']} {['Loading Entries', 'Caching Entries', 'This might take several minutes']}
</Loader>); </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; const fallbackContent = isFetching ? fetchingEntriesContent : noEntriesContent;
return (<div>{entries ? entriesContent : fallbackContent}</div>); return (<div>{entries ? entriesContent : fallbackContent}</div>);

View File

@ -1,26 +1,24 @@
@import '../components/UI/theme'; .nc-sidebar-root {
.root {
margin-top: 54px; margin-top: 54px;
} }
.sidebar { .nc-sidebar-sidebar {
padding: 0 16px; padding: 0 16px;
width: 220px; width: 220px;
background-color: var(--backgroundAltColor); background-color: var(--backgroundAltColor);
color: var(--defaultColorLight); color: var(--defaultColorLight);
} }
.heading { .nc-sidebar-heading {
margin-bottom: 8px; margin-bottom: 8px;
color: var(--defaultColorLight); color: var(--defaultColorLight);
} }
.nav { .nc-sidebar-nav {
padding: 0; padding: 0;
} }
.linkWrapper { .nc-sidebar-linkWrapper {
color: #fff; color: #fff;
border-radius: var(--borderRadius); border-radius: var(--borderRadius);
display: flex; display: flex;
@ -32,7 +30,7 @@
} }
} }
.viewEntriesLink { .nc-sidebar-viewEntriesLink {
font-size: 18px; font-size: 18px;
color: inherit; color: inherit;
padding: 10px 6px; padding: 10px 6px;
@ -40,7 +38,7 @@
width: 100%; width: 100%;
} }
.createEntryLink { .nc-sidebar-createEntryLink {
color: inherit; color: inherit;
padding: 0 6px; padding: 0 6px;
display: block; display: block;

View File

@ -4,7 +4,6 @@ import { connect } from 'react-redux';
import ReactSidebar from 'react-sidebar'; import ReactSidebar from 'react-sidebar';
import _ from 'lodash'; import _ from 'lodash';
import { openSidebar } from '../actions/globalUI'; import { openSidebar } from '../actions/globalUI';
import styles from './Sidebar.css';
class Sidebar extends React.Component { class Sidebar extends React.Component {
@ -43,8 +42,8 @@ class Sidebar extends React.Component {
return ( return (
<ReactSidebar <ReactSidebar
sidebar={content} sidebar={content}
rootClassName={styles.root} rootClassName="nc-sidebar-root"
sidebarClassName={styles.sidebar} sidebarClassName="nc-sidebar-sidebar"
docked={sidebarIsOpen && this.state.sidebarDocked} // ALWAYS can hide sidebar docked={sidebarIsOpen && this.state.sidebarDocked} // ALWAYS can hide sidebar
open={sidebarIsOpen} open={sidebarIsOpen}
onSetOpen={openSidebar} onSetOpen={openSidebar}

View File

@ -1,6 +1,37 @@
@import "react-toolbox-global.css"; @import "react-toolbox-global.css";
@import "material-icons.css"; @import "./material-icons.css";
@import "components/UI/theme.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 { html {
box-sizing: border-box; box-sizing: border-box;
@ -40,307 +71,304 @@ img {
max-width: 100%; max-width: 100%;
} }
:global { .react-autosuggest__container {
position: relative;
& .react-autosuggest__container { }
position: relative;
} .react-autosuggest__input {
width: 240px;
& .react-autosuggest__input { height: 30px;
width: 240px; padding: 10px 20px;
height: 30px; font-family: Helvetica, sans-serif;
padding: 10px 20px; font-weight: 300;
font-family: Helvetica, sans-serif; font-size: 16px;
font-weight: 300; border: 1px solid #aaa;
font-size: 16px; border-radius: 4px;
border: 1px solid #aaa; }
border-radius: 4px;
} .react-autosuggest__input:focus {
outline: none;
& .react-autosuggest__input:focus { }
outline: none;
} .react-autosuggest__container--open .react-autosuggest__input {
border-bottom-left-radius: 0;
& .react-autosuggest__container--open .react-autosuggest__input { border-bottom-right-radius: 0;
border-bottom-left-radius: 0; }
border-bottom-right-radius: 0;
} .react-autosuggest__suggestions-container {
display: none;
& .react-autosuggest__suggestions-container { }
display: none;
} .react-autosuggest__container--open .react-autosuggest__suggestions-container {
display: block;
& .react-autosuggest__container--open .react-autosuggest__suggestions-container { position: absolute;
display: block; top: 51px;
position: absolute; width: 100%;
top: 51px; border: 1px solid #aaa;
width: 100%; background-color: #fff;
border: 1px solid #aaa; font-family: Helvetica, sans-serif;
background-color: #fff; font-weight: 300;
font-family: Helvetica, sans-serif; font-size: 16px;
font-weight: 300; border-bottom-left-radius: 4px;
font-size: 16px; border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; z-index: 2;
border-bottom-right-radius: 4px; }
z-index: 2;
} .react-autosuggest__suggestions-list {
margin: 0;
& .react-autosuggest__suggestions-list { padding: 0;
margin: 0; list-style-type: none;
padding: 0; }
list-style-type: none;
} .react-autosuggest__suggestion {
cursor: pointer;
& .react-autosuggest__suggestion { padding: 10px 20px;
cursor: pointer; }
padding: 10px 20px;
} .react-autosuggest__suggestion--focused {
background-color: #ddd;
& .react-autosuggest__suggestion--focused { }
background-color: #ddd;
} .Resizer {
background: #000;
& .Resizer { opacity: .2;
background: #000; z-index: 1;
opacity: .2; box-sizing: border-box;
z-index: 1; background-clip: padding-box;
box-sizing: border-box; }
background-clip: padding-box;
} .Resizer:hover {
-webkit-transition: all 2s ease;
& .Resizer:hover { transition: all 2s ease;
-webkit-transition: all 2s ease; }
transition: all 2s ease;
} .Resizer.vertical {
width: 11px;
& .Resizer.vertical { margin: 0 -5px;
width: 11px; border-left: 5px solid rgba(255, 255, 255, 0);
margin: 0 -5px; border-right: 5px solid rgba(255, 255, 255, 0);
border-left: 5px solid rgba(255, 255, 255, 0); cursor: col-resize;
border-right: 5px solid rgba(255, 255, 255, 0); }
cursor: col-resize;
} .Resizer.vertical:hover {
border-left: 5px solid rgba(0, 0, 0, 0.5);
& .Resizer.vertical:hover { border-right: 5px solid rgba(0, 0, 0, 0.5);
border-left: 5px solid rgba(0, 0, 0, 0.5); }
border-right: 5px solid rgba(0, 0, 0, 0.5); .Resizer.disabled {
} cursor: not-allowed;
& .Resizer.disabled { }
cursor: not-allowed; .Resizer.disabled:hover {
} border-color: transparent;
& .Resizer.disabled:hover { }
border-color: transparent;
}
.rdt {
position: relative;
& .rdt { }
position: relative; .rdtPicker {
} display: none;
& .rdtPicker { position: absolute;
display: none; width: 250px;
position: absolute; padding: 4px;
width: 250px; margin-top: 1px;
padding: 4px; z-index: 99999 !important;
margin-top: 1px; background: #fff;
z-index: 99999 !important; border: 2px solid var(--secondaryColor);
background: #fff; border-radius: 2px;
border: 2px solid var(--secondaryColor); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .16);
border-radius: 2px; }
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .16); .rdtOpen .rdtPicker {
} display: block;
& .rdtOpen .rdtPicker { }
display: block; .rdtStatic .rdtPicker {
} box-shadow: none;
& .rdtStatic .rdtPicker { position: static;
box-shadow: none; }
position: static;
} .rdtPicker .rdtTimeToggle {
text-align: center;
& .rdtPicker .rdtTimeToggle { }
text-align: center;
} .rdtPicker table {
width: 100%;
& .rdtPicker table { margin: 0;
width: 100%; }
margin: 0; .rdtPicker td,
} .rdtPicker th {
& .rdtPicker td, text-align: center;
& .rdtPicker th { height: 28px;
text-align: center; }
height: 28px; .rdtPicker td {
} cursor: pointer;
& .rdtPicker td { }
cursor: pointer; .rdtPicker td.rdtDay:hover,
} .rdtPicker td.rdtHour:hover,
& .rdtPicker td.rdtDay:hover, .rdtPicker td.rdtMinute:hover,
& .rdtPicker td.rdtHour:hover, .rdtPicker td.rdtSecond:hover,
& .rdtPicker td.rdtMinute:hover, .rdtPicker .rdtTimeToggle:hover {
& .rdtPicker td.rdtSecond:hover, background: #eeeeee;
& .rdtPicker .rdtTimeToggle:hover { cursor: pointer;
background: #eeeeee; }
cursor: pointer; .rdtPicker td.rdtOld,
} .rdtPicker td.rdtNew {
& .rdtPicker td.rdtOld, color: #999999;
& .rdtPicker td.rdtNew { }
color: #999999; .rdtPicker td.rdtToday {
} position: relative;
& .rdtPicker td.rdtToday { }
position: relative; .rdtPicker td.rdtToday:before {
} content: '';
& .rdtPicker td.rdtToday:before { display: inline-block;
content: ''; border-left: 7px solid transparent;
display: inline-block; border-bottom: 7px solid #428bca;
border-left: 7px solid transparent; border-top-color: rgba(0, 0, 0, 0.2);
border-bottom: 7px solid #428bca; position: absolute;
border-top-color: rgba(0, 0, 0, 0.2); bottom: 4px;
position: absolute; right: 4px;
bottom: 4px; }
right: 4px; .rdtPicker td.rdtActive,
} .rdtPicker td.rdtActive:hover {
& .rdtPicker td.rdtActive, background-color: #428bca;
& .rdtPicker td.rdtActive:hover { color: #fff;
background-color: #428bca; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: #fff; }
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); .rdtPicker td.rdtActive.rdtToday:before {
} border-bottom-color: #fff;
& .rdtPicker td.rdtActive.rdtToday:before { }
border-bottom-color: #fff; .rdtPicker td.rdtDisabled,
} .rdtPicker td.rdtDisabled:hover {
& .rdtPicker td.rdtDisabled, background: none;
& .rdtPicker td.rdtDisabled:hover { color: #999999;
background: none; cursor: not-allowed;
color: #999999; }
cursor: not-allowed;
} .rdtPicker td span.rdtOld {
color: #999999;
& .rdtPicker td span.rdtOld { }
color: #999999; .rdtPicker td span.rdtDisabled,
} .rdtPicker td span.rdtDisabled:hover {
& .rdtPicker td span.rdtDisabled, background: none;
& .rdtPicker td span.rdtDisabled:hover { color: #999999;
background: none; cursor: not-allowed;
color: #999999; }
cursor: not-allowed; .rdtPicker th {
} border-bottom: 1px solid #f9f9f9;
& .rdtPicker th { }
border-bottom: 1px solid #f9f9f9; .rdtPicker .dow {
} width: 14.2857%;
& .rdtPicker .dow { border-bottom: none;
width: 14.2857%; }
border-bottom: none; .rdtPicker th.rdtSwitch {
} width: 100px;
& .rdtPicker th.rdtSwitch { }
width: 100px; .rdtPicker th.rdtNext,
} .rdtPicker th.rdtPrev {
& .rdtPicker th.rdtNext, font-size: 21px;
& .rdtPicker th.rdtPrev { vertical-align: top;
font-size: 21px; }
vertical-align: top;
} .rdtPrev span,
.rdtNext span {
& .rdtPrev span, display: block;
& .rdtNext span { -webkit-touch-callout: none; /* iOS Safari */
display: block; -webkit-user-select: none; /* Chrome/Safari/Opera */
-webkit-touch-callout: none; /* iOS Safari */ -khtml-user-select: none; /* Konqueror */
-webkit-user-select: none; /* Chrome/Safari/Opera */ -moz-user-select: none; /* Firefox */
-khtml-user-select: none; /* Konqueror */ -ms-user-select: none; /* Internet Explorer/Edge */
-moz-user-select: none; /* Firefox */ user-select: none;
-ms-user-select: none; /* Internet Explorer/Edge */ }
user-select: none;
} .rdtPicker th.rdtDisabled,
.rdtPicker th.rdtDisabled:hover {
& .rdtPicker th.rdtDisabled, background: none;
& .rdtPicker th.rdtDisabled:hover { color: #999999;
background: none; cursor: not-allowed;
color: #999999; }
cursor: not-allowed; .rdtPicker thead tr:first-child th {
} cursor: pointer;
& .rdtPicker thead tr:first-child th { }
cursor: pointer; .rdtPicker thead tr:first-child th:hover {
} background: #eeeeee;
& .rdtPicker thead tr:first-child th:hover { }
background: #eeeeee;
} .rdtPicker tfoot {
border-top: 1px solid #f9f9f9;
& .rdtPicker tfoot { }
border-top: 1px solid #f9f9f9;
} .rdtPicker button {
border: none;
& .rdtPicker button { background: none;
border: none; cursor: pointer;
background: none; }
cursor: pointer; .rdtPicker button:hover {
} background-color: #eee;
& .rdtPicker button:hover { }
background-color: #eee;
} .rdtPicker thead button {
width: 100%;
& .rdtPicker thead button { height: 100%;
width: 100%; }
height: 100%;
} td.rdtMonth,
td.rdtYear {
& td.rdtMonth, height: 50px;
& td.rdtYear { width: 25%;
height: 50px; cursor: pointer;
width: 25%; }
cursor: pointer; td.rdtMonth:hover,
} td.rdtYear:hover {
& td.rdtMonth:hover, background: #eee;
& td.rdtYear:hover { }
background: #eee;
} .rdtCounters {
display: inline-block;
& .rdtCounters { }
display: inline-block;
} .rdtCounters > div {
float: left;
& .rdtCounters > div { }
float: left;
} .rdtCounter {
height: 100px;
& .rdtCounter { }
height: 100px;
} .rdtCounter {
width: 40px;
& .rdtCounter { }
width: 40px;
} .rdtCounterSeparator {
line-height: 100px;
& .rdtCounterSeparator { }
line-height: 100px;
} .rdtCounter .rdtBtn {
height: 40%;
& .rdtCounter .rdtBtn { line-height: 40px;
height: 40%; cursor: pointer;
line-height: 40px; display: block;
cursor: pointer;
display: block; -webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-webkit-touch-callout: none; /* iOS Safari */ -khtml-user-select: none; /* Konqueror */
-webkit-user-select: none; /* Chrome/Safari/Opera */ -moz-user-select: none; /* Firefox */
-khtml-user-select: none; /* Konqueror */ -ms-user-select: none; /* Internet Explorer/Edge */
-moz-user-select: none; /* Firefox */ user-select: none;
-ms-user-select: none; /* Internet Explorer/Edge */ }
user-select: none; .rdtCounter .rdtBtn:hover {
} background: #eee;
& .rdtCounter .rdtBtn:hover { }
background: #eee; .rdtCounter .rdtCount {
} height: 20%;
& .rdtCounter .rdtCount { font-size: 1.2em;
height: 20%; }
font-size: 1.2em;
} .rdtMilli {
vertical-align: middle;
& .rdtMilli { padding-left: 8px;
vertical-align: middle; width: 48px;
padding-left: 8px; }
width: 48px;
} .rdtMilli input {
width: 100%;
& .rdtMilli input { font-size: 1.2em;
width: 100%; margin-top: 37px;
font-size: 1.2em;
margin-top: 37px;
}
} }

View File

@ -4,12 +4,13 @@
font-weight: 400; font-weight: 400;
src: local('Material Icons'), src: local('Material Icons'),
local('MaterialIcons-Regular'), 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.woff2') format('woff2'),
url('material-design-icons/iconfont/MaterialIcons-Regular.ttf') format('truetype'); 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-family: 'Material Icons';
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;

View File

@ -1,25 +1,23 @@
/* stylelint-disable */ /* stylelint-disable */
/* This is an utility file that should not be included in production build */ /* This is an utility file that should not be included in production build */
:global { .undefined {
& .undefined { position: fixed !important;
position: fixed !important; top: 0 !important;
top: 0 !important; right: 0 !important;
right: 0 !important; bottom: 0 !important;
bottom: 0 !important; left: 0 !important;
left: 0 !important; display: flex !important;
display: flex !important; align-items: center !important;
align-items: center !important; justify-content: center !important;
justify-content: center !important; background: red !important;
background: red !important; color: white !important;
color: white !important; font-weight: bold !important;
font-weight: bold !important; font-size: 30px !important;
font-size: 30px !important; }
}
& .undefined::after { .undefined::after {
display: block !important; display: block !important;
padding: 15px 30px !important; padding: 15px 30px !important;
content: 'ERROR! You are missing a class definition in your css module! Inspect me to find out where.' !important; content: 'ERROR! You are missing a class definition in your css module! Inspect me to find out where.' !important;
}
} }
/* stylelint-enable */ /* stylelint-enable */

View File

@ -43,7 +43,7 @@ module.exports = {
}), }),
}, },
{ {
/* We use CSS-modules and PostCSS for CMS styles */ /* We use PostCSS for CMS styles */
test: /\.css$/, test: /\.css$/,
exclude: [/node_modules/], exclude: [/node_modules/],
use: ExtractTextPlugin.extract({ use: ExtractTextPlugin.extract({
@ -52,9 +52,7 @@ module.exports = {
{ {
loader: 'css-loader', loader: 'css-loader',
options: { options: {
modules: true,
importLoaders: 1, importLoaders: 1,
localIdentName: "cms__[name]__[local]"
}, },
}, },
{ loader: 'postcss-loader' }, { loader: 'postcss-loader' },

382
yarn.lock
View File

@ -170,7 +170,7 @@ all-contributors-cli@^4.4.0:
request "^2.72.0" request "^2.72.0"
yargs "^4.7.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" version "1.0.2"
resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3" 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" delegates "^1.0.0"
readable-stream "^2.0.6" 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: argparse@^1.0.7:
version "1.0.9" version "1.0.9"
resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86" 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-convert "^1.3.0"
color-string "^0.3.0" color-string "^0.3.0"
color@^1.0.3: color@^1.0.0, color@^1.0.3:
version "1.0.3" version "1.0.3"
resolved "https://registry.yarnpkg.com/color/-/color-1.0.3.tgz#e48e832d85f14ef694fb468811c2d5cfe729b55d" resolved "https://registry.yarnpkg.com/color/-/color-1.0.3.tgz#e48e832d85f14ef694fb468811c2d5cfe729b55d"
dependencies: dependencies:
@ -1914,7 +1918,7 @@ cosmiconfig@^1.1.0:
pinkie-promise "^2.0.0" pinkie-promise "^2.0.0"
require-from-string "^1.1.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" version "2.2.2"
resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.2.2.tgz#6173cebd56fac042c1f4390edf7af6c07c7cb892" resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.2.2.tgz#6173cebd56fac042c1f4390edf7af6c07c7cb892"
dependencies: dependencies:
@ -2052,10 +2056,20 @@ css-color-names@0.0.3:
version "0.0.3" version "0.0.3"
resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.3.tgz#de0cef16f4d8aa8222a320d5b6d7e9bbada7b9f6" 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" version "0.0.4"
resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" 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: css-in-js-utils@^2.0.0:
version "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" 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" version "0.1.0"
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4" 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": "cssnano@>=2.6.1 <4":
version "3.10.0" version "3.10.0"
resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38" 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-value-parser "^3.2.3"
postcss-zindex "^2.0.1" 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: csso@~2.3.1:
version "2.3.2" version "2.3.2"
resolved "https://registry.yarnpkg.com/csso/-/csso-2.3.2.tgz#ddd52c587033f49e94b71fc55569f252e8ff5f85" resolved "https://registry.yarnpkg.com/csso/-/csso-2.3.2.tgz#ddd52c587033f49e94b71fc55569f252e8ff5f85"
@ -2391,20 +2467,13 @@ dns-txt@^2.0.2:
dependencies: dependencies:
buffer-indexof "^1.0.0" buffer-indexof "^1.0.0"
doctrine@1.3.x: doctrine@1.3.x, doctrine@^1.2.2:
version "1.3.0" version "1.3.0"
resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.3.0.tgz#13e75682b55518424276f7c173783456ef913d26" resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.3.0.tgz#13e75682b55518424276f7c173783456ef913d26"
dependencies: dependencies:
esutils "^2.0.2" esutils "^2.0.2"
isarray "^1.0.0" 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: doctrine@^2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.0.tgz#c73d8d2909d22291e1a007a395804da8b665fe63" resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.0.tgz#c73d8d2909d22291e1a007a395804da8b665fe63"
@ -2462,21 +2531,14 @@ domhandler@^2.3.0:
dependencies: dependencies:
domelementtype "1" domelementtype "1"
domutils@1.5.1: domutils@1.5.1, domutils@^1.5.1:
version "1.5.1" version "1.5.1"
resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf" resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
dependencies: dependencies:
dom-serializer "0" dom-serializer "0"
domelementtype "1" domelementtype "1"
domutils@^1.5.1: dot-prop@^4.1.0, dot-prop@^4.1.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:
version "4.2.0" version "4.2.0"
resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57" resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
dependencies: dependencies:
@ -3642,7 +3704,7 @@ has-unicode@^2.0.0:
version "2.0.1" version "2.0.1"
resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9" 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" version "1.0.1"
resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28" resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
dependencies: dependencies:
@ -3767,6 +3829,10 @@ hawk@~6.0.2:
hoek "4.x.x" hoek "4.x.x"
sntp "2.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: highlight-es@^1.0.0:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/highlight-es/-/highlight-es-1.0.1.tgz#3bb01eb1f2062ddaab72f8b23766a3bf8c1a771f" 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" readable-stream "^2.0.1"
wbuf "^1.1.0" 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: html-comment-regex@^1.1.0:
version "1.1.1" version "1.1.1"
resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e" 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: dependencies:
ci-info "^1.0.0" 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: is-date-object@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16" 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: dependencies:
mime-db "~1.30.0" mime-db "~1.30.0"
mime@1.3.x: mime@1.3.x, mime@^1.3.4:
version "1.3.6" version "1.3.6"
resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.6.tgz#591d84d3653a6b0b4a3b9df8de5aa8108e72e5e0" 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" version "1.4.1"
resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6" resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
@ -5476,7 +5561,7 @@ minimatch@3.0.3:
dependencies: dependencies:
brace-expansion "^1.0.0" brace-expansion "^1.0.0"
minimist@0.0.8: minimist@0.0.8, minimist@~0.0.1:
version "0.0.8" version "0.0.8"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d" 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" version "1.2.0"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284" 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: 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" version "0.5.1"
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903" 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" version "0.2.0"
resolved "https://registry.yarnpkg.com/normalize-selector/-/normalize-selector-0.2.0.tgz#d0b145eb691189c63a78d201dc4fdb1293ef0c03" 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" version "1.9.1"
resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c" resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
dependencies: dependencies:
@ -6354,6 +6435,16 @@ postcss-colormin@^2.1.8:
postcss "^5.0.13" postcss "^5.0.13"
postcss-value-parser "^3.2.3" 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: postcss-convert-values@^2.3.4:
version "2.6.1" version "2.6.1"
resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-2.6.1.tgz#bbd8593c5c1fd2e3d1c322bb925dcae8dae4d62d" 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 "^5.0.11"
postcss-value-parser "^3.1.2" 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: postcss-cssnext@^3.0.2:
version "3.0.2" version "3.0.2"
resolved "https://registry.yarnpkg.com/postcss-cssnext/-/postcss-cssnext-3.0.2.tgz#63b77adb0b8a4c1d5ec32cd345539535a3417d48" 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: dependencies:
postcss "^5.0.14" 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: postcss-discard-duplicates@^2.0.1:
version "2.1.0" version "2.1.0"
resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-2.1.0.tgz#b9abf27b88ac188158a5eb12abcae20263b91932" resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-2.1.0.tgz#b9abf27b88ac188158a5eb12abcae20263b91932"
dependencies: dependencies:
postcss "^5.0.4" 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: postcss-discard-empty@^2.0.1:
version "2.1.0" version "2.1.0"
resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz#d2b4bd9d5ced5ebd8dcade7640c7d7cd7f4f92b5" resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz#d2b4bd9d5ced5ebd8dcade7640c7d7cd7f4f92b5"
dependencies: dependencies:
postcss "^5.0.14" 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: postcss-discard-overridden@^0.1.1:
version "0.1.1" version "0.1.1"
resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz#8b1eaf554f686fb288cd874c55667b0aa3668d58" resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz#8b1eaf554f686fb288cd874c55667b0aa3668d58"
dependencies: dependencies:
postcss "^5.0.16" 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: postcss-discard-unused@^2.2.1:
version "2.2.3" version "2.2.3"
resolved "https://registry.yarnpkg.com/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz#bce30b2cc591ffc634322b5fb3464b6d934f4433" 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: dependencies:
postcss "^5.0.4" 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: postcss-merge-rules@^2.0.3:
version "2.1.2" version "2.1.2"
resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz#d1df5dfaa7b1acc3be553f0e9e10e87c61b5f721" 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" postcss-selector-parser "^2.2.2"
vendors "^1.0.0" 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: postcss-message-helpers@^2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.yarnpkg.com/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz#a4f2f4fab6e4fe002f0aed000478cdf52f9ba60e" 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 "^5.0.4"
postcss-value-parser "^3.0.2" 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: postcss-minify-gradients@^1.0.1:
version "1.0.5" version "1.0.5"
resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz#5dbda11373703f83cfb4a3ea3881d8d75ff5e6e1" 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 "^5.0.12"
postcss-value-parser "^3.3.0" 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: postcss-minify-params@^1.0.4:
version "1.2.2" version "1.2.2"
resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz#ad2ce071373b943b3d930a3fa59a358c28d6f1f3" 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" postcss-value-parser "^3.0.2"
uniqs "^2.0.0" 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: postcss-minify-selectors@^2.0.4:
version "2.1.1" version "2.1.1"
resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz#b2c6a98c0072cf91b932d1a496508114311735bf" 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 "^5.0.14"
postcss-selector-parser "^2.0.0" 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: postcss-modules-extract-imports@^1.0.0:
version "1.2.0" version "1.2.0"
resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.0.tgz#66140ecece38ef06bf0d3e355d69bf59d141ea85" 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: dependencies:
postcss "^5.0.5" 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: postcss-normalize-url@^3.0.7:
version "3.0.8" version "3.0.8"
resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-3.0.8.tgz#108f74b3f2fcdaf891a2ffa3ea4592279fc78222" 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 "^5.0.14"
postcss-value-parser "^3.2.3" 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: postcss-ordered-values@^2.1.0:
version "2.2.3" version "2.2.3"
resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-2.2.3.tgz#eec6c2a67b6c412a8db2042e77fe8da43f95c11d" 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 "^5.0.4"
postcss-value-parser "^3.0.1" 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: postcss-pseudo-class-any-link@^4.0.0:
version "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" 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: dependencies:
postcss "^5.0.4" 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: postcss-reduce-transforms@^1.0.3:
version "1.0.4" version "1.0.4"
resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz#ff76f4d8212437b31c298a42d2e1444025771ae1" 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 "^5.0.8"
postcss-value-parser "^3.0.1" 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: postcss-replace-overflow-wrap@^2.0.0:
version "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" 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" indexes-of "^1.0.1"
uniq "^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: postcss-sorting@^1.7.0:
version "1.7.0" version "1.7.0"
resolved "https://registry.yarnpkg.com/postcss-sorting/-/postcss-sorting-1.7.0.tgz#69b92db051ed4181c5b8c585ee8b8c5f40915a82" 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" postcss-value-parser "^3.2.3"
svgo "^0.7.0" 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: postcss-unique-selectors@^2.0.2:
version "2.0.2" version "2.0.2"
resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz#981d57d29ddcb33e7b1dfe1fd43b8649f933ca1d" 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" postcss "^5.0.4"
uniqs "^2.0.0" 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" version "3.3.0"
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15" 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: dependencies:
pify "^2.3.0" 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" version "0.2.1"
resolved "https://registry.yarnpkg.com/read-file-stdin/-/read-file-stdin-0.2.1.tgz#25eccff3a153b6809afacb23ee15387db9e0ee61" resolved "https://registry.yarnpkg.com/read-file-stdin/-/read-file-stdin-0.2.1.tgz#25eccff3a153b6809afacb23ee15387db9e0ee61"
dependencies: dependencies:
@ -7771,10 +8069,18 @@ rgb-hex@^2.1.0:
version "2.1.0" version "2.1.0"
resolved "https://registry.yarnpkg.com/rgb-hex/-/rgb-hex-2.1.0.tgz#c773c5fe2268a25578d92539a82a7a5ce53beda6" 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: rgb@~0.1.0:
version "0.1.0" version "0.1.0"
resolved "https://registry.yarnpkg.com/rgb/-/rgb-0.1.0.tgz#be27b291e8feffeac1bd99729721bfa40fc037b5" 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: right-align@^0.1.1:
version "0.1.3" version "0.1.3"
resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef" 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" text-table "^0.2.0"
write-file-stdout "0.0.2" 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: stylelint-config-css-modules@^0.1.0:
version "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" 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: dependencies:
setimmediate "^1.0.4" 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: tmp@0.0.30:
version "0.0.30" version "0.0.30"
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.30.tgz#72419d4a8be7d6ce75148fd8b324e593a711c2ed" resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.30.tgz#72419d4a8be7d6ce75148fd8b324e593a711c2ed"