css/bootstrap/carousel.less

   1 //
   2 // Carousel
   3 // --------------------------------------------------
   4
   5
   6 // Wrapper for the slide container and indicators
   7 .carousel {
   8   position: relative;
   9 }
  10
  11 .carousel-inner {
  12   position: relative;
  13   overflow: hidden;
  14   width: 100%;
  15
  16   > .item {
  17     display: none;
  18     position: relative;
  19     .transition(.6s ease-in-out left);
  20
  21     // Account for jankitude on images
  22     > img,
  23     > a > img {
  24       &:extend(.img-responsive);
  25       line-height: 1;
  26     }
  27   }
  28
  29   > .active,
  30   > .next,
  31   > .prev { display: block; }
  32
  33   > .active {
  34     left: 0;
  35   }
  36
  37   > .next,
  38   > .prev {
  39     position: absolute;
  40     top: 0;
  41     width: 100%;
  42   }
  43
  44   > .next {
  45     left: 100%;
  46   }
  47   > .prev {
  48     left: -100%;
  49   }
  50   > .next.left,
  51   > .prev.right {
  52     left: 0;
  53   }
  54
  55   > .active.left {
  56     left: -100%;
  57   }
  58   > .active.right {
  59     left: 100%;
  60   }
  61
  62 }
  63
  64 // Left/right controls for nav
  65 // ---------------------------
  66
  67 .carousel-control {
  68   position: absolute;
  69   top: 0;
  70   left: 0;
  71   bottom: 0;
  72   width: @carousel-control-width;
  73   .opacity(@carousel-control-opacity);
  74   font-size: @carousel-control-font-size;
  75   color: @carousel-control-color;
  76   text-align: center;
  77   text-shadow: @carousel-text-shadow;
  78   // We can't have this transition here because WebKit cancels the carousel
  79   // animation if you trip this while in the middle of another animation.
  80
  81   // Set gradients for backgrounds
  82   &.left {
  83     #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
  84   }
  85   &.right {
  86     left: auto;
  87     right: 0;
  88     #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
  89   }
  90
  91   // Hover/focus state
  92   &:hover,
  93   &:focus {
  94     outline: none;
  95     color: @carousel-control-color;
  96     text-decoration: none;
  97     .opacity(.9);
  98   }
  99
 100   // Toggles
 101   .icon-prev,
 102   .icon-next,
 103   .glyphicon-chevron-left,
 104   .glyphicon-chevron-right {
 105     position: absolute;
 106     top: 50%;
 107     z-index: 5;
 108     display: inline-block;
 109   }
 110   .icon-prev,
 111   .glyphicon-chevron-left {
 112     left: 50%;
 113   }
 114   .icon-next,
 115   .glyphicon-chevron-right {
 116     right: 50%;
 117   }
 118   .icon-prev,
 119   .icon-next {
 120     width:  20px;
 121     height: 20px;
 122     margin-top: -10px;
 123     margin-left: -10px;
 124     font-family: serif;
 125   }
 126
 127   .icon-prev {
 128     &:before {
 129       content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
 130     }
 131   }
 132   .icon-next {
 133     &:before {
 134       content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
 135     }
 136   }
 137 }
 138
 139 // Optional indicator pips
 140 //
 141 // Add an unordered list with the following class and add a list item for each
 142 // slide your carousel holds.
 143
 144 .carousel-indicators {
 145   position: absolute;
 146   bottom: 10px;
 147   left: 50%;
 148   z-index: 15;
 149   width: 60%;
 150   margin-left: -30%;
 151   padding-left: 0;
 152   list-style: none;
 153   text-align: center;
 154
 155   li {
 156     display: inline-block;
 157     width:  10px;
 158     height: 10px;
 159     margin: 1px;
 160     text-indent: -999px;
 161     border: 1px solid @carousel-indicator-border-color;
 162     border-radius: 10px;
 163     cursor: pointer;
 164
 165     // IE8-9 hack for event handling
 166     //
 167     // Internet Explorer 8-9 does not support clicks on elements without a set
 168     // `background-color`. We cannot use `filter` since that's not viewed as a
 169     // background color by the browser. Thus, a hack is needed.
 170     //
 171     // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
 172     // set alpha transparency for the best results possible.
 173     background-color: #000 \9; // IE8
 174     background-color: rgba(0,0,0,0); // IE9
 175   }
 176   .active {
 177     margin: 0;
 178     width:  12px;
 179     height: 12px;
 180     background-color: @carousel-indicator-active-bg;
 181   }
 182 }
 183
 184 // Optional captions
 185 // -----------------------------
 186 // Hidden by default for smaller viewports
 187 .carousel-caption {
 188   position: absolute;
 189   left: 15%;
 190   right: 15%;
 191   bottom: 20px;
 192   z-index: 10;
 193   padding-top: 20px;
 194   padding-bottom: 20px;
 195   color: @carousel-caption-color;
 196   text-align: center;
 197   text-shadow: @carousel-text-shadow;
 198   & .btn {
 199     text-shadow: none; // No shadow for button elements in carousel-caption
 200   }
 201 }
 202
 203
 204 // Scale up controls for tablets and up
 205 @media screen and (min-width: @screen-sm-min) {
 206
 207   // Scale up the controls a smidge
 208   .carousel-control {
 209     .glyphicon-chevron-left,
 210     .glyphicon-chevron-right,
 211     .icon-prev,
 212     .icon-next {
 213       width: 30px;
 214       height: 30px;
 215       margin-top: -15px;
 216       margin-left: -15px;
 217       font-size: 30px;
 218     }
 219   }
 220
 221   // Show and left align the captions
 222   .carousel-caption {
 223     left: 20%;
 224     right: 20%;
 225     padding-bottom: 30px;
 226   }
 227
 228   // Move up the indicators
 229   .carousel-indicators {
 230     bottom: 20px;
 231   }
 232 }