1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
twbs--bootstrap/less/carousel.less
2012-11-30 15:05:23 -08:00

147 lines
2.3 KiB
Text

//
// Carousel
// --------------------------------------------------
.carousel {
position: relative;
margin-bottom: @line-height-base;
line-height: 1;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel-inner {
> .item {
display: none;
position: relative;
.transition(.6s ease-in-out left);
}
// Account for jankitude on images
> .item > img {
display: block;
line-height: 1;
}
> .active,
> .next,
> .prev { display: block; }
> .active {
left: 0;
}
> .next,
> .prev {
position: absolute;
top: 0;
width: 100%;
}
> .next {
left: 100%;
}
> .prev {
left: -100%;
}
> .next.left,
> .prev.right {
left: 0;
}
> .active.left {
left: -100%;
}
> .active.right {
left: 100%;
}
}
// Left/right controls for nav
// ---------------------------
.carousel-control {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 120px;
.opacity(50);
// we can't have this transition here
// because webkit cancels the carousel
// animation if you trip this while
// in the middle of another animation
// ;_;
// .transition(opacity .2s linear);
// Set gradients for backgrounds
&.left {
#gradient > .horizontal(rgba(0,0,0,.75), rgba(0,0,0,.001));
background-color: transparent;
}
&.right {
left: auto;
right: 0;
#gradient > .horizontal(rgba(0,0,0,.001), rgba(0,0,0,.75));
background-color: transparent;
}
// Hover state
&:hover {
color: #fff;
text-decoration: none;
.opacity(90);
}
// Toggles
.control {
position: absolute;
top: 50%;
z-index: 5;
display: block;
margin-top: -35px;
margin-left: 30px;
font-size: 80px;
font-weight: 100;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
&.right .control {
margin-left: 70px;
}
}
// Caption for text below images
// -----------------------------
.carousel-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
padding: 40px;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
max-width: 60%;
}
.carousel-caption h3,
.carousel-caption p {
color: #fff;
line-height: @line-height-base;
}
.carousel-caption h3 {
margin: 0 0 5px;
}
.carousel-caption p {
margin-bottom: 0;
}