scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-21 02:08:24 -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:
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

2
package.json
View file

@ -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",

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

@ -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;
}
}
}

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

@ -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;
}

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

@ -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;

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

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

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

@ -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;
}
}
}
}

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

@ -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.
*/

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 {
margin-top: 15px;
&:hover {
background-color: transparent;
}
}
a:hover {
background-color: transparent;
}
.error {
border: 1px solid $active-dark-gray;

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

@ -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;

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

@ -64,7 +64,7 @@
&:before {
display: block;
position: absolute;
top: -$arrow-border-width/2;
top: -$arrow-border-width / 2;
right: 10%;
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
});
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({
</a>
</li>,
<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="" />
{this.props.session.user.username}
</a>

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

@ -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%;
}
}
}

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

@ -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;
}
}
}

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

@ -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;
}
}

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

@ -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;
}

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

@ -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 {

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

@ -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;
}

30
src/main.scss
View file

@ -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 */

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

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

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

@ -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;

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

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