[#260] scss linting (Fixes #260) (#261)

.htmlhintrc

@@ -0,0 +1,24 @@
+{
+  "alt-require": true,
+  "attr-lowercase": false,
+  "attr-no-duplication": true,
+  "attr-unsafe-chars": true,
+  "attr-value-double-quotes": false,
+  "attr-value-not-empty": false,
+  "doctype-first": false,
+  "doctype-html5": true,
+  "head-script-disabled": true,
+  "href-abs-or-rel": false,
+  "id-class-ad-disabled": true,
+  "id-class-value": "dash",
+  "id-unique": true,
+  "inline-script-disabled": true,
+  "inline-style-disabled": true,
+  "space-tab-mixed-disabled": "space2",
+  "spec-char-escape": false,
+  "src-not-empty": true,
+  "style-disabled": true,
+  "tag-pair": false,
+  "tag-self-close": false,
+  "tagname-lowercase": true
+}

package.json

@@ -10,8 +10,10 @@
     "v-build": "vagrant ssh -- -t 'cd /vagrant;ng build --prod'",
     "test": "ng test",
     "v-test": "vagrant ssh -- -t 'cd /vagrant;ng test'",
-    "lint": "ng lint",
-    "v-lint": "vagrant ssh -- -t 'cd /vagrant;ng lint'",
+    "htmlhint": "./node_modules/htmlhint-ng2/bin/htmlhint --config .htmlhintrc",
+    "sass-lint": "./node_modules/sass-lint/bin/sass-lint.js -c ./sass-lint.yml -v -q",
+    "lint": "npm run sass-lint && ng lint && npm run htmlhint",
+    "v-lint": "vagrant ssh -- -t 'cd /vagrant;npm run lint -s'",
     "v-lint-fix": "vagrant ssh -- -t 'cd /vagrant;ng lint --fix'",
     "e2e": "ng e2e --environment test",
     "v-e2e": "vagrant ssh -- -t 'cd /vagrant;ng e2e --environment test'",
@@ -46,6 +48,7 @@
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
     "codelyzer": "~3.2.0",
+    "htmlhint-ng2": "0.0.13",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
     "karma": "~1.7.0",
@@ -57,6 +60,7 @@
     "node-sass": "^4.5.3",
     "protractor": "~5.1.2",
     "request-promise": "^4.2.1",
+    "sass-lint": "^1.12.1",
     "ts-node": "~3.2.0",
     "tslint": "~5.3.2",
     "tslint-eslint-rules": "^4.1.1",

sass-lint.yml

@@ -0,0 +1,96 @@
+options:
+  formatter: stylish
+files:
+  include: './src/**/*.s+(a|c)ss'
+  ignore: './node_modules/**/'
+rules:
+  # Extends
+  extends-before-mixins: 1
+  extends-before-declarations: 1
+  placeholder-in-extend: 1
+
+  # Mixins
+  mixins-before-declarations: 1
+
+  # Line Spacing
+  one-declaration-per-line: 1
+  empty-line-between-blocks: 1
+  single-line-per-selector: 1
+
+  # Disallows
+  no-attribute-selectors: 0
+  no-color-hex: 0
+  no-color-keywords: 1
+  no-color-literals: 1
+  no-combinators: 0
+  no-css-comments: 1
+  no-debug: 1
+  no-disallowed-properties: 0
+  no-duplicate-properties: 1
+  no-empty-rulesets: 1
+  no-extends: 0
+  no-ids: 0
+  no-important: 0
+  no-invalid-hex: 1
+  no-mergeable-selectors: 1
+  no-misspelled-properties: 1
+  no-qualifying-elements: 1
+  no-trailing-whitespace: 1
+  no-trailing-zero: 1
+  no-transition-all: 1
+  no-universal-selectors: 0
+  no-url-domains: 1
+  no-url-protocols: 1
+  no-vendor-prefixes: 1
+  no-warn: 1
+  property-units: 0
+
+  # Nesting
+  declarations-before-nesting: 1
+  force-attribute-nesting: 1
+  force-element-nesting: 1
+  force-pseudo-nesting: 1
+
+  # Name Formats
+  class-name-format: 1
+  function-name-format: 1
+  id-name-format: 0
+  mixin-name-format: 1
+  placeholder-name-format: 1
+  variable-name-format: 1
+
+  # Style Guide
+  attribute-quotes: 1
+  bem-depth: 0
+  border-zero: 1
+  brace-style: 1
+  clean-import-paths: 0
+  empty-args: 1
+  hex-length: 1
+  hex-notation: 1
+  indentation: 2
+  leading-zero: 1
+  max-line-length: 0
+  max-file-line-count: 0
+  nesting-depth: 1
+  property-sort-order: 0
+  pseudo-element: 1
+  quotes: 1
+  shorthand-values: 1
+  url-quotes: 1
+  variable-for-property: 2
+  zero-unit: 1
+
+  # Inner Spacing
+  space-after-comma: 1
+  space-before-colon: 1
+  space-after-colon: 1
+  space-before-brace: 1
+  space-before-bang: 1
+  space-after-bang: 1
+  space-between-parens: 1
+  space-around-operator: 1
+
+  # Final Items
+  trailing-semicolon: 1
+  final-newline: 1

src/app/login/login.scss

@@ -2,13 +2,13 @@
 
 .ole-login {
 
-  height:100vh;
-  width:600px;
+  height: 100vh;
+  width: 600px;
   margin: 0 auto;
-  background: linear-gradient($ole-blue-light,$ole-blue-dark);
-  text-align:center;
-  color: white;
-  overflow:hidden;
+  background: linear-gradient($ole-blue-light, $ole-blue-dark);
+  text-align: center;
+  color: #ffffff;
+  overflow: hidden;
 
   form, .login-actions {
     display: flex;
@@ -25,30 +25,29 @@
   }
 
   label {
-    color: white;
+    color: #ffffff;
   }
 
   .ole-logo {
-    margin-top:-200px;
-    height:600px;
-    width:100%;
-    background:radial-gradient(rgba(255,255,255,0.8) 5%,rgba(255,255,255,0) 55%);
+    margin-top: -200px;
+    height: 600px;
+    width: 100%;
+    background: radial-gradient(rgba(255, 255, 255, 0.8) 5%, rgba(255, 255, 255, 0) 55%);
     * {
-      position:relative;
-      top:50%;
-      transform:translate(0,-50%);
-      text-shadow:1px 1px black;
+      position: relative;
+      top: 50%;
+      transform: translate(0, -50%);
+      text-shadow: 1px 1px #000000;
     }
     img {
-      height:100px;
-      width:100px;
-      display:block;
-      margin:0 auto;
+      height: 100px;
+      width: 100px;
+      display: block;
+      margin: 0 auto;
     }
 
   }
   .login-actions {
-    margin-top: 6%;
-    margin-right: 5%;
+    margin: 6% 5%;
   }
 }