]>
Commit | Line | Data |
---|---|---|
11fdf7f2 TL |
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(1000); | |
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 | z-index: 5; | |
134 | display: inline-block; | |
135 | } | |
136 | .icon-prev, | |
137 | .glyphicon-chevron-left { | |
138 | left: 50%; | |
139 | margin-left: -10px; | |
140 | } | |
141 | .icon-next, | |
142 | .glyphicon-chevron-right { | |
143 | right: 50%; | |
144 | margin-right: -10px; | |
145 | } | |
146 | .icon-prev, | |
147 | .icon-next { | |
148 | width: 20px; | |
149 | height: 20px; | |
150 | margin-top: -10px; | |
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 | } |