wargerm 0.4.5 → 0.4.8

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 (8) hide show
  1. package/dist/components/Select/index.d.ts +2 -1
  2. package/dist/components/Table/index.d.ts +1 -1
  3. package/dist/index.css +134 -18
  4. package/dist/index.esm.css +134 -18
  5. package/dist/index.esm.js +161 -81
  6. package/dist/index.js +160 -80
  7. package/package.json +1 -1
  8. package/dist/hooks/index.d.ts +0 -1
package/dist/components/Select/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { ReactNode } from 'react';
2
2
  import { SelectProps, OptionProps } from 'antd/lib/Select';
3
3
  export interface IOptionProps extends OptionProps {
4
4
  }
@@ -7,6 +7,7 @@ export interface ISelect extends SelectProps<any> {
7
7
  valueEnum?: Record<string, any>;
8
8
  params?: Record<string, any>;
9
9
  onLoad?: (options: Record<string, any>[]) => void;
10
+ children?: ReactNode;
10
11
  }
11
12
  export declare type IWSelectComponent = React.FC<ISelect> & {
12
13
  Option?: React.FC<IOptionProps>;
package/dist/components/Table/index.d.ts CHANGED
@@ -52,7 +52,7 @@ interface Iscroll {
52
52
  /**
53
53
  * 设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比，true 和 'max-content'
54
54
  */
55
- x?: string | number | true;
55
+ x?: string | number;
56
56
  /**
57
57
  * 设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值
58
58
  */
package/dist/index.css CHANGED
@@ -116,6 +116,14 @@
116
116
  }
117
117
  [data-prefers-color='dark'] .container {
118
118
  position: relative;
119
+ width: 100%;
120
+ overflow: auto;
121
+ }
122
+ [data-prefers-color='dark'] .container .theader {
123
+ position: -webkit-sticky;
124
+ position: sticky;
125
+ top: 0;
126
+ z-index: 4;
119
127
  }
120
128
  [data-prefers-color='dark'] .container .theader .th {
121
129
  padding-left: 4px;
@@ -151,12 +159,11 @@
151
159
  z-index: 2;
152
160
  min-height: 32px;
153
161
  }
154
- [data-prefers-color='dark'] .container .tbody {
155
- overflow: auto;
162
+ [data-prefers-color='dark'] .container .tbodyContainer .tbody {
156
163
  padding-top: 5px;
157
164
  margin-top: 19px;
158
165
  }
159
- [data-prefers-color='dark'] .container .tbody .tr {
166
+ [data-prefers-color='dark'] .container .tbodyContainer .tbody .tr {
160
167
  padding-left: 6px;
161
168
  width: 100%;
162
169
  min-height: 32px;
@@ -165,7 +172,7 @@
165
172
  position: relative;
166
173
  border-radius: 6px;
167
174
  }
168
- [data-prefers-color='dark'] .container .tbody .tr::before {
175
+ [data-prefers-color='dark'] .container .tbodyContainer .tbody .tr::before {
169
176
  background-color: rgba(25, 37, 71, 0.43);
170
177
  content: '';
171
178
  position: absolute;
@@ -182,7 +189,7 @@
182
189
  border-image-repeat: stretch stretch;
183
190
  border-radius: 6px;
184
191
  }
185
- [data-prefers-color='dark'] .container .tbody .tr.active::before {
192
+ [data-prefers-color='dark'] .container .tbodyContainer .tbody .tr.active::before {
186
193
  background-color: rgba(140, 75, 102, 0.43);
187
194
  border-width: 30px 20px 4px 4px;
188
195
  border-style: solid;
@@ -193,7 +200,7 @@
193
200
  border-image-repeat: stretch stretch;
194
201
  border-radius: 6px;
195
202
  }
196
- [data-prefers-color='dark'] .container .tbody .tr.active .td {
203
+ [data-prefers-color='dark'] .container .tbodyContainer .tbody .tr.active .td {
197
204
  flex: 1;
198
205
  display: flex;
199
206
  align-items: center;
@@ -202,7 +209,7 @@
202
209
  position: relative;
203
210
  z-index: 2;
204
211
  }
205
- [data-prefers-color='dark'] .container .tbody .tr .td {
212
+ [data-prefers-color='dark'] .container .tbodyContainer .tbody .tr .td {
206
213
  flex: 1;
207
214
  display: flex;
208
215
  align-items: center;
@@ -226,8 +233,7 @@
226
233
  background-color: transparent;
227
234
  }
228
235
  [data-prefers-color='dark'] .w-frame-box-table.container .theader .th {
229
- background-color: rgba(22, 93, 134, 0.49);
230
- background: rgba(22, 28, 38, 0.7);
236
+ background-color: #192335;
231
237
  border-top: 1px solid rgba(118, 214, 255, 0.4);
232
238
  border-bottom: 1px solid rgba(118, 214, 255, 0.4);
233
239
  border-radius: 0px;
@@ -252,6 +258,58 @@
252
258
  [data-prefers-color='dark'] .w-frame-box-table.container .tbody .frame .tr::before {
253
259
  content: none;
254
260
  }
261
+ [data-prefers-color='dark'] .th .fixedLeft,
262
+ [data-prefers-color='dark'] .th .fixedRight {
263
+ position: -webkit-sticky !important;
264
+ position: sticky !important;
265
+ z-index: 4 !important;
266
+ }
267
+ [data-prefers-color='dark'] .th .fixedLeft.td,
268
+ [data-prefers-color='dark'] .th .fixedRight.td {
269
+ background: #192235;
270
+ transition: all 0.3s;
271
+ }
272
+ [data-prefers-color='dark'] .tr .fixedLeft,
273
+ [data-prefers-color='dark'] .tr .fixedRight {
274
+ position: -webkit-sticky !important;
275
+ position: sticky !important;
276
+ z-index: 3 !important;
277
+ }
278
+ [data-prefers-color='dark'] .tr .fixedLeft.td,
279
+ [data-prefers-color='dark'] .tr .fixedRight.td {
280
+ background: #233b62;
281
+ transition: all 0.3s;
282
+ }
283
+ [data-prefers-color='dark'] .fixedRight {
284
+ position: -webkit-sticky !important;
285
+ position: sticky !important;
286
+ z-index: 3 !important;
287
+ }
288
+ [data-prefers-color='dark'] .fixedRight.td:after {
289
+ box-shadow: inset -10px 0 8px -8px #00000026;
290
+ position: absolute;
291
+ top: 0;
292
+ bottom: -1px;
293
+ left: 0;
294
+ width: 30px;
295
+ transform: translate(-100%);
296
+ transition: box-shadow 0.3s;
297
+ content: '';
298
+ pointer-events: none;
299
+ }
300
+ [data-prefers-color='dark'] .fixedLeft .th.td:after,
301
+ [data-prefers-color='dark'] .fixedLeft .tr.td:after {
302
+ box-shadow: inset -10px 0 8px -8px #00000026;
303
+ position: absolute;
304
+ top: 0;
305
+ right: 0;
306
+ bottom: -1px;
307
+ width: 30px;
308
+ transform: translate(100%);
309
+ transition: box-shadow 0.3s;
310
+ content: '';
311
+ pointer-events: none;
312
+ }
255
313
  [data-prefers-color='dark'] .ant-select:not(.ant-select-customize-input) .ant-select-selector {
256
314
  background-color: transparent;
257
315
  color: #4383a4;
@@ -1322,6 +1380,14 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1322
1380
  }
1323
1381
  [data-prefers-color='light'] .container {
1324
1382
  position: relative;
1383
+ width: 100%;
1384
+ overflow: auto;
1385
+ }
1386
+ [data-prefers-color='light'] .container .theader {
1387
+ position: -webkit-sticky;
1388
+ position: sticky;
1389
+ top: 0;
1390
+ z-index: 4;
1325
1391
  }
1326
1392
  [data-prefers-color='light'] .container .theader .th {
1327
1393
  padding-left: 4px;
@@ -1357,12 +1423,11 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1357
1423
  z-index: 2;
1358
1424
  min-height: 32px;
1359
1425
  }
1360
- [data-prefers-color='light'] .container .tbody {
1361
- overflow: auto;
1426
+ [data-prefers-color='light'] .container .tbodyContainer .tbody {
1362
1427
  padding-top: 5px;
1363
1428
  margin-top: 19px;
1364
1429
  }
1365
- [data-prefers-color='light'] .container .tbody .tr {
1430
+ [data-prefers-color='light'] .container .tbodyContainer .tbody .tr {
1366
1431
  padding-left: 6px;
1367
1432
  width: 100%;
1368
1433
  min-height: 32px;
@@ -1371,7 +1436,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1371
1436
  position: relative;
1372
1437
  border-radius: 6px;
1373
1438
  }
1374
- [data-prefers-color='light'] .container .tbody .tr::before {
1439
+ [data-prefers-color='light'] .container .tbodyContainer .tbody .tr::before {
1375
1440
  background-color: rgba(25, 37, 71, 0.43);
1376
1441
  content: '';
1377
1442
  position: absolute;
@@ -1388,7 +1453,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1388
1453
  border-image-repeat: stretch stretch;
1389
1454
  border-radius: 6px;
1390
1455
  }
1391
- [data-prefers-color='light'] .container .tbody .tr.active::before {
1456
+ [data-prefers-color='light'] .container .tbodyContainer .tbody .tr.active::before {
1392
1457
  background-color: rgba(140, 75, 102, 0.43);
1393
1458
  border-width: 30px 20px 4px 4px;
1394
1459
  border-style: solid;
@@ -1399,7 +1464,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1399
1464
  border-image-repeat: stretch stretch;
1400
1465
  border-radius: 6px;
1401
1466
  }
1402
- [data-prefers-color='light'] .container .tbody .tr.active .td {
1467
+ [data-prefers-color='light'] .container .tbodyContainer .tbody .tr.active .td {
1403
1468
  flex: 1;
1404
1469
  display: flex;
1405
1470
  align-items: center;
@@ -1408,7 +1473,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1408
1473
  position: relative;
1409
1474
  z-index: 2;
1410
1475
  }
1411
- [data-prefers-color='light'] .container .tbody .tr .td {
1476
+ [data-prefers-color='light'] .container .tbodyContainer .tbody .tr .td {
1412
1477
  flex: 1;
1413
1478
  display: flex;
1414
1479
  align-items: center;
@@ -1432,8 +1497,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1432
1497
  background-color: transparent;
1433
1498
  }
1434
1499
  [data-prefers-color='light'] .w-frame-box-table.container .theader .th {
1435
- background-color: rgba(22, 93, 134, 0.49);
1436
- background: rgba(22, 28, 38, 0.7);
1500
+ background-color: #192335;
1437
1501
  border-top: 1px solid rgba(118, 214, 255, 0.4);
1438
1502
  border-bottom: 1px solid rgba(118, 214, 255, 0.4);
1439
1503
  border-radius: 0px;
@@ -1458,6 +1522,58 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1458
1522
  [data-prefers-color='light'] .w-frame-box-table.container .tbody .frame .tr::before {
1459
1523
  content: none;
1460
1524
  }
1525
+ [data-prefers-color='light'] .th .fixedLeft,
1526
+ [data-prefers-color='light'] .th .fixedRight {
1527
+ position: -webkit-sticky !important;
1528
+ position: sticky !important;
1529
+ z-index: 4 !important;
1530
+ }
1531
+ [data-prefers-color='light'] .th .fixedLeft.td,
1532
+ [data-prefers-color='light'] .th .fixedRight.td {
1533
+ background: #192235;
1534
+ transition: all 0.3s;
1535
+ }
1536
+ [data-prefers-color='light'] .tr .fixedLeft,
1537
+ [data-prefers-color='light'] .tr .fixedRight {
1538
+ position: -webkit-sticky !important;
1539
+ position: sticky !important;
1540
+ z-index: 3 !important;
1541
+ }
1542
+ [data-prefers-color='light'] .tr .fixedLeft.td,
1543
+ [data-prefers-color='light'] .tr .fixedRight.td {
1544
+ background: #233b62;
1545
+ transition: all 0.3s;
1546
+ }
1547
+ [data-prefers-color='light'] .fixedRight {
1548
+ position: -webkit-sticky !important;
1549
+ position: sticky !important;
1550
+ z-index: 3 !important;
1551
+ }
1552
+ [data-prefers-color='light'] .fixedRight.td:after {
1553
+ box-shadow: inset -10px 0 8px -8px #00000026;
1554
+ position: absolute;
1555
+ top: 0;
1556
+ bottom: -1px;
1557
+ left: 0;
1558
+ width: 30px;
1559
+ transform: translate(-100%);
1560
+ transition: box-shadow 0.3s;
1561
+ content: '';
1562
+ pointer-events: none;
1563
+ }
1564
+ [data-prefers-color='light'] .fixedLeft .th.td:after,
1565
+ [data-prefers-color='light'] .fixedLeft .tr.td:after {
1566
+ box-shadow: inset -10px 0 8px -8px #00000026;
1567
+ position: absolute;
1568
+ top: 0;
1569
+ right: 0;
1570
+ bottom: -1px;
1571
+ width: 30px;
1572
+ transform: translate(100%);
1573
+ transition: box-shadow 0.3s;
1574
+ content: '';
1575
+ pointer-events: none;
1576
+ }
1461
1577
  [data-prefers-color='light'] .ant-select:not(.ant-select-customize-input) .ant-select-selector {
1462
1578
  position: relative;
1463
1579
  background-color: #f4f4f4;
package/dist/index.esm.css CHANGED
@@ -116,6 +116,14 @@
116
116
  }
117
117
  [data-prefers-color='dark'] .container {
118
118
  position: relative;
119
+ width: 100%;
120
+ overflow: auto;
121
+ }
122
+ [data-prefers-color='dark'] .container .theader {
123
+ position: -webkit-sticky;
124
+ position: sticky;
125
+ top: 0;
126
+ z-index: 4;
119
127
  }
120
128
  [data-prefers-color='dark'] .container .theader .th {
121
129
  padding-left: 4px;
@@ -151,12 +159,11 @@
151
159
  z-index: 2;
152
160
  min-height: 32px;
153
161
  }
154
- [data-prefers-color='dark'] .container .tbody {
155
- overflow: auto;
162
+ [data-prefers-color='dark'] .container .tbodyContainer .tbody {
156
163
  padding-top: 5px;
157
164
  margin-top: 19px;
158
165
  }
159
- [data-prefers-color='dark'] .container .tbody .tr {
166
+ [data-prefers-color='dark'] .container .tbodyContainer .tbody .tr {
160
167
  padding-left: 6px;
161
168
  width: 100%;
162
169
  min-height: 32px;
@@ -165,7 +172,7 @@
165
172
  position: relative;
166
173
  border-radius: 6px;
167
174
  }
168
- [data-prefers-color='dark'] .container .tbody .tr::before {
175
+ [data-prefers-color='dark'] .container .tbodyContainer .tbody .tr::before {
169
176
  background-color: rgba(25, 37, 71, 0.43);
170
177
  content: '';
171
178
  position: absolute;
@@ -182,7 +189,7 @@
182
189
  border-image-repeat: stretch stretch;
183
190
  border-radius: 6px;
184
191
  }
185
- [data-prefers-color='dark'] .container .tbody .tr.active::before {
192
+ [data-prefers-color='dark'] .container .tbodyContainer .tbody .tr.active::before {
186
193
  background-color: rgba(140, 75, 102, 0.43);
187
194
  border-width: 30px 20px 4px 4px;
188
195
  border-style: solid;
@@ -193,7 +200,7 @@
193
200
  border-image-repeat: stretch stretch;
194
201
  border-radius: 6px;
195
202
  }
196
- [data-prefers-color='dark'] .container .tbody .tr.active .td {
203
+ [data-prefers-color='dark'] .container .tbodyContainer .tbody .tr.active .td {
197
204
  flex: 1;
198
205
  display: flex;
199
206
  align-items: center;
@@ -202,7 +209,7 @@
202
209
  position: relative;
203
210
  z-index: 2;
204
211
  }
205
- [data-prefers-color='dark'] .container .tbody .tr .td {
212
+ [data-prefers-color='dark'] .container .tbodyContainer .tbody .tr .td {
206
213
  flex: 1;
207
214
  display: flex;
208
215
  align-items: center;
@@ -226,8 +233,7 @@
226
233
  background-color: transparent;
227
234
  }
228
235
  [data-prefers-color='dark'] .w-frame-box-table.container .theader .th {
229
- background-color: rgba(22, 93, 134, 0.49);
230
- background: rgba(22, 28, 38, 0.7);
236
+ background-color: #192335;
231
237
  border-top: 1px solid rgba(118, 214, 255, 0.4);
232
238
  border-bottom: 1px solid rgba(118, 214, 255, 0.4);
233
239
  border-radius: 0px;
@@ -252,6 +258,58 @@
252
258
  [data-prefers-color='dark'] .w-frame-box-table.container .tbody .frame .tr::before {
253
259
  content: none;
254
260
  }
261
+ [data-prefers-color='dark'] .th .fixedLeft,
262
+ [data-prefers-color='dark'] .th .fixedRight {
263
+ position: -webkit-sticky !important;
264
+ position: sticky !important;
265
+ z-index: 4 !important;
266
+ }
267
+ [data-prefers-color='dark'] .th .fixedLeft.td,
268
+ [data-prefers-color='dark'] .th .fixedRight.td {
269
+ background: #192235;
270
+ transition: all 0.3s;
271
+ }
272
+ [data-prefers-color='dark'] .tr .fixedLeft,
273
+ [data-prefers-color='dark'] .tr .fixedRight {
274
+ position: -webkit-sticky !important;
275
+ position: sticky !important;
276
+ z-index: 3 !important;
277
+ }
278
+ [data-prefers-color='dark'] .tr .fixedLeft.td,
279
+ [data-prefers-color='dark'] .tr .fixedRight.td {
280
+ background: #233b62;
281
+ transition: all 0.3s;
282
+ }
283
+ [data-prefers-color='dark'] .fixedRight {
284
+ position: -webkit-sticky !important;
285
+ position: sticky !important;
286
+ z-index: 3 !important;
287
+ }
288
+ [data-prefers-color='dark'] .fixedRight.td:after {
289
+ box-shadow: inset -10px 0 8px -8px #00000026;
290
+ position: absolute;
291
+ top: 0;
292
+ bottom: -1px;
293
+ left: 0;
294
+ width: 30px;
295
+ transform: translate(-100%);
296
+ transition: box-shadow 0.3s;
297
+ content: '';
298
+ pointer-events: none;
299
+ }
300
+ [data-prefers-color='dark'] .fixedLeft .th.td:after,
301
+ [data-prefers-color='dark'] .fixedLeft .tr.td:after {
302
+ box-shadow: inset -10px 0 8px -8px #00000026;
303
+ position: absolute;
304
+ top: 0;
305
+ right: 0;
306
+ bottom: -1px;
307
+ width: 30px;
308
+ transform: translate(100%);
309
+ transition: box-shadow 0.3s;
310
+ content: '';
311
+ pointer-events: none;
312
+ }
255
313
  [data-prefers-color='dark'] .ant-select:not(.ant-select-customize-input) .ant-select-selector {
256
314
  background-color: transparent;
257
315
  color: #4383a4;
@@ -1322,6 +1380,14 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1322
1380
  }
1323
1381
  [data-prefers-color='light'] .container {
1324
1382
  position: relative;
1383
+ width: 100%;
1384
+ overflow: auto;
1385
+ }
1386
+ [data-prefers-color='light'] .container .theader {
1387
+ position: -webkit-sticky;
1388
+ position: sticky;
1389
+ top: 0;
1390
+ z-index: 4;
1325
1391
  }
1326
1392
  [data-prefers-color='light'] .container .theader .th {
1327
1393
  padding-left: 4px;
@@ -1357,12 +1423,11 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1357
1423
  z-index: 2;
1358
1424
  min-height: 32px;
1359
1425
  }
1360
- [data-prefers-color='light'] .container .tbody {
1361
- overflow: auto;
1426
+ [data-prefers-color='light'] .container .tbodyContainer .tbody {
1362
1427
  padding-top: 5px;
1363
1428
  margin-top: 19px;
1364
1429
  }
1365
- [data-prefers-color='light'] .container .tbody .tr {
1430
+ [data-prefers-color='light'] .container .tbodyContainer .tbody .tr {
1366
1431
  padding-left: 6px;
1367
1432
  width: 100%;
1368
1433
  min-height: 32px;
@@ -1371,7 +1436,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1371
1436
  position: relative;
1372
1437
  border-radius: 6px;
1373
1438
  }
1374
- [data-prefers-color='light'] .container .tbody .tr::before {
1439
+ [data-prefers-color='light'] .container .tbodyContainer .tbody .tr::before {
1375
1440
  background-color: rgba(25, 37, 71, 0.43);
1376
1441
  content: '';
1377
1442
  position: absolute;
@@ -1388,7 +1453,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1388
1453
  border-image-repeat: stretch stretch;
1389
1454
  border-radius: 6px;
1390
1455
  }
1391
- [data-prefers-color='light'] .container .tbody .tr.active::before {
1456
+ [data-prefers-color='light'] .container .tbodyContainer .tbody .tr.active::before {
1392
1457
  background-color: rgba(140, 75, 102, 0.43);
1393
1458
  border-width: 30px 20px 4px 4px;
1394
1459
  border-style: solid;
@@ -1399,7 +1464,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1399
1464
  border-image-repeat: stretch stretch;
1400
1465
  border-radius: 6px;
1401
1466
  }
1402
- [data-prefers-color='light'] .container .tbody .tr.active .td {
1467
+ [data-prefers-color='light'] .container .tbodyContainer .tbody .tr.active .td {
1403
1468
  flex: 1;
1404
1469
  display: flex;
1405
1470
  align-items: center;
@@ -1408,7 +1473,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1408
1473
  position: relative;
1409
1474
  z-index: 2;
1410
1475
  }
1411
- [data-prefers-color='light'] .container .tbody .tr .td {
1476
+ [data-prefers-color='light'] .container .tbodyContainer .tbody .tr .td {
1412
1477
  flex: 1;
1413
1478
  display: flex;
1414
1479
  align-items: center;
@@ -1432,8 +1497,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1432
1497
  background-color: transparent;
1433
1498
  }
1434
1499
  [data-prefers-color='light'] .w-frame-box-table.container .theader .th {
1435
- background-color: rgba(22, 93, 134, 0.49);
1436
- background: rgba(22, 28, 38, 0.7);
1500
+ background-color: #192335;
1437
1501
  border-top: 1px solid rgba(118, 214, 255, 0.4);
1438
1502
  border-bottom: 1px solid rgba(118, 214, 255, 0.4);
1439
1503
  border-radius: 0px;
@@ -1458,6 +1522,58 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1458
1522
  [data-prefers-color='light'] .w-frame-box-table.container .tbody .frame .tr::before {
1459
1523
  content: none;
1460
1524
  }
1525
+ [data-prefers-color='light'] .th .fixedLeft,
1526
+ [data-prefers-color='light'] .th .fixedRight {
1527
+ position: -webkit-sticky !important;
1528
+ position: sticky !important;
1529
+ z-index: 4 !important;
1530
+ }
1531
+ [data-prefers-color='light'] .th .fixedLeft.td,
1532
+ [data-prefers-color='light'] .th .fixedRight.td {
1533
+ background: #192235;
1534
+ transition: all 0.3s;
1535
+ }
1536
+ [data-prefers-color='light'] .tr .fixedLeft,
1537
+ [data-prefers-color='light'] .tr .fixedRight {
1538
+ position: -webkit-sticky !important;
1539
+ position: sticky !important;
1540
+ z-index: 3 !important;
1541
+ }
1542
+ [data-prefers-color='light'] .tr .fixedLeft.td,
1543
+ [data-prefers-color='light'] .tr .fixedRight.td {
1544
+ background: #233b62;
1545
+ transition: all 0.3s;
1546
+ }
1547
+ [data-prefers-color='light'] .fixedRight {
1548
+ position: -webkit-sticky !important;
1549
+ position: sticky !important;
1550
+ z-index: 3 !important;
1551
+ }
1552
+ [data-prefers-color='light'] .fixedRight.td:after {
1553
+ box-shadow: inset -10px 0 8px -8px #00000026;
1554
+ position: absolute;
1555
+ top: 0;
1556
+ bottom: -1px;
1557
+ left: 0;
1558
+ width: 30px;
1559
+ transform: translate(-100%);
1560
+ transition: box-shadow 0.3s;
1561
+ content: '';
1562
+ pointer-events: none;
1563
+ }
1564
+ [data-prefers-color='light'] .fixedLeft .th.td:after,
1565
+ [data-prefers-color='light'] .fixedLeft .tr.td:after {
1566
+ box-shadow: inset -10px 0 8px -8px #00000026;
1567
+ position: absolute;
1568
+ top: 0;
1569
+ right: 0;
1570
+ bottom: -1px;
1571
+ width: 30px;
1572
+ transform: translate(100%);
1573
+ transition: box-shadow 0.3s;
1574
+ content: '';
1575
+ pointer-events: none;
1576
+ }
1461
1577
  [data-prefers-color='light'] .ant-select:not(.ant-select-customize-input) .ant-select-selector {
1462
1578
  position: relative;
1463
1579
  background-color: #f4f4f4;