[Summary view] [Print] [Text view]

   1  //
   2  // Carousel
   3  // --------------------------------------------------
   4  
   5  
   6  .carousel {
   7    position: relative;
   8    margin-bottom: @baseLineHeight;
   9    line-height: 1;
  10  }
  11  
  12  .carousel-inner {
  13    overflow: hidden;
  14    width: 100%;
  15    position: relative;
  16  }
  17  
  18  .carousel-inner {
  19  
  20    > .item {
  21      display: none;
  22      position: relative;
  23      .transition(.6s ease-in-out left);
  24  
  25      // Account for jankitude on images
  26      > img,
  27      > a > img {
  28        display: block;
  29        line-height: 1;
  30      }
  31    }
  32  
  33    > .active,
  34    > .next,
  35    > .prev { display: block; }
  36  
  37    > .active {
  38      left: 0;
  39    }
  40  
  41    > .next,
  42    > .prev {
  43      position: absolute;
  44      top: 0;
  45      width: 100%;
  46    }
  47  
  48    > .next {
  49      left: 100%;
  50    }
  51    > .prev {
  52      left: -100%;
  53    }
  54    > .next.left,
  55    > .prev.right {
  56      left: 0;
  57    }
  58  
  59    > .active.left {
  60      left: -100%;
  61    }
  62    > .active.right {
  63      left: 100%;
  64    }
  65  
  66  }
  67  
  68  // Left/right controls for nav
  69  // ---------------------------
  70  
  71  .carousel-control {
  72    position: absolute;
  73    top: 40%;
  74    left: 15px;
  75    width: 40px;
  76    height: 40px;
  77    margin-top: -20px;
  78    font-size: 60px;
  79    font-weight: 100;
  80    line-height: 30px;
  81    color: @white;
  82    text-align: center;
  83    background: @grayDarker;
  84    border: 3px solid @white;
  85    .border-radius(23px);
  86    .opacity(50);
  87  
  88    // we can't have this transition here
  89    // because webkit cancels the carousel
  90    // animation if you trip this while
  91    // in the middle of another animation
  92    // ;_;
  93    // .transition(opacity .2s linear);
  94  
  95    // Reposition the right one
  96    &.right {
  97      left: auto;
  98      right: 15px;
  99    }
 100  
 101    // Hover/focus state
 102    &:hover,
 103    &:focus {
 104      color: @white;
 105      text-decoration: none;
 106      .opacity(90);
 107    }
 108  }
 109  
 110  // Carousel indicator pips
 111  // -----------------------------
 112  .carousel-indicators {
 113    position: absolute;
 114    top: 15px;
 115    right: 15px;
 116    z-index: 5;
 117    margin: 0;
 118    list-style: none;
 119  
 120    li {
 121      display: block;
 122      float: left;
 123      width: 10px;
 124      height: 10px;
 125      margin-left: 5px;
 126      text-indent: -999px;
 127      background-color: #ccc;
 128      background-color: rgba(255,255,255,.25);
 129      border-radius: 5px;
 130    }
 131    .active {
 132      background-color: #fff;
 133    }
 134  }
 135  
 136  // Caption for text below images
 137  // -----------------------------
 138  
 139  .carousel-caption {
 140    position: absolute;
 141    left: 0;
 142    right: 0;
 143    bottom: 0;
 144    padding: 15px;
 145    background: @grayDark;
 146    background: rgba(0,0,0,.75);
 147  }
 148  .carousel-caption h4,
 149  .carousel-caption p {
 150    color: @white;
 151    line-height: @baseLineHeight;
 152  }
 153  .carousel-caption h4 {
 154    margin: 0 0 5px;
 155  }
 156  .carousel-caption p {
 157    margin-bottom: 0;
 158  }