themes/default/less/carousel.less

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