1 | @import '../../style/themes/index';
|
2 | @import '../../style/mixins/index';
|
3 |
|
4 | @carousel-prefix-cls: ~'@{ant-prefix}-carousel';
|
5 | @carousel-dot-margin: 4px;
|
6 |
|
7 | .@{carousel-prefix-cls} {
|
8 | .reset-component();
|
9 |
|
10 | .slick-slider {
|
11 | position: relative;
|
12 | display: block;
|
13 | box-sizing: border-box;
|
14 | touch-action: pan-y;
|
15 | -webkit-touch-callout: none;
|
16 | -webkit-tap-highlight-color: transparent;
|
17 | }
|
18 |
|
19 | .slick-list {
|
20 | position: relative;
|
21 | display: block;
|
22 | margin: 0;
|
23 | padding: 0;
|
24 | overflow: hidden;
|
25 |
|
26 | &:focus {
|
27 | outline: none;
|
28 | }
|
29 |
|
30 | &.dragging {
|
31 | cursor: pointer;
|
32 | }
|
33 |
|
34 | .slick-slide {
|
35 | pointer-events: none;
|
36 |
|
37 |
|
38 | input.@{ant-prefix}-radio-input,
|
39 | input.@{ant-prefix}-checkbox-input {
|
40 | visibility: hidden;
|
41 | }
|
42 |
|
43 | &.slick-active {
|
44 | pointer-events: auto;
|
45 |
|
46 | input.@{ant-prefix}-radio-input,
|
47 | input.@{ant-prefix}-checkbox-input {
|
48 | visibility: visible;
|
49 | }
|
50 | }
|
51 |
|
52 |
|
53 |
|
54 |
|
55 | > div > div {
|
56 | vertical-align: bottom;
|
57 | }
|
58 | }
|
59 | }
|
60 |
|
61 | .slick-slider .slick-track,
|
62 | .slick-slider .slick-list {
|
63 | transform: translate3d(0, 0, 0);
|
64 | touch-action: pan-y;
|
65 | }
|
66 |
|
67 | .slick-track {
|
68 | position: relative;
|
69 | top: 0;
|
70 | left: 0;
|
71 | display: block;
|
72 |
|
73 | &::before,
|
74 | &::after {
|
75 | display: table;
|
76 | content: '';
|
77 | }
|
78 |
|
79 | &::after {
|
80 | clear: both;
|
81 | }
|
82 |
|
83 | .slick-loading & {
|
84 | visibility: hidden;
|
85 | }
|
86 | }
|
87 |
|
88 | .slick-slide {
|
89 | display: none;
|
90 | float: left;
|
91 | height: 100%;
|
92 | min-height: 1px;
|
93 |
|
94 | img {
|
95 | display: block;
|
96 | }
|
97 |
|
98 | &.slick-loading img {
|
99 | display: none;
|
100 | }
|
101 |
|
102 | &.dragging img {
|
103 | pointer-events: none;
|
104 | }
|
105 | }
|
106 |
|
107 | .slick-initialized .slick-slide {
|
108 | display: block;
|
109 | }
|
110 |
|
111 | .slick-loading .slick-slide {
|
112 | visibility: hidden;
|
113 | }
|
114 |
|
115 | .slick-vertical .slick-slide {
|
116 | display: block;
|
117 | height: auto;
|
118 | }
|
119 |
|
120 | .slick-arrow.slick-hidden {
|
121 | display: none;
|
122 | }
|
123 |
|
124 |
|
125 | .slick-prev,
|
126 | .slick-next {
|
127 | position: absolute;
|
128 | top: 50%;
|
129 | display: block;
|
130 | width: 20px;
|
131 | height: 20px;
|
132 | margin-top: -10px;
|
133 | padding: 0;
|
134 | color: transparent;
|
135 | font-size: 0;
|
136 | line-height: 0;
|
137 | background: transparent;
|
138 | border: 0;
|
139 | outline: none;
|
140 | cursor: pointer;
|
141 |
|
142 | &:hover,
|
143 | &:focus {
|
144 | color: transparent;
|
145 | background: transparent;
|
146 | outline: none;
|
147 |
|
148 | &::before {
|
149 | opacity: 1;
|
150 | }
|
151 | }
|
152 |
|
153 | &.slick-disabled::before {
|
154 | opacity: 0.25;
|
155 | }
|
156 | }
|
157 |
|
158 | .slick-prev {
|
159 | left: -25px;
|
160 |
|
161 | &::before {
|
162 | content: '←';
|
163 | }
|
164 | }
|
165 |
|
166 | .slick-next {
|
167 | right: -25px;
|
168 |
|
169 | &::before {
|
170 | content: '→';
|
171 | }
|
172 | }
|
173 |
|
174 |
|
175 | .slick-dots {
|
176 | position: absolute;
|
177 | right: 0;
|
178 | bottom: 0;
|
179 | left: 0;
|
180 | z-index: 15;
|
181 | display: flex !important;
|
182 | justify-content: center;
|
183 | margin-right: 15%;
|
184 | margin-bottom: 0;
|
185 | margin-left: 15%;
|
186 | padding-left: 0;
|
187 | list-style: none;
|
188 |
|
189 | &-bottom {
|
190 | bottom: 12px;
|
191 | }
|
192 |
|
193 | &-top {
|
194 | top: 12px;
|
195 | bottom: auto;
|
196 | }
|
197 |
|
198 | li {
|
199 | position: relative;
|
200 | display: inline-block;
|
201 | flex: 0 1 auto;
|
202 | box-sizing: content-box;
|
203 | width: @carousel-dot-width;
|
204 | height: @carousel-dot-height;
|
205 | margin: 0 @carousel-dot-margin;
|
206 | padding: 0;
|
207 | text-align: center;
|
208 | text-indent: -999px;
|
209 | vertical-align: top;
|
210 | transition: all 0.5s;
|
211 |
|
212 | button {
|
213 | position: relative;
|
214 | display: block;
|
215 | width: 100%;
|
216 | height: @carousel-dot-height;
|
217 | padding: 0;
|
218 | color: transparent;
|
219 | font-size: 0;
|
220 | background: @component-background;
|
221 | border: 0;
|
222 | border-radius: 1px;
|
223 | outline: none;
|
224 | cursor: pointer;
|
225 | opacity: 0.3;
|
226 | transition: all 0.5s;
|
227 |
|
228 | &:hover,
|
229 | &:focus {
|
230 | opacity: 0.75;
|
231 | }
|
232 |
|
233 | &::after {
|
234 | position: absolute;
|
235 | top: -@carousel-dot-margin;
|
236 | right: -@carousel-dot-margin;
|
237 | bottom: -@carousel-dot-margin;
|
238 | left: -@carousel-dot-margin;
|
239 | content: '';
|
240 | }
|
241 | }
|
242 |
|
243 | &.slick-active {
|
244 | width: @carousel-dot-active-width;
|
245 |
|
246 | & button {
|
247 | background: @component-background;
|
248 | opacity: 1;
|
249 | }
|
250 |
|
251 | &:hover,
|
252 | &:focus {
|
253 | opacity: 1;
|
254 | }
|
255 | }
|
256 | }
|
257 | }
|
258 | }
|
259 |
|
260 | .@{ant-prefix}-carousel-vertical {
|
261 | .slick-dots {
|
262 | top: 50%;
|
263 | bottom: auto;
|
264 | flex-direction: column;
|
265 | width: @carousel-dot-height;
|
266 | height: auto;
|
267 | margin: 0;
|
268 | transform: translateY(-50%);
|
269 |
|
270 | &-left {
|
271 | right: auto;
|
272 | left: 12px;
|
273 | }
|
274 |
|
275 | &-right {
|
276 | right: 12px;
|
277 | left: auto;
|
278 | }
|
279 |
|
280 | li {
|
281 | width: @carousel-dot-height;
|
282 | height: @carousel-dot-width;
|
283 | margin: @carousel-dot-margin 0;
|
284 | vertical-align: baseline;
|
285 |
|
286 | button {
|
287 | width: @carousel-dot-height;
|
288 | height: @carousel-dot-width;
|
289 | }
|
290 |
|
291 | &.slick-active {
|
292 | width: @carousel-dot-height;
|
293 | height: @carousel-dot-active-width;
|
294 |
|
295 | button {
|
296 | width: @carousel-dot-height;
|
297 | height: @carousel-dot-active-width;
|
298 | }
|
299 | }
|
300 | }
|
301 | }
|
302 | }
|
303 |
|
304 | @import './rtl';
|