mirror of
https://github.com/balena-io/etcher.git
synced 2025-07-24 11:46:31 +00:00
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>
This commit is contained in:
Juan Cruz Viotti
GitHub
parent
fb49b6ce4d
commit
47c50ffe14
18
.scss-lint.yml
Normal file
18
.scss-lint.yml
Normal file
@ -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
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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; }
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
|
||||
// Animate appearance
|
||||
top: -100%;
|
||||
transition: top 0.5s;
|
||||
transition: top .5s;
|
||||
|
||||
// Align alert icons a bit better
|
||||
> .glyphicon {
|
||||
|
||||
@ -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`).
|
||||
|
||||
@ -29,6 +29,6 @@
|
||||
color: darken($gray-light, 30%);
|
||||
|
||||
> b {
|
||||
color: darken(white, 5%);
|
||||
color: darken(#fff, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 <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 {
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
border-radius: 50%;
|
||||
padding: 3px;
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
color: #fff;
|
||||
border: 2px solid;
|
||||
|
||||
&[disabled] {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -36,7 +36,7 @@ html {
|
||||
.alert {
|
||||
@extend .text-center;
|
||||
|
||||
border: none;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user