From 19f469db48d083eb1dabdac5c2850c6a0e18143d Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Wed, 23 Mar 2016 18:34:54 -0400 Subject: [PATCH] Upgrade and quiet sass-linter These warnings were annoying me because the noise makes it easy to miss real issues. The `no-mergeable-selectors` rule is one that we do want to have, but right now it asks that you merge selectors in different `@media` blocks. When the next release happens we should put that back. https://github.com/sasstools/sass-lint/issues/307 Similarly, we want `force-element-nesting` but there is a problem with that because there's no easy way to have a nested selector in a list of selectors. https://github.com/sasstools/sass-lint/issues/575 Finally, until they implement per-line overrides, we have to silence `class-name-format` because we don't have control over the ReactModal class names. It's a useful rule to keep class names consistent though. Per-line ignores should be coming soon: https://github.com/sasstools/sass-lint/issues/70 --- .sass-lint.yml | 9 + package.json | 2 +- src/components/adminpanel/adminpanel.scss | 29 +- src/components/banner/banner.scss | 13 +- src/components/box/box.scss | 6 +- src/components/carousel/carousel.scss | 2 +- src/components/intro/intro.scss | 102 +++--- .../languagechooser/languagechooser.jsx | 2 - .../languagechooser/languagechooser.scss | 3 - src/components/login/login.scss | 7 +- src/components/modal/modal.scss | 8 +- src/components/navigation/dropdown.scss | 2 +- src/components/navigation/navigation.jsx | 4 +- src/components/navigation/navigation.scss | 306 +++++++++--------- src/components/news/news.scss | 8 +- src/components/spinner/spinner.scss | 24 +- .../subnavigation/subnavigation.scss | 4 +- src/components/thumbnail/thumbnail.scss | 22 +- src/components/welcome/welcome.scss | 7 + src/main.scss | 30 +- src/views/about/about.scss | 3 +- src/views/credits/credits.scss | 3 +- src/views/hoc/hoc.scss | 2 +- 23 files changed, 324 insertions(+), 274 deletions(-) delete mode 100644 src/components/languagechooser/languagechooser.scss diff --git a/.sass-lint.yml b/.sass-lint.yml index 79136f013..e60e787eb 100644 --- a/.sass-lint.yml +++ b/.sass-lint.yml @@ -1,6 +1,8 @@ rules: + class-name-format: 0 color-literals: 2 final-newline: 2 + force-element-nesting: 0 hex-notation: 2 indentation: - 2 @@ -13,6 +15,12 @@ rules: max-depth: 4 no-css-comments: 0 no-ids: 0 + no-mergeable-selectors: 0 + no-qualifying-elements: + - 1 + - + - allow-element-with-attribute + no-transition-all: 0 property-sort-order: - 2 - @@ -21,4 +29,5 @@ rules: - 2 - style: double + shorthand-values: 0 zero-unit: 2 diff --git a/package.json b/package.json index 098037279..20e5719b7 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,7 @@ "react-slick": "0.9.2", "redux-thunk": "2.0.1", "routes-to-nginx-conf": "0.0.4", - "sass-lint": "1.3.2", + "sass-lint": "1.5.1", "sass-loader": "2.0.1", "scratchr2_translations": "git://github.com/LLK/scratchr2_translations.git#master", "slick-carousel": "1.5.8", diff --git a/src/components/adminpanel/adminpanel.scss b/src/components/adminpanel/adminpanel.scss index 64ef709a0..6b8c36907 100644 --- a/src/components/adminpanel/adminpanel.scss +++ b/src/components/adminpanel/adminpanel.scss @@ -38,7 +38,7 @@ font-size: large; font-weight: 700; } - + dd { margin-left: 0; } @@ -51,21 +51,22 @@ margin: 0; list-style: none; - .button-row { - display: flex; - font-size: small; - align-items: center; - justify-content: space-between; + } + } + } - .button { - padding: .5rem 1rem; + .button-row { + display: flex; + font-size: small; + align-items: center; + justify-content: space-between; - &.inprogress { - background-color: $ui-dark-gray; - color: $type-gray; - } - } - } + .button { + padding: .5rem 1rem; + + &.inprogress { + background-color: $ui-dark-gray; + color: $type-gray; } } } diff --git a/src/components/banner/banner.scss b/src/components/banner/banner.scss index 2596df6c8..64a69d638 100644 --- a/src/components/banner/banner.scss +++ b/src/components/banner/banner.scss @@ -13,7 +13,8 @@ $navigation-height: 50px; text-align: center; line-height: $navigation-height; - &, a { + &, + a { color: $ui-white; } @@ -23,14 +24,14 @@ $navigation-height: 50px; .close { float: right; - margin-top: $navigation-height/4; - border-radius: $navigation-height/4; + margin-top: $navigation-height / 4; + border-radius: $navigation-height / 4; background-color: $box-shadow-gray; - width: $navigation-height/2; - height: $navigation-height/2; + width: $navigation-height / 2; + height: $navigation-height / 2; text-decoration: none; text-shadow: none; - line-height: $navigation-height/2; + line-height: $navigation-height / 2; color: $ui-white; font-weight: normal; } diff --git a/src/components/box/box.scss b/src/components/box/box.scss index 632c31a07..01310720f 100644 --- a/src/components/box/box.scss +++ b/src/components/box/box.scss @@ -11,6 +11,7 @@ $base-bg: $ui-white; //4 columns @media only screen and (max-width: $mobile - 1) { width: $cols4; + .box-header { h4 { font-size: .9rem; @@ -21,9 +22,10 @@ $base-bg: $ui-white; //6 columns @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { width: $cols6; + .box-header { h4 { - font-size: 1.0rem; + font-size: 1rem; } } } @@ -31,6 +33,7 @@ $base-bg: $ui-white; //8 columns @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { width: $cols8; + .box-header { h4 { font-size: 1.1rem; @@ -41,6 +44,7 @@ $base-bg: $ui-white; //12 columns @media only screen and (min-width: $desktop) { width: $cols12; + .box-header { h4 { font-size: 1.1rem; diff --git a/src/components/carousel/carousel.scss b/src/components/carousel/carousel.scss index dd2bac747..b8fbcdbf4 100644 --- a/src/components/carousel/carousel.scss +++ b/src/components/carousel/carousel.scss @@ -14,7 +14,7 @@ .slick-next, .slick-prev { - margin-top: -$icon-size/2; + margin-top: -$icon-size / 2; width: $icon-size; height: $icon-size; diff --git a/src/components/intro/intro.scss b/src/components/intro/intro.scss index 5406f8d54..d8fb1e43b 100644 --- a/src/components/intro/intro.scss +++ b/src/components/intro/intro.scss @@ -57,14 +57,6 @@ display: none; } - &:hover .costume-1 { - display: none; - } - - &:hover .costume-2 { - display: block; - } - .circle { display: block; top: 15px; @@ -98,52 +90,74 @@ } - &.sprite-1 .circle { - background-color: $splash-green; + &.sprite-1 { + .circle { + background-color: $splash-green; + } + + .text { + top: 60px; + left: 50px; + color: $splash-green; + } } - &.sprite-2 .circle { - background-color: $splash-pink; + &.sprite-2 { + .circle { + background-color: $splash-pink; + } + + .text { + top: 77px; + left: 50px; + color: $splash-pink; + } } - &.sprite-3 .circle { - background-color: $splash-blue; + &.sprite-3 { + .circle { + background-color: $splash-blue; + } + + .text { + top: 37px; + left: 45px; + color: $splash-blue; + } + + .subtext { + top: 63px; + left: 60px; + color: $ui-white; + } } - &:hover.sprite-1 .circle { - box-shadow: 0 0 10px 2px $splash-green; - } + &:hover { + .costume-1 { + display: none; + } - &:hover.sprite-2 .circle { - box-shadow: 0 0 10px 2px $splash-pink; - } + .costume-2 { + display: block; + } - &:hover.sprite-3 .circle { - box-shadow: 0 0 10px 2px $splash-blue; - } + &.sprite-1 { + .circle { + box-shadow: 0 0 10px 2px $splash-green; + } + } - &.sprite-1 .text { - top: 60px; - left: 50px; - color: $splash-green; - } + &.sprite-2 { + .circle { + box-shadow: 0 0 10px 2px $splash-pink; + } + } - &.sprite-2 .text { - top: 77px; - left: 50px; - color: $splash-pink; - } - - &.sprite-3 .text { - top: 37px; - left: 45px; - color: $splash-blue; - } - - &.sprite-3 .subtext { - top: 63px; - left: 60px; - color: $ui-white; + &.sprite-3 { + .circle { + box-shadow: 0 0 10px 2px $splash-blue; + } + } } } diff --git a/src/components/languagechooser/languagechooser.jsx b/src/components/languagechooser/languagechooser.jsx index 39d39887b..765f883ba 100644 --- a/src/components/languagechooser/languagechooser.jsx +++ b/src/components/languagechooser/languagechooser.jsx @@ -6,8 +6,6 @@ var jar = require('../../lib/jar.js'); var languages = require('../../../languages.json'); var Select = require('../forms/select.jsx'); -require('./languagechooser.scss'); - /** * Footer dropdown menu that allows one to change their language. */ diff --git a/src/components/languagechooser/languagechooser.scss b/src/components/languagechooser/languagechooser.scss deleted file mode 100644 index abe1a6d34..000000000 --- a/src/components/languagechooser/languagechooser.scss +++ /dev/null @@ -1,3 +0,0 @@ -.language-chooser { - -} diff --git a/src/components/login/login.scss b/src/components/login/login.scss index 75709bc3e..5f70c0b08 100644 --- a/src/components/login/login.scss +++ b/src/components/login/login.scss @@ -20,11 +20,12 @@ a { margin-top: 15px; + + &:hover { + background-color: transparent; + } } - a:hover { - background-color: transparent; - } .error { border: 1px solid $active-dark-gray; diff --git a/src/components/modal/modal.scss b/src/components/modal/modal.scss index 49503eaf4..fae33030d 100644 --- a/src/components/modal/modal.scss +++ b/src/components/modal/modal.scss @@ -1,6 +1,6 @@ @import "../../colors"; -&.ReactModal__Content { +.ReactModal__Content { iframe { border: 0; } @@ -11,10 +11,10 @@ position: absolute; top: 0; right: 0; - margin-top: -$modal-close-size/2; - margin-right: -$modal-close-size/2; + margin-top: -$modal-close-size / 2; + margin-right: -$modal-close-size / 2; border: 2px solid $ui-border; - border-radius: $modal-close-size/2; + border-radius: $modal-close-size / 2; background-color: $active-dark-gray; cursor: pointer; width: $modal-close-size; diff --git a/src/components/navigation/dropdown.scss b/src/components/navigation/dropdown.scss index 5b60414f9..78ef27a81 100644 --- a/src/components/navigation/dropdown.scss +++ b/src/components/navigation/dropdown.scss @@ -64,7 +64,7 @@ &:before { display: block; position: absolute; - top: -$arrow-border-width/2; + top: -$arrow-border-width / 2; right: 10%; transform: rotate(45deg); diff --git a/src/components/navigation/navigation.jsx b/src/components/navigation/navigation.jsx index 626dde015..f96ac2dbe 100644 --- a/src/components/navigation/navigation.jsx +++ b/src/components/navigation/navigation.jsx @@ -193,7 +193,7 @@ var Navigation = React.createClass({ 'logged-in': this.props.session.user }); var messageClasses = classNames({ - 'messageCount': true, + 'message-count': true, 'show': this.state.unreadMessageCount > 0 }); var formatMessage = this.props.intl.formatMessage; @@ -269,7 +269,7 @@ var Navigation = React.createClass({ ,
  • - + {this.props.session.user.username} diff --git a/src/components/navigation/navigation.scss b/src/components/navigation/navigation.scss index b2c11a71b..93f2e9714 100644 --- a/src/components/navigation/navigation.scss +++ b/src/components/navigation/navigation.scss @@ -51,72 +51,73 @@ vertical-align: bottom; } } + } - .logo { - margin-right: 10px; + .logo { + margin-right: 10px; - a { - display: block; - transition: .15s ease all; - margin: 0 6px 0 0; - border: 0; + a { + display: block; + transition: .15s ease all; + margin: 0 6px 0 0; + border: 0; - background-image: url("/images/logo_sm.png"); - background-repeat: no-repeat; - background-position: center center; - background-size: 95%; - width: 81px; - height: 50px; + background-image: url("/images/logo_sm.png"); + background-repeat: no-repeat; + background-position: center center; + background-size: 95%; + width: 81px; + height: 50px; - &:hover { - transition: .15s ease all; - background-size: 100%; - } + &:hover { + transition: .15s ease all; + background-size: 100%; } } + } - .link { - > a { - display: block; - padding: 17px 15px 0 15px; - height: 33px; - - text-decoration: none; - white-space: nowrap; - color: $type-white; - font-size: .85rem; - font-weight: bold; - } - - > a:hover { - background-color: $active-gray; - } - } - - .search { - margin: 0 20px; - border-right: 0; + .link { + > a { + display: block; + padding: 17px 15px 0 15px; + height: 33px; + + text-decoration: none; + white-space: nowrap; color: $type-white; - flex-grow: 3; + font-size: .85rem; + font-weight: bold; - .ie9 & { - width: 100%; - } - - form { - margin: 0; - } - - input { - display: inline-block; - margin-top: 5px; - outline: none; - border: 0; + &:hover { background-color: $active-gray; - height: 14px; } + } - input[type=submit] { + } + + .search { + margin: 0 20px; + border-right: 0; + color: $type-white; + flex-grow: 3; + + .ie9 & { + width: 100%; + } + + form { + margin: 0; + } + + input { + display: inline-block; + margin-top: 5px; + outline: none; + border: 0; + background-color: $active-gray; + height: 14px; + + [type=submit] { position: absolute; background-color: transparent; @@ -129,7 +130,7 @@ height: 40px; } - input[type=text] { + [type=text] { transition: .15s ease background-color; padding: 0; padding-right: 10px; @@ -148,122 +149,125 @@ transition: .15s ease background-color; background-color: $active-dark-gray; } - } - .ie9 input[type=text] { - width: 70px; + .ie9 & { + width: 70px; + } } } + } - .right { - float: right; - margin-left: auto; - align-self: flex-end; + .right { + float: right; + margin-left: auto; + align-self: flex-end; - .ie9 & { - float: none; - } + .ie9 & { + float: none; + } - a:hover { + a { + &:hover { background-color: $active-gray; } } + } - .messages, - .mystuff { - > a { - background-repeat: no-repeat; - background-position: center center; - background-size: 45%; - padding-right: 10px; - padding-left: 10px; - width: 30px; - overflow: hidden; - text-indent: 50px; - white-space: nowrap; - } + .messages, + .mystuff { + > a { + background-repeat: no-repeat; + background-position: center center; + background-size: 45%; + padding-right: 10px; + padding-left: 10px; + width: 30px; + overflow: hidden; + text-indent: 50px; + white-space: nowrap; - > a:hover { + &:hover { background-size: 50%; } } - .messages { - > a { - background-image: url("/images/nav-notifications.png"); - } + } - .messageCount { - display: none; - - &.show { - display: block; - position: absolute; - top: .5rem; - right: .25rem; - border-radius: 1rem; - background-color: $ui-orange; - padding: 0 .25rem; - text-indent: 0; - line-height: 1rem; - color: $type-white; - font-size: .7rem; - font-weight: bold; - } - } + .messages { + > a { + background-image: url("/images/nav-notifications.png"); } - .mystuff { - > a { - background-image: url("/images/mystuff.png"); - } - } + .message-count { + display: none; - .login-dropdown { - width: 200px; - } - - .account-nav { - .userInfo { - padding-top: 14px; - max-width: 260px; - } - - > a { - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - font-size: .8125rem; - font-weight: normal; - - .avatar { - margin-right: 10px; - border-radius: 3px; - width: 24px; - height: 24px; - vertical-align: middle; - } - - &:after { - display: inline-block; - margin-left: 8px; - - background-image: url("/images/dropdown.png"); - background-repeat: no-repeat; - background-position: center center; - background-size: 50%; - width: 20px; - height: 20px; - vertical-align: middle; - content: " "; - } - } - - .dropdown { - padding: 0; - padding-top: 5px; - width: 100%; + &.show { + display: block; + position: absolute; + top: .5rem; + right: .25rem; + border-radius: 1rem; + background-color: $ui-orange; + padding: 0 .25rem; + text-indent: 0; + line-height: 1rem; + color: $type-white; + font-size: .7rem; + font-weight: bold; } } } + + .mystuff { + > a { + background-image: url("/images/mystuff.png"); + } + } + + .login-dropdown { + width: 200px; + } + + .account-nav { + .user-info { + padding-top: 14px; + max-width: 260px; + } + + > a { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + font-size: .8125rem; + font-weight: normal; + + .avatar { + margin-right: 10px; + border-radius: 3px; + width: 24px; + height: 24px; + vertical-align: middle; + } + + &:after { + display: inline-block; + margin-left: 8px; + + background-image: url("/images/dropdown.png"); + background-repeat: no-repeat; + background-position: center center; + background-size: 50%; + width: 20px; + height: 20px; + vertical-align: middle; + content: " "; + } + } + + .dropdown { + padding: 0; + padding-top: 5px; + width: 100%; + } + } } diff --git a/src/components/news/news.scss b/src/components/news/news.scss index e58bee698..bb74aae6d 100644 --- a/src/components/news/news.scss +++ b/src/components/news/news.scss @@ -46,10 +46,10 @@ color: $type-gray; font-size: .85rem; } - } - li:nth-child(even) { - border-top: 1px solid $ui-border; - border-bottom: 1px solid $ui-border; + &:nth-child(even) { + border-top: 1px solid $ui-border; + border-bottom: 1px solid $ui-border; + } } } diff --git a/src/components/spinner/spinner.scss b/src/components/spinner/spinner.scss index f021901d6..e4fd45305 100644 --- a/src/components/spinner/spinner.scss +++ b/src/components/spinner/spinner.scss @@ -21,27 +21,33 @@ width: 15%; height: 15%; content: ""; - -webkit-animation: circleFadeDelay 1.2s infinite ease-in-out both; } } @for $i from 1 through 12 { $rotation: 30deg * ($i - 1); $delay: -1.3s + $i * .1; + .circle#{$i} { transform: rotate($rotation); - -ms-transform: rotate($rotation); - -webkit-transform: rotate($rotation); - } - .circle#{$i}:before { - animation-delay: $delay; - -webkit-animation-delay: $delay; + + &:before { + animation-delay: $delay; + } } + } } @keyframes circleFadeDelay { - 0%, 39%, 100% { opacity: 0; } - 40% { opacity: 1; } + 0%, + 39%, + 100% { + opacity: 0; + } + + 40% { + opacity: 1; + } } diff --git a/src/components/subnavigation/subnavigation.scss b/src/components/subnavigation/subnavigation.scss index 0f951cd4e..76248f1d6 100644 --- a/src/components/subnavigation/subnavigation.scss +++ b/src/components/subnavigation/subnavigation.scss @@ -37,7 +37,7 @@ &.description { /* clear styling for info element */ - border: none; + border: 0; border-radius: none; text-decoration: none; @@ -47,7 +47,7 @@ } &:active { - border: none; + border: 0; box-shadow: none; background-color: transparent; } diff --git a/src/components/thumbnail/thumbnail.scss b/src/components/thumbnail/thumbnail.scss index ffaea2754..29498673d 100644 --- a/src/components/thumbnail/thumbnail.scss +++ b/src/components/thumbnail/thumbnail.scss @@ -3,11 +3,11 @@ .thumbnail { .thumbnail-image { display: block; - } - .thumbnail-image img { - margin-bottom: 2px; - border: 1px solid $ui-border; + img { + margin-bottom: 2px; + border: 1px solid $ui-border; + } } $extras: ".thumbnail-creator, .thumbnail-loves, .thumbnail-remixes"; @@ -26,7 +26,7 @@ .thumbnail-title { margin-bottom: 1px; - font-size: .9230em; + font-size: .923em; font-weight: 800; a { @@ -58,12 +58,16 @@ } } - .thumbnail-loves:before { - background-image: url("/svgs/love/love_type-gray.svg"); + .thumbnail-loves { + &:before { + background-image: url("/svgs/love/love_type-gray.svg"); + } } - .thumbnail-remixes:before { - background-image: url("/svgs/remix/remix_type-gray.svg"); + .thumbnail-remixes { + &:before { + background-image: url("/svgs/remix/remix_type-gray.svg"); + } } &.project { diff --git a/src/components/welcome/welcome.scss b/src/components/welcome/welcome.scss index a0e3437a5..a2404d7e7 100644 --- a/src/components/welcome/welcome.scss +++ b/src/components/welcome/welcome.scss @@ -4,6 +4,7 @@ .box-content { padding: 0; } + .welcome-col { display: inline-block; margin: 10px 15px; @@ -33,26 +34,32 @@ height: 10px; content: ""; } + &.blue { #{$color-bars} { background-color: $splash-blue; } + a { color: $splash-blue; } } + &.green { #{$color-bars} { background-color: $splash-green; } + a { color: $splash-green; } } + &.pink { #{$color-bars} { background-color: $splash-pink; } + a { color: $splash-pink; } diff --git a/src/main.scss b/src/main.scss index 64dd346bb..ed458a7a8 100644 --- a/src/main.scss +++ b/src/main.scss @@ -32,29 +32,31 @@ h1 { h4 { line-height: 1.1rem; - font-size: 1.0rem; + font-size: 1rem; } -p.legal { - font-size: .8rem; -} - -/* Links */ p { + &.legal { + font-size: .8rem; + } + a { white-space: nowrap; } } -a:link, -a:visited, -a:active { - text-decoration: none; - color: $link-blue; -} +/* Links */ +a { + &:link, + &:visited, + &:active { + text-decoration: none; + color: $link-blue; + } -a:hover { - text-decoration: underline; + &:hover { + text-decoration: underline; + } } /* Classes */ diff --git a/src/views/about/about.scss b/src/views/about/about.scss index d6008f3ec..1fe01fa41 100644 --- a/src/views/about/about.scss +++ b/src/views/about/about.scss @@ -60,7 +60,8 @@ width: calc(384px + 5px + 5px); } - img, iframe { + img, + iframe { display: block; border: 1px solid $ui-gray; padding: 5px; diff --git a/src/views/credits/credits.scss b/src/views/credits/credits.scss index 11dc0ded7..2a8b57ff5 100644 --- a/src/views/credits/credits.scss +++ b/src/views/credits/credits.scss @@ -3,11 +3,12 @@ #view { p { line-height: 1.5rem; + a { word-wrap: break-word; /* Overrides: https://github.com/LLK/scratch-www/blob/develop/src/main.scss#L43-L47 */ } } - + ul { display: flex; margin: 0; diff --git a/src/views/hoc/hoc.scss b/src/views/hoc/hoc.scss index d2c9ffe84..54a28ee6d 100644 --- a/src/views/hoc/hoc.scss +++ b/src/views/hoc/hoc.scss @@ -61,7 +61,7 @@ $base-bg: $ui-white; } } } - + .card-deck { display: inline-flex; justify-content: center;