libs/bootstrap/less/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-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 }