css/bootstrap/carousel.less

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