|
| 1 | +// stylelint-disable media-feature-name-no-unknown |
| 2 | + |
1 | 3 | // |
2 | 4 | // Carousel |
3 | 5 | // -------------------------------------------------- |
|
10 | 12 |
|
11 | 13 | .carousel-inner { |
12 | 14 | position: relative; |
13 | | - overflow: hidden; |
14 | 15 | width: 100%; |
| 16 | + overflow: hidden; |
15 | 17 |
|
16 | 18 | > .item { |
17 | | - display: none; |
18 | 19 | position: relative; |
| 20 | + display: none; |
19 | 21 | .transition(.6s ease-in-out left); |
20 | 22 |
|
21 | 23 | // Account for jankitude on images |
|
27 | 29 |
|
28 | 30 | // WebKit CSS3 transforms for supported devices |
29 | 31 | @media all and (transform-3d), (-webkit-transform-3d) { |
30 | | - .transition-transform(~'0.6s ease-in-out'); |
31 | | - .backface-visibility(~'hidden'); |
| 32 | + .transition-transform(~"0.6s ease-in-out"); |
| 33 | + .backface-visibility(~"hidden"); |
32 | 34 | .perspective(1000px); |
33 | 35 |
|
34 | 36 | &.next, |
|
93 | 95 | .carousel-control { |
94 | 96 | position: absolute; |
95 | 97 | top: 0; |
96 | | - left: 0; |
97 | 98 | bottom: 0; |
| 99 | + left: 0; |
98 | 100 | width: @carousel-control-width; |
99 | | - .opacity(@carousel-control-opacity); |
100 | 101 | font-size: @carousel-control-font-size; |
101 | 102 | color: @carousel-control-color; |
102 | 103 | text-align: center; |
103 | 104 | text-shadow: @carousel-text-shadow; |
104 | 105 | background-color: rgba(0, 0, 0, 0); // Fix IE9 click-thru bug |
| 106 | + .opacity(@carousel-control-opacity); |
105 | 107 | // We can't have this transition here because WebKit cancels the carousel |
106 | 108 | // animation if you trip this while in the middle of another animation. |
107 | 109 |
|
108 | 110 | // Set gradients for backgrounds |
109 | 111 | &.left { |
110 | | - #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001)); |
| 112 | + #gradient > .horizontal(@start-color: rgba(0, 0, 0, .5); @end-color: rgba(0, 0, 0, .0001)); |
111 | 113 | } |
112 | 114 | &.right { |
113 | | - left: auto; |
114 | 115 | right: 0; |
115 | | - #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5)); |
| 116 | + left: auto; |
| 117 | + #gradient > .horizontal(@start-color: rgba(0, 0, 0, .0001); @end-color: rgba(0, 0, 0, .5)); |
116 | 118 | } |
117 | 119 |
|
118 | 120 | // Hover/focus state |
119 | 121 | &:hover, |
120 | 122 | &:focus { |
121 | | - outline: 0; |
122 | 123 | color: @carousel-control-color; |
123 | 124 | text-decoration: none; |
| 125 | + outline: 0; |
124 | 126 | .opacity(.9); |
125 | 127 | } |
126 | 128 |
|
|
131 | 133 | .glyphicon-chevron-right { |
132 | 134 | position: absolute; |
133 | 135 | top: 50%; |
134 | | - margin-top: -10px; |
135 | 136 | z-index: 5; |
136 | 137 | display: inline-block; |
| 138 | + margin-top: -10px; |
137 | 139 | } |
138 | 140 | .icon-prev, |
139 | 141 | .glyphicon-chevron-left { |
|
147 | 149 | } |
148 | 150 | .icon-prev, |
149 | 151 | .icon-next { |
150 | | - width: 20px; |
| 152 | + width: 20px; |
151 | 153 | height: 20px; |
152 | | - line-height: 1; |
153 | 154 | font-family: serif; |
| 155 | + line-height: 1; |
154 | 156 | } |
155 | 157 |
|
156 | | - |
157 | 158 | .icon-prev { |
158 | 159 | &:before { |
159 | | - content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) |
| 160 | + content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) |
160 | 161 | } |
161 | 162 | } |
162 | 163 | .icon-next { |
163 | 164 | &:before { |
164 | | - content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) |
| 165 | + content: "\203a";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) |
165 | 166 | } |
166 | 167 | } |
167 | 168 | } |
|
177 | 178 | left: 50%; |
178 | 179 | z-index: 15; |
179 | 180 | width: 60%; |
180 | | - margin-left: -30%; |
181 | 181 | padding-left: 0; |
182 | | - list-style: none; |
| 182 | + margin-left: -30%; |
183 | 183 | text-align: center; |
| 184 | + list-style: none; |
184 | 185 |
|
185 | 186 | li { |
186 | 187 | display: inline-block; |
187 | | - width: 10px; |
| 188 | + width: 10px; |
188 | 189 | height: 10px; |
189 | 190 | margin: 1px; |
190 | 191 | text-indent: -999px; |
191 | | - border: 1px solid @carousel-indicator-border-color; |
192 | | - border-radius: 10px; |
193 | 192 | cursor: pointer; |
194 | | - |
195 | 193 | // IE8-9 hack for event handling |
196 | 194 | // |
197 | 195 | // Internet Explorer 8-9 does not support clicks on elements without a set |
|
202 | 200 | // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we |
203 | 201 | // set alpha transparency for the best results possible. |
204 | 202 | background-color: #000 \9; // IE8 |
205 | | - background-color: rgba(0,0,0,0); // IE9 |
| 203 | + background-color: rgba(0, 0, 0, 0); // IE9 |
| 204 | + |
| 205 | + border: 1px solid @carousel-indicator-border-color; |
| 206 | + border-radius: 10px; |
206 | 207 | } |
| 208 | + |
207 | 209 | .active { |
208 | | - margin: 0; |
209 | | - width: 12px; |
| 210 | + width: 12px; |
210 | 211 | height: 12px; |
| 212 | + margin: 0; |
211 | 213 | background-color: @carousel-indicator-active-bg; |
212 | 214 | } |
213 | 215 | } |
|
217 | 219 | // Hidden by default for smaller viewports |
218 | 220 | .carousel-caption { |
219 | 221 | position: absolute; |
220 | | - left: 15%; |
221 | 222 | right: 15%; |
222 | 223 | bottom: 20px; |
| 224 | + left: 15%; |
223 | 225 | z-index: 10; |
224 | 226 | padding-top: 20px; |
225 | 227 | padding-bottom: 20px; |
226 | 228 | color: @carousel-caption-color; |
227 | 229 | text-align: center; |
228 | 230 | text-shadow: @carousel-text-shadow; |
| 231 | + |
229 | 232 | & .btn { |
230 | 233 | text-shadow: none; // No shadow for button elements in carousel-caption |
231 | 234 | } |
|
258 | 261 |
|
259 | 262 | // Show and left align the captions |
260 | 263 | .carousel-caption { |
261 | | - left: 20%; |
262 | 264 | right: 20%; |
| 265 | + left: 20%; |
263 | 266 | padding-bottom: 30px; |
264 | 267 | } |
265 | 268 |
|
|
0 commit comments