3 // --------------------------------------------------
6 // Wrapper for the slide container and indicators
19 .transition(.6s ease-in-out left);
21 // Account for jankitude on images
24 &:extend(.img-responsive);
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');
36 .translate3d(100%, 0, 0);
41 .translate3d(-100%, 0, 0);
47 .translate3d(0, 0, 0);
90 // Left/right controls for nav
91 // ---------------------------
98 width: @carousel-control-width;
99 .opacity(@carousel-control-opacity);
100 font-size: @carousel-control-font-size;
101 color: @carousel-control-color;
103 text-shadow: @carousel-text-shadow;
104 background-color: rgba(0, 0, 0, 0); // Fix IE9 click-thru bug
105 // We can't have this transition here because WebKit cancels the carousel
106 // animation if you trip this while in the middle of another animation.
108 // Set gradients for backgrounds
110 #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
115 #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
122 color: @carousel-control-color;
123 text-decoration: none;
130 .glyphicon-chevron-left,
131 .glyphicon-chevron-right {
136 display: inline-block;
139 .glyphicon-chevron-left {
144 .glyphicon-chevron-right {
159 content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
164 content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
169 // Optional indicator pips
171 // Add an unordered list with the following class and add a list item for each
172 // slide your carousel holds.
174 .carousel-indicators {
186 display: inline-block;
191 border: 1px solid @carousel-indicator-border-color;
195 // IE8-9 hack for event handling
197 // Internet Explorer 8-9 does not support clicks on elements without a set
198 // `background-color`. We cannot use `filter` since that's not viewed as a
199 // background color by the browser. Thus, a hack is needed.
200 // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
202 // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
203 // set alpha transparency for the best results possible.
204 background-color: #000 \9; // IE8
205 background-color: rgba(0,0,0,0); // IE9
211 background-color: @carousel-indicator-active-bg;
216 // -----------------------------
217 // Hidden by default for smaller viewports
225 padding-bottom: 20px;
226 color: @carousel-caption-color;
228 text-shadow: @carousel-text-shadow;
230 text-shadow: none; // No shadow for button elements in carousel-caption
235 // Scale up controls for tablets and up
236 @media screen and (min-width: @screen-sm-min) {
238 // Scale up the controls a smidge
240 .glyphicon-chevron-left,
241 .glyphicon-chevron-right,
244 width: (@carousel-control-font-size * 1.5);
245 height: (@carousel-control-font-size * 1.5);
246 margin-top: (@carousel-control-font-size / -2);
247 font-size: (@carousel-control-font-size * 1.5);
249 .glyphicon-chevron-left,
251 margin-left: (@carousel-control-font-size / -2);
253 .glyphicon-chevron-right,
255 margin-right: (@carousel-control-font-size / -2);
259 // Show and left align the captions
263 padding-bottom: 30px;
266 // Move up the indicators
267 .carousel-indicators {