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  
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 }