commit 0f193eaabe348cf922083a561ec1cad1f87bf70b
parent 0de4958c4e4f10f0aa998ec9e16eb0a9699560d1
Author: Vladimir Kutepov <frenzzy.man@gmail.com>
Date: Sat, 12 Mar 2016 23:52:47 +0300
Replace csscomb with stylelint
See [stylelint](https://github.com/stylelint/stylelint) and [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard)
- Update styles with new validation rules
- Remove unused `TextBox` component
Diffstat:
16 files changed, 58 insertions(+), 441 deletions(-)
diff --git a/.csscomb.json b/.csscomb.json
@@ -1,303 +0,0 @@
-{
- "always-semicolon": true,
- "block-indent": 2,
- "color-case": "lower",
- "color-shorthand": true,
- "eof-newline": true,
- "leading-zero": false,
- "remove-empty-rulesets": true,
- "space-after-colon": 1,
- "space-after-combinator": 1,
- "space-before-selector-delimiter": 0,
- "space-between-declarations": "\n",
- "space-after-opening-brace": "\n",
- "space-before-closing-brace": "\n",
- "space-before-colon": 0,
- "space-before-combinator": 1,
- "space-before-opening-brace": 1,
- "strip-spaces": true,
- "unitless-zero": true,
- "vendor-prefix-align": true,
- "sort-order": [
- [
- "position",
- "top",
- "right",
- "bottom",
- "left",
- "z-index",
- "display",
- "float",
- "width",
- "min-width",
- "max-width",
- "height",
- "min-height",
- "max-height",
- "-webkit-box-sizing",
- "-moz-box-sizing",
- "box-sizing",
- "-webkit-appearance",
- "padding",
- "padding-top",
- "padding-right",
- "padding-bottom",
- "padding-left",
- "margin",
- "margin-top",
- "margin-right",
- "margin-bottom",
- "margin-left",
- "overflow",
- "overflow-x",
- "overflow-y",
- "-webkit-overflow-scrolling",
- "-ms-overflow-x",
- "-ms-overflow-y",
- "-ms-overflow-style",
- "clip",
- "clear",
- "font",
- "font-family",
- "font-size",
- "font-style",
- "font-weight",
- "font-variant",
- "font-size-adjust",
- "font-stretch",
- "font-effect",
- "font-emphasize",
- "font-emphasize-position",
- "font-emphasize-style",
- "font-smooth",
- "-webkit-hyphens",
- "-moz-hyphens",
- "hyphens",
- "line-height",
- "color",
- "text-align",
- "-webkit-text-align-last",
- "-moz-text-align-last",
- "-ms-text-align-last",
- "text-align-last",
- "text-emphasis",
- "text-emphasis-color",
- "text-emphasis-style",
- "text-emphasis-position",
- "text-decoration",
- "text-indent",
- "text-justify",
- "text-outline",
- "-ms-text-overflow",
- "text-overflow",
- "text-overflow-ellipsis",
- "text-overflow-mode",
- "text-shadow",
- "text-transform",
- "text-wrap",
- "-webkit-text-size-adjust",
- "-ms-text-size-adjust",
- "letter-spacing",
- "-ms-word-break",
- "word-break",
- "word-spacing",
- "-ms-word-wrap",
- "word-wrap",
- "-moz-tab-size",
- "-o-tab-size",
- "tab-size",
- "white-space",
- "vertical-align",
- "list-style",
- "list-style-position",
- "list-style-type",
- "list-style-image",
- "pointer-events",
- "-ms-touch-action",
- "touch-action",
- "cursor",
- "visibility",
- "zoom",
- "flex-direction",
- "flex-order",
- "flex-pack",
- "flex-align",
- "table-layout",
- "empty-cells",
- "caption-side",
- "border-spacing",
- "border-collapse",
- "content",
- "quotes",
- "counter-reset",
- "counter-increment",
- "resize",
- "-webkit-user-select",
- "-moz-user-select",
- "-ms-user-select",
- "-o-user-select",
- "user-select",
- "nav-index",
- "nav-up",
- "nav-right",
- "nav-down",
- "nav-left",
- "background",
- "background-color",
- "background-image",
- "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
- "filter:progid:DXImageTransform.Microsoft.gradient",
- "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
- "filter",
- "background-repeat",
- "background-attachment",
- "background-position",
- "background-position-x",
- "background-position-y",
- "-webkit-background-clip",
- "-moz-background-clip",
- "background-clip",
- "background-origin",
- "-webkit-background-size",
- "-moz-background-size",
- "-o-background-size",
- "background-size",
- "border",
- "border-color",
- "border-style",
- "border-width",
- "border-top",
- "border-top-color",
- "border-top-style",
- "border-top-width",
- "border-right",
- "border-right-color",
- "border-right-style",
- "border-right-width",
- "border-bottom",
- "border-bottom-color",
- "border-bottom-style",
- "border-bottom-width",
- "border-left",
- "border-left-color",
- "border-left-style",
- "border-left-width",
- "border-radius",
- "border-top-left-radius",
- "border-top-right-radius",
- "border-bottom-right-radius",
- "border-bottom-left-radius",
- "-webkit-border-image",
- "-moz-border-image",
- "-o-border-image",
- "border-image",
- "-webkit-border-image-source",
- "-moz-border-image-source",
- "-o-border-image-source",
- "border-image-source",
- "-webkit-border-image-slice",
- "-moz-border-image-slice",
- "-o-border-image-slice",
- "border-image-slice",
- "-webkit-border-image-width",
- "-moz-border-image-width",
- "-o-border-image-width",
- "border-image-width",
- "-webkit-border-image-outset",
- "-moz-border-image-outset",
- "-o-border-image-outset",
- "border-image-outset",
- "-webkit-border-image-repeat",
- "-moz-border-image-repeat",
- "-o-border-image-repeat",
- "border-image-repeat",
- "outline",
- "outline-width",
- "outline-style",
- "outline-color",
- "outline-offset",
- "-webkit-box-shadow",
- "-moz-box-shadow",
- "box-shadow",
- "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
- "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
- "opacity",
- "-ms-interpolation-mode",
- "-webkit-transition",
- "-moz-transition",
- "-ms-transition",
- "-o-transition",
- "transition",
- "-webkit-transition-delay",
- "-moz-transition-delay",
- "-ms-transition-delay",
- "-o-transition-delay",
- "transition-delay",
- "-webkit-transition-timing-function",
- "-moz-transition-timing-function",
- "-ms-transition-timing-function",
- "-o-transition-timing-function",
- "transition-timing-function",
- "-webkit-transition-duration",
- "-moz-transition-duration",
- "-ms-transition-duration",
- "-o-transition-duration",
- "transition-duration",
- "-webkit-transition-property",
- "-moz-transition-property",
- "-ms-transition-property",
- "-o-transition-property",
- "transition-property",
- "-webkit-transform",
- "-moz-transform",
- "-ms-transform",
- "-o-transform",
- "transform",
- "-webkit-transform-origin",
- "-moz-transform-origin",
- "-ms-transform-origin",
- "-o-transform-origin",
- "transform-origin",
- "-webkit-animation",
- "-moz-animation",
- "-ms-animation",
- "-o-animation",
- "animation",
- "-webkit-animation-name",
- "-moz-animation-name",
- "-ms-animation-name",
- "-o-animation-name",
- "animation-name",
- "-webkit-animation-duration",
- "-moz-animation-duration",
- "-ms-animation-duration",
- "-o-animation-duration",
- "animation-duration",
- "-webkit-animation-play-state",
- "-moz-animation-play-state",
- "-ms-animation-play-state",
- "-o-animation-play-state",
- "animation-play-state",
- "-webkit-animation-timing-function",
- "-moz-animation-timing-function",
- "-ms-animation-timing-function",
- "-o-animation-timing-function",
- "animation-timing-function",
- "-webkit-animation-delay",
- "-moz-animation-delay",
- "-ms-animation-delay",
- "-o-animation-delay",
- "animation-delay",
- "-webkit-animation-iteration-count",
- "-moz-animation-iteration-count",
- "-ms-animation-iteration-count",
- "-o-animation-iteration-count",
- "animation-iteration-count",
- "-webkit-animation-direction",
- "-moz-animation-direction",
- "-ms-animation-direction",
- "-o-animation-direction",
- "animation-direction"
- ]
- ]
-}
diff --git a/.csslintrc b/.csslintrc
@@ -1,19 +0,0 @@
-{
- "adjoining-classes": false,
- "box-sizing": false,
- "box-model": false,
- "compatible-vendor-prefixes": false,
- "floats": false,
- "font-sizes": false,
- "gradients": false,
- "important": false,
- "known-properties": false,
- "outline-none": false,
- "qualified-headings": false,
- "regex-selectors": false,
- "shorthand": false,
- "text-indent": false,
- "unique-headings": false,
- "universal-selector": false,
- "unqualified-attributes": false
-}
diff --git a/package.json b/package.json
@@ -53,7 +53,6 @@
"browser-sync": "^2.11.1",
"core-js": "^2.1.4",
"css-loader": "^0.23.1",
- "csscomb": "^3.1.8",
"del": "^2.2.0",
"enzyme": "^2.1.0",
"eslint": "^2.3.0",
@@ -83,6 +82,8 @@
"react-transform-hmr": "^1.0.4",
"redbox-react": "^1.2.2",
"replace": "^0.3.0",
+ "stylelint": "^5.0.1",
+ "stylelint-config-standard": "^4.0.1",
"url-loader": "^0.5.7",
"webpack": "^1.12.14",
"webpack-hot-middleware": "^2.10.0",
@@ -109,11 +110,18 @@
"enzyme"
]
},
+ "stylelint": {
+ "extends": "stylelint-config-standard",
+ "rules": {
+ "string-quotes": "single"
+ }
+ },
"scripts": {
- "lint": "eslint src tools && jscs src tools --verbose",
- "csslint": "csscomb src/components --lint --verbose",
- "csscomb": "csscomb src/components --verbose",
- "test": "eslint src && jest",
+ "eslint": "eslint src tools",
+ "jscs": "jscs src tools --verbose",
+ "stylelint": "stylelint \"src/**/*.scss\" --syntax scss",
+ "lint": "npm run eslint && npm run jscs && npm run stylelint",
+ "test": "npm run lint && jest",
"clean": "babel-node tools/run clean",
"copy": "babel-node tools/run copy",
"bundle": "babel-node tools/run bundle",
diff --git a/src/components/App/App.scss b/src/components/App/App.scss
@@ -112,8 +112,8 @@ textarea {
@media print {
*,
- *:before,
- *:after {
+ *::before,
+ *::after {
background: transparent !important;
color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */
box-shadow: none !important;
@@ -125,12 +125,12 @@ textarea {
text-decoration: underline;
}
- a[href]:after {
- content: " (" attr(href) ")";
+ a[href]::after {
+ content: ' (' attr(href) ')';
}
- abbr[title]:after {
- content: " (" attr(title) ")";
+ abbr[title]::after {
+ content: ' (' attr(title) ')';
}
/*
@@ -138,9 +138,9 @@ textarea {
* or use the `javascript:` pseudo protocol
*/
- a[href^="#"]:after,
- a[href^="javascript:"]:after {
- content: "";
+ a[href^='#']::after,
+ a[href^='javascript:']::after {
+ content: '';
}
pre,
diff --git a/src/components/ContentPage/ContentPage.scss b/src/components/ContentPage/ContentPage.scss
@@ -10,7 +10,8 @@
@import '../variables.scss';
.root {
-
+ padding-left: 20px;
+ padding-right: 20px;
}
.container {
diff --git a/src/components/ErrorPage/ErrorPage.scss b/src/components/ErrorPage/ErrorPage.scss
@@ -40,7 +40,8 @@ p {
@media only screen and (max-width: 280px) {
- body, p {
+ body,
+ p {
width: 95%;
}
diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
@@ -22,16 +22,16 @@
}
.text {
- color: rgba(255, 255, 255, .5);
+ color: rgba(255, 255, 255, 0.5);
}
.textMuted {
composes: text;
- color: rgba(255, 255, 255, .3);
+ color: rgba(255, 255, 255, 0.3);
}
.spacer {
- color: rgba(255, 255, 255, .3);
+ color: rgba(255, 255, 255, 0.3);
}
.text,
@@ -43,7 +43,7 @@
.link,
.link:active,
.link:visited {
- color: rgba(255, 255, 255, .6);
+ color: rgba(255, 255, 255, 0.6);
text-decoration: none;
}
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
@@ -51,7 +51,7 @@ $brand-color: #61dafb;
.bannerDesc {
padding: 0;
- color: rgba(255, 255, 255, .5);
+ color: rgba(255, 255, 255, 0.5);
font-size: 1.25em;
margin: 0;
}
diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss
@@ -8,7 +8,7 @@
*/
.root {
-
+ margin: 0;
}
.link {
@@ -21,7 +21,7 @@
.link,
.link:active,
.link:visited {
- color: rgba(255, 255, 255, .6);
+ color: rgba(255, 255, 255, 0.6);
}
.link:hover {
@@ -32,14 +32,14 @@
margin-right: 8px;
margin-left: 8px;
border-radius: 3px;
- background: rgba(0, 0, 0, .15);
+ background: rgba(0, 0, 0, 0.15);
color: #fff;
}
.highlight:hover {
- background: rgba(0, 0, 0, .3);
+ background: rgba(0, 0, 0, 0.3);
}
.spacer {
- color: rgba(255, 255, 255, .3);
+ color: rgba(255, 255, 255, 0.3);
}
diff --git a/src/components/NotFoundPage/NotFoundPage.scss b/src/components/NotFoundPage/NotFoundPage.scss
@@ -40,7 +40,8 @@ p {
@media only screen and (max-width: 280px) {
- body, p {
+ body,
+ p {
width: 95%;
}
diff --git a/src/components/TextBox/TextBox.js b/src/components/TextBox/TextBox.js
@@ -1,50 +0,0 @@
-/**
- * React Starter Kit (https://www.reactstarterkit.com/)
- *
- * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.txt file in the root directory of this source tree.
- */
-
-import React, { Component, PropTypes } from 'react';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
-import s from './TextBox.scss';
-
-@withStyles(s)
-class TextBox extends Component {
-
- static propTypes = {
- maxLines: PropTypes.number,
- };
-
- static defaultProps = {
- maxLines: 1,
- };
-
- render() {
- return (
- <div className={s.root}>
- {
- this.props.maxLines > 1 ?
- <textarea
- {...this.props}
- className={s.input}
- ref="input"
- key="input"
- rows={this.props.maxLines}
- /> :
- <input
- {...this.props}
- className={s.input}
- ref="input"
- key="input"
- />
- }
- </div>
- );
- }
-
-}
-
-export default TextBox;
diff --git a/src/components/TextBox/TextBox.scss b/src/components/TextBox/TextBox.scss
@@ -1,11 +0,0 @@
-/**
- * React Starter Kit (https://www.reactstarterkit.com/)
- *
- * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.txt file in the root directory of this source tree.
- */
-
-.root { }
-.input { }
diff --git a/src/components/TextBox/package.json b/src/components/TextBox/package.json
@@ -1,6 +0,0 @@
-{
- "name": "TextBox",
- "version": "0.0.0",
- "private": true,
- "main": "./TextBox.js"
-}
diff --git a/src/components/variables.scss b/src/components/variables.scss
@@ -2,36 +2,30 @@
* 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 */
+$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;
+$font-family-base: 'Segoe UI', 'HelveticaNeue-Light', sans-serif;
/*
* Layout
* ========================================================================== */
-$max-content-width: 1000px;
+$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;
+$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 */
diff --git a/src/routes/home/Home.scss b/src/routes/home/Home.scss
@@ -33,6 +33,7 @@
font-size: 1.125em;
}
-.newsTitle, .newsDesc {
+.newsTitle,
+.newsDesc {
display: block;
}
diff --git a/src/routes/login/Login.scss b/src/routes/login/Login.scss
@@ -44,15 +44,15 @@
border: 1px solid #ccc;
border-radius: 0;
background: #fff;
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
color: #616161;
font-size: 18px;
line-height: 1.3333333;
- transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+ transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
&:focus {
border-color: #0074c2;
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 116, 194, .6);
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 116, 194, 0.6);
}
}
@@ -79,7 +79,7 @@
&:focus {
border-color: #0074c2;
- box-shadow: 0 0 8px rgba(0, 116, 194, .6);
+ box-shadow: 0 0 8px rgba(0, 116, 194, 0.6);
}
}
@@ -132,7 +132,7 @@
text-align: center;
font-size: 80%;
- &:before {
+ &::before {
position: absolute;
top: 50%;
left: 50%;
@@ -145,7 +145,7 @@
content: '';
}
- &:after {
+ &::after {
position: absolute;
top: 49%;
z-index: -2;
