1
0
mirror of https://github.com/Sonarr/Sonarr.git synced 2024-12-23 02:05:27 +02:00
Sonarr/NzbDrone.Web/_backboneApp/Content/Bootstrap/carousel.less

132 lines
1.9 KiB
Plaintext
Raw Normal View History

2013-01-17 03:39:42 +03:00
//
// Carousel
// --------------------------------------------------
.carousel {
position: relative;
margin-bottom: @baseLineHeight;
line-height: 1;
}
.carousel-inner {
overflow: hidden;
width: 100%;
position: relative;
}
.carousel-inner {
2013-01-17 03:39:42 +03:00
> .item {
2013-01-17 03:39:42 +03:00
display: none;
position: relative;
.transition(.6s ease-in-out left);
}
// Account for jankitude on images
> .item > img {
2013-01-17 03:39:42 +03:00
display: block;
line-height: 1;
}
> .active,
> .next,
> .prev { display: block; }
2013-01-17 03:39:42 +03:00
> .active {
2013-01-17 03:39:42 +03:00
left: 0;
}
> .next,
> .prev {
2013-01-17 03:39:42 +03:00
position: absolute;
top: 0;
width: 100%;
}
> .next {
2013-01-17 03:39:42 +03:00
left: 100%;
}
> .prev {
2013-01-17 03:39:42 +03:00
left: -100%;
}
> .next.left,
> .prev.right {
2013-01-17 03:39:42 +03:00
left: 0;
}
> .active.left {
2013-01-17 03:39:42 +03:00
left: -100%;
}
> .active.right {
2013-01-17 03:39:42 +03:00
left: 100%;
}
}
// Left/right controls for nav
// ---------------------------
.carousel-control {
position: absolute;
top: 40%;
left: 15px;
width: 40px;
height: 40px;
margin-top: -20px;
font-size: 60px;
font-weight: 100;
line-height: 30px;
color: @white;
text-align: center;
background: @grayDarker;
border: 3px solid @white;
.border-radius(23px);
.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);
// Reposition the right one
&.right {
left: auto;
right: 15px;
}
// Hover state
&:hover {
color: @white;
text-decoration: none;
.opacity(90);
}
}
// Caption for text below images
// -----------------------------
.carousel-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 15px;
background: @grayDark;
background: rgba(0,0,0,.75);
}
.carousel-caption h4,
.carousel-caption p {
color: @white;
line-height: @baseLineHeight;
}
.carousel-caption h4 {
margin: 0 0 5px;
}
.carousel-caption p {
margin-bottom: 0;
}