@qsxy/element-plus-react 1.0.0-next.16 → 1.0.0-next.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/CheckboxGroup/CheckboxGroup.js +1 -0
  2. package/dist/ConfigProvider/ConfigProvider.d.ts +2 -0
  3. package/dist/ConfigProvider/ConfigProvider.js +5 -1
  4. package/dist/ConfigProvider/index.d.ts +1 -1
  5. package/dist/ConfigProvider/index.js +1 -1
  6. package/dist/DateTimePicker/DateTimePicker.d.ts +1 -1
  7. package/dist/Dialog/Dialog.js +3 -1
  8. package/dist/Empty/Empty.js +1 -1
  9. package/dist/Empty/ImgEmpty.js +5 -5
  10. package/dist/Form/Form.d.ts +9 -4
  11. package/dist/Form/Form.js +6 -4
  12. package/dist/Form/typings.d.ts +2 -2
  13. package/dist/MessageBox/MessageBox.js +1 -0
  14. package/dist/MessageBox/typings.d.ts +1 -0
  15. package/dist/Pagination/Options.d.ts +7 -2
  16. package/dist/Pagination/Options.js +68 -53
  17. package/dist/Pagination/Pager.js +10 -10
  18. package/dist/Pagination/Pagination.js +288 -318
  19. package/dist/Pagination/typings.d.ts +27 -28
  20. package/dist/Select/SelectCore.js +6 -5
  21. package/dist/Select/SelectDropdown.js +65 -15
  22. package/dist/Select/typings.d.ts +5 -0
  23. package/dist/Table/Table.d.ts +1 -1
  24. package/dist/Table/hooks/useSelection.d.ts +3 -3
  25. package/dist/Table/util.d.ts +2 -4
  26. package/dist/Transfer/ListBody.js +1 -1
  27. package/dist/TreeSelect/TreeSelect.d.ts +1 -1
  28. package/dist/index.css +1 -1
  29. package/dist/index.d.ts +1 -0
  30. package/dist/index.js +2 -0
  31. package/dist/locale/en.d.ts +179 -0
  32. package/dist/locale/en.js +178 -0
  33. package/dist/locale/i18n.d.ts +2 -0
  34. package/dist/locale/i18n.js +44 -0
  35. package/dist/locale/zhCn.d.ts +178 -0
  36. package/dist/locale/zhCn.js +177 -0
  37. package/package.json +4 -1
  38. package/theme-chalk/pagination/index.scss +227 -439
  39. package/theme-chalk/select/index.scss +10 -7
package/theme-chalk/pagination/index.scss CHANGED
@@ -1,515 +1,303 @@
1
1
  @use '../common/var';
2
2
 
3
3
  .#{$namespace}-pagination {
4
- --#{$namespace}-pagination-bg-color: var(--#{$namespace}-fill-color-blank);
5
- --#{$namespace}-pagination-text-color: var(--#{$namespace}-text-color-primary);
6
- --#{$namespace}-pagination-border-radius: 3px;
7
- --#{$namespace}-pagination-button-color: var(--#{$namespace}-text-color-primary);
8
- --#{$namespace}-pagination-button-width: 32px;
9
- --#{$namespace}-pagination-button-height: 32px;
10
- --#{$namespace}-pagination-button-disabled-color: var(--#{$namespace}-text-color-placeholder);
11
- --#{$namespace}-pagination-button-disabled-bg-color: var(--#{$namespace}-disabled-bg-color);
12
- --#{$namespace}-pagination-button-bg-color: var(--#{$namespace}-fill-color);
13
- --#{$namespace}-pagination-hover-color: var(--#{$namespace}-color-primary);
14
- --#{$namespace}-pagination-height-extra-small: 24px;
15
- --#{$namespace}-pagination-line-height-extra-small: var(--#{$namespace}-pagination-height-extra-small);
16
- --#{$namespace}-input-hover-border-color: var(--#{$namespace}-border-color-hover);
17
- --#{$namespace}-input-border-color: var(--#{$namespace}-border-color);
18
- --#{$namespace}-input-bg-color: var(--#{$namespace}-fill-color-blank);
19
- --#{$namespace}-input-text-color: var(--#{$namespace}-text-color-regular);
20
- color: var(--#{$namespace}-pagination-text-color);
21
- box-sizing: border-box;
22
- margin: 0;
23
- padding: 0;
24
- font-size: 14px;
25
- font-variant: tabular-nums;
26
- line-height: 1.5715;
27
- list-style: none;
28
- font-feature-settings: 'tnum';
29
-
30
- ul,
31
- ol {
32
- margin: 0;
33
- padding: 0;
34
- list-style: none;
35
- }
36
-
37
- &::after {
38
- display: block;
39
- clear: both;
40
- height: 0;
41
- overflow: hidden;
42
- visibility: hidden;
43
- content: ' ';
4
+ --el-pagination-font-size: 14px;
5
+ --el-pagination-bg-color: var(--el-fill-color-blank);
6
+ --el-pagination-text-color: var(--el-text-color-primary);
7
+ --el-pagination-border-radius: 2px;
8
+ --el-pagination-button-color: var(--el-text-color-primary);
9
+ --el-pagination-button-width: 32px;
10
+ --el-pagination-button-height: 32px;
11
+ --el-pagination-button-disabled-color: var(--el-text-color-placeholder);
12
+ --el-pagination-button-disabled-bg-color: var(--el-fill-color-blank);
13
+ --el-pagination-button-bg-color: var(--el-fill-color);
14
+ --el-pagination-hover-color: var(--el-color-primary);
15
+ --el-pagination-font-size-small: 12px;
16
+ --el-pagination-button-width-small: 24px;
17
+ --el-pagination-button-height-small: 24px;
18
+ --el-pagination-button-width-large: 40px;
19
+ --el-pagination-button-height-large: 40px;
20
+ --el-pagination-item-gap: 16px;
21
+ white-space: nowrap;
22
+ color: var(--el-pagination-text-color);
23
+ font-size: var(--el-pagination-font-size);
24
+ font-weight: 400;
25
+ display: flex;
26
+ align-items: center;
27
+
28
+ .el-input__inner {
29
+ text-align: center;
30
+ -moz-appearance: textfield;
44
31
  }
45
32
 
46
- &-total-text {
47
- display: inline-block;
48
- height: 32px;
49
- margin-right: 8px;
50
- line-height: 32px - 2px;
51
- vertical-align: middle;
33
+ .el-select {
34
+ width: 128px;
52
35
  }
53
36
 
54
- &-item {
55
- background-color: var(--#{$namespace}-pagination-bg-color);
56
- display: inline-block;
57
- min-width: 32px;
58
- height: 32px;
59
- margin-right: 8px;
60
- font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol,
61
- noto color emoji;
62
- line-height: 32px - 2px;
63
- text-align: center;
64
- vertical-align: middle;
65
- list-style: none;
66
- border: 1px solid;
67
- border-color: var(--#{$namespace}-border-color);
68
- border-radius: 2px;
69
- outline: 0;
37
+ button {
38
+ display: flex;
39
+ justify-content: center;
40
+ align-items: center;
41
+ font-size: var(--el-pagination-font-size);
42
+ min-width: var(--el-pagination-button-width);
43
+ height: var(--el-pagination-button-height);
44
+ line-height: var(--el-pagination-button-height);
45
+ color: var(--el-pagination-button-color);
46
+ background: var(--el-pagination-bg-color);
47
+ padding: 0 4px;
48
+ border: none;
49
+ border-radius: var(--el-pagination-border-radius);
70
50
  cursor: pointer;
71
- user-select: none;
51
+ text-align: center;
52
+ box-sizing: border-box;
72
53
 
73
- a {
74
- color: var(--#{$namespace}-text-color-regular);
75
- display: block;
76
- padding: 0 6px;
77
- transition: none;
54
+ * {
55
+ pointer-events: none;
56
+ }
78
57
 
79
- &:hover {
80
- text-decoration: none;
81
- }
58
+ &:focus {
59
+ outline: none;
82
60
  }
83
61
 
84
- &:focus-visible,
85
62
  &:hover {
86
- border-color: var(--btn-border-color);
87
- transition: all 0.3s;
88
-
89
- a {
90
- color: var(--#{$namespace}-color-primary);
91
- }
63
+ color: var(--el-pagination-hover-color);
92
64
  }
93
65
 
94
- &-active {
95
- font-weight: 500;
96
- background: var(--#{$namespace}-bg-color-primary, var(--#{$namespace}-color-primary));
97
- border-color: var(--btn-border-color);
98
-
99
- a {
100
- color: #ffffff;
101
- }
102
-
103
- &:focus-visible,
104
- &:hover {
105
- border-color: var(--btn-border-color);
106
- }
66
+ &.is-active {
67
+ color: var(--el-pagination-hover-color);
68
+ cursor: default;
69
+ font-weight: 700;
70
+ }
107
71
 
108
- &:focus-visible a,
109
- &:hover a {
110
- color: #ffffff;
111
- }
72
+ &.is-active.is-disabled {
73
+ font-weight: 700;
74
+ color: var(--el-text-color-secondary);
112
75
  }
113
- }
114
76
 
115
- &-jump-prev,
116
- &-jump-next {
117
- outline: 0;
118
-
119
- .#{$namespace}-pagination-item-container {
120
- position: relative;
121
-
122
- .#{$namespace}-pagination-item-link-icon {
123
- color: var(--#{$namespace}-color-primary);
124
- font-size: 12px;
125
- letter-spacing: -1px;
126
- opacity: 0;
127
- transition: all 0.2s;
128
-
129
- &-svg {
130
- top: 0;
131
- right: 0;
132
- bottom: 0;
133
- left: 0;
134
- margin: auto;
135
- }
136
- }
137
-
138
- .#{$namespace}-pagination-item-ellipsis {
139
- color: #c0c4cc;
140
- position: absolute;
141
- top: 0;
142
- right: 0;
143
- bottom: 0;
144
- left: 0;
145
- display: block;
146
- margin: auto;
147
- font-family: Arial, Helvetica, sans-serif;
148
- letter-spacing: 2px;
149
- text-align: center;
150
- text-indent: 0.13em;
151
- opacity: 1;
152
- transition: all 0.2s;
153
- }
77
+ &:disabled,
78
+ &.is-disabled {
79
+ color: var(--el-pagination-button-disabled-color);
80
+ background-color: var(--el-pagination-button-disabled-bg-color);
81
+ cursor: not-allowed;
154
82
  }
155
83
 
156
- &:focus-visible,
157
- &:hover {
158
- .#{$namespace}-pagination-item-link-icon {
159
- opacity: 1;
160
- color: var(--#{$namespace}-color-primary);
161
- }
162
- .#{$namespace}-pagination-item-ellipsis {
163
- opacity: 0;
164
- }
84
+ &:focus-visible {
85
+ outline: 1px solid var(--el-pagination-hover-color);
86
+ outline-offset: -1px;
165
87
  }
166
88
  }
167
89
 
168
- &-prev,
169
- &-jump-prev,
170
- &-jump-next {
171
- margin-right: 8px;
90
+ .btn-prev .el-icon,
91
+ .btn-next .el-icon {
92
+ display: block;
93
+ font-size: 12px;
94
+ font-weight: 700;
95
+ width: inherit;
172
96
  }
173
97
 
174
- &-prev,
175
- &-next,
176
- &-jump-prev,
177
- &-jump-next {
178
- color: var(--#{$namespace}-text-color-regular);
179
- display: inline-block;
180
- min-width: 32px;
181
- height: 32px;
182
- font-family: $fa-font-family;
183
- line-height: 32px;
184
- text-align: center;
185
- vertical-align: middle;
186
- list-style: none;
187
- border-radius: 2px;
188
- cursor: pointer;
189
- transition: all 0.3s;
98
+ .el-pagination-item {
99
+ &:first-child,
100
+ &.is-simple {
101
+ margin-left: 0 !important;
102
+ }
103
+
104
+ &:last-child {
105
+ margin-right: 0 !important;
106
+ }
190
107
  }
191
108
 
192
- &-prev,
193
- &-next {
194
- font-family: Arial, Helvetica, sans-serif;
195
- outline: 0;
109
+ .btn-prev {
110
+ margin-left: var(--el-pagination-item-gap);
111
+ }
196
112
 
197
- button {
198
- color: var(--#{$namespace}-text-color-regular);
199
- cursor: pointer;
200
- user-select: none;
113
+ &.is-background {
114
+ .btn-prev,
115
+ .btn-next,
116
+ li {
117
+ margin: 0 4px;
118
+ background-color: var(--el-pagination-button-bg-color);
201
119
  }
202
120
 
203
- &:hover button {
204
- border-color: var(--#{$namespace}-color-primary);
121
+ .btn-prev.is-active,
122
+ .btn-next.is-active,
123
+ li.is-active {
124
+ background-color: var(--el-color-primary);
125
+ color: var(--el-color-white);
205
126
  }
206
127
 
207
- .#{$namespace}-pagination-item-link {
208
- background-color: var(--#{$namespace}-pagination-bg-color);
209
- display: block;
210
- width: 100%;
211
- height: 100%;
212
- padding: 0;
213
- font-size: 12px;
214
- text-align: center;
215
- border: 1px solid;
216
- border-color: var(--#{$namespace}-border-color);
217
- border-radius: 2px;
218
- outline: none;
219
- transition: all 0.3s;
128
+ .btn-prev:disabled,
129
+ .btn-prev.is-disabled,
130
+ .btn-next:disabled,
131
+ .btn-next.is-disabled,
132
+ li:disabled,
133
+ li.is-disabled {
134
+ color: var(--el-text-color-placeholder);
135
+ background-color: var(--el-disabled-bg-color);
136
+ }
220
137
 
221
- i {
222
- font-size: 20px;
223
- }
138
+ .btn-prev:disabled.is-active,
139
+ .btn-prev.is-disabled.is-active,
140
+ .btn-next:disabled.is-active,
141
+ .btn-next.is-disabled.is-active,
142
+ li:disabled.is-active,
143
+ li.is-disabled.is-active {
144
+ color: var(--el-text-color-secondary);
145
+ background-color: var(--el-fill-color-dark);
224
146
  }
225
147
 
226
- &:focus-visible .#{$namespace}-pagination-item-link,
227
- &:hover .#{$namespace}-pagination-item-link {
228
- color: var(--#{$namespace}-color-primary);
229
- border-color: var(--#{$namespace}-color-primary);
148
+ .btn-prev {
149
+ margin-left: var(--el-pagination-item-gap);
230
150
  }
231
151
  }
152
+ }
232
153
 
233
- // &-prev button:after {
234
- // content: '‹';
235
- // display: block;
236
- // }
237
-
238
- // &-next button:after {
239
- // content: '›';
240
- // display: block;
241
- // }
154
+ .el-pagination__sizes,
155
+ .el-pagination__total {
156
+ margin-left: var(--el-pagination-item-gap);
157
+ font-weight: 400;
158
+ color: var(--el-text-color-regular);
159
+ }
242
160
 
243
- &-disabled {
244
- &,
245
- &:hover,
246
- &:focus-visible {
247
- cursor: not-allowed;
161
+ .el-pagination__total[disabled='true'] {
162
+ color: var(--el-text-color-placeholder);
163
+ }
248
164
 
249
- .#{$namespace}-pagination-item-link {
250
- color: var(--#{$namespace}-pagination-button-disabled-color);
251
- border-color: var(--#{$namespace}-border-color-light);
252
- cursor: not-allowed;
253
- background: var(--#{$namespace}-pagination-button-disabled-bg-color);
254
- }
255
- }
256
- }
165
+ .el-pagination__jump {
166
+ display: flex;
167
+ align-items: center;
168
+ margin-left: var(--el-pagination-item-gap);
169
+ font-weight: 400;
170
+ color: var(--el-text-color-regular);
171
+ }
257
172
 
258
- &-slash {
259
- margin: 0 10px 0 5px;
260
- }
173
+ .el-pagination__jump[disabled='true'] {
174
+ color: var(--el-text-color-placeholder);
175
+ }
261
176
 
262
- &-options {
263
- display: inline-block;
264
- margin-left: 16px;
265
- vertical-align: middle;
266
-
267
- // IE11 css hack. `*::-ms-backdrop,` is a must have
268
- @media all and (-ms-high-contrast: none) {
269
- *::-ms-backdrop,
270
- & {
271
- vertical-align: top;
272
- }
273
- }
177
+ .el-pagination__goto {
178
+ margin-right: 8px;
179
+ }
274
180
 
275
- &-size-changer.#{$namespace}-select {
276
- display: inline-block;
277
- width: 110px;
278
- }
181
+ .el-pagination__editor {
182
+ text-align: center;
183
+ box-sizing: border-box;
279
184
 
280
- &-quick-jumper {
281
- display: inline-block;
282
- height: 28px;
283
- margin-left: 8px;
284
- line-height: 28px;
285
- vertical-align: top;
286
-
287
- input {
288
- width: 50px;
289
- height: 28px;
290
- margin: 0 8px;
291
- font-family: 'PingFang-SC-Regular', 'PingFang SC', sans-serif;
292
- background-color: var(--#{$namespace}-input-bg-color, var(--#{$namespace}-fill-color-blank));
293
- background-image: none;
294
- border-radius: 4px;
295
- box-sizing: border-box;
296
- color: var(--#{$namespace}-input-text-color, var(--#{$namespace}-text-color-regular));
297
- display: inline-block;
298
- height: 32px;
299
- line-height: 32px;
300
- font-size: inherit;
301
- outline: none;
302
- padding: 0 10px;
303
- transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
304
- box-shadow: 0 0 0 1px var(--#{$namespace}-input-border-color, var(--#{$namespace}-border-color)) inset;
305
- border: none;
306
-
307
- &:hover {
308
- box-shadow: 0 0 0 1px var(--#{$namespace}-input-hover-border-color) inset;
309
- }
310
-
311
- &:focus {
312
- outline: none;
313
- box-shadow: 0 0 0 1px var(--#{$namespace}-color-primary) inset;
314
- }
315
-
316
- &:disabled {
317
- color: var(--#{$namespace}-disabled-text-color);
318
- background: var(--#{$namespace}-disabled-bg-color);
319
- box-shadow: 0 0 0 1px var(--#{$namespace}-border-color-light) inset;
320
- cursor: not-allowed;
321
- }
322
- }
323
- }
185
+ &.el-input {
186
+ width: 56px;
324
187
  }
325
188
 
326
- &-simple &-prev,
327
- &-simple &-next {
328
- height: 24px;
329
- line-height: 24px;
330
- vertical-align: top;
331
-
332
- .#{$namespace}-pagination-item-link {
333
- height: 24px;
334
- line-height: 24px;
335
- background-color: transparent;
336
- border: 0;
337
- display: flex;
338
- justify-content: center;
339
- align-items: center;
340
-
341
- &::after {
342
- height: 24px;
343
- line-height: 24px;
344
- }
345
- }
189
+ .el-input__inner::-webkit-inner-spin-button,
190
+ .el-input__inner::-webkit-outer-spin-button {
191
+ -webkit-appearance: none;
192
+ margin: 0;
346
193
  }
194
+ }
347
195
 
348
- &-simple {
349
- .#{$namespace}-pagination-simple-pager {
350
- display: inline-block;
351
- height: 24px;
352
- margin-right: 8px;
353
-
354
- input {
355
- background-color: var(--#{$namespace}-input-bg-color, var(--#{$namespace}-fill-color-blank));
356
- box-sizing: border-box;
357
- height: 100%;
358
- margin-right: 8px;
359
- padding: 0 6px;
360
- text-align: center;
361
- border: 1px solid;
362
- border-color: var(--#{$namespace}-input-border-color, var(--#{$namespace}-border-color));
363
- border-radius: 2px;
364
- outline: none;
365
- transition: border-color 0.3s;
366
-
367
- &:hover {
368
- border-color: var(--#{$namespace}-color-primary);
369
- }
370
-
371
- &:focus {
372
- border-color: var(--#{$namespace}-color-primary);
373
- // box-shadow: 0 0 0 2px var(--#{$namespace}-color-primary);
374
- }
375
-
376
- &[disabled] {
377
- color: var(--#{$namespace}-disabled-text-color);
378
- background: var(--#{$namespace}-disabled-bg-color);
379
- border-color: var(--#{$namespace}-border-color-light);
380
- cursor: not-allowed;
381
- }
382
- }
383
- }
384
- }
196
+ .el-pagination__classifier {
197
+ margin-left: 8px;
198
+ }
385
199
 
386
- &.mini &-total-text,
387
- &.mini &-simple-pager {
388
- height: 24px;
389
- line-height: 24px;
390
- }
200
+ .el-pagination__rightwrapper {
201
+ flex: 1;
202
+ display: flex;
203
+ align-items: center;
204
+ justify-content: flex-end;
205
+ }
391
206
 
392
- &.mini &-item {
393
- min-width: 24px;
394
- height: 24px;
395
- margin: 0;
396
- line-height: 24px - 2px;
207
+ .el-pagination--small {
208
+ .btn-prev,
209
+ .btn-next,
210
+ .el-pager li {
211
+ height: var(--el-pagination-button-height-small);
212
+ line-height: var(--el-pagination-button-height-small);
213
+ font-size: var(--el-pagination-font-size-small);
214
+ min-width: var(--el-pagination-button-width-small);
397
215
  }
398
216
 
399
- &.mini &-item:not(&-item-active) {
400
- background: transparent;
401
- border-color: transparent;
217
+ span:not([class*='suffix']),
218
+ button {
219
+ font-size: var(--el-pagination-font-size-small);
402
220
  }
403
221
 
404
- &.mini &-prev,
405
- &.mini &-next {
406
- min-width: 24px;
407
- height: 24px;
408
- margin: 0;
409
- line-height: 24px;
222
+ .el-select {
223
+ width: 100px;
410
224
  }
225
+ }
411
226
 
412
- &.mini &-prev &-item-link,
413
- &.mini &-next &-item-link {
414
- background: transparent;
415
- border-color: transparent;
416
-
417
- &::after {
418
- height: 24px;
419
- line-height: 24px;
420
- }
227
+ .el-pagination--large {
228
+ .btn-prev,
229
+ .btn-next,
230
+ .el-pager li {
231
+ height: var(--el-pagination-button-height-large);
232
+ line-height: var(--el-pagination-button-height-large);
233
+ min-width: var(--el-pagination-button-width-large);
421
234
  }
422
235
 
423
- &.mini &-jump-prev,
424
- &.mini &-jump-next {
425
- height: 24px;
426
- margin-right: 0;
427
- line-height: 24px;
236
+ .el-select {
237
+ width: 160px;
428
238
  }
239
+ }
429
240
 
430
- &.mini &-options {
431
- margin-left: 2px;
432
-
433
- &-size-changer {
434
- top: 0px;
435
- }
436
-
437
- &-quick-jumper {
438
- height: 24px;
439
- line-height: 24px;
440
-
441
- input {
442
- // .input-small();
241
+ .#{$namespace}-pager {
242
+ -webkit-user-select: none;
243
+ user-select: none;
244
+ list-style: none;
245
+ font-size: 0;
246
+ padding: 0;
247
+ margin: 0;
248
+ display: flex;
249
+ align-items: center;
250
+
251
+ li {
252
+ display: flex;
253
+ justify-content: center;
254
+ align-items: center;
255
+ font-size: var(--el-pagination-font-size);
256
+ min-width: var(--el-pagination-button-width);
257
+ height: var(--el-pagination-button-height);
258
+ line-height: var(--el-pagination-button-height);
259
+ color: var(--el-pagination-button-color);
260
+ background: var(--el-pagination-bg-color);
261
+ padding: 0 4px;
262
+ border: none;
263
+ border-radius: var(--el-pagination-border-radius);
264
+ cursor: pointer;
265
+ text-align: center;
266
+ box-sizing: border-box;
443
267
 
444
- width: 44px;
445
- height: 24px;
446
- }
268
+ * {
269
+ pointer-events: none;
447
270
  }
448
- }
449
-
450
- // ============================ Disabled ============================
451
- &.#{$namespace}-pagination-disabled {
452
- cursor: not-allowed;
453
271
 
454
- .#{$namespace}-pagination-item {
455
- background: var(--#{$namespace}-disabled-bg-color);
456
- border-color: var(--#{$namespace}-border-color-light);
457
- cursor: not-allowed;
458
-
459
- a {
460
- background: transparent;
461
- color: var(--#{$namespace}-disabled-text-color);
462
- border: none;
463
- cursor: not-allowed;
464
- }
465
-
466
- &-active {
467
- background: var(--#{$namespace}-bg-color-primary, var(--#{$namespace}-color-primary));
468
- border-color: var(--#{$namespace}-border-color-light);
469
- opacity: 0.5;
470
-
471
- a {
472
- color: #ffffff;
473
- }
474
- }
272
+ &:focus {
273
+ outline: none;
475
274
  }
476
275
 
477
- .#{$namespace}-pagination-item-link {
478
- color: var(--#{$namespace}-disabled-text-color);
479
- background: var(--#{$namespace}-disabled-bg-color);
480
- border-color: var(--#{$namespace}-border-color-light);
481
- cursor: not-allowed;
482
-
483
- .#{$namespace}-pagination-simple {
484
- background: transparent;
485
- }
276
+ &:hover {
277
+ color: var(--el-pagination-hover-color);
486
278
  }
487
279
 
488
- .#{$namespace}-pagination-simple-pager {
489
- color: #c0c4cc;
280
+ &.is-active {
281
+ color: var(--el-pagination-hover-color);
282
+ cursor: default;
283
+ font-weight: 700;
490
284
  }
491
285
 
492
- .#{$namespace}-pagination-item-link-icon {
493
- opacity: 0;
286
+ &.is-active.is-disabled {
287
+ font-weight: 700;
288
+ color: var(--el-text-color-secondary);
494
289
  }
495
290
 
496
- .#{$namespace}-pagination-item-ellipsis {
497
- opacity: 1;
291
+ &:disabled,
292
+ &.is-disabled {
293
+ color: var(--el-pagination-button-disabled-color);
294
+ background-color: var(--el-pagination-button-disabled-bg-color);
295
+ cursor: not-allowed;
498
296
  }
499
- }
500
- }
501
297
 
502
- @media only screen and (max-width: 992px) {
503
- .#{$namespace}-pagination-item {
504
- &-after-jump-prev,
505
- &-before-jump-next {
506
- display: none;
298
+ &:focus-visible {
299
+ outline: 1px solid var(--el-pagination-hover-color);
300
+ outline-offset: -1px;
507
301
  }
508
302
  }
509
303
  }
510
-
511
- @media only screen and (max-width: 576px) {
512
- .#{$namespace}-pagination-options {
513
- display: none;
514
- }
515
- }