scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-21 10:18:13 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Upgrade and quiet sass-linter

Browse source 
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
This commit is contained in:
Ray Schamp 2016-03-23 18:34:54 -04:00
parent cc457aeddd
commit 19f469db48
23 changed files with 324 additions and 274 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
.sass-lint.yml
View file

@ -1,6 +1,8 @@
rules: rules:
class-name-format: 0
color-literals: 2 color-literals: 2
final-newline: 2 final-newline: 2
force-element-nesting: 0
hex-notation: 2 hex-notation: 2
indentation: indentation:
- 2 - 2
@ -13,6 +15,12 @@ rules:
max-depth: 4 max-depth: 4
no-css-comments: 0 no-css-comments: 0
no-ids: 0 no-ids: 0
no-mergeable-selectors: 0
no-qualifying-elements:
- 1
-
- allow-element-with-attribute
no-transition-all: 0
property-sort-order: property-sort-order:
- 2 - 2
- -
@ -21,4 +29,5 @@ rules:
- 2 - 2
- -
style: double style: double
shorthand-values: 0
zero-unit: 2 zero-unit: 2

2
package.json
View file

@ -60,7 +60,7 @@
"react-slick": "0.9.2", "react-slick": "0.9.2",
"redux-thunk": "2.0.1", "redux-thunk": "2.0.1",
"routes-to-nginx-conf": "0.0.4", "routes-to-nginx-conf": "0.0.4",
"sass-lint": "1.3.2", "sass-lint": "1.5.1",
"sass-loader": "2.0.1", "sass-loader": "2.0.1",
"scratchr2_translations": "git://github.com/LLK/scratchr2_translations.git#master", "scratchr2_translations": "git://github.com/LLK/scratchr2_translations.git#master",
"slick-carousel": "1.5.8", "slick-carousel": "1.5.8",

29
src/components/adminpanel/adminpanel.scss
View file

@ -38,7 +38,7 @@
font-size: large; font-size: large;
font-weight: 700; font-weight: 700;
} }
dd { dd {
margin-left: 0; margin-left: 0;
} }
@ -51,21 +51,22 @@
margin: 0; margin: 0;
list-style: none; list-style: none;
.button-row { }
display: flex; }
font-size: small; }
align-items: center;
justify-content: space-between;
.button { .button-row {
padding: .5rem 1rem; display: flex;
font-size: small;
align-items: center;
justify-content: space-between;
&.inprogress { .button {
background-color: $ui-dark-gray; padding: .5rem 1rem;
color: $type-gray;
} &.inprogress {
} background-color: $ui-dark-gray;
} color: $type-gray;
} }
} }
} }

13
src/components/banner/banner.scss
View file

@ -13,7 +13,8 @@ $navigation-height: 50px;
text-align: center; text-align: center;
line-height: $navigation-height; line-height: $navigation-height;
&, a { &,
a {
color: $ui-white; color: $ui-white;
} }
@ -23,14 +24,14 @@ $navigation-height: 50px;
.close { .close {
float: right; float: right;
margin-top: $navigation-height/4; margin-top: $navigation-height / 4;
border-radius: $navigation-height/4; border-radius: $navigation-height / 4;
background-color: $box-shadow-gray; background-color: $box-shadow-gray;
width: $navigation-height/2; width: $navigation-height / 2;
height: $navigation-height/2; height: $navigation-height / 2;
text-decoration: none; text-decoration: none;
text-shadow: none; text-shadow: none;
line-height: $navigation-height/2; line-height: $navigation-height / 2;
color: $ui-white; color: $ui-white;
font-weight: normal; font-weight: normal;
} }

6
src/components/box/box.scss
View file

@ -11,6 +11,7 @@ $base-bg: $ui-white;
//4 columns //4 columns
@media only screen and (max-width: $mobile - 1) { @media only screen and (max-width: $mobile - 1) {
width: $cols4; width: $cols4;
.box-header { .box-header {
h4 { h4 {
font-size: .9rem; font-size: .9rem;
@ -21,9 +22,10 @@ $base-bg: $ui-white;
//6 columns //6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
width: $cols6; width: $cols6;
.box-header { .box-header {
h4 { h4 {
font-size: 1.0rem; font-size: 1rem;
} }
} }
} }
@ -31,6 +33,7 @@ $base-bg: $ui-white;
//8 columns //8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
width: $cols8; width: $cols8;
.box-header { .box-header {
h4 { h4 {
font-size: 1.1rem; font-size: 1.1rem;
@ -41,6 +44,7 @@ $base-bg: $ui-white;
//12 columns //12 columns
@media only screen and (min-width: $desktop) { @media only screen and (min-width: $desktop) {
width: $cols12; width: $cols12;
.box-header { .box-header {
h4 { h4 {
font-size: 1.1rem; font-size: 1.1rem;

2
src/components/carousel/carousel.scss
View file

@ -14,7 +14,7 @@
.slick-next, .slick-next,
.slick-prev { .slick-prev {
margin-top: -$icon-size/2; margin-top: -$icon-size / 2;
width: $icon-size; width: $icon-size;
height: $icon-size; height: $icon-size;

102
src/components/intro/intro.scss
View file

@ -57,14 +57,6 @@
display: none; display: none;
} }
&:hover .costume-1 {
display: none;
}
&:hover .costume-2 {
display: block;
}
.circle { .circle {
display: block; display: block;
top: 15px; top: 15px;
@ -98,52 +90,74 @@
} }
&.sprite-1 .circle { &.sprite-1 {
background-color: $splash-green; .circle {
background-color: $splash-green;
}
.text {
top: 60px;
left: 50px;
color: $splash-green;
}
} }
&.sprite-2 .circle { &.sprite-2 {
background-color: $splash-pink; .circle {
background-color: $splash-pink;
}
.text {
top: 77px;
left: 50px;
color: $splash-pink;
}
} }
&.sprite-3 .circle { &.sprite-3 {
background-color: $splash-blue; .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 { &:hover {
box-shadow: 0 0 10px 2px $splash-green; .costume-1 {
} display: none;
}
&:hover.sprite-2 .circle { .costume-2 {
box-shadow: 0 0 10px 2px $splash-pink; display: block;
} }
&:hover.sprite-3 .circle { &.sprite-1 {
box-shadow: 0 0 10px 2px $splash-blue; .circle {
} box-shadow: 0 0 10px 2px $splash-green;
}
}
&.sprite-1 .text { &.sprite-2 {
top: 60px; .circle {
left: 50px; box-shadow: 0 0 10px 2px $splash-pink;
color: $splash-green; }
} }
&.sprite-2 .text { &.sprite-3 {
top: 77px; .circle {
left: 50px; box-shadow: 0 0 10px 2px $splash-blue;
color: $splash-pink; }
} }
&.sprite-3 .text {
top: 37px;
left: 45px;
color: $splash-blue;
}
&.sprite-3 .subtext {
top: 63px;
left: 60px;
color: $ui-white;
} }
} }

2
src/components/languagechooser/languagechooser.jsx
View file

@ -6,8 +6,6 @@ var jar = require('../../lib/jar.js');
var languages = require('../../../languages.json'); var languages = require('../../../languages.json');
var Select = require('../forms/select.jsx'); var Select = require('../forms/select.jsx');
require('./languagechooser.scss');
/** /**
* Footer dropdown menu that allows one to change their language. * Footer dropdown menu that allows one to change their language.
*/ */

3
src/components/languagechooser/languagechooser.scss
View file

@ -1,3 +0,0 @@
.language-chooser {
}

7
src/components/login/login.scss
View file

@ -20,11 +20,12 @@
a { a {
margin-top: 15px; margin-top: 15px;
&:hover {
background-color: transparent;
}
} }
a:hover {
background-color: transparent;
}
.error { .error {
border: 1px solid $active-dark-gray; border: 1px solid $active-dark-gray;

8
src/components/modal/modal.scss
View file

@ -1,6 +1,6 @@
@import "../../colors"; @import "../../colors";
&.ReactModal__Content { .ReactModal__Content {
iframe { iframe {
border: 0; border: 0;
} }
@ -11,10 +11,10 @@
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
margin-top: -$modal-close-size/2; margin-top: -$modal-close-size / 2;
margin-right: -$modal-close-size/2; margin-right: -$modal-close-size / 2;
border: 2px solid $ui-border; border: 2px solid $ui-border;
border-radius: $modal-close-size/2; border-radius: $modal-close-size / 2;
background-color: $active-dark-gray; background-color: $active-dark-gray;
cursor: pointer; cursor: pointer;
width: $modal-close-size; width: $modal-close-size;

2
src/components/navigation/dropdown.scss
View file

@ -64,7 +64,7 @@
&:before { &:before {
display: block; display: block;
position: absolute; position: absolute;
top: -$arrow-border-width/2; top: -$arrow-border-width / 2;
right: 10%; right: 10%;
transform: rotate(45deg); transform: rotate(45deg);

4
src/components/navigation/navigation.jsx
View file

@ -193,7 +193,7 @@ var Navigation = React.createClass({
'logged-in': this.props.session.user 'logged-in': this.props.session.user
}); });
var messageClasses = classNames({ var messageClasses = classNames({
'messageCount': true, 'message-count': true,
'show': this.state.unreadMessageCount > 0 'show': this.state.unreadMessageCount > 0
}); });
var formatMessage = this.props.intl.formatMessage; var formatMessage = this.props.intl.formatMessage;
@ -269,7 +269,7 @@ var Navigation = React.createClass({
</a> </a>
</li>, </li>,
<li className="link right account-nav" key="account-nav"> <li className="link right account-nav" key="account-nav">
<a className="userInfo" href="#" onClick={this.handleAccountNavClick}> <a className="user-info" href="#" onClick={this.handleAccountNavClick}>
<Avatar src={this.props.session.user.thumbnailUrl} alt="" /> <Avatar src={this.props.session.user.thumbnailUrl} alt="" />
{this.props.session.user.username} {this.props.session.user.username}
</a> </a>

306
src/components/navigation/navigation.scss
View file

@ -51,72 +51,73 @@
vertical-align: bottom; vertical-align: bottom;
} }
} }
}
.logo { .logo {
margin-right: 10px; margin-right: 10px;
a { a {
display: block; display: block;
transition: .15s ease all; transition: .15s ease all;
margin: 0 6px 0 0; margin: 0 6px 0 0;
border: 0; border: 0;
background-image: url("/images/logo_sm.png"); background-image: url("/images/logo_sm.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
background-size: 95%; background-size: 95%;
width: 81px; width: 81px;
height: 50px; height: 50px;
&:hover { &:hover {
transition: .15s ease all; transition: .15s ease all;
background-size: 100%; background-size: 100%;
}
} }
} }
}
.link { .link {
> a { > a {
display: block; display: block;
padding: 17px 15px 0 15px; padding: 17px 15px 0 15px;
height: 33px; height: 33px;
text-decoration: none; text-decoration: none;
white-space: nowrap; 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;
color: $type-white; color: $type-white;
flex-grow: 3; font-size: .85rem;
font-weight: bold;
.ie9 & { &:hover {
width: 100%;
}
form {
margin: 0;
}
input {
display: inline-block;
margin-top: 5px;
outline: none;
border: 0;
background-color: $active-gray; 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; position: absolute;
background-color: transparent; background-color: transparent;
@ -129,7 +130,7 @@
height: 40px; height: 40px;
} }
input[type=text] { [type=text] {
transition: .15s ease background-color; transition: .15s ease background-color;
padding: 0; padding: 0;
padding-right: 10px; padding-right: 10px;
@ -148,122 +149,125 @@
transition: .15s ease background-color; transition: .15s ease background-color;
background-color: $active-dark-gray; background-color: $active-dark-gray;
} }
}
.ie9 input[type=text] { .ie9 & {
width: 70px; width: 70px;
}
} }
} }
}
.right { .right {
float: right; float: right;
margin-left: auto; margin-left: auto;
align-self: flex-end; align-self: flex-end;
.ie9 & { .ie9 & {
float: none; float: none;
} }
a:hover { a {
&:hover {
background-color: $active-gray; background-color: $active-gray;
} }
} }
}
.messages, .messages,
.mystuff { .mystuff {
> a { > a {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
background-size: 45%; background-size: 45%;
padding-right: 10px; padding-right: 10px;
padding-left: 10px; padding-left: 10px;
width: 30px; width: 30px;
overflow: hidden; overflow: hidden;
text-indent: 50px; text-indent: 50px;
white-space: nowrap; white-space: nowrap;
}
> a:hover { &:hover {
background-size: 50%; background-size: 50%;
} }
} }
.messages { }
> a {
background-image: url("/images/nav-notifications.png");
}
.messageCount { .messages {
display: none; > a {
background-image: url("/images/nav-notifications.png");
&.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 { .message-count {
> a { display: none;
background-image: url("/images/mystuff.png");
}
}
.login-dropdown { &.show {
width: 200px; display: block;
} position: absolute;
top: .5rem;
.account-nav { right: .25rem;
.userInfo { border-radius: 1rem;
padding-top: 14px; background-color: $ui-orange;
max-width: 260px; padding: 0 .25rem;
} text-indent: 0;
line-height: 1rem;
> a { color: $type-white;
display: inline-block; font-size: .7rem;
overflow: hidden; font-weight: bold;
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%;
} }
} }
} }
.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%;
}
}
} }

8
src/components/news/news.scss
View file

@ -46,10 +46,10 @@
color: $type-gray; color: $type-gray;
font-size: .85rem; font-size: .85rem;
} }
}
li:nth-child(even) { &:nth-child(even) {
border-top: 1px solid $ui-border; border-top: 1px solid $ui-border;
border-bottom: 1px solid $ui-border; border-bottom: 1px solid $ui-border;
}
} }
} }

24
src/components/spinner/spinner.scss
View file

@ -21,27 +21,33 @@
width: 15%; width: 15%;
height: 15%; height: 15%;
content: ""; content: "";
-webkit-animation: circleFadeDelay 1.2s infinite ease-in-out both;
} }
} }
@for $i from 1 through 12 { @for $i from 1 through 12 {
$rotation: 30deg * ($i - 1); $rotation: 30deg * ($i - 1);
$delay: -1.3s + $i * .1; $delay: -1.3s + $i * .1;
.circle#{$i} { .circle#{$i} {
transform: rotate($rotation); transform: rotate($rotation);
-ms-transform: rotate($rotation);
-webkit-transform: rotate($rotation); &:before {
} animation-delay: $delay;
.circle#{$i}:before { }
animation-delay: $delay;
-webkit-animation-delay: $delay;
} }
} }
} }
@keyframes circleFadeDelay { @keyframes circleFadeDelay {
0%, 39%, 100% { opacity: 0; } 0%,
40% { opacity: 1; } 39%,
100% {
opacity: 0;
}
40% {
opacity: 1;
}
} }

4
src/components/subnavigation/subnavigation.scss
View file

@ -37,7 +37,7 @@
&.description { &.description {
/* clear styling for info element */ /* clear styling for info element */
border: none; border: 0;
border-radius: none; border-radius: none;
text-decoration: none; text-decoration: none;
@ -47,7 +47,7 @@
} }
&:active { &:active {
border: none; border: 0;
box-shadow: none; box-shadow: none;
background-color: transparent; background-color: transparent;
} }

22
src/components/thumbnail/thumbnail.scss
View file

@ -3,11 +3,11 @@
.thumbnail { .thumbnail {
.thumbnail-image { .thumbnail-image {
display: block; display: block;
}
.thumbnail-image img { img {
margin-bottom: 2px; margin-bottom: 2px;
border: 1px solid $ui-border; border: 1px solid $ui-border;
}
} }
$extras: ".thumbnail-creator, .thumbnail-loves, .thumbnail-remixes"; $extras: ".thumbnail-creator, .thumbnail-loves, .thumbnail-remixes";
@ -26,7 +26,7 @@
.thumbnail-title { .thumbnail-title {
margin-bottom: 1px; margin-bottom: 1px;
font-size: .9230em; font-size: .923em;
font-weight: 800; font-weight: 800;
a { a {
@ -58,12 +58,16 @@
} }
} }
.thumbnail-loves:before { .thumbnail-loves {
background-image: url("/svgs/love/love_type-gray.svg"); &:before {
background-image: url("/svgs/love/love_type-gray.svg");
}
} }
.thumbnail-remixes:before { .thumbnail-remixes {
background-image: url("/svgs/remix/remix_type-gray.svg"); &:before {
background-image: url("/svgs/remix/remix_type-gray.svg");
}
} }
&.project { &.project {

7
src/components/welcome/welcome.scss
View file

@ -4,6 +4,7 @@
.box-content { .box-content {
padding: 0; padding: 0;
} }
.welcome-col { .welcome-col {
display: inline-block; display: inline-block;
margin: 10px 15px; margin: 10px 15px;
@ -33,26 +34,32 @@
height: 10px; height: 10px;
content: ""; content: "";
} }
&.blue { &.blue {
#{$color-bars} { #{$color-bars} {
background-color: $splash-blue; background-color: $splash-blue;
} }
a { a {
color: $splash-blue; color: $splash-blue;
} }
} }
&.green { &.green {
#{$color-bars} { #{$color-bars} {
background-color: $splash-green; background-color: $splash-green;
} }
a { a {
color: $splash-green; color: $splash-green;
} }
} }
&.pink { &.pink {
#{$color-bars} { #{$color-bars} {
background-color: $splash-pink; background-color: $splash-pink;
} }
a { a {
color: $splash-pink; color: $splash-pink;
} }

30
src/main.scss
View file

@ -32,29 +32,31 @@ h1 {
h4 { h4 {
line-height: 1.1rem; line-height: 1.1rem;
font-size: 1.0rem; font-size: 1rem;
} }
p.legal {
font-size: .8rem;
}
/* Links */
p { p {
&.legal {
font-size: .8rem;
}
a { a {
white-space: nowrap; white-space: nowrap;
} }
} }
a:link, /* Links */
a:visited, a {
a:active { &:link,
text-decoration: none; &:visited,
color: $link-blue; &:active {
} text-decoration: none;
color: $link-blue;
}
a:hover { &:hover {
text-decoration: underline; text-decoration: underline;
}
} }
/* Classes */ /* Classes */

3
src/views/about/about.scss
View file

@ -60,7 +60,8 @@
width: calc(384px + 5px + 5px); width: calc(384px + 5px + 5px);
} }
img, iframe { img,
iframe {
display: block; display: block;
border: 1px solid $ui-gray; border: 1px solid $ui-gray;
padding: 5px; padding: 5px;

3
src/views/credits/credits.scss
View file

@ -3,11 +3,12 @@
#view { #view {
p { p {
line-height: 1.5rem; line-height: 1.5rem;
a { a {
word-wrap: break-word; /* Overrides: https://github.com/LLK/scratch-www/blob/develop/src/main.scss#L43-L47 */ word-wrap: break-word; /* Overrides: https://github.com/LLK/scratch-www/blob/develop/src/main.scss#L43-L47 */
} }
} }
ul { ul {
display: flex; display: flex;
margin: 0; margin: 0;

2
src/views/hoc/hoc.scss
View file

@ -61,7 +61,7 @@ $base-bg: $ui-white;
} }
} }
} }
.card-deck { .card-deck {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;