0074328fbb
This changes all of the Bootstrap CSS and Horizon CSS to use LESS. Horizon's specific CSS will be organized into separate files in another commit, as it is outside the scope of this BP. We are also now packing LESS 1.3.0 directly within Horizon. Implementation of Blueprint transition-to-lesscss Change-Id: Ie4be8b28ab3ce04ea21d7d5cd49c2ccb66bd8ade
122 lines
1.8 KiB
Plaintext
122 lines
1.8 KiB
Plaintext
// CAROUSEL
|
|
// --------
|
|
|
|
.carousel {
|
|
position: relative;
|
|
margin-bottom: @baseLineHeight;
|
|
line-height: 1;
|
|
}
|
|
|
|
.carousel-inner {
|
|
overflow: hidden;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.carousel {
|
|
|
|
.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: 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: 10px 15px 5px;
|
|
background: @grayDark;
|
|
background: rgba(0,0,0,.75);
|
|
}
|
|
.carousel-caption h4,
|
|
.carousel-caption p {
|
|
color: @white;
|
|
}
|