mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-12-12 08:41:31 -05:00
19f469db48
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
78 lines
1.6 KiB
SCSS
78 lines
1.6 KiB
SCSS
@import "../../colors";
|
|
|
|
.carousel {
|
|
$icon-size: 40px;
|
|
$button-offset: $icon-size + 5px;
|
|
$box-content-offset: 20px;
|
|
|
|
margin-bottom: 0;
|
|
padding: 12px $button-offset;
|
|
|
|
.box-content & {
|
|
padding: 12px $button-offset - 20px;
|
|
}
|
|
|
|
.slick-next,
|
|
.slick-prev {
|
|
margin-top: -$icon-size / 2;
|
|
width: $icon-size;
|
|
height: $icon-size;
|
|
|
|
&:before {
|
|
display: block;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
background-size: 70%;
|
|
width: $icon-size;
|
|
height: $icon-size;
|
|
font-size: $icon-size;
|
|
content: "";
|
|
}
|
|
|
|
&.slick-disabled {
|
|
&:before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.slick-prev {
|
|
left: 0;
|
|
|
|
&:before {
|
|
background-image: url("/svgs/carousel/prev_ui-dark-gray.svg");
|
|
|
|
&:hover {
|
|
background-image: url("/svgs/carousel/prev_ui-blue.svg");
|
|
background-size: 90%;
|
|
}
|
|
}
|
|
|
|
|
|
.box-content & {
|
|
left: -$box-content-offset;
|
|
}
|
|
}
|
|
|
|
.slick-next {
|
|
right: 0;
|
|
|
|
&:before {
|
|
background-image: url("/svgs/carousel/next_ui-dark-gray.svg");
|
|
|
|
&:hover {
|
|
background-image: url("/svgs/carousel/next_ui-blue.svg");
|
|
background-size: 90%;
|
|
}
|
|
}
|
|
|
|
.box-content & {
|
|
right: -$box-content-offset;
|
|
}
|
|
}
|
|
|
|
.slick-slide {
|
|
padding-right: 30px;
|
|
}
|
|
|
|
}
|