diff --git a/gulpfile.js b/gulpfile.js index f8ed456b0..46fe2050d 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -196,7 +196,8 @@ gulp.task('lint-scss', function() { .pipe(gulpStylelint({ reporters: [ {formatter: 'string', console: true} - ] + ], + fix: true, })); }); diff --git a/package.json b/package.json index 8092e03c5..e4938f693 100644 --- a/package.json +++ b/package.json @@ -194,6 +194,7 @@ "react-test-renderer": "^15.5.4", "react-testutils-additions": "^15.2.0", "sinon": "^2.3.8", + "stylelint-config-standard": "^17.0.0", "tape": "^4.5.1", "testem": "^1.10.3", "uglifyify": "^4.0.2", diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss index ff3295650..e409f759c 100644 --- a/ui/app/css/itcss/components/account-dropdown.scss +++ b/ui/app/css/itcss/components/account-dropdown.scss @@ -1,13 +1,10 @@ -.account-dropdown-name { - -} - .account-dropdown-balance { color: $dusty-gray; } .account-dropdown-edit-button { color: $dusty-gray; + &:hover { color: $white; } diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss index c304e07ab..7fff5969c 100644 --- a/ui/app/css/itcss/components/buttons.scss +++ b/ui/app/css/itcss/components/buttons.scss @@ -27,10 +27,11 @@ button.btn-clear { // box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36); // } -button[disabled], input[type="submit"][disabled] { +button[disabled], +input[type="submit"][disabled] { cursor: not-allowed; background: rgba(197, 197, 197, 1); - box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36); + box-shadow: 0 3px 6px rgba(197, 197, 197, .36); } // button.spaced { diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index a04af0649..9861c6c30 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -105,7 +105,7 @@ font-size: .6em; border-color: $curious-blue; color: $curious-blue; - padding: 0px; + padding: 0; } } } diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 0733c47a1..19b8bbc95 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -14,7 +14,6 @@ @import './send.scss'; - // Balances @import './hero-balance.scss'; diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 231a87d52..96df60b70 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -152,7 +152,7 @@ width: 33%; height: 45px; margin: 15px; - font-weight: bold; + font-weight: 700; margin-top: 25px; } @@ -172,7 +172,7 @@ justify-content: flex-start; align-items: center; position: relative; - padding: 5px 0px; + padding: 5px 0; border-radius: 4px; } @@ -188,7 +188,7 @@ display: flex; justify-content: center; border: 1px solid $alto; - padding: 5px 10px 5px 10px; + padding: 5px 10px; } .account-details-modal-wrapper .btn-clear { @@ -196,7 +196,6 @@ font-size: 1em; border-color: $curious-blue; color: $curious-blue; - padding: 0px; border-radius: 2px; flex-basis: 100%; width: 75%; @@ -208,7 +207,7 @@ .account-details-modal-divider { width: 100%; height: 1px; - margin: 10px 0px; + margin: 10px 0; background-color: $alto; } @@ -216,13 +215,13 @@ margin-top: -55.5%; } -.account-details-modal-close:after { - content: '\00D7'; - font-size: 1.5em; - color: grey; - position: absolute; - top: 5px; - right: 10px; +.account-details-modal-close::after { + content: '\00D7'; + font-size: 1.5em; + color: $alto; + position: absolute; + top: 5px; + right: 10px; } // New Account Modal @@ -246,14 +245,14 @@ color: $nile-blue; } -.modal-close-x:after { - content: '\00D7'; - font-size: 2em; - color: $dusty-gray; - position: absolute; - top: 25px; - right: 17.5px; - font-family: sans-serif; +.modal-close-x::after { + content: '\00D7'; + font-size: 2em; + color: $dusty-gray; + position: absolute; + top: 25px; + right: 17.5px; + font-family: sans-serif; } .new-account-modal-content { @@ -283,26 +282,30 @@ border: 1px solid $alto; width: 70%; font-size: 1em; - font-color: $alto; + color: $alto; } // For reference on below placeholder selectors: https://stackoverflow.com/questions/2610497/change-an-html5-inputs-placeholder-color-with-css .new-account-input::-webkit-input-placeholder { - color: $dusty-gray; + color: $dusty-gray; } + .new-account-input:-moz-placeholder { - color: $dusty-gray; - opacity: 1; + color: $dusty-gray; + opacity: 1; } + .new-account-input::-moz-placeholder { - color: $dusty-gray; - opacity: 1; + color: $dusty-gray; + opacity: 1; } + .new-account-input:-ms-input-placeholder { - color: $dusty-gray; + color: $dusty-gray; } + .new-account-input::-ms-input-placeholder { - color: $dusty-gray; + color: $dusty-gray; } .new-account-modal-content.button { @@ -311,7 +314,7 @@ .new-account-modal-wrapper .btn-clear { font-size: 14px; - font-weight: bold; + font-weight: 700; background: $white; border: 1px solid; border-radius: 2px; diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 507351cd1..016833db9 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -11,7 +11,6 @@ @media screen and (max-width: $break-small) { top: 33px; } - } .send-screen-card { @@ -22,7 +21,7 @@ margin-left: 3.5%; margin-right: 3.5%; background: $white; - box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); } /* Send Screen */ @@ -41,7 +40,7 @@ width: 45px; height: 45px; border: 1px solid $alto; - box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); } .send-screen-input-wrapper { @@ -58,7 +57,7 @@ height: 41px; border-radius: 3px; background-color: #f3f3f3; - border-width: 0px; + border-width: 0; border-style: none; display: flex; justify-content: space-between; @@ -109,40 +108,38 @@ bottom: 50px; width: 237px; height: 307px; - background-color: white; + background-color: $white; opacity: 1; - box-shadow: grey 0px 0px 5px; + box-shadow: $alto 0 0 5px; z-index: 1050; padding: 13px 19px; font-size: 16px; border-radius: 4px; font-family: 'Lato'; - font-weigth: 500; + font-weight: 500; } .gas-tooltip-arrow { height: 25px; width: 25px; z-index: 1200; - background: white; + background: $white; position: absolute; - -webkit-transform: rotate(45deg); transform: rotate(45deg); left: 107px; top: 294px; - -webkit-box-shadow: 0 0 5px grey; box-shadow: 2px 2px 2px $alto; } -.customize-gas-tooltip-container input[type=number]::-webkit-inner-spin-button { - -webkit-appearance: none; - display:none; +.customize-gas-tooltip-container input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; } -.customize-gas-tooltip-container input[type=number]:hover::-webkit-inner-spin-button { - -webkit-appearance: none; - display:none; -} +.customize-gas-tooltip-container input[type="number"]:hover::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; +} .customize-gas-tooltip { position: relative; @@ -194,15 +191,15 @@ .gas-tooltip-input-arrows { position: absolute; - top: 0px; + top: 0; left: 178px; width: 17px; height: 28px; border: 1px solid #dadada; - border-left: 0px; + border-left: 0; display: flex; flex-direction: column; color: #9b9b9b; - font-size: 0.8em; + font-size: .8em; padding: 1px 4px; -} \ No newline at end of file +}