scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-16 16:19:48 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix carousel styling for box container

Browse source
This commit is contained in:
Ray Schamp 2015-09-08 15:10:25 -04:00
parent a02c73ddf2
commit d53a84925d
2 changed files with 21 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,9 +1,14 @@
.carousel {
$icon-size: 40px;
$button-offset: $icon-size + 5px;
$box-content-offset: 20px;
padding: 0 $button-offset;
.box-content & {
padding: 0 $button-offset - 20px;
}
.slick-next, .slick-prev {
width: $icon-size;
height: $icon-size;
@ -21,13 +26,22 @@
.slick-prev {
left: 0;
.box-content & {
left: -$box-content-offset;
}
}
.slick-next {
right: 0;
.box-content & {
right: -$box-content-offset;
}
}
.slick-slide {
padding-right: 30px;
}
}

7
src/views/components/components.jsx
View file

@ -1,6 +1,7 @@
var React = require('react');
var Box = require('../../components/box/box.jsx');
var Carousel = require('../../components/carousel/carousel.jsx');
require('./components.scss');
@ -16,6 +17,12 @@ var View = React.createClass({
<h4>Things go in here</h4>
<p>Lorem ipsum dolor sit amet.</p>
</Box>
<h1>Carousel Component</h1>
<Carousel />
<Box
title="Carousel component in a box!">
<Carousel />
</Box>
</div>
);
}