Commit | Line | Data |
---|---|---|
7b869721 S |
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 | .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 | color: @carousel-control-color; | |
95 | text-decoration: none; | |
96 | .opacity(.9); | |
97 | } | |
98 | ||
99 | // Toggles | |
100 | .icon-prev, | |
101 | .icon-next, | |
102 | .glyphicon-chevron-left, | |
103 | .glyphicon-chevron-right { | |
104 | position: absolute; | |
105 | top: 50%; | |
106 | z-index: 5; | |
107 | display: inline-block; | |
108 | } | |
109 | .icon-prev, | |
110 | .glyphicon-chevron-left { | |
111 | left: 50%; | |
112 | } | |
113 | .icon-next, | |
114 | .glyphicon-chevron-right { | |
115 | right: 50%; | |
116 | } | |
117 | .icon-prev, | |
118 | .icon-next { | |
119 | width: 20px; | |
120 | height: 20px; | |
121 | margin-top: -10px; | |
122 | margin-left: -10px; | |
123 | font-family: serif; | |
124 | } | |
125 | ||
126 | .icon-prev { | |
127 | &:before { | |
128 | content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) | |
129 | } | |
130 | } | |
131 | .icon-next { | |
132 | &:before { | |
133 | content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) | |
134 | } | |
135 | } | |
136 | } | |
137 | ||
138 | // Optional indicator pips | |
139 | // | |
140 | // Add an unordered list with the following class and add a list item for each | |
141 | // slide your carousel holds. | |
142 | ||
143 | .carousel-indicators { | |
144 | position: absolute; | |
145 | bottom: 10px; | |
146 | left: 50%; | |
147 | z-index: 15; | |
148 | width: 60%; | |
149 | margin-left: -30%; | |
150 | padding-left: 0; | |
151 | list-style: none; | |
152 | text-align: center; | |
153 | ||
154 | li { | |
155 | display: inline-block; | |
156 | width: 10px; | |
157 | height: 10px; | |
158 | margin: 1px; | |
159 | text-indent: -999px; | |
160 | border: 1px solid @carousel-indicator-border-color; | |
161 | border-radius: 10px; | |
162 | cursor: pointer; | |
163 | ||
164 | // IE8-9 hack for event handling | |
165 | // | |
166 | // Internet Explorer 8-9 does not support clicks on elements without a set | |
167 | // `background-color`. We cannot use `filter` since that's not viewed as a | |
168 | // background color by the browser. Thus, a hack is needed. | |
169 | // | |
170 | // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we | |
171 | // set alpha transparency for the best results possible. | |
172 | background-color: #000 \9; // IE8 | |
173 | background-color: rgba(0,0,0,0); // IE9 | |
174 | } | |
175 | .active { | |
176 | margin: 0; | |
177 | width: 12px; | |
178 | height: 12px; | |
179 | background-color: @carousel-indicator-active-bg; | |
180 | } | |
181 | } | |
182 | ||
183 | // Optional captions | |
184 | // ----------------------------- | |
185 | // Hidden by default for smaller viewports | |
186 | .carousel-caption { | |
187 | position: absolute; | |
188 | left: 15%; | |
189 | right: 15%; | |
190 | bottom: 20px; | |
191 | z-index: 10; | |
192 | padding-top: 20px; | |
193 | padding-bottom: 20px; | |
194 | color: @carousel-caption-color; | |
195 | text-align: center; | |
196 | text-shadow: @carousel-text-shadow; | |
197 | & .btn { | |
198 | text-shadow: none; // No shadow for button elements in carousel-caption | |
199 | } | |
200 | } | |
201 | ||
202 | ||
203 | // Scale up controls for tablets and up | |
204 | @media screen and (min-width: @screen-sm-min) { | |
205 | ||
206 | // Scale up the controls a smidge | |
207 | .carousel-control { | |
208 | .glyphicons-chevron-left, | |
209 | .glyphicons-chevron-right, | |
210 | .icon-prev, | |
211 | .icon-next { | |
212 | width: 30px; | |
213 | height: 30px; | |
214 | margin-top: -15px; | |
215 | margin-left: -15px; | |
216 | font-size: 30px; | |
217 | } | |
218 | } | |
219 | ||
220 | // Show and left align the captions | |
221 | .carousel-caption { | |
222 | left: 20%; | |
223 | right: 20%; | |
224 | padding-bottom: 30px; | |
225 | } | |
226 | ||
227 | // Move up the indicators | |
228 | .carousel-indicators { | |
229 | bottom: 20px; | |
230 | } | |
231 | } |