UNPKG

8.96 kBtext/lessView Raw
1@import '../../style/themes/index';
2@import '../../style/mixins/index';
3@import '../../input/style/mixin';
4
5@pagination-prefix-cls: ~'@{ant-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: 8px;
30 line-height: @pagination-item-size - 2px;
31 vertical-align: middle;
32 }
33
34 &-item {
35 display: inline-block;
36 min-width: @pagination-item-size;
37 height: @pagination-item-size;
38 margin-right: 8px;
39 font-family: @pagination-font-family;
40 line-height: @pagination-item-size - 2px;
41 text-align: center;
42 vertical-align: middle;
43 list-style: none;
44 background-color: @pagination-item-bg;
45 border: @border-width-base @border-style-base @border-color-base;
46 border-radius: @border-radius-base;
47 outline: 0;
48 cursor: pointer;
49 user-select: none;
50
51 a {
52 display: block;
53 padding: 0 6px;
54 color: @text-color;
55 transition: none;
56
57 &:hover {
58 text-decoration: none;
59 }
60 }
61
62 &:focus-visible,
63 &:hover {
64 border-color: @primary-color;
65 transition: all 0.3s;
66 a {
67 color: @primary-color;
68 }
69 }
70
71 &-active {
72 font-weight: @pagination-font-weight-active;
73 background: @pagination-item-bg-active;
74 border-color: @primary-color;
75
76 a {
77 color: @primary-color;
78 }
79
80 &:focus-visible,
81 &:hover {
82 border-color: @primary-5;
83 }
84
85 &:focus-visible a,
86 &:hover a {
87 color: @primary-5;
88 }
89 }
90 }
91
92 &-jump-prev,
93 &-jump-next {
94 outline: 0;
95 .@{pagination-prefix-cls}-item-container {
96 position: relative;
97
98 .@{pagination-prefix-cls}-item-link-icon {
99 color: @primary-color;
100 font-size: @font-size-sm;
101 letter-spacing: -1px;
102 opacity: 0;
103 transition: all 0.2s;
104 &-svg {
105 top: 0;
106 right: 0;
107 bottom: 0;
108 left: 0;
109 margin: auto;
110 }
111 }
112
113 .@{pagination-prefix-cls}-item-ellipsis {
114 position: absolute;
115 top: 0;
116 right: 0;
117 bottom: 0;
118 left: 0;
119 display: block;
120 margin: auto;
121 color: @disabled-color;
122 font-family: Arial, Helvetica, sans-serif;
123 letter-spacing: 2px;
124 text-align: center;
125 text-indent: 0.13em;
126 opacity: 1;
127 transition: all 0.2s;
128 }
129 }
130
131 &:focus-visible,
132 &:hover {
133 .@{pagination-prefix-cls}-item-link-icon {
134 opacity: 1;
135 }
136 .@{pagination-prefix-cls}-item-ellipsis {
137 opacity: 0;
138 }
139 }
140 }
141
142 &-prev,
143 &-jump-prev,
144 &-jump-next {
145 margin-right: 8px;
146 }
147 &-prev,
148 &-next,
149 &-jump-prev,
150 &-jump-next {
151 display: inline-block;
152 min-width: @pagination-item-size;
153 height: @pagination-item-size;
154 color: @text-color;
155 font-family: @pagination-font-family;
156 line-height: @pagination-item-size;
157 text-align: center;
158 vertical-align: middle;
159 list-style: none;
160 border-radius: @border-radius-base;
161 cursor: pointer;
162 transition: all 0.3s;
163 }
164
165 &-prev,
166 &-next {
167 font-family: Arial, Helvetica, sans-serif;
168 outline: 0;
169
170 button {
171 color: @text-color;
172 cursor: pointer;
173 user-select: none;
174 }
175
176 &:hover button {
177 border-color: @primary-5;
178 }
179
180 .@{pagination-prefix-cls}-item-link {
181 display: block;
182 width: 100%;
183 height: 100%;
184 padding: 0;
185 font-size: 12px;
186 text-align: center;
187 background-color: @pagination-item-link-bg;
188 border: @border-width-base @border-style-base @border-color-base;
189 border-radius: @border-radius-base;
190 outline: none;
191 transition: all 0.3s;
192 }
193
194 &:focus-visible .@{pagination-prefix-cls}-item-link,
195 &:hover .@{pagination-prefix-cls}-item-link {
196 color: @primary-color;
197 border-color: @primary-color;
198 }
199 }
200
201 &-disabled {
202 &,
203 &:hover,
204 &:focus-visible {
205 cursor: not-allowed;
206 .@{pagination-prefix-cls}-item-link {
207 color: @disabled-color;
208 border-color: @border-color-base;
209 cursor: not-allowed;
210 }
211 }
212 }
213
214 &-slash {
215 margin: 0 10px 0 5px;
216 }
217
218 &-options {
219 display: inline-block;
220 margin-left: 16px;
221 vertical-align: middle;
222
223 // IE11 css hack. `*::-ms-backdrop,` is a must have
224 @media all and (-ms-high-contrast: none) {
225 *::-ms-backdrop,
226 & {
227 vertical-align: top;
228 }
229 }
230
231 &-size-changer.@{ant-prefix}-select {
232 display: inline-block;
233 width: auto;
234 }
235
236 &-quick-jumper {
237 display: inline-block;
238 height: @input-height-base;
239 margin-left: @margin-xs;
240 line-height: @input-height-base;
241 vertical-align: top;
242
243 input {
244 .input();
245
246 width: 50px;
247 height: @input-height-base;
248 margin: 0 8px;
249 }
250 }
251 }
252
253 &-simple &-prev,
254 &-simple &-next {
255 height: @pagination-item-size-sm;
256 line-height: @pagination-item-size-sm;
257 vertical-align: top;
258 .@{pagination-prefix-cls}-item-link {
259 height: @pagination-item-size-sm;
260 background-color: transparent;
261 border: 0;
262 &::after {
263 height: @pagination-item-size-sm;
264 line-height: @pagination-item-size-sm;
265 }
266 }
267 }
268
269 &-simple &-simple-pager {
270 display: inline-block;
271 height: @pagination-item-size-sm;
272 margin-right: 8px;
273
274 input {
275 box-sizing: border-box;
276 height: 100%;
277 margin-right: 8px;
278 padding: 0 6px;
279 text-align: center;
280 background-color: @pagination-item-input-bg;
281 border: @border-width-base @border-style-base @border-color-base;
282 border-radius: @border-radius-base;
283 outline: none;
284 transition: border-color 0.3s;
285
286 &:hover {
287 border-color: @primary-color;
288 }
289
290 &[disabled] {
291 color: @disabled-color;
292 background: @disabled-bg;
293 border-color: @border-color-base;
294 cursor: not-allowed;
295 }
296 }
297 }
298
299 &.mini &-total-text,
300 &.mini &-simple-pager {
301 height: @pagination-item-size-sm;
302 line-height: @pagination-item-size-sm;
303 }
304
305 &.mini &-item {
306 min-width: @pagination-item-size-sm;
307 height: @pagination-item-size-sm;
308 margin: 0;
309 line-height: @pagination-item-size-sm - 2px;
310 }
311
312 &.mini &-item:not(&-item-active) {
313 background: transparent;
314 border-color: transparent;
315 }
316
317 &.mini &-prev,
318 &.mini &-next {
319 min-width: @pagination-item-size-sm;
320 height: @pagination-item-size-sm;
321 margin: 0;
322 line-height: @pagination-item-size-sm;
323 }
324
325 &.mini &-prev &-item-link,
326 &.mini &-next &-item-link {
327 background: transparent;
328 border-color: transparent;
329 &::after {
330 height: @pagination-item-size-sm;
331 line-height: @pagination-item-size-sm;
332 }
333 }
334
335 &.mini &-jump-prev,
336 &.mini &-jump-next {
337 height: @pagination-item-size-sm;
338 margin-right: 0;
339 line-height: @pagination-item-size-sm;
340 }
341
342 &.mini &-options {
343 margin-left: 2px;
344
345 &-size-changer {
346 top: @pagination-mini-options-size-changer-top;
347 }
348
349 &-quick-jumper {
350 height: @pagination-item-size-sm;
351 line-height: @pagination-item-size-sm;
352
353 input {
354 .input-sm();
355
356 width: 44px;
357 height: @input-height-sm;
358 }
359 }
360 }
361
362 // ============================ Disabled ============================
363 &&-disabled {
364 cursor: not-allowed;
365
366 .@{pagination-prefix-cls}-item {
367 background: @disabled-bg;
368 border-color: @border-color-base;
369 cursor: not-allowed;
370
371 a {
372 color: @disabled-color;
373 background: transparent;
374 border: none;
375 cursor: not-allowed;
376 }
377
378 &-active {
379 background: @pagination-item-disabled-bg-active;
380 border-color: transparent;
381 a {
382 color: @pagination-item-disabled-color-active;
383 }
384 }
385 }
386
387 .@{pagination-prefix-cls}-item-link {
388 color: @disabled-color;
389 background: @disabled-bg;
390 border-color: @border-color-base;
391 cursor: not-allowed;
392 .@{pagination-prefix-cls}-simple& {
393 background: transparent;
394 }
395 }
396
397 .@{pagination-prefix-cls}-item-link-icon {
398 opacity: 0;
399 }
400
401 .@{pagination-prefix-cls}-item-ellipsis {
402 opacity: 1;
403 }
404
405 .@{pagination-prefix-cls}-simple-pager {
406 color: @disabled-color;
407 }
408 }
409}
410
411@media only screen and (max-width: @screen-lg) {
412 .@{pagination-prefix-cls}-item {
413 &-after-jump-prev,
414 &-before-jump-next {
415 display: none;
416 }
417 }
418}
419
420@media only screen and (max-width: @screen-sm) {
421 .@{pagination-prefix-cls}-options {
422 display: none;
423 }
424}
425
426@import './rtl';