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