Commit 54ac905c authored by Manuel Tancoigne's avatar Manuel Tancoigne

Add Stylelint and lint SCSS files

parent ae123314
Pipeline #76642589 passed with stages
in 4 minutes and 20 seconds
......@@ -22,6 +22,14 @@ test/lint:
script:
- yarn lint
test/lint:style:
stage: test
dependencies:
- dependencies/yarn
script:
- yarn lint:style
test/unit:
stage: test
dependencies:
......
---
plugins:
- stylelint-scss
extends:
- stylelint-config-standard
- stylelint-config-recommended-scss
ignoreFiles: []
rules:
declaration-no-important: true
font-family-name-quotes: always-unless-keyword
selector-class-pattern:
- '^[a-z0-9]+(?:(-{1,2}|_{1,2})[a-z0-9]+)*$'
- resolveNestedSelectors: true
selector-id-pattern: '^[a-z]+(?:-[a-z]*)*$'
selector-list-comma-newline-after: always
selector-list-comma-newline-before: never-multi-line
selector-list-comma-space-after: always-single-line
selector-list-comma-space-before: never
selector-max-id: 1
scss/double-slash-comment-empty-line-before:
- always
- ignore:
- between-comments
- stylelint-commands
scss/double-slash-comment-inline: never
scss/double-slash-comment-whitespace-inside: always
scss/media-feature-value-dollar-variable: always
scss/no-duplicate-dollar-variables: true
......@@ -7,6 +7,7 @@
"build": "vue-cli-service build",
"lint": "vue-cli-service lint --no-fix",
"lint:fix": "vue-cli-service lint",
"lint:style": "stylelint src/stylesheets",
"test:unit": "vue-cli-service test:unit",
"i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
},
......@@ -32,6 +33,11 @@
"eslint-plugin-vue": "^5.0.0",
"sass": "^1.18.0",
"sass-loader": "^7.1.0",
"stylelint": "^10.1.0",
"stylelint-config-recommended": "^2.2.0",
"stylelint-config-recommended-scss": "^3.3.0",
"stylelint-config-standard": "^18.3.0",
"stylelint-scss": "^3.9.3",
"vue-cli-plugin-i18n": "^0.6.0",
"vue-template-compiler": "^2.6.10"
}
......
......@@ -5,8 +5,10 @@
@import "app/layout";
@import "app/lists";
@import "app/renderer";
// Components
@import "app/elements/block";
@import "app/elements/logo";
// Other libs
@import "lib/vuebar";
$code-block-color: #796036;
$code-var-color: #594f79;
$code-condition-color: #407935;
$code-number-color: #436fce;
$code-shortcode-color: #ce485b;
.code {
&-content {
color: lighten(#333, 40%);
}
&-block {
$color: #796036;
color: $color;
color: $code-block-color;
&-name {
color: lighten($color, 20%);
color: lighten($code-block-color, 20%);
}
&-description {
color: lighten($color, 40%);
color: lighten($code-block-color, 40%);
}
}
&-var {
$color: #594f79;
color: $color;
color: $code-var-color;
&-name {
color: lighten($color, 20%);
color: lighten($code-var-color, 20%);
}
&-description {
color: lighten($color, 40%);
color: lighten($code-var-color, 40%);
}
&type {
color: $color
color: $code-var-color;
}
}
&-condition {
$color: #407935;
color: $color;
color: $code-condition-color;
&-type {
color: lighten($color, 20%);
color: lighten($code-condition-color, 20%);
}
&-block {
color: lighten($color, 40%);
color: lighten($code-condition-color, 40%);
}
}
&-number {
$color: #436fce;
color: $color;
color: $code-number-color;
}
&-shortcode {
$color: #ce485b;
color: #ce485b;
color: $code-shortcode-color;
&-name {
color: lighten($color, 30%)
color: lighten($code-shortcode-color, 30%);
}
}
}
body, html {
body,
html {
background-color: #f8f9fa;
}
......
#app {
height: 100vh;
overflow: hidden;
background-color: #F8F9FA;
background-color: #f8f9fa;
}
.app {
&__main-layout {
display: flex;
min-height: calc(100vh - 8rem);
background-color: #FFF;
background-color: #fff;
}
&__footer {
background: #F8F9FA;
background: #f8f9fa;
height: 4rem;
}
}
......@@ -3,7 +3,7 @@ dl.infos {
&--inline {
dt {
margin-right: .5rem;
margin-right: 0.5rem;
}
dd {
......
.render-page {
&__content{
&__content {
padding-top: 1rem;
}
&__raw pre {
font-size: .8em;
background: #CCC;
font-size: 0.8em;
background: #ccc;
padding: 1rem;
}
&__render {
box-shadow: 0 0 6px 0 rgba(#333, .3);
box-shadow: 0 0 6px 0 rgba(#333, 0.3);
padding: 1rem;
}
&__aside {
width: 20rem !important;
background-color: #ececec !important;
width: 20rem !important; /* stylelint-disable-line declaration-no-important */
background-color: #ececec !important; /* stylelint-disable-line declaration-no-important */
padding-top: 1rem;
padding-bottom: 1rem;
}
......
......@@ -27,7 +27,7 @@ $logo-size-navbar: 2rem;
.logo_computer,
.logo_monkey {
fill: #EEE;
fill: #eee;
}
}
......
......@@ -11,13 +11,15 @@ $vue-bar-color: #333;
backface-visibility: hidden;
-webkit-transform: rotate3d(0, 0, 0, 0);
transform: rotate3d(0, 0, 0, 0);
-webkit-transition: background-color 100ms ease-out,
margin 100ms ease-out,
height 100ms ease-out;
transition: background-color 100ms ease-out,
margin 100ms ease-out,
height 100ms ease-out;
background-color: rgba($vue-bar-color, .1);
-webkit-transition:
background-color 100ms ease-out,
margin 100ms ease-out,
height 100ms ease-out;
transition:
background-color 100ms ease-out,
margin 100ms ease-out,
height 100ms ease-out;
background-color: rgba($vue-bar-color, 0.1);
margin: 5px 5px 5px 0;
border-radius: 20px;
height: calc(100% - 10px);
......@@ -25,21 +27,21 @@ $vue-bar-color: #333;
}
.vb.vb-scrolling-phantom > .vb-dragger > .vb-dragger-styler {
background-color: rgba($vue-bar-color, .3);
background-color: rgba($vue-bar-color, 0.3);
}
.vb > .vb-dragger:hover > .vb-dragger-styler {
background-color: rgba($vue-bar-color, .5);
margin: 0px;
background-color: rgba($vue-bar-color, 0.5);
margin: 0;
height: 100%;
}
.vb.vb-dragging > .vb-dragger > .vb-dragger-styler {
background-color: rgba($vue-bar-color, .5);
margin: 0px;
background-color: rgba($vue-bar-color, 0.5);
margin: 0;
height: 100%;
}
.vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler {
background-color: rgba($vue-bar-color, .5);
background-color: rgba($vue-bar-color, 0.5);
}
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment