chore(GUI): integrate scss-lint (#666)

This PR integrates SCSS Lint, a tool that will help us keep SCSS tidier.
I've included a sensible configuration at `.scss-lint.yml`, and
documentation on how to install it on `CONTRIBUTING.md`.

The tool will run automatically as part of `npm run lint`.

Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>

.scss-lint.yml

@@ -0,0 +1,18 @@
+scss_files: 'lib/gui/scss/**/*.scss'
+
+linters:
+  Comment:
+    enabled: false
+  ColorVariable:
+    enabled: false
+  ImportantRule:
+    enabled: false
+  PlaceholderInExtend:
+    enabled: false
+  PropertySortOrder:
+    enabled: false
+  QualifyingElement:
+    enabled: false
+  StringQuotes:
+    enabled: true
+    style: double_quotes

.travis.yml

@@ -37,6 +37,7 @@ install:
   - if [ "$CXX" = "g++" ]; then
       export CXX="g++-4.8" CC="gcc-4.8";
     fi
+  - gem install scss_lint
   - npm install -g bower
   - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then
       ./scripts/build/linux.sh install x64;

appveyor.yml

@@ -22,6 +22,8 @@ install:
   - npm install -g npm bower rimraf asar
   - choco install nsis -version 2.51
   - choco install upx
+  - choco install ruby
+  - gem install scss_lint
   - set PATH=C:\Program Files (x86)\Windows Kits\8.1\bin\x86;%PATH%
   - set PATH=C:\Program Files (x86)\NSIS;%PATH%
   - .\scripts\build\windows.bat install x64

build/css/main.css

@@ -1074,7 +1074,7 @@ body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 13px;
   line-height: 1.42857;
-  color: white;
+  color: #fff;
   background-color: #535760; }
 
 input,
@@ -4407,7 +4407,7 @@ a.badge:hover, a.badge:focus {
     margin-right: auto; }
   .thumbnail .caption, .thumbnail .page-main .icon-caption, .page-main .thumbnail .icon-caption {
     padding: 9px;
-    color: white; }
+    color: #fff; }
 
 a.thumbnail:hover,
 a.thumbnail:focus,
@@ -5913,7 +5913,7 @@ html {
   opacity: 0; }
 
 .alert, .alert-ribbon {
-  border: none;
+  border: 0;
   border-radius: 2px; }
 
 [uib-tooltip] {
@@ -6060,10 +6060,13 @@ html {
   padding: 10px;
   padding-top: 11px;
   border-radius: 2px;
-  border: none;
+  border: 0;
-  letter-spacing: 0.5px;
+  letter-spacing: .5px;
   outline: none;
   position: relative; }
+  .btn > .glyphicon, .progress-button > .glyphicon, .btn > .tick, .progress-button > .tick {
+    top: 2px;
+    margin-right: 2px; }
   .btn[disabled], [disabled].progress-button {
     background-color: #313339;
     color: #787c7f;
@@ -6078,10 +6081,6 @@ html {
   font-size: 10px;
   padding: 4px 12px; }
 
-.btn > .glyphicon, .progress-button > .glyphicon, .btn > .tick, .progress-button > .tick {
-  top: 2px;
-  margin-right: 2px; }
-
 .btn-default:focus {
   background-color: #ececec;
   color: #b3b3b3;
@@ -6140,7 +6139,7 @@ button.btn:focus, button.progress-button:focus {
   border-radius: 50%;
   padding: 3px;
   font-size: 18px;
-  color: white;
+  color: #fff;
   border: 2px solid; }
   .tick[disabled] {
     color: #e1e2e2;
@@ -6172,58 +6171,49 @@ button.btn:focus, button.progress-button:focus {
  */
 .modal-content {
   display: flex;
-  flex-direction: column; }
+  flex-direction: column;
+  height: 320px; }
 
 .modal-header {
   display: flex;
   align-items: baseline;
   text-transform: uppercase;
-  font-size: 11px; }
+  font-size: 11px;
+  color: #b3b3b3;
+  padding: 11px 20px;
+  flex-grow: 0; }
 
 .modal-title {
   font-size: inherit;
   flex-grow: 1; }
 
-.modal-header {
-  color: #b3b3b3;
-  padding: 11px 20px;
-  flex-grow: 0; }
-
 .modal-body {
   flex-grow: 1;
   color: #666;
   padding: 0 20px;
   max-height: 250px;
   overflow: auto; }
-
+  .modal-body .list-group-item {
-.modal-content {
-  height: 320px; }
-
-.modal-body .list-group-item {
     display: flex;
     align-items: center;
-  border-left: none;
+    border-left: 0;
-  border-right: none;
+    border-right: 0;
     border-radius: 0;
     border-color: #eee;
     padding: 12px 0; }
     .modal-body .list-group-item > .tick {
       font-size: 11px; }
-
+    .modal-body .list-group-item :first-child {
-.modal-body .list-group-item-heading {
+      flex-grow: 1; }
+    .modal-body .list-group-item:first-child {
+      border-top: 0; }
+  .modal-body .list-group-item-heading {
     font-size: 13px; }
-
+  .modal-body .list-group-item-text {
-.modal-body .list-group-item-text {
     line-height: 1;
     font-size: 11px;
     color: #aaa; }
 
-.modal-body .list-group-item :first-child {
-  flex-grow: 1; }
-
-.modal-body .list-group-item:first-child {
-  border-top: none; }
-
 .modal-open {
   padding-right: 0 !important; }
 
@@ -6231,13 +6221,12 @@ button.btn:focus, button.progress-button:focus {
   flex-grow: 0;
   border: 0; }
 
-.modal .btn-primary[disabled], .modal [disabled].progress-button--primary {
-  background-color: #d5d5d5; }
-
 .modal {
   display: flex !important;
   justify-content: center;
   align-items: center; }
+  .modal .btn-primary[disabled], .modal [disabled].progress-button--primary {
+    background-color: #d5d5d5; }
 
 .modal-dialog {
   margin: 0;
@@ -6267,7 +6256,7 @@ button.btn:focus, button.progress-button:focus {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   top: -100%;
-  transition: top 0.5s; }
+  transition: top .5s; }
   .alert-ribbon > .glyphicon:first-child, .alert-ribbon > .tick:first-child {
     margin-right: 5px; }
   .alert-ribbon > .glyphicon:last-child, .alert-ribbon > .tick:last-child {
@@ -6531,7 +6520,7 @@ button.btn:focus, button.progress-button:focus {
 
 .page-main .step-border-left, .page-main .step-border-right {
   height: 2px;
-  background-color: white;
+  background-color: #fff;
   position: absolute;
   width: 230px;
   top: 95px; }

docs/CONTRIBUTING.md

@@ -17,6 +17,7 @@ Prerequisites
 - [Bower](http://bower.io).
 - [UPX](http://upx.sourceforge.net).
 - [Python](https://www.python.org).
+- [SCSS Lint](https://github.com/brigade/scss-lint/).
 
 ### Windows
 

lib/gui/scss/components/_alert-ribbon.scss

@@ -29,7 +29,7 @@
 
   // Animate appearance
   top: -100%;
-  transition: top 0.5s;
+  transition: top .5s;
 
   // Align alert icons a bit better
   > .glyphicon {

lib/gui/scss/components/_button.scss

@@ -19,13 +19,18 @@
   padding-top: 11px;
 
   border-radius: 2px;
-  border: none;
+  border: 0;
 
-  letter-spacing: 0.5px;
+  letter-spacing: .5px;
   outline: none;
 
   position: relative;
 
+  > .glyphicon {
+    top: 2px;
+    margin-right: 2px;
+  }
+
   &[disabled] {
     background-color: $btn-disabled;
     color: $color-disabled;
@@ -46,11 +51,6 @@
   padding: 4px 12px;
 }
 
-.btn > .glyphicon {
-  top: 2px;
-  margin-right: 2px;
-}
-
 // Create map from Bootstrap `.btn` type styles
 // since its not possible to perform variable
 // interpolation (e.g: `$btn-${type}-bg`).

lib/gui/scss/components/_label.scss

@@ -29,6 +29,6 @@
   color: darken($gray-light, 30%);
 
   > b {
-    color: darken(white, 5%);
+    color: darken(#fff, 5%);
   }
 }

lib/gui/scss/components/_modal.scss

@@ -17,6 +17,10 @@
 .modal-content {
   display: flex;
   flex-direction: column;
+
+  // Since Etcher opens with a known width & height and its
+  // not resizable, we can safely use an absolute value here
+  height: 320px;
 }
 
 .modal-header {
@@ -24,6 +28,9 @@
   align-items: baseline;
   text-transform: uppercase;
   font-size: 11px;
+  color: $btn-default-color;
+  padding: 11px 20px;
+  flex-grow: 0;
 }
 
 .modal-title {
@@ -31,56 +38,44 @@
   flex-grow: 1;
 }
 
-.modal-header {
-  color: $btn-default-color;
-  padding: 11px 20px;
-  flex-grow: 0;
-}
-
 .modal-body {
   flex-grow: 1;
   color: #666;
   padding: 0 20px;
   max-height: 250px;
   overflow: auto;
-}
 
-// Since Etcher opens with a known width & height and its
+  .list-group-item {
-// not resizable, we can safely use an absolute value here
-.modal-content {
-  height: 320px;
-}
-
-.modal-body .list-group-item {
     display: flex;
     align-items: center;
-  border-left: none;
+    border-left: 0;
-  border-right: none;
+    border-right: 0;
     border-radius: 0;
     border-color: #eee;
     padding: 12px 0;
 
-  & > .tick {
+    > .tick {
       font-size: 11px;
     }
-}
 
-.modal-body .list-group-item-heading {
+    :first-child {
+      flex-grow: 1;
+    }
+
+    &:first-child {
+      border-top: 0;
+    }
+  }
+
+  .list-group-item-heading {
     font-size: 13px;
-}
+  }
 
-.modal-body .list-group-item-text {
+  .list-group-item-text {
     line-height: 1;
     font-size: 11px;
     color: #aaa;
-}
+  }
-
-.modal-body .list-group-item :first-child {
-  flex-grow: 1;
-}
-
-.modal-body .list-group-item:first-child {
-  border-top: none;
 }
 
 // UI Bootstrap adds the `.modal-open` class to the <body>
@@ -98,17 +93,17 @@
   border: 0;
 }
 
-.modal .btn-primary[disabled] {
-  background-color: darken($gray-lighter, 10%);
-}
-
-// Center the modal using Flexbox so we can
-// freely use any height.
-
 .modal {
+
+  // Center the modal using Flexbox so we can
+  // freely use any height.
   display: flex !important;
   justify-content: center;
   align-items: center;
+
+  .btn-primary[disabled] {
+    background-color: darken($gray-lighter, 10%);
+  }
 }
 
 .modal-dialog {

lib/gui/scss/components/_tick.scss

@@ -21,7 +21,7 @@
   border-radius: 50%;
   padding: 3px;
   font-size: 18px;
-  color: white;
+  color: #fff;
   border: 2px solid;
 
   &[disabled] {

lib/gui/scss/main.scss

@@ -16,7 +16,7 @@
 
 $icon-font-path: "../../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
 $body-bg: rgb(83, 87, 96);
-$text-color: white;
+$text-color: #fff;
 $brand-primary: rgb(87, 147, 219);
 $gray-light: #ddd;
 $font-size-base: 13px;
@@ -109,7 +109,7 @@ body {
   padding: 5px 8px;
   font-size: 15px;
 
-  & > .btn {
+  > .btn {
     padding-left: 3px;
     padding-right: 3px;
   }

lib/gui/scss/modules/_bootstrap.scss

@@ -36,7 +36,7 @@ html {
 .alert {
   @extend .text-center;
 
-  border: none;
+  border: 0;
   border-radius: 2px;
 }
 

package.json

@@ -12,7 +12,9 @@
   "scripts": {
     "test": "npm run lint && electron-mocha --recursive --renderer tests/gui -R min",
     "sass": "node-sass ./lib/gui/scss/main.scss > build/css/main.css",
-    "lint": "eslint lib tests scripts bin versionist.conf.js",
+    "jslint": "eslint lib tests scripts bin versionist.conf.js",
+    "scsslint": "scss-lint lib/gui/scss",
+    "lint": "npm run jslint && npm run scsslint",
     "changelog": "versionist",
     "start": "electron lib/start.js",
     "shrinkwrap": "node ./scripts/shrinkwrap.js"