UNPKG

9.43 kBtext/lessView Raw
1@import '../../style/themes/default';
2@import '../../style/mixins/index';
3@import '../../input/style/mixin';
4
5@pagination-prefix-cls: ~'@{c7n-prefix}-pagination';
6
7.@{pagination-prefix-cls} {
8 .reset-component;
9
10 ul,
11 ol {
12 margin: 0;
13 padding: 0;
14 list-style: none;
15 }
16
17 &::after {
18 display: block;
19 clear: both;
20 height: 0;
21 overflow: hidden;
22 visibility: hidden;
23 content: ' ';
24 }
25
26 &-total-text {
27 display: inline-block;
28 height: @pagination-item-size;
29 margin-right: 0.24rem;
30 color: rgba(0, 0, 0, 0.66);
31 line-height: @pagination-item-size;
32 vertical-align: middle;
33 }
34
35 &-item {
36 display: inline-block;
37 min-width: @pagination-item-size;
38 height: @pagination-item-size;
39 margin-right: 0.08rem;
40 font-family: @pagination-font-family;
41 line-height: @pagination-item-size - 0.02rem;
42 text-align: center;
43 vertical-align: middle;
44 list-style: none;
45 background-color: @component-background;
46 border-radius: @border-radius-base;
47 outline: 0;
48 cursor: pointer;
49 user-select: none;
50
51 a {
52 margin: 0 0.06rem;
53 color: @text-color;
54 text-decoration: none;
55 transition: none;
56 }
57
58 &:focus,
59 &:hover {
60 border-color: @primary-color;
61 transition: all @animation-duration-slow;
62 a {
63 color: @primary-color;
64 }
65 }
66
67 &-active {
68 font-weight: @pagination-font-weight-active;
69 border-color: @primary-color;
70
71 a {
72 color: @primary-color;
73 }
74
75 &:focus,
76 &:hover {
77 border-color: @primary-5;
78 }
79
80 &:focus a,
81 &:hover a {
82 color: @primary-5;
83 }
84 }
85 }
86
87 &-first,
88 &-last,
89 &-prev,
90 &-jump-prev,
91 &-jump-next {
92 margin-right: 0.08rem;
93 }
94
95 &-first,
96 &-last,
97 &-prev,
98 &-next,
99 &-jump-prev,
100 &-jump-next {
101 display: inline-block;
102 min-width: @pagination-item-size;
103 height: @pagination-item-size;
104 color: @text-color;
105 font-family: @pagination-font-family;
106 line-height: @pagination-item-size;
107 text-align: center;
108 vertical-align: middle;
109 list-style: none;
110 border-radius: @border-radius-base;
111 cursor: pointer;
112 transition: all @animation-duration-slow;
113 }
114
115 &-first,
116 &-last,
117 &-prev,
118 &-next {
119 outline: 0;
120
121 a {
122 color: @text-color;
123 user-select: none;
124 }
125
126 &:hover a {
127 border-color: @primary-5;
128 }
129
130 .@{pagination-prefix-cls}-item-link {
131 .iconfont-mixin(0.24rem);
132 display: block;
133 background-color: @component-background;
134 outline: none;
135 transition: all @animation-duration-slow;
136
137 &::before {
138 display: block;
139 height: @pagination-item-size - 0.02rem;
140 font-weight: 500;
141 line-height: @pagination-item-size;
142 text-align: center;
143 }
144 }
145
146 &:focus .@{pagination-prefix-cls}-item-link,
147 &:hover .@{pagination-prefix-cls}-item-link {
148 color: @primary-color;
149 border-color: @primary-color;
150 }
151 }
152
153 &-first {
154 .@{pagination-prefix-cls}-item-link::before {
155 display: block;
156 content: '\e5dc';
157 }
158 }
159
160 &-last {
161 .@{pagination-prefix-cls}-item-link::before {
162 display: block;
163 content: '\e5dd';
164 }
165 }
166
167 &-prev {
168 .@{pagination-prefix-cls}-item-link::before {
169 display: block;
170 content: '\e314';
171 }
172 }
173
174 &-next {
175 .@{pagination-prefix-cls}-item-link::before {
176 display: block;
177 content: '\e315';
178 }
179 }
180
181 &-disabled {
182 &,
183 &:hover,
184 &:focus {
185 cursor: not-allowed;
186 a,
187 .@{pagination-prefix-cls}-item-link {
188 color: @disabled-color;
189 border-color: @border-color-base;
190 cursor: not-allowed;
191 }
192 }
193 .@{c7n-prefix}-btn[disabled] {
194 background-color: transparent;
195 }
196 }
197
198 &-slash {
199 margin: 0 0.1rem 0 0.05rem;
200 }
201
202 &-options {
203 display: inline-block;
204 height: @pagination-item-size;
205 margin-left: 0.16rem;
206 line-height: @pagination-item-size;
207 vertical-align: middle;
208
209 &-size-changer.@{c7n-prefix}-select {
210 float: right;
211 width: auto;
212 height: @pagination-item-size;
213 line-height: @pagination-item-size - 0.03rem;
214
215 .@{c7n-prefix}-select-selection {
216 min-width: 0.64rem;
217 height: auto;
218 padding-top: 0;
219 text-align: right;
220 &__rendered {
221 display: block;
222 height: 0.32rem;
223 line-height: 0.3rem;
224 }
225
226 &-selected-value {
227 display: inline-block;
228 vertical-align: middle;
229 }
230
231 .@{c7n-prefix}-select-arrow {
232 display: inline-block;
233 vertical-align: inherit;
234 > i.@{iconfont-css-prefix} {
235 vertical-align: text-bottom;
236 }
237 }
238 }
239 .@{c7n-prefix}-select-underline {
240 display: none;
241 }
242 }
243
244 &-quick-jumper {
245 display: inline-block;
246 height: @input-height-base;
247 line-height: @input-height-base;
248 vertical-align: middle;
249
250 input {
251 .input;
252 width: 0.5rem;
253 height: @input-height-base;
254 margin: 0 0.08rem;
255 }
256 }
257
258 &-label {
259 display: inline-block;
260 margin-right: 0.04rem;
261 color: rgba(0, 0, 0, 0.66);
262 letter-spacing: 0.01em;
263 }
264 }
265
266 &-simple &-prev,
267 &-simple &-next {
268 height: @pagination-item-size-sm;
269 line-height: @pagination-item-size-sm;
270 vertical-align: top;
271 .@{pagination-prefix-cls}-item-link {
272 height: @pagination-item-size-sm;
273 border: 0;
274 &::before {
275 height: @pagination-item-size-sm;
276 line-height: @pagination-item-size-sm;
277 }
278 }
279 }
280
281 &-simple &-simple-pager {
282 display: inline-block;
283 height: @pagination-item-size-sm;
284 margin-right: 0.08rem;
285
286 input {
287 box-sizing: border-box;
288 height: 100%;
289 margin-right: 0.08rem;
290 padding: 0 0.06rem;
291 text-align: center;
292 background-color: @component-background;
293 border: @border-width-base @border-style-base @border-color-base;
294 border-radius: @border-radius-base;
295 outline: none;
296 transition: border-color @animation-duration-slow;
297
298 &:hover {
299 border-color: @primary-color;
300 }
301 }
302 }
303
304 &-tiny {
305 .@{pagination-prefix-cls}-options {
306 margin-right: 0.16rem;
307 }
308 }
309
310 &-small &-total-text,
311 &-small &-simple-pager {
312 height: @pagination-item-size-sm;
313 line-height: @pagination-item-size-sm;
314 }
315
316 &-small &-item {
317 min-width: @pagination-item-size-sm;
318 height: @pagination-item-size-sm;
319 margin: 0;
320 line-height: @pagination-item-size-sm - 0.02rem;
321 }
322
323 &-small &-item:not(&-item-active) {
324 background: transparent;
325 border-color: transparent;
326 }
327
328 &-small &-first,
329 &-small &-last,
330 &-small &-prev,
331 &-small &-next {
332 min-width: @pagination-item-size-sm;
333 height: @pagination-item-size-sm;
334 margin: 0;
335 line-height: @pagination-item-size-sm;
336 }
337
338 &-small &-first &-item-link,
339 &-small &-last &-item-link,
340 &-small &-prev &-item-link,
341 &-small &-next &-item-link {
342 background: transparent;
343 border-color: transparent;
344 &::before {
345 height: @pagination-item-size-sm;
346 line-height: @pagination-item-size-sm;
347 }
348 }
349
350 &-small &-jump-prev,
351 &-small &-jump-next {
352 height: @pagination-item-size-sm;
353 margin-right: 0;
354 line-height: @pagination-item-size-sm;
355 }
356
357 &-small &-options {
358 height: @pagination-item-size-sm;
359 &-quick-jumper {
360 height: @pagination-item-size-sm;
361 line-height: @pagination-item-size-sm;
362
363 input {
364 .input-sm;
365 width: 0.44rem;
366 height: @pagination-item-size-sm;
367 }
368 }
369 }
370
371 &-large {
372 font-size: @font-size-base;
373 i.icon {
374 font-size: @font-size-base;
375 }
376 }
377
378 &-large &-total-text,
379 &-large &-simple-pager {
380 height: @pagination-item-size-lg;
381 line-height: @pagination-item-size-lg;
382 }
383
384 &-large &-item {
385 min-width: @pagination-item-size-lg;
386 height: @pagination-item-size-lg;
387 margin: 0;
388 line-height: @pagination-item-size-lg - 0.02rem;
389 }
390
391 &-large &-item:not(&-item-active) {
392 background: transparent;
393 border-color: transparent;
394 }
395
396 &-large &-first,
397 &-large &-last,
398 &-large &-prev,
399 &-large &-next {
400 min-width: @pagination-item-size-lg;
401 height: @pagination-item-size-lg;
402 margin: 0;
403 line-height: @pagination-item-size-lg;
404 }
405
406 &-large &-first &-item-link,
407 &-large &-last &-item-link,
408 &-large &-prev &-item-link,
409 &-large &-next &-item-link {
410 background: transparent;
411 border-color: transparent;
412 &::before {
413 height: @pagination-item-size-lg;
414 line-height: @pagination-item-size-lg;
415 }
416 }
417
418 &-large &-jump-prev,
419 &-large &-jump-next {
420 height: @pagination-item-size-lg;
421 margin-right: 0;
422 line-height: @pagination-item-size-lg;
423 }
424
425 &-large &-options {
426 height: @pagination-item-size-lg;
427 &-quick-jumper {
428 height: @pagination-item-size-lg;
429 line-height: @pagination-item-size-lg;
430
431 input {
432 .input-sm;
433 width: 0.44rem;
434 height: @pagination-item-size-lg;
435 }
436 }
437 }
438}
439
440@media only screen and (max-width: @screen-lg) {
441 .@{pagination-prefix-cls}-item {
442 &-after-jump-prev,
443 &-before-jump-next {
444 display: none;
445 }
446 }
447}
448
449@media only screen and (max-width: @screen-sm) {
450 .@{pagination-prefix-cls}-options {
451 display: none;
452 }
453}