From 47c50ffe14a635dda6b796592989e06f0f053699 Mon Sep 17 00:00:00 2001 From: Juan Cruz Viotti Date: Fri, 26 Aug 2016 15:09:07 -0400 Subject: [PATCH] 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 --- .scss-lint.yml | 18 +++++ .travis.yml | 1 + appveyor.yml | 2 + build/css/main.css | 89 ++++++++++------------ docs/CONTRIBUTING.md | 1 + lib/gui/scss/components/_alert-ribbon.scss | 2 +- lib/gui/scss/components/_button.scss | 14 ++-- lib/gui/scss/components/_label.scss | 2 +- lib/gui/scss/components/_modal.scss | 85 ++++++++++----------- lib/gui/scss/components/_tick.scss | 2 +- lib/gui/scss/main.scss | 4 +- lib/gui/scss/modules/_bootstrap.scss | 2 +- package.json | 4 +- 13 files changed, 117 insertions(+), 109 deletions(-) create mode 100644 .scss-lint.yml diff --git a/.scss-lint.yml b/.scss-lint.yml new file mode 100644 index 00000000..c90e7aa4 --- /dev/null +++ b/.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 diff --git a/.travis.yml b/.travis.yml index da12e74a..97adb00d 100644 --- a/.travis.yml +++ b/.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; diff --git a/appveyor.yml b/appveyor.yml index 62a14f35..e24a30e0 100644 --- a/appveyor.yml +++ b/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 diff --git a/build/css/main.css b/build/css/main.css index bd76054c..573b41e2 100644 --- a/build/css/main.css +++ b/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; - letter-spacing: 0.5px; + border: 0; + 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,57 +6171,48 @@ 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-content { - height: 320px; } - -.modal-body .list-group-item { - display: flex; - align-items: center; - border-left: none; - border-right: none; - border-radius: 0; - border-color: #eee; - padding: 12px 0; } - .modal-body .list-group-item > .tick { - font-size: 11px; } - -.modal-body .list-group-item-heading { - font-size: 13px; } - -.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-body .list-group-item { + display: flex; + align-items: center; + border-left: 0; + 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 { + 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 { + line-height: 1; + font-size: 11px; + color: #aaa; } .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; } diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md index 9504fb7f..d1fbcc8f 100644 --- a/docs/CONTRIBUTING.md +++ b/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 diff --git a/lib/gui/scss/components/_alert-ribbon.scss b/lib/gui/scss/components/_alert-ribbon.scss index 2940de39..ad3bd6f9 100644 --- a/lib/gui/scss/components/_alert-ribbon.scss +++ b/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 { diff --git a/lib/gui/scss/components/_button.scss b/lib/gui/scss/components/_button.scss index b65632f7..1591d609 100644 --- a/lib/gui/scss/components/_button.scss +++ b/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`). diff --git a/lib/gui/scss/components/_label.scss b/lib/gui/scss/components/_label.scss index 07f2ecf0..83912284 100644 --- a/lib/gui/scss/components/_label.scss +++ b/lib/gui/scss/components/_label.scss @@ -29,6 +29,6 @@ color: darken($gray-light, 30%); > b { - color: darken(white, 5%); + color: darken(#fff, 5%); } } diff --git a/lib/gui/scss/components/_modal.scss b/lib/gui/scss/components/_modal.scss index 5cad4113..b3dca4a7 100644 --- a/lib/gui/scss/components/_modal.scss +++ b/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 -// not resizable, we can safely use an absolute value here -.modal-content { - height: 320px; -} + .list-group-item { + display: flex; + align-items: center; + border-left: 0; + border-right: 0; + border-radius: 0; + border-color: #eee; + padding: 12px 0; -.modal-body .list-group-item { - display: flex; - align-items: center; - border-left: none; - border-right: none; - border-radius: 0; - border-color: #eee; - padding: 12px 0; + > .tick { + font-size: 11px; + } - & > .tick { - font-size: 11px; + :first-child { + flex-grow: 1; + } + + &:first-child { + border-top: 0; + } } -} -.modal-body .list-group-item-heading { - font-size: 13px; -} + .list-group-item-heading { + font-size: 13px; + } -.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; + .list-group-item-text { + line-height: 1; + font-size: 11px; + color: #aaa; + } } // UI Bootstrap adds the `.modal-open` class to the @@ -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 { diff --git a/lib/gui/scss/components/_tick.scss b/lib/gui/scss/components/_tick.scss index fe6eb2bf..feaf0bd8 100644 --- a/lib/gui/scss/components/_tick.scss +++ b/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] { diff --git a/lib/gui/scss/main.scss b/lib/gui/scss/main.scss index b9524714..570c7e15 100644 --- a/lib/gui/scss/main.scss +++ b/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; } diff --git a/lib/gui/scss/modules/_bootstrap.scss b/lib/gui/scss/modules/_bootstrap.scss index 452b970e..e38e2034 100644 --- a/lib/gui/scss/modules/_bootstrap.scss +++ b/lib/gui/scss/modules/_bootstrap.scss @@ -36,7 +36,7 @@ html { .alert { @extend .text-center; - border: none; + border: 0; border-radius: 2px; } diff --git a/package.json b/package.json index 5397bf8d..340dc6db 100644 --- a/package.json +++ b/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"