@douyinfe/semi-foundation 2.26.0 → 2.27.0-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.
- package/lib/cjs/tabs/tabs.css +207 -0
- package/lib/cjs/tabs/tabs.scss +357 -17
- package/lib/es/tabs/tabs.css +207 -0
- package/lib/es/tabs/tabs.scss +357 -17
- package/package.json +2 -2
- package/tabs/tabs.scss +357 -17
package/lib/cjs/tabs/tabs.css
CHANGED
|
@@ -82,6 +82,66 @@
|
|
|
82
82
|
color: var(--semi-color-disabled-text);
|
|
83
83
|
border-bottom: none;
|
|
84
84
|
}
|
|
85
|
+
.semi-tabs-tab-single.semi-tabs-tab {
|
|
86
|
+
font-size: 14px;
|
|
87
|
+
line-height: 20px;
|
|
88
|
+
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
89
|
+
cursor: pointer;
|
|
90
|
+
box-sizing: border-box;
|
|
91
|
+
position: relative;
|
|
92
|
+
display: inline-block;
|
|
93
|
+
font-weight: 400;
|
|
94
|
+
color: var(--semi-color-text-2);
|
|
95
|
+
user-select: none;
|
|
96
|
+
}
|
|
97
|
+
.semi-tabs-tab-single.semi-tabs-tab .semi-icon {
|
|
98
|
+
position: relative;
|
|
99
|
+
margin-right: 8px;
|
|
100
|
+
top: 3px;
|
|
101
|
+
color: var(--semi-color-text-2);
|
|
102
|
+
transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
|
|
103
|
+
}
|
|
104
|
+
.semi-tabs-tab-single.semi-tabs-tab .semi-icon-close {
|
|
105
|
+
margin-right: 0;
|
|
106
|
+
font-size: 14px;
|
|
107
|
+
color: var(--semi-color-text-2);
|
|
108
|
+
margin-left: 10px;
|
|
109
|
+
cursor: pointer;
|
|
110
|
+
}
|
|
111
|
+
.semi-tabs-tab-single.semi-tabs-tab:hover {
|
|
112
|
+
color: var(--semi-color-text-0);
|
|
113
|
+
}
|
|
114
|
+
.semi-tabs-tab-single.semi-tabs-tab:hover .semi-icon {
|
|
115
|
+
color: var(--semi-color-text-0);
|
|
116
|
+
}
|
|
117
|
+
.semi-tabs-tab-single.semi-tabs-tab:active {
|
|
118
|
+
color: var(--semi-color-text-0);
|
|
119
|
+
}
|
|
120
|
+
.semi-tabs-tab-single.semi-tabs-tab:active .semi-icon {
|
|
121
|
+
color: var(--semi-color-text-0);
|
|
122
|
+
}
|
|
123
|
+
.semi-tabs-tab-single.semi-tabs-tab-active, .semi-tabs-tab-single.semi-tabs-tab-active:hover {
|
|
124
|
+
cursor: default;
|
|
125
|
+
font-weight: 600;
|
|
126
|
+
color: var(--semi-color-text-0);
|
|
127
|
+
}
|
|
128
|
+
.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon, .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon {
|
|
129
|
+
color: var(--semi-color-primary);
|
|
130
|
+
}
|
|
131
|
+
.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon-close, .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon-close {
|
|
132
|
+
color: var(--semi-color-text-2);
|
|
133
|
+
}
|
|
134
|
+
.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon-close:hover {
|
|
135
|
+
color: var(--semi-color-text-1);
|
|
136
|
+
}
|
|
137
|
+
.semi-tabs-tab-single.semi-tabs-tab-disabled {
|
|
138
|
+
cursor: not-allowed;
|
|
139
|
+
color: var(--semi-color-disabled-text);
|
|
140
|
+
}
|
|
141
|
+
.semi-tabs-tab-single.semi-tabs-tab-disabled:hover {
|
|
142
|
+
color: var(--semi-color-disabled-text);
|
|
143
|
+
border-bottom: none;
|
|
144
|
+
}
|
|
85
145
|
.semi-tabs-bar-collapse,
|
|
86
146
|
.semi-tabs-bar-collapse .semi-tabs-bar-overflow-list {
|
|
87
147
|
display: flex;
|
|
@@ -412,6 +472,153 @@
|
|
|
412
472
|
animation: 200ms semi-tabs-panel-keyframe-bottomShow ease-in-out 0s;
|
|
413
473
|
animation-fill-mode: forwards;
|
|
414
474
|
}
|
|
475
|
+
.semi-tabs-tab-line.semi-tabs-tab-top {
|
|
476
|
+
border-bottom: 1px solid var(--semi-color-border);
|
|
477
|
+
transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
|
|
478
|
+
transform: scale(var(--semi-transform_scale-none));
|
|
479
|
+
}
|
|
480
|
+
.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab {
|
|
481
|
+
padding: 16px 4px 14px 4px;
|
|
482
|
+
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);
|
|
483
|
+
border-bottom: 2px solid transparent;
|
|
484
|
+
}
|
|
485
|
+
.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:nth-of-type(1) {
|
|
486
|
+
padding-left: 0;
|
|
487
|
+
}
|
|
488
|
+
.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:hover {
|
|
489
|
+
border-bottom: 2px solid var(--semi-color-fill-0);
|
|
490
|
+
}
|
|
491
|
+
.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:focus-visible {
|
|
492
|
+
outline: 2px solid var(--semi-color-primary-light-active);
|
|
493
|
+
outline-offset: -1px;
|
|
494
|
+
}
|
|
495
|
+
.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:active {
|
|
496
|
+
border-bottom: 2px solid var(--semi-color-fill-1);
|
|
497
|
+
}
|
|
498
|
+
.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-small {
|
|
499
|
+
padding: 8px 4px 6px 4px;
|
|
500
|
+
}
|
|
501
|
+
.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-medium {
|
|
502
|
+
padding: 12px 4px 10px 4px;
|
|
503
|
+
}
|
|
504
|
+
.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 {
|
|
505
|
+
border-bottom: 2px solid var(--semi-color-primary);
|
|
506
|
+
}
|
|
507
|
+
.semi-tabs-tab-line.semi-tabs-tab-left {
|
|
508
|
+
border-right: 1px solid var(--semi-color-border);
|
|
509
|
+
}
|
|
510
|
+
.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab {
|
|
511
|
+
padding: 12px;
|
|
512
|
+
border-left: 2px solid transparent;
|
|
513
|
+
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);
|
|
514
|
+
}
|
|
515
|
+
.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:hover {
|
|
516
|
+
border-left: 2px solid var(--semi-color-fill-0);
|
|
517
|
+
background-color: var(--semi-color-fill-0);
|
|
518
|
+
}
|
|
519
|
+
.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:focus-visible {
|
|
520
|
+
outline: 2px solid var(--semi-color-primary-light-active);
|
|
521
|
+
outline-offset: -2px;
|
|
522
|
+
}
|
|
523
|
+
.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:active {
|
|
524
|
+
border-left: 2px solid var(--semi-color-fill-1);
|
|
525
|
+
background-color: var(--semi-color-fill-1);
|
|
526
|
+
}
|
|
527
|
+
.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-small {
|
|
528
|
+
padding: 6px;
|
|
529
|
+
}
|
|
530
|
+
.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-medium {
|
|
531
|
+
padding: 10px;
|
|
532
|
+
}
|
|
533
|
+
.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active {
|
|
534
|
+
background-color: var(--semi-color-primary-light-default);
|
|
535
|
+
}
|
|
536
|
+
.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 {
|
|
537
|
+
border-left: 2px solid var(--semi-color-primary);
|
|
538
|
+
background-color: var(--semi-color-primary-light-default);
|
|
539
|
+
}
|
|
540
|
+
.semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab {
|
|
541
|
+
border: 1px solid transparent;
|
|
542
|
+
border-bottom: none;
|
|
543
|
+
border-radius: var(--semi-border-radius-small) var(--semi-border-radius-small) 0 0;
|
|
544
|
+
}
|
|
545
|
+
.semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab:hover {
|
|
546
|
+
border-bottom: none;
|
|
547
|
+
}
|
|
548
|
+
.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 {
|
|
549
|
+
padding: 8px 12px 7px 12px;
|
|
550
|
+
border: 1px solid var(--semi-color-border);
|
|
551
|
+
border-bottom: 1px solid var(--semi-color-bg-1);
|
|
552
|
+
background: transparent;
|
|
553
|
+
}
|
|
554
|
+
.semi-tabs-tab-card.semi-tabs-tab-left {
|
|
555
|
+
border-right: 1px solid var(--semi-color-border);
|
|
556
|
+
}
|
|
557
|
+
.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab {
|
|
558
|
+
border: 1px solid transparent;
|
|
559
|
+
border-right: none;
|
|
560
|
+
border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
|
|
561
|
+
}
|
|
562
|
+
.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab:hover {
|
|
563
|
+
border-right: none;
|
|
564
|
+
}
|
|
565
|
+
.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active:after {
|
|
566
|
+
content: " ";
|
|
567
|
+
width: 1px;
|
|
568
|
+
position: absolute;
|
|
569
|
+
right: -1px;
|
|
570
|
+
top: 0;
|
|
571
|
+
bottom: 0;
|
|
572
|
+
background: var(--semi-color-bg-1);
|
|
573
|
+
}
|
|
574
|
+
.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 {
|
|
575
|
+
padding: 8px 12px;
|
|
576
|
+
border: 1px solid var(--semi-color-border);
|
|
577
|
+
border-right: none;
|
|
578
|
+
background: transparent;
|
|
579
|
+
}
|
|
580
|
+
.semi-tabs-tab-card.semi-tabs-tab {
|
|
581
|
+
padding: 8px 12px;
|
|
582
|
+
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);
|
|
583
|
+
transform: scale(var(--semi-transform_scale-none));
|
|
584
|
+
}
|
|
585
|
+
.semi-tabs-tab-card.semi-tabs-tab:hover {
|
|
586
|
+
background: var(--semi-color-fill-0);
|
|
587
|
+
}
|
|
588
|
+
.semi-tabs-tab-card.semi-tabs-tab:focus-visible {
|
|
589
|
+
outline: 2px solid var(--semi-color-primary-light-active);
|
|
590
|
+
outline-offset: -2px;
|
|
591
|
+
}
|
|
592
|
+
.semi-tabs-tab-card.semi-tabs-tab:active {
|
|
593
|
+
background: var(--semi-color-fill-1);
|
|
594
|
+
}
|
|
595
|
+
.semi-tabs-tab-button {
|
|
596
|
+
border: none;
|
|
597
|
+
}
|
|
598
|
+
.semi-tabs-tab-button.semi-tabs-tab {
|
|
599
|
+
padding: 8px 12px;
|
|
600
|
+
border-radius: var(--semi-border-radius-small);
|
|
601
|
+
color: var(--semi-color-text-2);
|
|
602
|
+
border: none;
|
|
603
|
+
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);
|
|
604
|
+
transform: scale(var(--semi-transform_scale-none));
|
|
605
|
+
}
|
|
606
|
+
.semi-tabs-tab-button.semi-tabs-tab:hover {
|
|
607
|
+
border: none;
|
|
608
|
+
background-color: var(--semi-color-fill-0);
|
|
609
|
+
}
|
|
610
|
+
.semi-tabs-tab-button.semi-tabs-tab:focus-visible {
|
|
611
|
+
outline: 2px solid var(--semi-color-primary-light-active);
|
|
612
|
+
outline-offset: -2px;
|
|
613
|
+
}
|
|
614
|
+
.semi-tabs-tab-button.semi-tabs-tab:active {
|
|
615
|
+
background-color: var(--semi-color-fill-1);
|
|
616
|
+
}
|
|
617
|
+
.semi-tabs-tab-button.semi-tabs-tab-active, .semi-tabs-tab-button.semi-tabs-tab-active:hover {
|
|
618
|
+
color: var(--semi-color-primary);
|
|
619
|
+
border: none;
|
|
620
|
+
background-color: var(--semi-color-primary-light-default);
|
|
621
|
+
}
|
|
415
622
|
|
|
416
623
|
.semi-rtl .semi-tabs,
|
|
417
624
|
.semi-portal-rtl .semi-tabs {
|