Commit 8e650606 authored by Sandro Lutz's avatar Sandro Lutz
Browse files

Add stylelint

parent c10818b0
......@@ -9,7 +9,15 @@ eslint:
before_script:
- npm install
script:
- npm run lint
- npm run eslint
stylelint:
stage: test
image: node:latest
before_script:
- npm install
script:
- npm run stylelint
build_master:
stage: build
......
{
"rules": {
"color-no-invalid-hex": true,
"font-family-no-duplicate-names": true,
"font-family-no-missing-generic-family-keyword": true,
"function-calc-no-unspaced-operator": true,
"string-no-newline": true,
"unit-no-unknown": true,
"property-no-unknown": true,
"declaration-block-no-duplicate-properties": true,
"declaration-block-no-shorthand-property-overrides": true,
"block-no-empty": true,
"selector-pseudo-class-no-unknown": true,
"selector-pseudo-element-no-unknown": true,
"selector-type-no-unknown": true,
"media-feature-name-no-unknown": true,
"at-rule-no-unknown": true,
"comment-no-empty": true,
"no-duplicate-at-import-rules": true,
"no-duplicate-selectors": true,
"no-empty-source": true,
"no-extra-semicolons": true,
"color-named": "never",
"function-url-no-scheme-relative": true,
"function-url-scheme-blacklist": ["ftp"],
"function-url-scheme-whitelist": ["data", "/^http/"],
"number-max-precision": 2,
"shorthand-property-no-redundant-values": true,
"value-no-vendor-prefix": true,
"property-no-vendor-prefix": true,
"declaration-block-no-redundant-longhand-properties": true,
"declaration-block-single-line-max-declarations": 1,
"selector-max-attribute": 2,
"selector-max-empty-lines": 0,
"selector-max-id": 2,
"selector-max-pseudo-class": 1,
"selector-max-universal": 2,
"selector-no-vendor-prefix": true,
"media-feature-name-no-vendor-prefix": true,
"at-rule-no-vendor-prefix": true,
"comment-word-blacklist": ["/^TODO/"],
"max-nesting-depth": 3,
"no-unknown-animations": true,
"color-hex-case": "lower",
"color-hex-length": "short",
"font-family-name-quotes": "always-where-recommended",
"font-weight-notation": "named-where-possible",
"function-comma-newline-after": "always-multi-line",
"function-comma-newline-before": "never-multi-line",
"function-comma-space-after": "always",
"function-comma-space-before": "never",
"function-max-empty-lines": 0,
"function-name-case": "lower",
"function-parentheses-newline-inside": "always-multi-line",
"function-parentheses-space-inside": "never",
"function-url-quotes": ["always", {
except: ["empty"]
}],
"function-whitespace-after": "always",
"number-leading-zero": "never",
"number-no-trailing-zeros": true,
"string-quotes": "single",
"length-zero-no-unit": true,
"unit-case": "lower",
"value-keyword-case": "lower",
"value-list-comma-newline-after": "always-multi-line",
"value-list-comma-newline-before": "never-multi-line",
"value-list-comma-space-after": "always",
"value-list-comma-space-before": "never",
"value-list-max-empty-lines": 0,
"custom-property-empty-line-before": "never",
"property-case": "lower",
"declaration-bang-space-after": "never",
"declaration-bang-space-before": "always",
"declaration-colon-newline-after": "always-multi-line",
"declaration-colon-space-after": "always-single-line",
"declaration-colon-space-before": "never",
"declaration-empty-line-before": "never",
"declaration-block-semicolon-newline-after": "always-multi-line",
"declaration-block-semicolon-newline-before": "never-multi-line",
"declaration-block-semicolon-space-after": "always-single-line",
"declaration-block-semicolon-space-before": "never",
"block-closing-brace-empty-line-before": "never",
"block-closing-brace-newline-after": "always",
"block-closing-brace-newline-before": "always-multi-line",
"block-opening-brace-newline-after": "always-multi-line",
"block-opening-brace-space-after": "always-single-line",
"block-opening-brace-space-before": "always",
"selector-attribute-brackets-space-inside": "never",
"selector-attribute-operator-space-after": "never",
"selector-attribute-operator-space-before": "never",
"selector-attribute-quotes": "always",
"selector-combinator-space-after": "always",
"selector-combinator-space-before": "always",
"selector-descendant-combinator-no-non-space": true,
"selector-pseudo-class-case": "lower",
"selector-pseudo-class-parentheses-space-inside": "never",
"selector-pseudo-element-case": "lower",
"selector-pseudo-element-colon-notation": "single",
"selector-type-case": "lower",
"selector-list-comma-newline-after": "always-multi-line",
"selector-list-comma-newline-before": "never-multi-line",
"selector-list-comma-space-after": "never",
"selector-list-comma-space-before": "never",
"rule-empty-line-before": ["always", {
"except": ["after-single-line-comment", "first-nested"]
}],
"media-feature-colon-space-after": "always",
"media-feature-colon-space-before": "never",
"media-feature-name-case": "lower",
"media-feature-parentheses-space-inside": "never",
"media-feature-range-operator-space-after": "always",
"media-feature-range-operator-space-before": "always",
"media-query-list-comma-newline-after": "never-multi-line",
"media-query-list-comma-newline-before": "never-multi-line",
"media-query-list-comma-space-after": "always",
"media-query-list-comma-space-before": "never",
"at-rule-empty-line-before": ["always", {
"ignore": ["after-comment", "first-nested", "blockless-after-blockless"]
}],
"at-rule-name-case": "lower",
"at-rule-name-newline-after": "always-multi-line",
"at-rule-name-space-after": "always-single-line",
"at-rule-semicolon-newline-after": "always",
"at-rule-semicolon-space-before": "never",
"comment-whitespace-inside": "always",
"indentation": 2,
"max-empty-lines": 1,
"no-eol-whitespace": true,
"no-missing-end-of-source-newline": true
}
}
\ No newline at end of file
......@@ -10,7 +10,9 @@
"start": "webpack -d --watch",
"build": "webpack -p --config webpack.config.prod.js",
"server": "webpack-dev-server --hot --inline",
"lint": "eslint src/**",
"lint": "npm run eslint && npm run stylelint",
"eslint": "eslint src/**",
"stylelint": "stylelint 'src/**/*.less' --synthax less",
"format": "prettier --write '**/*.{js,jsx}'"
},
"repository": {
......@@ -47,6 +49,7 @@
"eslint-import-resolver-webpack": "^0.9.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-prettier": "^2.6.0",
"stylelint": "^9.3.0",
"file-loader": "^1.1.11",
"less": "^3.0.4",
"less-loader": "^4.1.0",
......
......@@ -4,7 +4,7 @@
position: absolute;
top: 0;
left: 0;
background-color: yellow;
background-color: #ff0;
background-size: cover;
background-position: centre-centre;
}
......@@ -11,62 +11,62 @@
@import './jobofferList.less';
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
box-sizing: border-box;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
box-sizing: border-box;
@media @tablet, @mobile {
font-size: 18px;
}
@media @tablet, @mobile {
font-size: 18px;
}
> div {
width: 100%;
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header"
"content"
"footer";
}
> div {
width: 100%;
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-areas:
'header'
'content'
'footer';
}
}
section {
width: 100%;
width: 100%;
&.blue {
background-color: @color-dark-blue;
}
&.blue {
background-color: @color-dark-blue;
}
&.grey {
background-color: @color-grey;
}
&.grey {
background-color: @color-grey;
}
> * {
max-width: @dimension-max-content-width;
padding: 0 1em;
margin: 0 auto;
}
> * {
max-width: @dimension-max-content-width;
padding: 0 1em;
margin: 0 auto;
}
}
main {
width: 100%;
min-height: 100%;
width: 100%;
min-height: 100%;
> * {
max-width: @dimension-max-content-width;
padding: 0 1em;
margin: 0 auto;
}
> * {
max-width: @dimension-max-content-width;
padding: 0 1em;
margin: 0 auto;
}
}
#amiv-container {
max-width: @dimension-max-content-width;
display: block;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
max-width: @dimension-max-content-width;
display: block;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
}
......@@ -2,4 +2,4 @@
button {
margin-right: 1em;
}
}
\ No newline at end of file
}
@import './listview.less';
#event-list {
.listview;
div {
border: none;
}
.listview;
.registration {
background-color: #FFF;
}
div {
border: none;
}
.upcoming {
background-color: #BBB;
}
.registration {
background-color: #fff;
}
.past {
background-color: #777;
}
}
\ No newline at end of file
.upcoming {
background-color: #bbb;
}
.past {
background-color: #777;
}
}
#frontpage-container {
// Grid general settings
// Grid general settings
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 30px;
align-content: center;
text-align: center;
border: none;
h2 {
text-align: center;
color: #00f;
grid-column: ~'1 / 13';
}
// Hot sector on the frontpage
.hot-row {
// Grid of 12 frame colums
grid-column: ~'1 / 13';
grid-row-start: 2;
// Grid declaration for sub items, 2 frame columns
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-gap: 30px;
align-content: center;
text-align: center;
border: none;
h2 {
text-align: center;
color: blue;
grid-column-start: 1;
grid-column-end: 13;
.hot-first-card {
background-color: #f00;
grid-column: ~'1 / 3';
grid-row: ~'1 / 3';
padding-top: (9 / 16) * 100%;
position: relative;
height: 0;
}
// Hot sector on the frontpage
.hot-row {
// Grid of 12 frame colums
grid-column-start: 1;
grid-column-end: 13;
grid-row-start: 2;
// Grid declaration for sub items, 2 frame columns
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 30px;
border: none;
.hot-first-card {
background-color: red;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
padding-top: (9 / 16) * 100%;
position: relative;
height: 0;
}
.hot-card {
grid-column: 3 / 4;
position: relative;
}
.hot-card {
grid-column: ~'3 / 4';
position: relative;
}
}
.frontpage-row{
grid-column-start: 1;
grid-column-end: 13;
.frontpage-row {
grid-column: ~'1 / 13';
// Grid declaration for sub items, 3 frame columns
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 30px;
// Grid declaration for sub items, 3 frame columns
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 30px;
.frontpage-row-card{
padding-top: (9 / 16) * 100%;
position: relative;
height: 0;
}
.frontpage-row-card {
padding-top: (9 / 16) * 100%;
position: relative;
height: 0;
}
}
}
......@@ -34,231 +34,224 @@ header {
font-size: 1.2em;
z-index: 1000;
section.blue > nav {
display: grid;
grid-area: navigation;
height: @dimension-desktop-header-height;
@media @wide, @desktop {
grid-template-columns: auto 1fr auto auto auto;
grid-template-areas:
'logo main-navigation profile language-switcher';
}
section.grey {
height: @dimension-desktop-submenu-height;
@media @tablet {
grid-template-columns: auto 1fr auto auto;
grid-template-areas:
'logo main-navigation language-switcher';
@media @mobile {
display: none;
}
}
}
@media @mobile {
grid-template-columns: 1fr auto auto;
grid-template-areas:
'logo language-switcher mobile-menu'
'main-navigation main-navigation main-navigation'
'profile profile profile';
height: auto;
max-height: @dimension-mobile-header-height;
overflow: hidden;
header nav {
display: grid;
grid-area: navigation;
height: @dimension-desktop-header-height;
&.expanded {
max-height: 1000px;
}
}
@media @wide, @desktop {
grid-template-columns: auto 1fr auto auto auto;
grid-template-areas: 'logo main-navigation profile language-switcher';
}
.logo {
grid-area: logo;
height: @dimension-desktop-header-height;
@media @tablet {
grid-template-columns: auto 1fr auto auto;
grid-template-areas: 'logo main-navigation language-switcher';
}
@media @mobile {
height: @dimension-mobile-header-height;
}
@media @mobile {
grid-template-columns: 1fr auto auto;
grid-template-areas:
'logo language-switcher mobile-menu'
'main-navigation main-navigation main-navigation'
'profile profile profile';
height: auto;
max-height: @dimension-mobile-header-height;
overflow: hidden;
&.expanded {
max-height: 1000px;
}
}
}
ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
header .logo {
grid-area: logo;
height: @dimension-desktop-header-height;
@media @mobile {
width: 100%;
}
@media @mobile {
height: @dimension-mobile-header-height;
}
}
li {
display: inline-block;
height: 100%;
header ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
@media @mobile {
width: 100%;
height: auto;
text-align: center;
border-bottom: 1px solid @color-grey;
}
}
}
@media @mobile {
width: 100%;
}
ul.mainmenu {
.mainmenu-template;
grid-area: main-navigation;
li {
&.active {
background-color: @color-grey;
ul.submenu {
display: block;
visibility: visible;
z-index: 1005;
}
}
@media @wide, @desktop, @tablet {
&:hover {
ul.submenu {
visibility: visible;
}
}
}
> a {
display: block;
height: 100%;
line-height: @dimension-desktop-header-height;
padding: 0 1.3em;
color: #fff;
text-decoration: none;
&:hover {
color: @color-red;
}
}
}
li {
display: inline-block;
height: 100%;
@media @mobile {
width: 100%;
height: auto;
text-align: center;
border-bottom: 1px solid @color-grey;
}
}
}
header ul.mainmenu {
.mainmenu-template;
grid-area: main-navigation;
li.active {
background-color: @color-grey;
ul.submenu {
display: block;
visibility: hidden;
@media @wide, @desktop, @tablet {
position: absolute;
top: @dimension-desktop-header-height;
left: 0;
width: 100%;
height: @dimension-desktop-submenu-height;
text-align: center;
background-color: @color-grey;
z-index: 1010;
transition-delay: 150ms;
transition-property: visibility;
}
visibility: visible;
z-index: 1005;
}
}
@media @tablet {
// NOTE: Adjust this value when profile menu changes!
width: calc(100% - 190px);
}
@media @wide, @desktop, @tablet {
li:hover ul.submenu {
visibility: visible;
}
}
li > a {
display: block;
height: 100%;
line-height: @dimension-desktop-header-height;
padding: 0 1.3em;
color: #fff;
text-decoration: none;
}
li > a:hover {
color: @color-red;
}
}