mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-21 10:18:13 -05:00
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
This commit is contained in:
Ray Schamp
parent
cc457aeddd
commit
19f469db48
23 changed files with 324 additions and 274 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -51,6 +51,10 @@
|
|||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-row {
|
||||
display: flex;
|
||||
font-size: small;
|
||||
|
|
@ -67,6 +71,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@ $navigation-height: 50px;
|
|||
text-align: center;
|
||||
line-height: $navigation-height;
|
||||
|
||||
&, a {
|
||||
&,
|
||||
a {
|
||||
color: $ui-white;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -57,14 +57,6 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
&:hover .costume-1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover .costume-2 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.circle {
|
||||
display: block;
|
||||
top: 15px;
|
||||
|
|
@ -98,55 +90,77 @@
|
|||
}
|
||||
|
||||
|
||||
&.sprite-1 .circle {
|
||||
&.sprite-1 {
|
||||
.circle {
|
||||
background-color: $splash-green;
|
||||
}
|
||||
|
||||
&.sprite-2 .circle {
|
||||
background-color: $splash-pink;
|
||||
}
|
||||
|
||||
&.sprite-3 .circle {
|
||||
background-color: $splash-blue;
|
||||
}
|
||||
|
||||
&:hover.sprite-1 .circle {
|
||||
box-shadow: 0 0 10px 2px $splash-green;
|
||||
}
|
||||
|
||||
&:hover.sprite-2 .circle {
|
||||
box-shadow: 0 0 10px 2px $splash-pink;
|
||||
}
|
||||
|
||||
&:hover.sprite-3 .circle {
|
||||
box-shadow: 0 0 10px 2px $splash-blue;
|
||||
}
|
||||
|
||||
&.sprite-1 .text {
|
||||
.text {
|
||||
top: 60px;
|
||||
left: 50px;
|
||||
color: $splash-green;
|
||||
}
|
||||
}
|
||||
|
||||
&.sprite-2 .text {
|
||||
&.sprite-2 {
|
||||
.circle {
|
||||
background-color: $splash-pink;
|
||||
}
|
||||
|
||||
.text {
|
||||
top: 77px;
|
||||
left: 50px;
|
||||
color: $splash-pink;
|
||||
}
|
||||
}
|
||||
|
||||
&.sprite-3 .text {
|
||||
&.sprite-3 {
|
||||
.circle {
|
||||
background-color: $splash-blue;
|
||||
}
|
||||
|
||||
.text {
|
||||
top: 37px;
|
||||
left: 45px;
|
||||
color: $splash-blue;
|
||||
}
|
||||
|
||||
&.sprite-3 .subtext {
|
||||
.subtext {
|
||||
top: 63px;
|
||||
left: 60px;
|
||||
color: $ui-white;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.costume-1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.costume-2 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.sprite-1 {
|
||||
.circle {
|
||||
box-shadow: 0 0 10px 2px $splash-green;
|
||||
}
|
||||
}
|
||||
|
||||
&.sprite-2 {
|
||||
.circle {
|
||||
box-shadow: 0 0 10px 2px $splash-pink;
|
||||
}
|
||||
}
|
||||
|
||||
&.sprite-3 {
|
||||
.circle {
|
||||
box-shadow: 0 0 10px 2px $splash-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 10px;
|
||||
font-size: 17px;
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
.language-chooser {
|
||||
|
||||
}
|
||||
|
|
@ -20,11 +20,12 @@
|
|||
|
||||
a {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.error {
|
||||
border: 1px solid $active-dark-gray;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import "../../colors";
|
||||
|
||||
&.ReactModal__Content {
|
||||
.ReactModal__Content {
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -51,6 +51,7 @@
|
|||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-right: 10px;
|
||||
|
|
@ -86,13 +87,14 @@
|
|||
color: $type-white;
|
||||
font-size: .85rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> a:hover {
|
||||
&:hover {
|
||||
background-color: $active-gray;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.search {
|
||||
margin: 0 20px;
|
||||
border-right: 0;
|
||||
|
|
@ -114,9 +116,8 @@
|
|||
border: 0;
|
||||
background-color: $active-gray;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
[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,12 +149,13 @@
|
|||
transition: .15s ease background-color;
|
||||
background-color: $active-dark-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.ie9 input[type=text] {
|
||||
.ie9 & {
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
|
|
@ -164,10 +166,12 @@
|
|||
float: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
a {
|
||||
&:hover {
|
||||
background-color: $active-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.messages,
|
||||
.mystuff {
|
||||
|
|
@ -181,19 +185,20 @@
|
|||
overflow: hidden;
|
||||
text-indent: 50px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
> a:hover {
|
||||
&:hover {
|
||||
background-size: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.messages {
|
||||
> a {
|
||||
background-image: url("/images/nav-notifications.png");
|
||||
}
|
||||
|
||||
.messageCount {
|
||||
.message-count {
|
||||
display: none;
|
||||
|
||||
&.show {
|
||||
|
|
@ -224,7 +229,7 @@
|
|||
}
|
||||
|
||||
.account-nav {
|
||||
.userInfo {
|
||||
.user-info {
|
||||
padding-top: 14px;
|
||||
max-width: 260px;
|
||||
}
|
||||
|
|
@ -266,4 +271,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,10 +46,10 @@
|
|||
color: $type-gray;
|
||||
font-size: .85rem;
|
||||
}
|
||||
}
|
||||
|
||||
li:nth-child(even) {
|
||||
&:nth-child(even) {
|
||||
border-top: 1px solid $ui-border;
|
||||
border-bottom: 1px solid $ui-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
||||
&:before {
|
||||
animation-delay: $delay;
|
||||
-webkit-animation-delay: $delay;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes circleFadeDelay {
|
||||
0%, 39%, 100% { opacity: 0; }
|
||||
40% { opacity: 1; }
|
||||
0%,
|
||||
39%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@
|
|||
.thumbnail {
|
||||
.thumbnail-image {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.thumbnail-image img {
|
||||
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,13 +58,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
.thumbnail-loves:before {
|
||||
.thumbnail-loves {
|
||||
&:before {
|
||||
background-image: url("/svgs/love/love_type-gray.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail-remixes:before {
|
||||
.thumbnail-remixes {
|
||||
&:before {
|
||||
background-image: url("/svgs/remix/remix_type-gray.svg");
|
||||
}
|
||||
}
|
||||
|
||||
&.project {
|
||||
$project-width: 144px;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,30 +32,32 @@ h1 {
|
|||
|
||||
h4 {
|
||||
line-height: 1.1rem;
|
||||
font-size: 1.0rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
p.legal {
|
||||
p {
|
||||
&.legal {
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
p {
|
||||
a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
a:link,
|
||||
a:visited,
|
||||
a:active {
|
||||
/* Links */
|
||||
a {
|
||||
&:link,
|
||||
&:visited,
|
||||
&:active {
|
||||
text-decoration: none;
|
||||
color: $link-blue;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
/* Classes */
|
||||
.empty {
|
||||
|
|
|
|||
|
|
@ -60,7 +60,8 @@
|
|||
width: calc(384px + 5px + 5px);
|
||||
}
|
||||
|
||||
img, iframe {
|
||||
img,
|
||||
iframe {
|
||||
display: block;
|
||||
border: 1px solid $ui-gray;
|
||||
padding: 5px;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
#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 */
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue