corrade-nucleus-nucleons – Blame information for rev
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
1 | office | 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 | 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. |
||
107 | |||
108 | // Set gradients for backgrounds |
||
109 | &.left { |
||
110 | #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001)); |
||
111 | } |
||
112 | &.right { |
||
113 | left: auto; |
||
114 | right: 0; |
||
115 | #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5)); |
||
116 | } |
||
117 | |||
118 | // Hover/focus state |
||
119 | &:hover, |
||
120 | &:focus { |
||
121 | outline: 0; |
||
122 | color: @carousel-control-color; |
||
123 | text-decoration: none; |
||
124 | .opacity(.9); |
||
125 | } |
||
126 | |||
127 | // Toggles |
||
128 | .icon-prev, |
||
129 | .icon-next, |
||
130 | .glyphicon-chevron-left, |
||
131 | .glyphicon-chevron-right { |
||
132 | position: absolute; |
||
133 | top: 50%; |
||
134 | margin-top: -10px; |
||
135 | z-index: 5; |
||
136 | display: inline-block; |
||
137 | } |
||
138 | .icon-prev, |
||
139 | .glyphicon-chevron-left { |
||
140 | left: 50%; |
||
141 | margin-left: -10px; |
||
142 | } |
||
143 | .icon-next, |
||
144 | .glyphicon-chevron-right { |
||
145 | right: 50%; |
||
146 | margin-right: -10px; |
||
147 | } |
||
148 | .icon-prev, |
||
149 | .icon-next { |
||
150 | width: 20px; |
||
151 | height: 20px; |
||
152 | line-height: 1; |
||
153 | font-family: serif; |
||
154 | } |
||
155 | |||
156 | |||
157 | .icon-prev { |
||
158 | &:before { |
||
159 | content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) |
||
160 | } |
||
161 | } |
||
162 | .icon-next { |
||
163 | &:before { |
||
164 | content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) |
||
165 | } |
||
166 | } |
||
167 | } |
||
168 | |||
169 | // Optional indicator pips |
||
170 | // |
||
171 | // Add an unordered list with the following class and add a list item for each |
||
172 | // slide your carousel holds. |
||
173 | |||
174 | .carousel-indicators { |
||
175 | position: absolute; |
||
176 | bottom: 10px; |
||
177 | left: 50%; |
||
178 | z-index: 15; |
||
179 | width: 60%; |
||
180 | margin-left: -30%; |
||
181 | padding-left: 0; |
||
182 | list-style: none; |
||
183 | text-align: center; |
||
184 | |||
185 | li { |
||
186 | display: inline-block; |
||
187 | width: 10px; |
||
188 | height: 10px; |
||
189 | margin: 1px; |
||
190 | text-indent: -999px; |
||
191 | border: 1px solid @carousel-indicator-border-color; |
||
192 | border-radius: 10px; |
||
193 | cursor: pointer; |
||
194 | |||
195 | // IE8-9 hack for event handling |
||
196 | // |
||
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 |
||
201 | // |
||
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 |
||
206 | } |
||
207 | .active { |
||
208 | margin: 0; |
||
209 | width: 12px; |
||
210 | height: 12px; |
||
211 | background-color: @carousel-indicator-active-bg; |
||
212 | } |
||
213 | } |
||
214 | |||
215 | // Optional captions |
||
216 | // ----------------------------- |
||
217 | // Hidden by default for smaller viewports |
||
218 | .carousel-caption { |
||
219 | position: absolute; |
||
220 | left: 15%; |
||
221 | right: 15%; |
||
222 | bottom: 20px; |
||
223 | z-index: 10; |
||
224 | padding-top: 20px; |
||
225 | padding-bottom: 20px; |
||
226 | color: @carousel-caption-color; |
||
227 | text-align: center; |
||
228 | text-shadow: @carousel-text-shadow; |
||
229 | & .btn { |
||
230 | text-shadow: none; // No shadow for button elements in carousel-caption |
||
231 | } |
||
232 | } |
||
233 | |||
234 | |||
235 | // Scale up controls for tablets and up |
||
236 | @media screen and (min-width: @screen-sm-min) { |
||
237 | |||
238 | // Scale up the controls a smidge |
||
239 | .carousel-control { |
||
240 | .glyphicon-chevron-left, |
||
241 | .glyphicon-chevron-right, |
||
242 | .icon-prev, |
||
243 | .icon-next { |
||
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); |
||
248 | } |
||
249 | .glyphicon-chevron-left, |
||
250 | .icon-prev { |
||
251 | margin-left: (@carousel-control-font-size / -2); |
||
252 | } |
||
253 | .glyphicon-chevron-right, |
||
254 | .icon-next { |
||
255 | margin-right: (@carousel-control-font-size / -2); |
||
256 | } |
||
257 | } |
||
258 | |||
259 | // Show and left align the captions |
||
260 | .carousel-caption { |
||
261 | left: 20%; |
||
262 | right: 20%; |
||
263 | padding-bottom: 30px; |
||
264 | } |
||
265 | |||
266 | // Move up the indicators |
||
267 | .carousel-indicators { |
||
268 | bottom: 20px; |
||
269 | } |
||
270 | } |