| // |
| // Carousel |
| // -------------------------------------------------- |
| |
| |
| .carousel { |
| position: relative; |
| margin-bottom: @baseLineHeight; |
| line-height: 1; |
| } |
| |
| .carousel-inner { |
| overflow: hidden; |
| width: 100%; |
| position: relative; |
| } |
| |
| .carousel-inner { |
| |
| > .item { |
| display: none; |
| position: relative; |
| .transition(.6s ease-in-out left); |
| |
| // Account for jankitude on images |
| > img, |
| > a > 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/focus state |
| &:hover, |
| &:focus { |
| color: @white; |
| text-decoration: none; |
| .opacity(90); |
| } |
| } |
| |
| // Carousel indicator pips |
| // ----------------------------- |
| .carousel-indicators { |
| position: absolute; |
| top: 15px; |
| right: 15px; |
| z-index: 5; |
| margin: 0; |
| list-style: none; |
| |
| li { |
| display: block; |
| float: left; |
| width: 10px; |
| height: 10px; |
| margin-left: 5px; |
| text-indent: -999px; |
| background-color: #ccc; |
| background-color: rgba(255,255,255,.25); |
| border-radius: 5px; |
| } |
| .active { |
| background-color: #fff; |
| } |
| } |
| |
| // 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; |
| } |