3 // --------------------------------------------------
5 // Wrapper for the slide container and indicators
18 @include transition(.6s ease-in-out left);
20 // Account for jankitude on images
23 @include img-responsive;
27 // WebKit CSS3 transforms for supported devices
28 @media all and (transform-3d), (-webkit-transform-3d) {
29 @include transition-transform(0.6s ease-in-out);
30 @include backface-visibility(hidden);
31 @include perspective(1000px);
35 @include translate3d(100%, 0, 0);
40 @include translate3d(-100%, 0, 0);
46 @include translate3d(0, 0, 0);
89 // Left/right controls for nav
90 // ---------------------------
97 width: $carousel-control-width;
98 @include opacity($carousel-control-opacity);
99 font-size: $carousel-control-font-size;
100 color: $carousel-control-color;
102 text-shadow: $carousel-text-shadow;
103 // We can't have this transition here because WebKit cancels the carousel
104 // animation if you trip this while in the middle of another animation.
106 // Set gradients for backgrounds
108 @include gradient-horizontal($start-color: rgba(0, 0, 0, .5), $end-color: rgba(0, 0, 0, .0001));
113 @include gradient-horizontal($start-color: rgba(0, 0, 0, .0001), $end-color: rgba(0, 0, 0, .5));
120 color: $carousel-control-color;
121 text-decoration: none;
122 @include opacity(.9);
128 .glyphicon-chevron-left,
129 .glyphicon-chevron-right {
134 display: inline-block;
137 .glyphicon-chevron-left {
142 .glyphicon-chevron-right {
156 content: '\2039'; // SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
161 content: '\203a'; // SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
166 // Optional indicator pips
168 // Add an unordered list with the following class and add a list item for each
169 // slide your carousel holds.
171 .carousel-indicators {
183 display: inline-block;
188 border: 1px solid $carousel-indicator-border-color;
192 // IE8-9 hack for event handling
194 // Internet Explorer 8-9 does not support clicks on elements without a set
195 // `background-color`. We cannot use `filter` since that's not viewed as a
196 // background color by the browser. Thus, a hack is needed.
197 // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
199 // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
200 // set alpha transparency for the best results possible.
201 background-color: #000 \9; // IE8
202 background-color: rgba(0, 0, 0, 0); // IE9
208 background-color: $carousel-indicator-active-bg;
213 // -----------------------------
214 // Hidden by default for smaller viewports
222 padding-bottom: 20px;
223 color: $carousel-caption-color;
225 text-shadow: $carousel-text-shadow;
227 text-shadow: none; // No shadow for button elements in carousel-caption
231 // Scale up controls for tablets and up
232 @media screen and (min-width: $screen-sm-min) {
234 // Scale up the controls a smidge
236 .glyphicon-chevron-left,
237 .glyphicon-chevron-right,
245 .glyphicon-chevron-left,
249 .glyphicon-chevron-right,
255 // Show and left align the captions
259 padding-bottom: 30px;
262 // Move up the indicators
263 .carousel-indicators {