@douyinfe/semi-foundation 2.63.0 → 2.63.2-alpha.0

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 (55) hide show
  1. package/chat/foundation.ts +18 -23
  2. package/datePicker/foundation.ts +1 -1
  3. package/image/image.scss +6 -1
  4. package/image/previewImageFoundation.ts +233 -150
  5. package/image/previewInnerFoundation.ts +11 -6
  6. package/lib/cjs/base/foundation.js +1 -1
  7. package/lib/cjs/chat/foundation.d.ts +1 -2
  8. package/lib/cjs/chat/foundation.js +2 -7
  9. package/lib/cjs/checkbox/checkboxGroupFoundation.js +1 -1
  10. package/lib/cjs/datePicker/foundation.js +1 -1
  11. package/lib/cjs/image/image.css +5 -1
  12. package/lib/cjs/image/image.scss +6 -1
  13. package/lib/cjs/image/previewImageFoundation.d.ts +46 -13
  14. package/lib/cjs/image/previewImageFoundation.js +207 -181
  15. package/lib/cjs/image/previewInnerFoundation.d.ts +4 -3
  16. package/lib/cjs/image/previewInnerFoundation.js +5 -2
  17. package/lib/cjs/navigation/foundation.d.ts +8 -8
  18. package/lib/cjs/navigation/itemFoundation.d.ts +5 -4
  19. package/lib/cjs/radio/radioInnerFoundation.js +1 -1
  20. package/lib/cjs/table/utils.d.ts +1 -1
  21. package/lib/cjs/tabs/constants.d.ts +1 -0
  22. package/lib/cjs/tabs/constants.js +2 -1
  23. package/lib/cjs/tabs/tabs.css +28 -199
  24. package/lib/cjs/tabs/tabs.scss +336 -297
  25. package/lib/cjs/tabs/variables.scss +21 -2
  26. package/lib/cjs/tree/treeUtil.d.ts +1 -1
  27. package/lib/cjs/upload/constants.d.ts +1 -1
  28. package/lib/es/base/foundation.js +1 -1
  29. package/lib/es/chat/foundation.d.ts +1 -2
  30. package/lib/es/chat/foundation.js +2 -7
  31. package/lib/es/checkbox/checkboxGroupFoundation.js +1 -1
  32. package/lib/es/datePicker/foundation.js +1 -1
  33. package/lib/es/image/image.css +5 -1
  34. package/lib/es/image/image.scss +6 -1
  35. package/lib/es/image/previewImageFoundation.d.ts +46 -13
  36. package/lib/es/image/previewImageFoundation.js +207 -181
  37. package/lib/es/image/previewInnerFoundation.d.ts +4 -3
  38. package/lib/es/image/previewInnerFoundation.js +5 -2
  39. package/lib/es/navigation/foundation.d.ts +8 -8
  40. package/lib/es/navigation/itemFoundation.d.ts +5 -4
  41. package/lib/es/radio/radioInnerFoundation.js +1 -1
  42. package/lib/es/table/utils.d.ts +1 -1
  43. package/lib/es/tabs/constants.d.ts +1 -0
  44. package/lib/es/tabs/constants.js +2 -1
  45. package/lib/es/tabs/tabs.css +28 -199
  46. package/lib/es/tabs/tabs.scss +336 -297
  47. package/lib/es/tabs/variables.scss +21 -2
  48. package/lib/es/tree/treeUtil.d.ts +1 -1
  49. package/lib/es/upload/constants.d.ts +1 -1
  50. package/navigation/foundation.ts +8 -8
  51. package/navigation/itemFoundation.ts +6 -4
  52. package/package.json +3 -3
  53. package/tabs/constants.ts +2 -1
  54. package/tabs/tabs.scss +336 -297
  55. package/tabs/variables.scss +21 -2
package/lib/es/tabs/tabs.css CHANGED
@@ -109,66 +109,6 @@
109
109
  color: var(--semi-color-disabled-text);
110
110
  border-bottom: none;
111
111
  }
112
- .semi-tabs-tab-single.semi-tabs-tab {
113
- font-size: 14px;
114
- line-height: 20px;
115
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
116
- cursor: pointer;
117
- box-sizing: border-box;
118
- position: relative;
119
- display: inline-block;
120
- font-weight: 400;
121
- color: var(--semi-color-text-2);
122
- user-select: none;
123
- }
124
- .semi-tabs-tab-single.semi-tabs-tab .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
125
- position: relative;
126
- margin-right: 8px;
127
- top: 3px;
128
- color: var(--semi-color-text-2);
129
- transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
130
- }
131
- .semi-tabs-tab-single.semi-tabs-tab .semi-icon.semi-tabs-tab-icon-close {
132
- margin-right: 0;
133
- font-size: 14px;
134
- color: var(--semi-color-text-2);
135
- margin-left: 10px;
136
- cursor: pointer;
137
- }
138
- .semi-tabs-tab-single.semi-tabs-tab:hover {
139
- color: var(--semi-color-text-0);
140
- }
141
- .semi-tabs-tab-single.semi-tabs-tab:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
142
- color: var(--semi-color-text-0);
143
- }
144
- .semi-tabs-tab-single.semi-tabs-tab:active {
145
- color: var(--semi-color-text-0);
146
- }
147
- .semi-tabs-tab-single.semi-tabs-tab:active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
148
- color: var(--semi-color-text-0);
149
- }
150
- .semi-tabs-tab-single.semi-tabs-tab-active, .semi-tabs-tab-single.semi-tabs-tab-active:hover {
151
- cursor: default;
152
- font-weight: 600;
153
- color: var(--semi-color-text-0);
154
- }
155
- .semi-tabs-tab-single.semi-tabs-tab-active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate), .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
156
- color: var(--semi-color-primary);
157
- }
158
- .semi-tabs-tab-single.semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close, .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon.semi-tabs-tab-icon-close {
159
- color: var(--semi-color-text-2);
160
- }
161
- .semi-tabs-tab-single.semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close:hover {
162
- color: var(--semi-color-text-1);
163
- }
164
- .semi-tabs-tab-single.semi-tabs-tab-disabled {
165
- cursor: not-allowed;
166
- color: var(--semi-color-disabled-text);
167
- }
168
- .semi-tabs-tab-single.semi-tabs-tab-disabled:hover {
169
- color: var(--semi-color-disabled-text);
170
- border-bottom: none;
171
- }
172
112
  .semi-tabs-bar-collapse,
173
113
  .semi-tabs-bar-collapse .semi-tabs-bar-overflow-list {
174
114
  display: flex;
@@ -252,6 +192,8 @@
252
192
  transform: scale(var(--semi-transform_scale-none));
253
193
  }
254
194
  .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab {
195
+ font-size: 14px;
196
+ line-height: 20px;
255
197
  padding: 16px 4px 14px 4px;
256
198
  transition: border-bottom-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
257
199
  border-bottom: 2px solid transparent;
@@ -273,9 +215,13 @@
273
215
  margin-right: 24px;
274
216
  }
275
217
  .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-small {
218
+ font-size: 14px;
219
+ line-height: 20px;
276
220
  padding: 8px 4px 6px 4px;
277
221
  }
278
222
  .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-medium {
223
+ font-size: 14px;
224
+ line-height: 20px;
279
225
  padding: 12px 4px 10px 4px;
280
226
  }
281
227
  .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-active, .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-active:hover {
@@ -403,13 +349,17 @@
403
349
  .semi-tabs-bar-button .semi-tabs-tab {
404
350
  padding: 8px 12px;
405
351
  border-radius: var(--semi-border-radius-small);
352
+ background-color: transparent;
406
353
  color: var(--semi-color-text-2);
354
+ font-size: 14px;
355
+ line-height: 20px;
407
356
  border: none;
408
357
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
409
358
  transform: scale(var(--semi-transform_scale-none));
410
359
  }
411
360
  .semi-tabs-bar-button .semi-tabs-tab:hover {
412
361
  border: none;
362
+ color: var(--semi-color-text-0);
413
363
  background-color: var(--semi-color-fill-0);
414
364
  }
415
365
  .semi-tabs-bar-button .semi-tabs-tab:focus-visible {
@@ -417,6 +367,7 @@
417
367
  outline-offset: -2px;
418
368
  }
419
369
  .semi-tabs-bar-button .semi-tabs-tab:active {
370
+ color: var(--semi-color-text-0);
420
371
  background-color: var(--semi-color-fill-1);
421
372
  }
422
373
  .semi-tabs-bar-button .semi-tabs-tab-active, .semi-tabs-bar-button .semi-tabs-tab-active:hover {
@@ -424,6 +375,23 @@
424
375
  border: none;
425
376
  background-color: var(--semi-color-primary-light-default);
426
377
  }
378
+ .semi-tabs-bar-slash .semi-tabs-tab {
379
+ padding: 12px 4px;
380
+ font-size: 14px;
381
+ line-height: 20px;
382
+ }
383
+ .semi-tabs-bar-slash .semi-tabs-tab:nth-of-type(1) {
384
+ padding-left: 0;
385
+ }
386
+ .semi-tabs-bar-slash .semi-tabs-tab:not(:last-of-type) {
387
+ margin-right: 16px;
388
+ }
389
+ .semi-tabs-bar-slash .semi-tabs-tab:not(:last-of-type):after {
390
+ content: "/";
391
+ font-size: 14px;
392
+ margin-left: 16px;
393
+ color: var(--semi-color-text-2);
394
+ }
427
395
  .semi-tabs-content {
428
396
  width: 100%;
429
397
  padding: 5px 0;
@@ -499,145 +467,6 @@
499
467
  animation: 200ms semi-tabs-panel-keyframe-bottomShow ease-in-out 0s;
500
468
  animation-fill-mode: forwards;
501
469
  }
502
- .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab {
503
- font-size: 14px;
504
- padding: 16px 4px 14px 4px;
505
- transition: border-bottom-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
506
- border-bottom: 2px solid transparent;
507
- }
508
- .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:nth-of-type(1) {
509
- padding-left: 0;
510
- }
511
- .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:hover {
512
- border-bottom: 2px solid var(--semi-color-fill-0);
513
- }
514
- .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:focus-visible {
515
- outline: 2px solid var(--semi-color-primary-light-active);
516
- outline-offset: -1px;
517
- }
518
- .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:active {
519
- border-bottom: 2px solid var(--semi-color-fill-1);
520
- }
521
- .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-small {
522
- font-size: 14px;
523
- padding: 8px 4px 6px 4px;
524
- }
525
- .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-medium {
526
- font-size: 14px;
527
- padding: 12px 4px 10px 4px;
528
- }
529
- .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-active, .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-active:hover {
530
- border-bottom: 2px solid var(--semi-color-primary);
531
- }
532
- .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab {
533
- padding: 12px;
534
- border-left: 2px solid transparent;
535
- transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
536
- }
537
- .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:hover {
538
- border-left: 2px solid var(--semi-color-fill-0);
539
- background-color: var(--semi-color-fill-0);
540
- }
541
- .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:focus-visible {
542
- outline: 2px solid var(--semi-color-primary-light-active);
543
- outline-offset: -2px;
544
- }
545
- .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:active {
546
- border-left: 2px solid var(--semi-color-fill-1);
547
- background-color: var(--semi-color-fill-1);
548
- }
549
- .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-small {
550
- padding: 6px;
551
- }
552
- .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-medium {
553
- padding: 10px;
554
- }
555
- .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active {
556
- background-color: var(--semi-color-primary-light-default);
557
- }
558
- .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active, .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active:hover {
559
- border-left: 2px solid var(--semi-color-primary);
560
- background-color: var(--semi-color-primary-light-default);
561
- }
562
- .semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab {
563
- border: 1px solid transparent;
564
- border-bottom: none;
565
- border-radius: var(--semi-border-radius-small) var(--semi-border-radius-small) 0 0;
566
- }
567
- .semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab:hover {
568
- border-bottom: none;
569
- }
570
- .semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab-active, .semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab-active:hover {
571
- padding: 8px 12px 7px 12px;
572
- border: 1px solid var(--semi-color-border);
573
- border-bottom: 1px solid var(--semi-color-bg-1);
574
- background: transparent;
575
- }
576
- .semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab {
577
- border: 1px solid transparent;
578
- border-right: none;
579
- border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
580
- }
581
- .semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab:hover {
582
- border-right: none;
583
- }
584
- .semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active:after {
585
- content: " ";
586
- width: 1px;
587
- position: absolute;
588
- right: -1px;
589
- top: 0;
590
- bottom: 0;
591
- background: var(--semi-color-bg-1);
592
- }
593
- .semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active, .semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active:hover {
594
- padding: 8px 12px;
595
- border: 1px solid var(--semi-color-border);
596
- border-right: none;
597
- background: transparent;
598
- }
599
- .semi-tabs-tab-card.semi-tabs-tab {
600
- padding: 8px 12px;
601
- transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
602
- transform: scale(var(--semi-transform_scale-none));
603
- }
604
- .semi-tabs-tab-card.semi-tabs-tab:hover {
605
- background: var(--semi-color-fill-0);
606
- }
607
- .semi-tabs-tab-card.semi-tabs-tab:focus-visible {
608
- outline: 2px solid var(--semi-color-primary-light-active);
609
- outline-offset: -2px;
610
- }
611
- .semi-tabs-tab-card.semi-tabs-tab:active {
612
- background: var(--semi-color-fill-1);
613
- }
614
- .semi-tabs-tab-button {
615
- border: none;
616
- }
617
- .semi-tabs-tab-button.semi-tabs-tab {
618
- padding: 8px 12px;
619
- border-radius: var(--semi-border-radius-small);
620
- color: var(--semi-color-text-2);
621
- border: none;
622
- transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
623
- transform: scale(var(--semi-transform_scale-none));
624
- }
625
- .semi-tabs-tab-button.semi-tabs-tab:hover {
626
- border: none;
627
- background-color: var(--semi-color-fill-0);
628
- }
629
- .semi-tabs-tab-button.semi-tabs-tab:focus-visible {
630
- outline: 2px solid var(--semi-color-primary-light-active);
631
- outline-offset: -2px;
632
- }
633
- .semi-tabs-tab-button.semi-tabs-tab:active {
634
- background-color: var(--semi-color-fill-1);
635
- }
636
- .semi-tabs-tab-button.semi-tabs-tab-active, .semi-tabs-tab-button.semi-tabs-tab-active:hover {
637
- color: var(--semi-color-primary);
638
- border: none;
639
- background-color: var(--semi-color-primary-light-default);
640
- }
641
470
 
642
471
  .semi-rtl .semi-tabs,
643
472
  .semi-portal-rtl .semi-tabs {