123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121 |
- // 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;
- }
|