corrade-nucleus-nucleons – Blame information for rev 20

Subversion Repositories:
Rev:
Rev Author Line No. Line
20 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 }