1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-10 21:30:06 +02:00

Css linting (#66)

* creating css .stylelintrc file

(cherry picked from commit df0a573666151fb522cb203f82a7a6a979fc33cc)

* updating lintfile

(cherry picked from commit 623ad22d69566a912988239c05d2f803e735362f)

* ignore base bootstrap styles

(cherry picked from commit 0ea94926a004367a67983b08a8ea47c974ef6e49)

* Working on making css inline with css linting

(cherry picked from commit 259fdfcaf9ae280e664471c7d5278214d991168e)

* removing generic class names and nesting for clear names without nesting

(cherry picked from commit d0427c2c09771df049ed9ab4e7b5d2f2076106fd)

* making components compatable with new css lint

(cherry picked from commit b147f157c3b9b39708a750f281d8278211454137)

* updating csslint file

(cherry picked from commit 53b0480476b6e5c4d94763baeaef7d33e9c2342d)

* adding alphabetical ordering to stylelint and updating css files with this

(cherry picked from commit a6b7860efa01e673df20546bb5830587eeb140d6)

* integrate stylelint with webpack

this way we can integrate postcss plugins

# Conflicts:
#	ui/yarn.lock

* exit process with 1, when stylelint finds issues

* listen to unhandled rejection from stylelint

* use stylelintignore

* fix stylelint raised issues
This commit is contained in:
Sérgio Ramos 2016-11-02 17:34:08 +00:00 committed by Tom Gallacher
parent e8e3f0b3ac
commit 6a994e05f6
29 changed files with 801 additions and 248 deletions

8
ui/.stylelintignore Normal file
View File

@ -0,0 +1,8 @@
/src/components/base/*.css
/node_modules
coverage
.nyc_output
docs/static
static
webpack/embed-markdown-loader

50
ui/.stylelintrc Normal file
View File

@ -0,0 +1,50 @@
{
"extends": "stylelint-config-standard",
"rules": {
"color-hex-case": "upper",
"color-hex-length": "long",
"font-family-name-quotes": "always-where-recommended",
"string-quotes": "double",
"value-list-comma-space-after": "always",
"custom-property-no-outside-root": true,
"property-no-unknown": [true, {
"ignoreProperties": [
"",
"composes"
]
}],
"declaration-colon-space-after": "always",
"declaration-no-important": true,
"declaration-block-no-duplicate-properties": true,
"declaration-block-properties-order": "alphabetical",
"declaration-block-semicolon-newline-after": "always",
"block-closing-brace-newline-after": "always-single-line",
"block-closing-brace-newline-before": "always",
"block-no-single-line": true,
"block-opening-brace-newline-after": "always",
"selector-attribute-quotes": "always",
"selector-max-compound-selectors": 3,
"selector-no-attribute": true,
"selector-no-id": true,
"selector-no-universal": true,
"selector-pseudo-class-parentheses-space-inside": "always",
"selector-list-comma-newline-before": "never-multi-line",
"selector-list-comma-space-before": "always-single-line",
"media-feature-parentheses-space-inside": "always",
"at-rule-name-space-after": "always",
"at-rule-no-unknown": [true, {
"ignoreAtRules": [
"/mixin|for/",
""
]
}],
"max-nesting-depth": 3,
"no-descending-specificity": true,
"no-duplicate-selectors": true,
"no-unknown-animations": true,
"custom-property-empty-line-before": null,
"selector-pseudo-class-no-unknown": [true, {
"ignorePseudoClasses": ["global", "$"]
}]
}
}

View File

@ -54,6 +54,7 @@ clean:
.PHONY: lint
lint:
$(bindir)/eslint .
./scripts/stylelint
.PHONY: lint-ci
lint-ci:

View File

@ -53,6 +53,7 @@
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"json-loader": "^0.5.4",
"lodash.get": "^4.4.2",
"memory-fs": "^0.3.0",
"nyc": "^8.3.1",
"param-case": "^2.1.0",
"postcss-at-rules-variables": "0.0.25",
@ -72,6 +73,9 @@
"react-router": "^4.0.0-alpha.4",
"st": "^1.2.0",
"style-loader": "^0.13.1",
"stylelint": "^7.5.0",
"stylelint-config-standard": "^14.0.0",
"stylelint-webpack-plugin": "^0.4.0",
"tap-xunit": "^1.4.0",
"title-case": "^2.1.0",
"webpack": "^2.1.0-beta.25",

32
ui/scripts/stylelint Executable file
View File

@ -0,0 +1,32 @@
#!/usr/bin/env node
const StyleLintPlugin = require('stylelint-webpack-plugin');
const webpack = require('webpack');
const MemoryFS = require('memory-fs');
const config = require('../webpack');
const mfs = new MemoryFS();
const compiler = webpack(Object.assign(config, {
plugins: config.plugins.concat([
new StyleLintPlugin({
configFile: '.stylelintrc',
files: [
'**/*.css'
],
failOnError: true
})
])
}));
mfs.mkdirpSync(config.output.path);
compiler.outputFileSystem = mfs;
compiler.run((err, stats) => {
if (err) {
throw err;
}
});
process.on('unhandledRejection', () => {
process.exit(1);
});

View File

@ -1,10 +1,10 @@
.avatar {
border-radius: 50%;
height: remCalc(50);
height: remcalc(50);
overflow: hidden;
text-align: center;
width: remCalc(50);
position: relative;
text-align: center;
width: remcalc(50);
}
.letter {
@ -12,7 +12,6 @@
}
.picture {
composes: verticle_align_center from "../../shared/composers.css";
max-width: 60%;
composes: verticle_align_center from '../../shared/composers.css';
}

View File

@ -31,8 +31,8 @@
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #373a3c;
background-color: #fff;
color: #373A3C;
background-color: #FFFFFF;
& :global {
@ -593,4 +593,3 @@
}
}
}

View File

@ -3,11 +3,11 @@
:root {
--primary-background: ~colors.brandPrimary;
--primary-border: #2532bb;
--primary-color: #ffffff;
--primary-border: #2532BB;
--primary-color: #FFFFFF;
--secondary-backgroud: #ffffff;
--secondary-border: #d8d8d8;
--secondary-backgroud: #FFFFFF;
--secondary-border: #D8D8D8;
--secondary-color: #646464;
--inactive-background: #F9F9F9;
@ -22,12 +22,12 @@
}
.button {
border-radius: remCalc(~boxes.borderRadius);
border-radius: remcalc(~boxes.borderRadius);
box-shadow: ~boxes.bottomShaddow;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: remCalc(16);
min-width: remCalc(120);
padding: remCalc(18 24);
font-size: remcalc(16);
min-width: remcalc(120);
padding: remcalc(18 24);
&.primary {
@add-mixin button var(--primary-background), var(--primary-border), var(--primary-color);

View File

@ -1,8 +1,3 @@
input[type='checkbox'] {
&.checkbox {
}
}
.label {
color: #646464;
}

View File

@ -17,21 +17,21 @@
@define-mixin viewport $size {
&.$(size) {
flex-grow: 1;
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
@for $i from 1 to var(--grid-columns) {
&.$(size)-$i {
flex-basis: calc( ($i / var(--grid-columns)) * 100%);
max-width: calc( ($i / var(--grid-columns)) * 100%);
flex-basis: calc(($i / var(--grid-columns)) * 100%);
max-width: calc(($i / var(--grid-columns)) * 100%);
}
}
@for $i from 0 to var(--grid-columns) {
&.$(size)-offset-$i {
margin-left: calc( ($i / var(--grid-columns)) * 100%);
margin-left: calc(($i / var(--grid-columns)) * 100%);
}
}
}
@ -39,8 +39,8 @@
.column {
box-sizing: border-box;
flex: 0 0 auto;
padding-right: var(--half-gutter-width, 0.5rem);
padding-left: var(--half-gutter-width, 0.5rem);
padding-right: var(--half-gutter-width, 0.5rem);
&.reverse {
flex-direction: column-reverse;
@ -48,15 +48,15 @@
@mixin viewport xs;
@media (--sm-viewport) {
@media ( --sm-viewport ) {
@mixin viewport sm;
}
@media (--md-viewport) {
@media ( --md-viewport ) {
@mixin viewport md;
}
@media (--lg-viewport) {
@media ( --lg-viewport ) {
@mixin viewport lg;
}
}

View File

@ -11,32 +11,31 @@
--container-sm: ~sizes.containerSm;
}
@custom-media --sm-viewport ~breakpoints.sm;
@custom-media --md-viewport ~breakpoints.md;
@custom-media --lg-viewport ~breakpoints.lg;
.container-fluid, .container {
margin-right: auto;
.container-fluid,
.container {
margin-left: auto;
margin-right: auto;
}
.container-fluid {
padding-right: var(--outer-margin);
padding-left: var(--outer-margin);
padding-right: var(--outer-margin);
}
.container {
@media (--sm-viewport) {
@media ( --sm-viewport ) {
width: var(--container-sm, 46rem);
}
@media (--md-viewport) {
@media ( --md-viewport ) {
width: var(--container-md, 61rem);
}
@media (--lg-viewport) {
@media ( --lg-viewport ) {
width: var(--container-lg, 71rem);
}
}

View File

@ -1,3 +1,5 @@
@import "../../shared/mixins.css";
~boxes: "../../shared/constants.js";
~colors: "../../shared/constants.js";
@ -5,21 +7,20 @@
--background-color: ~colors.background;
--border-color: ~colors.border;
--border-selected-color: ~colors.borderSelected;
--border-radius: remCalc(~boxes.borderRadius);
--border-radius: remcalc(~boxes.borderRadius);
--inset-box-shadow: ~boxes.insetShaddow;
}
.input {
background: var(--background-color);
border: 1px solid var(--border-color);
box-shadow: var(--inset-box-shadow);
border-radius: var(--border-radius);
height: 50px;
width: 100%;
display: block;
visibility: visible;
height: 50px;
padding-left: 15px;
padding-right: 15px;
visibility: visible;
width: 100%;
@add-mixin create-base-box-properties;
&:focus {
border-color: var(--border-selected-color);

View File

@ -16,7 +16,7 @@ const Pagination = ({
const cn = classNames(
child.props.className,
child.props.active ? styles.active : '',
styles.li
styles.pagination_item
);
return (
@ -28,7 +28,7 @@ const Pagination = ({
return (
<nav aria-label={label} className={cn}>
<ul className={styles.ul}>
<ul className={styles.paginatation_list}>
{pages}
</ul>
</nav>

View File

@ -1,55 +1,50 @@
@import "../../shared/mixins.css";
~boxes: "../../shared/constants.js";
~colors: "../../shared/constants.js";
:root {
--border-checked: ~boxes.border.checked;
--border-unchecked: ~boxes.border.unchecked;
--border-radius: remCalc(~boxes.borderRadius);
--bottom-shaddow: ~boxes.bottomShaddow;
--border-checked: ~boxes.border.checked;
--border-unchecked: ~boxes.border.unchecked;
--border-radius: remcalc(~boxes.borderRadius);
--bottom-shaddow: ~boxes.bottomShaddow;
}
.pagination {
.paginatation_list {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
& .ul {
display: inline;
list-style: none;
.pagination_item {
align-items: center;
cursor: pointer;
display: flex;
float: left;
height: 50px;
justify-content: center;
margin-right: 10px;
min-width: 50px;
padding-left: 15px;
padding-right: 15px;
position: relative;
& .li {
cursor: pointer;
@add-mixin create-base-box-properties;
height: 50px;
min-width: 50px;
padding-left: 15px;
padding-right: 15px;
margin-right: 10px;
&:last-child {
margin-right: inherit;
}
border: var(--border-unchecked);
box-shadow: var(--bottom-shaddow);
border-radius: var(--border-radius);
&:not( .active ):hover {
border: var(--border-checked);
}
position: relative;
float: left;
& a:hover {
text-decoration: none;
}
display: flex;
justify-content: center;
align-items: center;
&:last-child {
margin-right: inherit;
}
&:not(.active):hover {
border: var(--border-checked);
}
& a:hover {
text-decoration: none
}
&.active {
cursor: default;
}
}
&.active {
cursor: default;
}
}

View File

@ -2,21 +2,20 @@
~colors: "../../shared/constants.js";
:root {
--border-checked: ~boxes.border.checked;
--border-unchecked: ~boxes.border.unchecked;
--border-radius: remCalc(~boxes.borderRadius);
--bottom-shaddow: ~boxes.bottomShaddow;
--border-checked: ~boxes.border.checked;
--border-unchecked: ~boxes.border.unchecked;
--border-radius: remcalc(~boxes.borderRadius);
--bottom-shaddow: ~boxes.bottomShaddow;
}
.group {
& .item {
cursor: pointer;
background: #FFFFFF;
border: var(--border-unchecked);
box-shadow: var(--bottom-shaddow);
border-radius: 4pxvar(--border-radius);
margin-bottom: remCalc(15);
padding: remCalc(25);
cursor: pointer;
margin-bottom: remcalc(15);
padding: remcalc(25);
@add-mixin create-base-box-properties;
&:last-child {
margin-bottom: initial;

View File

@ -1,10 +1,10 @@
@import '../../shared/mixins.css';
@import "../../shared/mixins.css";
:root {
--radio-radius: 20px;
--radio-border-size: calc( var(--radio-radius) / 4 );
--radio-border-size: calc(var(--radio-radius) / 4);
--dot-color: #646464;
--border-color: #cfd1d1;
--border-color: #CFD1D1;
}
.radio {
@ -15,8 +15,8 @@
}
& .span {
margin-left: remCalc(30);
margin-right: remCalc(20);
margin-left: remcalc(30);
margin-right: remcalc(20);
@add-mixin pseduo-element before, var(--radio-radius), var(--radio-radius), -1px, auto, auto, -30px {
border: var(--radio-border-size) solid white;
@ -25,11 +25,11 @@
}
}
& .input[type="radio"] {
& .input {
display: none;
visibility: hidden;
&:checked ~ .span:before {
&:checked ~ .span::before {
background: var(--dot-color);
}
}

View File

@ -10,7 +10,7 @@ const RangeSlider = ({
const slider = classNames(
className,
styles.input
styles.range_input
);
// TODO: Get rid of inline styles

View File

@ -1,4 +1,4 @@
@import '../../shared/mixins.css';
@import "../../shared/mixins.css";
~colors: "../../shared/constants.js";
~boxes: "../../shared/constants.js";
@ -14,24 +14,22 @@
MIXINS - Defining Mixins for slider
*/
@define-mixin range-track {
animate: 0.2s;
background: var(--primary-background);
cursor: pointer;
height: remCalc(6);
height: remcalc(6);
width: 100%;
@add-mixin create-base-box-properties remCalc(25)
@add-mixin create-base-box-properties remcalc(25);
}
@define-mixin range-thumb {
background: #ffffff;
-webkit-appearance: none;
background: #FFFFFF;
cursor: pointer;
height: remCalc(24);
height: remcalc(24);
position: relative;
top: -10px;
width: remCalc(36);
-webkit-appearance: none;
width: remcalc(36);
@add-mixin create-base-box-properties;
}
@ -39,13 +37,15 @@
@define-mixin range-lower {
background: var(--primary-background);
height: 6px;
@add-mixin create-base-box-properties remCalc(50), none;
@add-mixin create-base-box-properties remcalc(50), none;
}
@define-mixin range-upper {
background: #e6e6e6;
background: #E6E6E6;
height: 6px;
@add-mixin create-base-box-properties remCalc(50);
@add-mixin create-base-box-properties remcalc(50);
}
/*
@ -53,20 +53,14 @@
TODO: Complied incorrectly when selectors are in a comma seperated list
*/
.input[type="range"] {
border: none;
box-shadow:none;
margin: remCalc(10 0);
width: 100%;
.range_input {
-webkit-appearance: none;
// Try and figure out why display none is being set in doc.css
display: block;
border: none;
box-shadow: none;
display: block; /* Try and figure out why display none is being set in doc.css */
margin: remcalc(10 0);
visibility: visible;
&:focus {
outline: none;
}
width: 100%;
&::-moz-focus-outer {
border: 0;
@ -96,30 +90,30 @@
@add-mixin range-thumb;
}
&:focus::-webkit-slider-runnable-track {
background: var(--primary-background);
}
&::-moz-range-progress {
@add-mixin range-lower
@add-mixin range-lower;
}
&::-ms-fill-lower {
@add-mixin range-lower
}
&:focus::-ms-fill-lower {
@add-mixin range-lower
}
&::-moz-range-track {
@add-mixin range-upper;
@add-mixin range-lower;
}
&::-ms-fill-upper {
@add-mixin range-upper;
}
&:focus {
outline: none;
}
&:focus::-webkit-slider-runnable-track {
background: var(--primary-background);
}
&:focus::-ms-fill-lower {
@add-mixin range-lower;
}
&:focus::-ms-fill-upper {
@add-mixin range-upper;
}

View File

@ -65,8 +65,8 @@
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
margin-right: var(--gutter-compensation, -0.5rem);
margin-left: var(--gutter-compensation, -0.5rem);
margin-right: var(--gutter-compensation, -0.5rem);
&.reverse {
flex-direction: row-reverse;
@ -74,15 +74,15 @@
@mixin viewport xs;
@media (--sm-viewport) {
@media ( --sm-viewport ) {
@mixin viewport sm;
}
@media (--md-viewport) {
@media ( --md-viewport ) {
@mixin viewport md;
}
@media (--lg-viewport) {
@media ( --lg-viewport ) {
@mixin viewport lg;
}
}

View File

@ -1,7 +1,10 @@
.select {
composes: input from '../input/style.css';
composes: input from "../input/style.css";
/* select[multiple] is valid CSS syntax - not added to lint library yet */
/* stylelint-disable */
&[multiple] {
/* stylelint-enable */
padding-left: 0;
padding-right: 0;
@ -11,15 +14,15 @@
width: 100%;
}
/* this doesn't seem to work, research further
/* this doesn't seem to work, research further
&:-internal-list-box :global option:checked,
& :global option:checked {
background-color: white;
background-color: white;
}
*/
*/
}
}
.label {
composes: label from '../input/style.css';
composes: label from "../input/style.css";
}

View File

@ -25,7 +25,7 @@ const Tab = ({
<div className={cn}>
<input
checked={checked}
className={styles.input}
className={styles.radio_input}
defaultChecked={defaultChecked}
disabled={disabled}
id={tabId}

View File

@ -1,12 +1,12 @@
@import '../../shared/mixins.css';
@import "../../shared/mixins.css";
~boxes: "../../shared/constants.js";
~colors: "../../shared/constants.js";
:root {
--border-unchecked: ~boxes.border.unchecked;
--border-radius: remCalc(~boxes.borderRadius);
--bottom-shaddow: ~boxes.bottomShaddow;
--border-unchecked: ~boxes.border.unchecked;
--border-radius: remcalc(~boxes.borderRadius);
--bottom-shaddow: ~boxes.bottomShaddow;
}
.tab {
@ -17,52 +17,54 @@
border: var(--border-unchecked);
color: #646464;
display: inline-block;
font-size: remCalc(20);
font-size: remcalc(20);
left: 1px;
margin-left: -1px;
padding: remCalc(10);
padding: remcalc(10);
position: relative;
vertical-align: bottom;
}
& .input[type="radio"] {
& .panel {
display: inline-block;
height: 0;
overflow: hidden;
position: relative;
width: 0;
}
& .radio_input {
clip: rect(0 0 0 0);
height: 1px;
opacity: 0;
width: 1px;
@add-mixin move-z -1, fixed;
}
& .panel {
display: inline;
display: inline-block;
overflow: hidden;
position: relative;
height: 0;
width: 0;
@add-mixin move-z -1, fixed;
&:checked {
& + .label {
background: white;
border-bottom-width: 0;
padding-bottom: remcalc(11);
@add-mixin move-z 1;
}
& ~ .panel {
display: inline;
}
}
}
& .content {
background: #FAFAFA;
border: var(--border-unchecked);
box-sizing: border-box;
display: block;
background: white;
padding: remCalc(0 20);
border: var(--border-unchecked);
background: #FAFAFA;
float: left;
font-size: remCalc(16);
margin-top: remCalc(-9);
font-size: remcalc(16);
margin-top: remcalc(-9);
padding: remcalc(0 20);
width: 100%;
}
& .input[type="radio"]:checked + .label {
background: white;
border-bottom-width: 0;
padding-bottom: remCalc(11);
@add-mixin move-z 1;
}
& .input[type="radio"]:checked ~ .panel {
display: inline;
}
}

View File

@ -1,9 +1,9 @@
.tabs {
font-size: 0;
&:after {
&::after {
clear: both;
content: '';
content: "";
display: table;
}
}

View File

@ -8,25 +8,25 @@
~colors: "../../shared/constants.js";
:root {
--background-confirmed: ~colors.confirmation;
--border-confirmed: ~boxes.border.confirmed;
--border-unchecked: ~boxes.border.unchecked;
--border-radius: remCalc(~boxes.borderRadius);
--bottom-shaddow: ~boxes.bottomShaddow;
--background-confirmed: ~colors.confirmation;
--border-confirmed: ~boxes.border.confirmed;
--border-unchecked: ~boxes.border.unchecked;
--border-radius: remcalc(~boxes.borderRadius);
--bottom-shaddow: ~boxes.bottomShaddow;
}
.toggle {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: #464646;
border-radius: var(--border-radius);
width: 5rem;
color: #464646;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
height: 2.5rem;
width: 5rem;
& .btn,
& .label {
height: 2.188rem;
width: 2.188rem;
margin: 0.125rem;
width: 2.188rem;
}
& .label {
@ -36,8 +36,8 @@
& .btn {
background: #FFFFFF;
box-shadow: var(--bottom-shaddow);
border-radius: var(--border-radius);
box-shadow: var(--bottom-shaddow);
}
&.on {
@ -45,8 +45,8 @@
border: var(--border-confirmed);
& .label {
float: right;
color: #FFFFFF;
float: right;
}
& .btn {

View File

@ -6,10 +6,11 @@
}
.content {
cursor: pointer;
border-radius: 4px;
border: var(--border-unchecked);
padding: remCalc(36);
border-radius: 4px;
cursor: pointer;
padding: remcalc(36);
& img {
max-width: 100%;
}

View File

@ -1,8 +1,7 @@
.verticle_align_center {
/* Need to palce position:relative on parent*/
/* Need to palce position:relative on parent */
left: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

View File

@ -1,5 +1,5 @@
module.exports = {
remCalc: function(values) {
remcalc: function(values) {
values = values.replace('px', '').split(' ');
let outputRems = '';

View File

@ -3,10 +3,9 @@
@define-mixin pseduo-element $type, $width:auto, $height:auto, $top:auto, $right:auto, $bottom:auto, $left:auto {
position: relative;
&::$(type) {
&:$( type ) {
bottom: $bottom;
content: '';
content: "";
display: inline-block;
height: $height;
left: $left;

File diff suppressed because it is too large Load Diff