Added scss linting

Author: shnhrrsn

.drone.yml

@@ -8,16 +8,22 @@ steps:
     image: mhart/alpine-node:12
     commands:
       - yarn install
-      - yarn lint
+      - yarn lint-js
+      - yarn lint-scss
+    depends_on:
+      - clone
 
   - name: node10
     image: mhart/alpine-node:10
     commands:
       - yarn install
-      - yarn lint
+      - yarn lint-js
+      - yarn lint-scss
+    depends_on:
+      - clone
 
 ---
 kind: signature
-hmac: 5594aac86b34494084f2b8acd3a7bf13c659f86c72bccd4ea149089f32d5059b
+hmac: a99df4241c8cbf630aa4941ed22712019474c707b2f62c0581b64885e971f1ae
 
 ...

.sass-lint.yml

@@ -1,8 +1,9 @@
 files:
-  include: '**/*.scss'
+  include: 'resources/assets/scss/**/*.scss'
 options:
   formatter: stylish
   merge-default-rules: false
+  config-file: .sass-lint/property-sort-order.yml
 rules:
   border-zero: 1
   brace-style:
@@ -25,7 +26,7 @@ rules:
     - include: true
   force-attribute-nesting: 1
   force-element-nesting: 1
-  force-pseudo-nesting: 1
+  force-pseudo-nesting: 0
   function-name-format:
     - 1
     - allow-leading-underscore: true
@@ -42,7 +43,9 @@ rules:
   indentation:
     - 0
     - size: 4
-  leading-zero: true
+  leading-zero:
+    - 1
+    - include: true
   mixin-name-format:
     - 1
     - allow-leading-underscore: true
@@ -51,8 +54,10 @@ rules:
   nesting-depth:
     - 1
     - max-depth: 3
-  no-color-keywords: 0
-  no-color-literals: 0
+  no-color-keywords: 1
+  no-color-literals:
+    - 1
+    - allow-rgba: true
   no-css-comments: 1
   no-debug: 1
   no-duplicate-properties: 1
@@ -62,7 +67,7 @@ rules:
   no-mergeable-selectors: 1
   no-misspelled-properties:
     - 1
-    - extra-properties: []
+    - extra-properties: [ ]
   no-qualifying-elements:
     - 1
     - allow-element-with-attribute: false
@@ -74,10 +79,6 @@ rules:
   placeholder-name-format:
     - 1
     - convention: hyphenatedlowercase
-  property-sort-order:
-    - 1
-    - ignore-custom-properties: true
-      order: recess
   quotes:
     - 1
     - style: single

.sass-lint/property-sort-order.yml

@@ -0,0 +1,177 @@
+# Copied from https://github.com/sasstools/sass-lint/blob/49c3377464a7119f14a49174203d092a916c932f/lib/config/property-sort-orders/recess.yml
+# Includes additional properties as RECESS is no longer being maintained by Twitter.
+
+rules:
+    property-sort-order:
+    - 1
+    -
+      order:
+        - 'position'
+        - 'top'
+        - 'right'
+        - 'bottom'
+        - 'left'
+        - 'z-index'
+        - 'display'
+        - 'align-content'
+        - 'align-items'
+        - 'align-self'
+        - 'flex'
+        - 'flex-basis'
+        - 'flex-direction'
+        - 'flex-flow'
+        - 'flex-grow'
+        - 'flex-shrink'
+        - 'flex-wrap'
+        - 'justify-content'
+        - 'order'
+        - 'float'
+        - 'width'
+        - 'height'
+        - 'max-width'
+        - 'max-height'
+        - 'min-width'
+        - 'min-height'
+        - 'padding'
+        - 'padding-top'
+        - 'padding-right'
+        - 'padding-bottom'
+        - 'padding-left'
+        - 'margin'
+        - 'margin-top'
+        - 'margin-right'
+        - 'margin-bottom'
+        - 'margin-left'
+        - 'margin-collapse'
+        - 'margin-top-collapse'
+        - 'margin-right-collapse'
+        - 'margin-bottom-collapse'
+        - 'margin-left-collapse'
+        - 'overflow'
+        - 'overflow-x'
+        - 'overflow-y'
+        - 'clip'
+        - 'clear'
+        - 'font'
+        - 'font-family'
+        - 'font-size'
+        - 'font-smoothing'
+        - 'osx-font-smoothing'
+        - 'font-style'
+        - 'font-variant'
+        - 'font-weight'
+        - 'hyphens'
+        - 'src'
+        - 'line-height'
+        - 'letter-spacing'
+        - 'word-spacing'
+        - 'color'
+        - 'text-align'
+        - 'text-decoration'
+        - 'text-indent'
+        - 'text-overflow'
+        - 'text-rendering'
+        - 'text-size-adjust'
+        - 'text-shadow'
+        - 'text-transform'
+        - 'word-break'
+        - 'word-wrap'
+        - 'white-space'
+        - 'vertical-align'
+        - 'list-style'
+        - 'list-style-type'
+        - 'list-style-position'
+        - 'list-style-image'
+        - 'pointer-events'
+        - 'cursor'
+        - 'background'
+        - 'background-attachment'
+        - 'background-color'
+        - 'background-image'
+        - 'background-position'
+        - 'background-repeat'
+        - 'background-size'
+        - 'border'
+        - 'border-collapse'
+        - 'border-top'
+        - 'border-right'
+        - 'border-bottom'
+        - 'border-left'
+        - 'border-color'
+        - 'border-image'
+        - 'border-image-source'
+        - 'border-image-slice'
+        - 'border-image-width'
+        - 'border-image-outset'
+        - 'border-image-repeat'
+        - 'border-top-color'
+        - 'border-right-color'
+        - 'border-bottom-color'
+        - 'border-left-color'
+        - 'border-spacing'
+        - 'border-style'
+        - 'border-top-style'
+        - 'border-right-style'
+        - 'border-bottom-style'
+        - 'border-left-style'
+        - 'border-width'
+        - 'border-top-width'
+        - 'border-right-width'
+        - 'border-bottom-width'
+        - 'border-left-width'
+        - 'border-radius'
+        - 'border-top-right-radius'
+        - 'border-bottom-right-radius'
+        - 'border-bottom-left-radius'
+        - 'border-top-left-radius'
+        - 'border-radius-topright'
+        - 'border-radius-bottomright'
+        - 'border-radius-bottomleft'
+        - 'border-radius-topleft'
+        - 'content'
+        - 'quotes'
+        - 'outline'
+        - 'outline-color'
+        - 'outline-offset'
+        - 'outline-style'
+        - 'outline-width'
+        - 'opacity'
+        - 'filter'
+        - 'visibility'
+        - 'size'
+        - 'zoom'
+        - 'transform'
+        - 'transform-origin'
+        - 'box-align'
+        - 'box-flex'
+        - 'box-orient'
+        - 'box-pack'
+        - 'box-shadow'
+        - 'box-sizing'
+        - 'table-layout'
+        - 'animation'
+        - 'animation-delay'
+        - 'animation-duration'
+        - 'animation-iteration-count'
+        - 'animation-name'
+        - 'animation-play-state'
+        - 'animation-timing-function'
+        - 'animation-fill-mode'
+        - 'transition'
+        - 'transition-delay'
+        - 'transition-duration'
+        - 'transition-property'
+        - 'transition-timing-function'
+        - 'background-clip'
+        - 'backface-visibility'
+        - 'resize'
+        - 'appearance'
+        - 'user-select'
+        - 'interpolation-mode'
+        - 'direction'
+        - 'marks'
+        - 'page'
+        - 'set-link-source'
+        - 'unicode-bidi'
+        - 'speak'
+      ignore-custom-properties: true

package.json

@@ -4,7 +4,8 @@
   "private": true,
   "scripts": {
     "build": "bin/build",
-    "lint": "eslint app boot resources/assets/babel"
+    "lint-js": "eslint app boot resources/assets/babel",
+    "lint-scss": "sass-lint --verbose --max-warnings=0 --no-exit"
   },
   "dependencies": {
     "grind-core-frontend": "^0.8.0-beta.3",
@@ -31,6 +32,7 @@
     "node-sass": "^4.12.0",
     "normalize.css": "^8.0.1",
     "ouch": "^2.0.0",
+    "sass-lint": "^1.13.1",
     "svgo": "^1.3.0",
     "uglify-js": "^3.6.0",
     "ws": "^7.1.1"

resources/assets/scss/_variables.scss

@@ -1,12 +1,19 @@
 $body-font-size: 16px;
 $body-line-height: 1.428571429;
-$body-text-color: #4b4a4f;
-$body-background-color: #fff;
 
-$accent-color: #3a70f4;
-$link-color: $accent-color;
-$link-color-hover: darken($link-color, 5%);
-$link-color-active: darken($link-color, 10%);
+$color-white: #fff;
+$color-black: #000;
+
+$body-color-foreground: #4b4a4f;
+$body-color-background: $color-white;
+
+$color-secondary: #3a70f4;
+$color-heading: #1d1c1f;
+$color-muted: #8f8e98;
+
+$color-link: $color-secondary;
+$color-link-hover: darken($color-link, 5%);
+$color-link-active: darken($color-link, 10%);
 
 $font-weight-thin: 100;
 $font-weight-ultra-light: 200;
@@ -26,8 +33,27 @@ $transition-timing: $transition-duration $transition-timing-function;
 
 $header-height: 112px;
 $header-z-index: 10000;
-$header-background-color: rgba($body-background-color, 0.8);
+$header-color-link: #494850;
 
 $footer-height: 208px;
 $footer-z-index: $header-z-index - 1;
-$footer-background-color: rgba($body-background-color, 0.8);
+$footer-color-link: $header-color-link;
+$footer-color-foreground: #aeb3bf;
+$footer-color-border: rgba($footer-color-foreground, 0.15);
+
+$button-color-primary-start: #4c82ff;
+$button-color-primary-end: #3b70ed;
+$button-color-secondary-start: #5c5c68;
+$button-color-secondary-end: #494851;
+
+$code-color-base: #555;
+$code-color-keyword: #5520ff;
+$code-color-func: #5d99ff;
+$code-color-string: #00d8ff;
+
+$toolbar-color-background-start: #e5e5e5;
+$toolbar-color-background-end: #d8d8d8;
+
+$toolbar-color-button-red: #ff6058;
+$toolbar-color-button-yellow: #ffc02f;
+$toolbar-color-button-green: #28ca41;

resources/assets/scss/app.scss

@@ -8,7 +8,7 @@
 }
 
 html, body {
-	background: $body-background-color;
+	background: $body-color-background;
 }
 
 body {
@@ -18,16 +18,16 @@ body {
 	font-family: $font-family-sans-serif;
 	font-size: $body-font-size;
 	line-height: $body-line-height;
-	color: $body-text-color;
+	color: $body-color-foreground;
 }
 
 a {
-	color: $link-color;
+	color: $color-link;
 	text-decoration: none;
 	transition: color $transition-timing;
 
-	&:hover { color: $link-color-hover; }
-	&:active { color: $link-color-hover; }
+	&:hover { color: $color-link-hover; }
+	&:active { color: $color-link-hover; }
 }
 
 .brand-logo  {

resources/assets/scss/app/_buttons.scss

@@ -8,20 +8,20 @@
 	font-size: 15px;
 	font-weight: $font-weight-medium;
 	line-height: 36px;
-	color: #fff;
+	color: $color-white;
 	cursor: pointer;
 
-	background-image: linear-gradient(-180deg, #4c82ff 0%, #3b70ed 100%);
+	background-image: linear-gradient(-180deg, $button-color-primary-start 0%, $button-color-primary-end 100%);
 	border-radius: 6px;
-	box-shadow: 0 1px 2px 0 rgba(#000, 0.15);
+	box-shadow: 0 1px 2px 0 rgba($color-black, 0.15);
 
 	&:hover, &:active {
-		color: #fff;
+		color: $color-white;
 	}
 }
 
 	.btn-info {
-		background-image: linear-gradient(-180deg, #5c5c68 0%, #494851 100%);
+		background-image: linear-gradient(-180deg, $button-color-secondary-start 0%, $button-color-secondary-end 100%);
 	}
 
 	.btn-icon {