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