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;