commit 567022c887d176bc5fdc42ee9907f76c1a7c30bc parent 337e0ae7c454f7091b123d4a5438a21bfda79fdb Author: Konstantin Tarkus <hello@tarkus.me> Date: Fri, 24 Jul 2015 18:26:14 +0300 Remove LESS in favor of vanilla CSS via PostCSS/cssnext Diffstat:
42 files changed, 536 insertions(+), 544 deletions(-)
diff --git a/README.md b/README.md @@ -147,4 +147,4 @@ the file is. Name the test by appending `-test.js` to the js file. ### License -The MIT License © Konstantin Tarkus ([@koistya](https://twitter.com/koistya)) +The MIT License © Konstantin Tarkus ([@koistya](https://twitter.com/koistya)), [Kriasoft](http://www.kriasoft.com) diff --git a/docs/react-style-guide.md b/docs/react-style-guide.md @@ -10,10 +10,10 @@ ``` /src/components/Navigation/icon.svg +/src/components/Navigation/Navigation.css /src/components/Navigation/Navigation.js -/src/components/Navigation/Navigation.less /src/components/Navigation/Navigation.test.js -/src/components/Navigation/Navigation.ru-RU.less +/src/components/Navigation/Navigation.ru-RU.css /src/components/Navigation/package.json ``` @@ -48,7 +48,9 @@ Use [BEM](https://bem.info/) approach for naming CSS classes. See also [SUIT CSS ``` ```less -// LESS +// CSS +@import '../variables.css'; + .Navigation { &-items { margin: 0; @@ -74,12 +76,12 @@ Use [BEM](https://bem.info/) approach for naming CSS classes. See also [SUIT CSS &, .Navigation-items:hover & { - background: @default-bg-color; + background: var(--default-bg-color); } &--selected, .Navigation-items:hover &:hover { - background: @active-bg-color; + background: var(--active-bg-color); } } } @@ -94,7 +96,7 @@ Use [BEM](https://bem.info/) approach for naming CSS classes. See also [SUIT CSS ##### React component example: ```js -import './SampleComponent.less'; +import './SampleComponent.css'; import React, { Component } from 'react'; class SampleComponent extends Component { diff --git a/package.json b/package.json @@ -29,6 +29,7 @@ "browser-sync": "^2.8.0", "css-loader": "^0.15.5", "csscomb": "^3.1.8", + "cssnext": "^1.8.2", "del": "^1.2.0", "eslint": "^0.24.1", "eslint-loader": "^0.14.2", @@ -41,18 +42,17 @@ "gulp-rename": "^1.2.2", "gulp-size": "^1.2.3", "gulp-util": "^3.0.6", - "jest-cli": "^0.4.15", - "less": "^2.5.1", - "less-loader": "^2.2.0", - "minimist": "^1.1.1", + "jest-cli": "^0.4.17", + "minimist": "^1.1.2", "mkdirp": "^0.5.1", "postcss": "^4.1.16", "postcss-loader": "^0.5.1", + "postcss-nested": "^0.3.2", "psi": "^1.0.6", "run-sequence": "^1.1.2", "style-loader": "^0.12.3", "url-loader": "^0.5.6", - "webpack": "^1.10.1" + "webpack": "^1.10.5" }, "jest": { "rootDir": "./src", diff --git a/src/components/App/App.css b/src/components/App/App.css @@ -0,0 +1,168 @@ +@import '../../../node_modules/normalize.css/normalize.css'; + +/*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ + +@import '../variables.css'; + +/* + * Base styles + * ========================================================================== */ + +html { + color: #222; + font-weight: 100; + font-size: 1em; /* ~16px; */ + font-family: var(--font-family-base); + line-height: 1.375; /* ~22px */ +} + +/* + * Remove text-shadow in selection highlight: + * https://twitter.com/miketaylr/status/12228805301 + * + * These selection rule sets have to be separate. + * Customize the background color to match your design. + */ + +::-moz-selection { + background: #b3d4fc; + text-shadow: none; +} + +::selection { + background: #b3d4fc; + text-shadow: none; +} + +/* + * A better looking default horizontal rule + */ + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + +/* + * Remove the gap between audio, canvas, iframes, + * images, videos and the bottom of their containers: + * https://github.com/h5bp/html5-boilerplate/issues/440 + */ + +audio, +canvas, +iframe, +img, +svg, +video { + vertical-align: middle; +} + +/* + * Remove default fieldset styles. + */ + +fieldset { + border: 0; + margin: 0; + padding: 0; +} + +/* + * Allow only vertical resizing of textareas. + */ + +textarea { + resize: vertical; +} + +/* + * Browser upgrade prompt + * ========================================================================== */ + +.browserupgrade { + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; +} + +/* + * Print styles + * Inlined to avoid the additional HTTP request: + * http://www.phpied.com/delay-loading-your-print-css/ + * ========================================================================== */ + +@media print { + *, + *:before, + *:after { + background: transparent !important; + color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */ + box-shadow: none !important; + text-shadow: none !important; + } + + a, + a:visited { + text-decoration: underline; + } + + a[href]:after { + content: " (" attr(href) ")"; + } + + abbr[title]:after { + content: " (" attr(title) ")"; + } + + /* + * Don't show links that are fragment identifiers, + * or use the `javascript:` pseudo protocol + */ + + a[href^="#"]:after, + a[href^="javascript:"]:after { + content: ""; + } + + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + /* + * Printing Tables: + * http://css-discuss.incutio.com/wiki/Printing_Tables + */ + + thead { + display: table-header-group; + } + + tr, + img { + page-break-inside: avoid; + } + + img { + max-width: 100% !important; + } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } +} diff --git a/src/components/App/App.js b/src/components/App/App.js @@ -1,7 +1,7 @@ /*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ import React, { PropTypes } from 'react'; -import styles from './App.less'; +import styles from './App.css'; import withContext from '../../decorators/withContext'; import withStyles from '../../decorators/withStyles'; import Header from '../Header'; diff --git a/src/components/App/App.less b/src/components/App/App.less @@ -1,168 +0,0 @@ -@import (less) '../../../node_modules/normalize.css/normalize.css'; - -/*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ - -@import '../variables.less'; - -// -// Base styles -// ----------------------------------------------------------------------------- - -html { - color: #222; - font-weight: 100; - font-size: 1em; // ~16px; - font-family: @font-family-base; - line-height: 1.375; // ~22px -} - -/* - * Remove text-shadow in selection highlight: - * https://twitter.com/miketaylr/status/12228805301 - * - * These selection rule sets have to be separate. - * Customize the background color to match your design. - */ - -::-moz-selection { - background: #b3d4fc; - text-shadow: none; -} - -::selection { - background: #b3d4fc; - text-shadow: none; -} - -/* - * A better looking default horizontal rule - */ - -hr { - display: block; - height: 1px; - border: 0; - border-top: 1px solid #ccc; - margin: 1em 0; - padding: 0; -} - -/* - * Remove the gap between audio, canvas, iframes, - * images, videos and the bottom of their containers: - * https://github.com/h5bp/html5-boilerplate/issues/440 - */ - -audio, -canvas, -iframe, -img, -svg, -video { - vertical-align: middle; -} - -/* - * Remove default fieldset styles. - */ - -fieldset { - border: 0; - margin: 0; - padding: 0; -} - -/* - * Allow only vertical resizing of textareas. - */ - -textarea { - resize: vertical; -} - -// -// Browser upgrade prompt -// ----------------------------------------------------------------------------- - -.browserupgrade { - margin: 0.2em 0; - background: #ccc; - color: #000; - padding: 0.2em 0; -} - -// -// Print styles -// Inlined to avoid the additional HTTP request: -// http://www.phpied.com/delay-loading-your-print-css/ -// ----------------------------------------------------------------------------- - -@media print { - *, - *:before, - *:after { - background: transparent !important; - color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */ - box-shadow: none !important; - text-shadow: none !important; - } - - a, - a:visited { - text-decoration: underline; - } - - a[href]:after { - content: " (" attr(href) ")"; - } - - abbr[title]:after { - content: " (" attr(title) ")"; - } - - /* - * Don't show links that are fragment identifiers, - * or use the `javascript:` pseudo protocol - */ - - a[href^="#"]:after, - a[href^="javascript:"]:after { - content: ""; - } - - pre, - blockquote { - border: 1px solid #999; - page-break-inside: avoid; - } - - /* - * Printing Tables: - * http://css-discuss.incutio.com/wiki/Printing_Tables - */ - - thead { - display: table-header-group; - } - - tr, - img { - page-break-inside: avoid; - } - - img { - max-width: 100% !important; - } - - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - - h2, - h3 { - page-break-after: avoid; - } -} diff --git a/src/components/ContactPage/ContactPage.css b/src/components/ContactPage/ContactPage.css @@ -0,0 +1,9 @@ +/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ + +@import '../variables.css'; + +.ContactPage-container { + margin: 0 auto; + padding: 0 0 40px; + max-width: var(--max-content-width); +} diff --git a/src/components/ContactPage/ContactPage.js b/src/components/ContactPage/ContactPage.js @@ -1,7 +1,7 @@ /*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ import React, { PropTypes } from 'react'; -import styles from './ContactPage.less'; +import styles from './ContactPage.css'; import withStyles from '../../decorators/withStyles'; @withStyles(styles) diff --git a/src/components/ContactPage/ContactPage.less b/src/components/ContactPage/ContactPage.less @@ -1,11 +0,0 @@ -/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ - -@import '../variables.less'; - -.ContactPage { - &-container { - margin: 0 auto; - padding: 0 0 40px; - max-width: @max-content-width; - } -} diff --git a/src/components/ContentPage/ContentPage.css b/src/components/ContentPage/ContentPage.css @@ -0,0 +1,9 @@ +/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ + +@import '../variables.css'; + +.ContentPage-container { + margin: 0 auto; + padding: 0 0 40px; + max-width: var(--max-content-width); +} diff --git a/src/components/ContentPage/ContentPage.js b/src/components/ContentPage/ContentPage.js @@ -1,7 +1,7 @@ /*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ import React, { PropTypes } from 'react'; -import styles from './ContentPage.less'; +import styles from './ContentPage.css'; import withStyles from '../../decorators/withStyles'; @withStyles(styles) diff --git a/src/components/ContentPage/ContentPage.less b/src/components/ContentPage/ContentPage.less @@ -1,11 +0,0 @@ -/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ - -@import '../variables.less'; - -.ContentPage { - &-container { - margin: 0 auto; - padding: 0 0 40px; - max-width: @max-content-width; - } -} diff --git a/src/components/ErrorPage/ErrorPage.css b/src/components/ErrorPage/ErrorPage.css @@ -0,0 +1,46 @@ +/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ + +* { + margin: 0; + line-height: 1.2; +} + +html { + display: table; + width: 100%; + height: 100%; + color: #888; + text-align: center; + font-family: sans-serif; +} + +body { + display: table-cell; + margin: 2em auto; + vertical-align: middle; +} + +h1 { + color: #555; + font-weight: 400; + font-size: 2em; +} + +p { + margin: 0 auto; + width: 280px; +} + +@media only screen and (max-width: 280px) { + + body, p { + width: 95%; + } + + h1 { + font-size: 1.5em; + margin: 0 0 0.3em; + + } + +} diff --git a/src/components/ErrorPage/ErrorPage.js b/src/components/ErrorPage/ErrorPage.js @@ -2,7 +2,7 @@ import React, { PropTypes } from 'react'; import withStyles from '../../decorators/withStyles'; -import styles from './ErrorPage.less'; +import styles from './ErrorPage.css'; @withStyles(styles) class ErrorPage { diff --git a/src/components/ErrorPage/ErrorPage.less b/src/components/ErrorPage/ErrorPage.less @@ -1,42 +0,0 @@ -/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ - -* { - margin: 0; - line-height: 1.2; -} - -html { - display: table; - width: 100%; - height: 100%; - color: #888; - text-align: center; - font-family: sans-serif; -} - -body { - display: table-cell; - margin: 2em auto; - vertical-align: middle; -} - -h1 { - color: #555; - font-weight: 400; - font-size: 2em; -} - -p { - margin: 0 auto; - width: 280px; -} - -@media only screen and (max-width: 280px) { - body, p { - width: 95%; - } - h1 { - font-size: 1.5em; - margin: 0 0 0.3em; - } -} diff --git a/src/components/Feedback/Feedback.css b/src/components/Feedback/Feedback.css @@ -0,0 +1,33 @@ +/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ + +@import '../variables.css'; + +.Feedback { + background: #f5f5f5; + color: #333; +} + +.Feedback-container { + margin: 0 auto; + padding: 20px 8px; + max-width: var(--max-content-width); + text-align: center; + font-size: 1.5em; /* ~24px */ +} + +.Feedback-link, +.Feedback-link:active, +.Feedback-link:hover, +.Feedback-link:visited { + color: #333; + text-decoration: none; +} + +.Feedback-link:hover { + text-decoration: underline; +} + +.Feedback-spacer { + padding-right: 15px; + padding-left: 15px; +} diff --git a/src/components/Feedback/Feedback.js b/src/components/Feedback/Feedback.js @@ -1,7 +1,7 @@ /*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ import React from 'react'; -import styles from './Feedback.less'; +import styles from './Feedback.css'; import withStyles from '../../decorators/withStyles'; @withStyles(styles) diff --git a/src/components/Feedback/Feedback.less b/src/components/Feedback/Feedback.less @@ -1,35 +0,0 @@ -/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ - -@import '../variables.less'; - -.Feedback { - background: #f5f5f5; - color: #333; - - &-container { - margin: 0 auto; - padding: 20px 8px; - max-width: @max-content-width; - text-align: center; - font-size: 1.5em; // ~24px - } - - &-link { - &, - &:active, - &:hover, - &:visited { - color: #333; - text-decoration: none; - } - - &:hover { - text-decoration: underline; - } - } - - &-spacer { - padding-right: 15px; - padding-left: 15px; - } -} diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css @@ -0,0 +1,44 @@ +/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ + +@import '../variables.css'; + +.Footer { + background: #333; + color: #fff; +} + +.Footer-container { + margin: 0 auto; + padding: 20px 15px; + max-width: var(--max-content-width); + text-align: center; +} + +.Footer-text { + color: rgba(255, 255, 255, .5); +} + +.Footer-text--muted { + color: rgba(255, 255, 255, .3); +} + +.Footer-spacer { + color: rgba(255, 255, 255, .3); +} + +.Footer-text, +.Footer-link { + padding: 2px 5px; + font-size: 1em; +} + +.Footer-link, +.Footer-link:active, +.Footer-link:visited { + color: rgba(255, 255, 255, .6); + text-decoration: none; +} + +.Footer-link:hover { + color: rgba(255, 255, 255, 1); +} diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js @@ -1,7 +1,7 @@ /*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ import React, { PropTypes } from 'react'; -import styles from './Footer.less'; +import styles from './Footer.css'; import withViewport from '../../decorators/withViewport'; import withStyles from '../../decorators/withStyles'; import Link from '../../utils/Link'; diff --git a/src/components/Footer/Footer.less b/src/components/Footer/Footer.less @@ -1,46 +0,0 @@ -/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ - -@import '../variables.less'; - -.Footer { - background: #333; - color: #fff; - - &-container { - margin: 0 auto; - padding: 20px 15px; - max-width: @max-content-width; - text-align: center; - } - - &-text { - color: rgba(255, 255, 255, .5); - - &--muted { - color: rgba(255, 255, 255, .3); - } - } - - &-spacer { - color: rgba(255, 255, 255, .3); - } - - &-text, - &-link { - padding: 2px 5px; - font-size: 1em; - } - - &-link { - &, - &:active, - &:visited { - color: rgba(255, 255, 255, .6); - text-decoration: none; - } - - &:hover { - color: rgba(255, 255, 255, 1); - } - } -} diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css @@ -0,0 +1,52 @@ +/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ + +@import '../variables.css'; + +:root { + --brand-color: #61dafb; +} + +.Header { + background: #373277; + color: #fff; +} + +.Header-container { + margin: 0 auto; + padding: 20px 0; + max-width: var(--max-content-width); +} + +.Header-brand { + color: color(var(--brand-color) lightness(+10%)); + text-decoration: none; + font-size: 1.75em; /* ~28px */ +} + +.Header-brandTxt { + margin-left: 10px; +} + +.Header-nav { + float: right; + margin-top: 6px; +} + +.Header-banner { + text-align: center; +} + +.Header-bannerTitle { + margin: 0; + padding: 10px; + font-weight: normal; + font-size: 4em; + line-height: 1em; +} + +.Header-bannerDesc { + padding: 0; + color: rgba(255, 255, 255, .5); + font-size: 1.25em; + margin: 0; +} diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js @@ -1,7 +1,7 @@ /*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ import React from 'react'; -import styles from './Header.less'; +import styles from './Header.css'; import withStyles from '../../decorators/withStyles'; import Link from '../../utils/Link'; import Navigation from '../Navigation'; diff --git a/src/components/Header/Header.less b/src/components/Header/Header.less @@ -1,54 +0,0 @@ -/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ - -@import '../variables.less'; - -@brand-color: #61dafb; - -.Header { - background: #373277; - color: #fff; - - &-container { - margin: 0 auto; - padding: 20px 0; - max-width: @max-content-width; - } - - &-brand { - color: lighten(@brand-color, 10%); - text-decoration: none; - font-size: 1.75em; // ~28px - } - - &-brandImg { - - } - - &-brandTxt { - margin-left: 10px; - } - - &-nav { - float: right; - margin-top: 6px; - } - - &-banner { - text-align: center; - } - - &-bannerTitle { - margin: 0; - padding: 10px; - font-weight: normal; - font-size: 4em; - line-height: 1em; - } - - &-bannerDesc { - padding: 0; - color: rgba(255, 255, 255, .5); - font-size: 1.25em; - margin: 0; - } -} diff --git a/src/components/LoginPage/LoginPage.css b/src/components/LoginPage/LoginPage.css @@ -0,0 +1,9 @@ +/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ + +@import '../variables.css'; + +.LoginPage-container { + margin: 0 auto; + padding: 0 0 40px; + max-width: var(--max-content-width); +} diff --git a/src/components/LoginPage/LoginPage.js b/src/components/LoginPage/LoginPage.js @@ -1,7 +1,7 @@ /*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ import React, { PropTypes } from 'react'; -import styles from './LoginPage.less'; +import styles from './LoginPage.css'; import withStyles from '../../decorators/withStyles'; @withStyles(styles) diff --git a/src/components/LoginPage/LoginPage.less b/src/components/LoginPage/LoginPage.less @@ -1,11 +0,0 @@ -/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ - -@import '../variables.less'; - -.LoginPage { - &-container { - margin: 0 auto; - padding: 0 0 40px; - max-width: @max-content-width; - } -} diff --git a/src/components/Navigation/Navigation.css b/src/components/Navigation/Navigation.css @@ -0,0 +1,34 @@ +/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ + +.Navigation-link { + display: inline-block; + padding: 3px 8px; + text-decoration: none; + font-size: 1.125em; /* ~18px */ +} + +.Navigation-link, +.Navigation-link:active, +.Navigation-link:visited { + color: rgba(255, 255, 255, .6); +} + +.Navigation-link:hover { + color: rgba(255, 255, 255, 1); +} + +.Navigation-link--highlight { + margin-right: 8px; + margin-left: 8px; + border-radius: 3px; + background: rgba(0, 0, 0, .15); + color: #fff; +} + +.Navigation-link--highlight:hover { + background: rgba(0, 0, 0, .3); +} + +.Navigation-spacer { + color: rgba(255, 255, 255, .3); +} diff --git a/src/components/Navigation/Navigation.js b/src/components/Navigation/Navigation.js @@ -2,7 +2,7 @@ import React, { PropTypes } from 'react'; import classNames from 'classnames'; -import styles from './Navigation.less'; +import styles from './Navigation.css'; import withStyles from '../../decorators/withStyles'; import Link from '../../utils/Link'; diff --git a/src/components/Navigation/Navigation.less b/src/components/Navigation/Navigation.less @@ -1,37 +0,0 @@ -/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ - -.Navigation { - - &-link { - display: inline-block; - padding: 3px 8px; - text-decoration: none; - font-size: 1.125em; // ~18px - - &, - &:active, - &:visited { - color: rgba(255, 255, 255, .6); - } - - &:hover { - color: rgba(255, 255, 255, 1); - } - - &--highlight { - margin-right: 8px; - margin-left: 8px; - border-radius: 3px; - background: rgba(0, 0, 0, .15); - color: #fff; - - &:hover { - background: rgba(0, 0, 0, .3); - } - } - } - - &-spacer { - color: rgba(255, 255, 255, .3); - } -} diff --git a/src/components/NotFoundPage/NotFoundPage.css b/src/components/NotFoundPage/NotFoundPage.css @@ -0,0 +1,45 @@ +/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ + +* { + margin: 0; + line-height: 1.2; +} + +html { + display: table; + width: 100%; + height: 100%; + color: #888; + text-align: center; + font-family: sans-serif; +} + +body { + display: table-cell; + margin: 2em auto; + vertical-align: middle; +} + +h1 { + color: #555; + font-weight: 400; + font-size: 2em; +} + +p { + margin: 0 auto; + width: 280px; +} + +@media only screen and (max-width: 280px) { + + body, p { + width: 95%; + } + + h1 { + font-size: 1.5em; + margin: 0 0 0.3em; + } + +} diff --git a/src/components/NotFoundPage/NotFoundPage.js b/src/components/NotFoundPage/NotFoundPage.js @@ -2,7 +2,7 @@ import React, { PropTypes } from 'react'; import withStyles from '../../decorators/withStyles'; -import styles from './NotFoundPage.less'; +import styles from './NotFoundPage.css'; @withStyles(styles) class NotFoundPage { diff --git a/src/components/NotFoundPage/NotFoundPage.less b/src/components/NotFoundPage/NotFoundPage.less @@ -1,42 +0,0 @@ -/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ - -* { - margin: 0; - line-height: 1.2; -} - -html { - display: table; - width: 100%; - height: 100%; - color: #888; - text-align: center; - font-family: sans-serif; -} - -body { - display: table-cell; - margin: 2em auto; - vertical-align: middle; -} - -h1 { - color: #555; - font-weight: 400; - font-size: 2em; -} - -p { - margin: 0 auto; - width: 280px; -} - -@media only screen and (max-width: 280px) { - body, p { - width: 95%; - } - h1 { - font-size: 1.5em; - margin: 0 0 0.3em; - } -} diff --git a/src/components/RegisterPage/RegisterPage.css b/src/components/RegisterPage/RegisterPage.css @@ -0,0 +1,9 @@ +/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ + +@import '../variables.css'; + +.RegisterPage-container { + margin: 0 auto; + padding: 0 0 40px; + max-width: var(--max-content-width); +} diff --git a/src/components/RegisterPage/RegisterPage.js b/src/components/RegisterPage/RegisterPage.js @@ -2,7 +2,7 @@ import React, { PropTypes } from 'react'; import withStyles from '../../decorators/withStyles'; -import styles from './RegisterPage.less'; +import styles from './RegisterPage.css'; @withStyles(styles) class RegisterPage { diff --git a/src/components/RegisterPage/RegisterPage.less b/src/components/RegisterPage/RegisterPage.less @@ -1,11 +0,0 @@ -/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ - -@import '../variables.less'; - -.RegisterPage { - &-container { - margin: 0 auto; - padding: 0 0 40px; - max-width: @max-content-width; - } -} diff --git a/src/components/TextBox/TextBox.css b/src/components/TextBox/TextBox.css @@ -0,0 +1,4 @@ +/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ + +.TextBox { } +.TextBox-input { } diff --git a/src/components/TextBox/TextBox.js b/src/components/TextBox/TextBox.js @@ -2,7 +2,7 @@ import React, { PropTypes } from 'react'; import withStyles from '../../decorators/withStyles'; -import styles from './TextBox.less'; +import styles from './TextBox.css'; @withStyles(styles) class TextBox { diff --git a/src/components/TextBox/TextBox.less b/src/components/TextBox/TextBox.less @@ -1,5 +0,0 @@ -/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ - -.TextBox { - &-input {} -} diff --git a/src/components/variables.css b/src/components/variables.css @@ -0,0 +1,43 @@ +/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ + +:root { + + /* + * Colors + * ======================================================================== */ + + --white-base: hsl(255, 255, 255); + --gray-darker: color(black lightness(+13.5%)); /* #222 */ + --gray-dark: color(black lightness(+25%)); /* #404040 */ + --gray: color(black lightness(+33.5%)); /* #555 */ + --gray-light: color(black lightness(+46.7%)); /* #777 */ + --gray-lighter: color(black lightness(+93.5%)); /* #eee */ + + /* + * Typography + * ======================================================================== */ + + --font-family-base: 'Segoe UI', 'HelveticaNeue-Light', sans-serif; + + /* + * Layout + * ======================================================================== */ + + --max-content-width: 1000px; + + /* + * Media queries breakpoints + * ======================================================================== */ + + --screen-xs-min: 480px; /* Extra small screen / phone */ + --screen-sm-min: 768px; /* Small screen / tablet */ + --screen-md-min: 992px; /* Medium screen / desktop */ + --screen-lg-min: 1200px; /* Large screen / wide desktop */ + + /* + * Animations + * ======================================================================== */ + + --animation-swift-out: .45s cubic-bezier(0.3, 1, 0.4, 1) 0s; + +} diff --git a/src/components/variables.less b/src/components/variables.less @@ -1,41 +0,0 @@ -/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ - -// -// Colors -// ----------------------------------------------------------------------------- - -@white-base: hsl(255, 255, 255); - -@gray-base: hsl(0, 0, 0); -@gray-darker: lighten(@gray-base, 13.5%); // #222 -@gray-dark: lighten(@gray-base, 25%); // #404040 -@gray: lighten(@gray-base, 33.5%); // #555 -@gray-light: lighten(@gray-base, 46.7%); // #777 -@gray-lighter: lighten(@gray-base, 93.5%); // #eee - -// -// Typography -// ----------------------------------------------------------------------------- - -@font-family-base: 'Segoe UI', 'HelveticaNeue-Light', sans-serif; - -// -// Layout -// ----------------------------------------------------------------------------- - -@max-content-width: 1000px; - -// -// Media queries breakpoints -// ----------------------------------------------------------------------------- - -@screen-xs-min: 480px; // Extra small screen / phone -@screen-sm-min: 768px; // Small screen / tablet -@screen-md-min: 992px; // Medium screen / desktop -@screen-lg-min: 1200px; // Large screen / wide desktop - -// -// Animations -// ----------------------------------------------------------------------------- - -@animation-swift-out: .45s cubic-bezier(0.3, 1, 0.4, 1) 0s; diff --git a/webpack.config.js b/webpack.config.js @@ -9,7 +9,6 @@ import path from 'path'; import webpack, { DefinePlugin, BannerPlugin } from 'webpack'; import merge from 'lodash/object/merge'; -import autoprefixer from 'autoprefixer-core'; import minimist from 'minimist'; const argv = minimist(process.argv.slice(2)); @@ -65,10 +64,6 @@ const config = { loader: `${STYLE_LOADER}!${CSS_LOADER}!postcss-loader` }, { - test: /\.less$/, - loader: `${STYLE_LOADER}!${CSS_LOADER}!postcss-loader!less-loader` - }, - { test: /\.gif/, loader: 'url-loader?limit=10000&mimetype=image/gif' }, @@ -95,7 +90,11 @@ const config = { ] }, - postcss: [autoprefixer(AUTOPREFIXER_BROWSERS)] + postcss: [ + require('postcss-nested')(), + require('cssnext')(), + require('autoprefixer-core')(AUTOPREFIXER_BROWSERS) + ] }; //