@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.
Files changed (6) hide show
  1. package/lib/cjs/tabs/tabs.css +207 -0
  2. package/lib/cjs/tabs/tabs.scss +357 -17
  3. package/lib/es/tabs/tabs.css +207 -0
  4. package/lib/es/tabs/tabs.scss +357 -17
  5. package/package.json +2 -2
  6. package/tabs/tabs.scss +357 -17
package/lib/cjs/tabs/tabs.scss CHANGED
@@ -46,7 +46,7 @@ $module: #{$prefix}-tabs;
46
46
  margin-right: $spacing-tabs_tab_icon-marginRight;
47
47
  top: $spacing-tabs_tab_icon-top;
48
48
  color: $color-tabs_tab-icon-default;
49
- transition: color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//线条式tabs的 color的transition
49
+ transition: color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text; //线条式tabs的 color的transition
50
50
 
51
51
  }
52
52
 
@@ -109,6 +109,88 @@ $module: #{$prefix}-tabs;
109
109
  }
110
110
  }
111
111
 
112
+ &-tab-single {
113
+ &.#{$module}-tab {
114
+ @include font-size-regular;
115
+ cursor: pointer;
116
+ box-sizing: border-box;
117
+ position: relative;
118
+ display: inline-block;
119
+ // float: left;
120
+
121
+ font-weight: $font-tabs_tab-fontWeight;
122
+ color: $color-tabs_tab_line_default-text-default;
123
+
124
+ user-select: none;
125
+
126
+ .#{$prefix}-icon {
127
+ position: relative;
128
+ margin-right: $spacing-tabs_tab_icon-marginRight;
129
+ top: $spacing-tabs_tab_icon-top;
130
+ color: $color-tabs_tab-icon-default;
131
+ transition: color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//线条式tabs的 color的transition
132
+
133
+ }
134
+
135
+ .#{$prefix}-icon-close {
136
+ margin-right: 0;
137
+ font-size: 14px;
138
+ color: var(--semi-color-text-2);
139
+ margin-left: 10px;
140
+ cursor: pointer;
141
+ }
142
+
143
+ &:hover {
144
+ color: $color-tabs_tab_line_default-text-hover;
145
+
146
+ .#{$prefix}-icon {
147
+ color: $color-tabs_tab-icon-hover;
148
+ }
149
+ }
150
+
151
+ &:active {
152
+ color: $color-tabs_tab_line_default-text-active;
153
+
154
+ .#{$prefix}-icon {
155
+ color: $color-tabs_tab-icon-active;
156
+ }
157
+ }
158
+ }
159
+
160
+ &.#{$module}-tab-active {
161
+
162
+ &,
163
+ &:hover {
164
+ cursor: default;
165
+ // border-bottom: 2px solid $color-tabs_tab_line_indicator_selected-icon-default;
166
+ font-weight: $font-tabs_tab_active-fontWeight;
167
+ color: $color-tabs_tab_line_selected-text-default;
168
+
169
+ .#{$prefix}-icon {
170
+ color: $color-tabs_tab_selected-icon-default;
171
+ }
172
+
173
+ .#{$prefix}-icon-close {
174
+ color: var(--semi-color-text-2);
175
+ }
176
+ }
177
+
178
+ .#{$prefix}-icon-close:hover {
179
+ color: var(--semi-color-text-1);
180
+ }
181
+ }
182
+
183
+ &.#{$module}-tab-disabled {
184
+ cursor: not-allowed;
185
+ color: $color-tabs_tab_line_disabled-text-default;
186
+
187
+ &:hover {
188
+ color: $color-tabs_tab_line_disabled-text-hover;
189
+ border-bottom: none;
190
+ }
191
+ }
192
+ }
193
+
112
194
  &-bar-collapse {
113
195
  &,
114
196
  .#{$module}-bar-overflow-list {
@@ -134,10 +216,10 @@ $module: #{$prefix}-tabs;
134
216
  outline-offset: $width-tabs-outline-offset;
135
217
  }
136
218
  }
137
- & > .#{$prefix}-button-disabled{
219
+ & > .#{$prefix}-button-disabled {
138
220
  color: $color-tabs_tab-pane_arrow_disabled-text-default;
139
221
  background-color: $color-tabs_tab-pane_arrow_disabled-bg-default;
140
- &:hover{
222
+ &:hover {
141
223
  color: $color-tabs_tab-pane_arrow_disabled-text-hover;
142
224
  background-color: $color-tabs_tab-pane_arrow_disabled-bg-hover;
143
225
  }
@@ -146,12 +228,12 @@ $module: #{$prefix}-tabs;
146
228
 
147
229
  .#{$module}-bar-arrow-start {
148
230
  margin-right: $spacing-tabs_overflow_icon-marginRight;
149
- & > .#{$prefix}-button{
231
+ & > .#{$prefix}-button {
150
232
  color: $color-tabs_tab-pane_arrow-text-default;
151
233
  padding: $spacing-tabs_tab-pane_arrow;
152
234
  border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;
153
235
  background-color: $color-tabs_tab-pane_arrow-bg-default;
154
- &:hover{
236
+ &:hover {
155
237
  background-color: var(--semi-color-fill-0);
156
238
  color: $color-tabs_tab-pane_arrow-text-hover;
157
239
  border-color: $color-tabs_tab-pane_arrow-border-hover;
@@ -167,17 +249,17 @@ $module: #{$prefix}-tabs;
167
249
 
168
250
  .#{$module}-bar-arrow-end {
169
251
  margin-left: $spacing-tabs_overflow_icon-marginLeft;
170
- & > .#{$prefix}-button{
252
+ & > .#{$prefix}-button {
171
253
  color: $color-tabs_tab-pane_arrow-text-default;
172
254
  padding: $spacing-tabs_tab-pane_arrow;
173
255
  border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;
174
256
  background-color: $color-tabs_tab-pane_arrow-bg-default;
175
- &:hover{
257
+ &:hover {
176
258
  background-color: var(--semi-color-fill-0);
177
259
  color: $color-tabs_tab-pane_arrow-text-hover;
178
260
  border-color: $color-tabs_tab-pane_arrow-border-hover;
179
261
  }
180
- &:active{
262
+ &:active {
181
263
  background-color: var(--semi-color-fill-1);
182
264
  color: $color-tabs_tab-pane_arrow-text-active;
183
265
  border-color: $color-tabs_tab-pane_arrow-border-active;
@@ -202,12 +284,13 @@ $module: #{$prefix}-tabs;
202
284
  &.#{$module}-bar-top {
203
285
  border-bottom: $width-tabs_bar_line-border solid $color-tabs_tab_line_default-border-default;
204
286
  transition: color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text; //线条式tabs的 color的transition
205
- transform:scale($transform_scale-tabs_tab_line-item);
287
+ transform: scale($transform_scale-tabs_tab_line-item);
206
288
 
207
289
  .#{$module}-tab {
208
290
  padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
209
291
  transition: border-bottom-color $transition_duration-tabs_tab_line-border $transition_function-tabs_tab_line-border $transition_delay-tabs_tab_line-border,
210
- color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text; //线条式tabs的border-color 的 transition
292
+ color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text; //线条式tabs的border-color 的 transition
293
+
211
294
  &:nth-of-type(1) {
212
295
  padding-left: 0;
213
296
  }
@@ -391,7 +474,7 @@ $module: #{$prefix}-tabs;
391
474
  transition: background-color $transition_duration-tabs_tab_card-bg $transition_function-tabs_tab_card-bg $transition_delay-tabs_tab_card-bg, //卡片式tabs的bg的transition
392
475
  color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//卡片式tabs的 color的transition
393
476
 
394
- transform:scale($transform_scale-tabs_tab_card-item);
477
+ transform: scale($transform_scale-tabs_tab_card-item);
395
478
 
396
479
  &:hover {
397
480
  background: $color-tabs_tab_card-bg-hover;
@@ -435,9 +518,9 @@ $module: #{$prefix}-tabs;
435
518
  color: $color-tabs_tab_button-text-default;
436
519
  border: none;
437
520
  transition: background-color $transition_duration-tabs-tab_button-bg $transition_function-tabs_tab_button-bg $transition_delay-tabs_tab_button-bg,//按钮tabs的背景色的transition
438
- color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//按钮式tabs的 color的transition
521
+ color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//按钮式tabs的 color的transition
439
522
 
440
- transform:scale($transform_scale-tabs_tab_button-item);
523
+ transform: scale($transform_scale-tabs_tab_button-item);
441
524
 
442
525
  &:hover {
443
526
  border: none;
@@ -496,10 +579,12 @@ $module: #{$prefix}-tabs;
496
579
 
497
580
 
498
581
  @keyframes #{$module}-panel-keyframe-leftShow {
582
+
499
583
  0% {
500
584
  transform: translateX($animation_transform_translateX-tabs_tabPanel-leftShow);
501
585
  opacity: $animation_opacity-tabs_tabPanel_show;
502
586
  }
587
+
503
588
  100% {
504
589
  transform: translateX(0);
505
590
  opacity: 1;
@@ -507,10 +592,12 @@ $module: #{$prefix}-tabs;
507
592
 
508
593
  }
509
594
  @keyframes #{$module}-panel-keyframe-rightShow {
595
+
510
596
  0% {
511
597
  transform: translateX($animation_transform_translateX-tabs_tabPanel-rightShow);
512
598
  opacity: $animation_opacity-tabs_tabPanel_show;
513
599
  }
600
+
514
601
  100% {
515
602
  transform: translateX(0);
516
603
  opacity: 1;
@@ -518,10 +605,12 @@ $module: #{$prefix}-tabs;
518
605
  }
519
606
 
520
607
  @keyframes #{$module}-panel-keyframe-topShow {
608
+
521
609
  0% {
522
610
  transform: translateY($animation_transform_translateX-tabs_tabPanel-leftShow);
523
611
  opacity: $animation_opacity-tabs_tabPanel_show;
524
612
  }
613
+
525
614
  100% {
526
615
  transform: translateY(0);
527
616
  opacity: 1;
@@ -529,10 +618,12 @@ $module: #{$prefix}-tabs;
529
618
 
530
619
  }
531
620
  @keyframes #{$module}-panel-keyframe-bottomShow {
621
+
532
622
  0% {
533
623
  transform: translateY($animation_transform_translateX-tabs_tabPanel-rightShow);
534
624
  opacity: $animation_opacity-tabs_tabPanel_show;
535
625
  }
626
+
536
627
  100% {
537
628
  transform: translateY(0);
538
629
  opacity: 1;
@@ -540,23 +631,272 @@ $module: #{$prefix}-tabs;
540
631
  }
541
632
 
542
633
 
543
- &-pane-animate-leftShow{
634
+ &-pane-animate-leftShow {
544
635
  animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-leftShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
545
636
  animation-fill-mode: forwards;
546
637
  }
547
- &-pane-animate-rightShow{
638
+ &-pane-animate-rightShow {
548
639
  animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-rightShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
549
640
  animation-fill-mode: forwards;
550
641
  }
551
642
 
552
- &-pane-animate-topShow{
643
+ &-pane-animate-topShow {
553
644
  animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-topShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
554
645
  animation-fill-mode: forwards;
555
646
  }
556
- &-pane-animate-bottomShow{
647
+
648
+ &-pane-animate-bottomShow {
557
649
  animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-bottomShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
558
650
  animation-fill-mode: forwards;
559
651
  }
652
+
653
+ &-tab-line {
654
+ &.#{$module}-tab-top {
655
+ border-bottom: $width-tabs_bar_line-border solid $color-tabs_tab_line_default-border-default;
656
+ transition: color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text; //线条式tabs的 color的transition
657
+ transform: scale($transform_scale-tabs_tab_line-item);
658
+
659
+ &.#{$module}-tab {
660
+ padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
661
+ transition: border-bottom-color $transition_duration-tabs_tab_line-border $transition_function-tabs_tab_line-border $transition_delay-tabs_tab_line-border,
662
+ color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text; //线条式tabs的border-color 的 transition
663
+
664
+ &:nth-of-type(1) {
665
+ padding-left: 0;
666
+ }
667
+
668
+ border-bottom: $width-tabs_bar_line_tab-border solid transparent;
669
+
670
+ &:hover {
671
+ border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
672
+ }
673
+
674
+ &:focus-visible {
675
+ outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
676
+ outline-offset: $width-tabs_bar_line-outline-offset;
677
+ }
678
+
679
+ &:active {
680
+ border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-active;
681
+ }
682
+
683
+ // &:not(:last-of-type) {
684
+ // margin-right: $spacing-tabs_bar_line_tab-marginRight;
685
+ // }
686
+
687
+ &-small {
688
+ padding: $spacing-tabs_bar_line_tab_small-paddingTop $spacing-tabs_bar_line_tab_small-paddingRight $spacing-tabs_bar_line_tab_small-paddingBottom $spacing-tabs_bar_line_tab_small-paddingLeft;
689
+ }
690
+
691
+ &-medium {
692
+ padding: $spacing-tabs_bar_line_tab_medium-paddingTop $spacing-tabs_bar_line_tab_medium-paddingRight $spacing-tabs_bar_line_tab_medium-paddingBottom $spacing-tabs_bar_line_tab_medium-paddingLeft;
693
+ }
694
+ }
695
+
696
+ &.#{$module}-tab-active {
697
+
698
+ &,
699
+ &:hover {
700
+ border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_indicator_selected-icon-default;
701
+ }
702
+ }
703
+ }
704
+
705
+ &.#{$module}-tab-left {
706
+ border-right: $width-tabs_bar_line-border solid $color-tabs_tab_line_default-border-default;
707
+
708
+ &.#{$module}-tab {
709
+ padding: $spacing-tabs_bar_line_tab_left-padding;
710
+ border-left: $width-tabs_bar_line_tab-border solid transparent;
711
+ transition: background-color $transition_duration-tabs-tab_button-bg $transition_function-tabs_tab_button-bg $transition_delay-tabs_tab_button-bg,//按钮tabs的背景色的transition
712
+ color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//按钮式tabs的 color的transition
713
+
714
+ &:hover {
715
+ border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
716
+ background-color: $color-tabs_tab_line_vertical-bg-hover;
717
+ }
718
+
719
+ &:focus-visible {
720
+ outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
721
+ outline-offset: $width-tabs-outline-offset;
722
+ }
723
+
724
+ &:active {
725
+ border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-active;
726
+ background-color: $color-tabs_tab_line_vertical-bg-active;
727
+ }
728
+
729
+ &-small {
730
+ padding: $spacing-tabs_bar_line_tab_left_small-padding;
731
+ }
732
+
733
+ &-medium {
734
+ padding: $spacing-tabs_bar_line_tab_left_medium-padding;
735
+ }
736
+ }
737
+
738
+ &.#{$module}-tab-active {
739
+ background-color: $color-tabs_tab_line_vertical_selected-bg-default;
740
+
741
+ &,
742
+ &:hover {
743
+ border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_indicator_selected-icon-default;
744
+ background-color: $color-tabs_tab_line_vertical_selected-bg-default;
745
+ }
746
+ }
747
+ }
748
+ }
749
+
750
+ &-tab-card {
751
+ &.#{$module}-tab-top {
752
+
753
+ // border-bottom: $border-thickness-control solid $color-tabs_tab_line_default-border-default;
754
+
755
+ &.#{$module}-tab {
756
+ border: $width-tabs_bar_card-border solid transparent;
757
+ border-bottom: none;
758
+ border-radius: $radius-tabs_tab_card;
759
+
760
+ &:hover {
761
+ border-bottom: none;
762
+ }
763
+
764
+ // &:not(:last-of-type) {
765
+ // margin-right: $spacing-tabs_bar_card_tab-marginRight;
766
+ // }
767
+ }
768
+
769
+ &.#{$module}-tab-active {
770
+
771
+ &,
772
+ &:hover {
773
+ padding: $spacing-tabs_bar_card_tab_active-paddingTop $spacing-tabs_bar_card_tab_active-paddingRight $spacing-tabs_bar_card_tab_active-paddingBottom $spacing-tabs_bar_card_tab_active-paddingLeft;
774
+ border: $width-tabs_bar_card-border solid $color-tabs_tab_card_indicator_selected-icon-default;
775
+ border-bottom: $width-tabs_bar_card-border solid $color-tabs_tab_card_selected-bg-default;
776
+ background: transparent;
777
+ // padding-bottom: $spacing-tight + 1;
778
+ }
779
+ }
780
+ }
781
+
782
+ &.#{$module}-tab-left {
783
+ border-right: $width-tabs_bar_card-border solid $color-tabs_tab_line_default-border-default;
784
+
785
+ &.#{$module}-tab {
786
+ border: $width-tabs_bar_card-border solid transparent;
787
+ border-right: none;
788
+ border-radius: $radius-tabs_tab_card_left;
789
+
790
+ &:hover {
791
+ border-right: none;
792
+ }
793
+
794
+ // &:not(:last-of-type) {
795
+ // margin-bottom: $spacing-tabs_bar_card_tab_left-marginBottom;
796
+ // }
797
+ }
798
+
799
+ &.#{$module}-tab-active {
800
+
801
+ &:after {
802
+ content: " ";
803
+ width: 1px;
804
+ position: absolute;
805
+ right: -1px;
806
+ top: 0;
807
+ bottom: 0;
808
+ background: $color-tabs_tab_card_selected-bg-default;
809
+ }
810
+
811
+ &,
812
+ &:hover {
813
+ padding: $spacing-tabs_bar_card_tab_left_active-paddingY $spacing-tabs_bar_card_tab_left_active-paddingX;
814
+ border: $width-tabs_bar_card-border solid $color-tabs_tab_card_indicator_selected-icon-default;
815
+ border-right: none;
816
+ background: transparent;
817
+ // padding-bottom: $spacing-tight + 1;
818
+ }
819
+ }
820
+ }
821
+
822
+ &.#{$module}-tab {
823
+ padding: $spacing-tabs_bar_card_tab-paddingY $spacing-tabs_bar_card_tab-paddingX;
824
+ transition: background-color $transition_duration-tabs_tab_card-bg $transition_function-tabs_tab_card-bg $transition_delay-tabs_tab_card-bg, //卡片式tabs的bg的transition
825
+ color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//卡片式tabs的 color的transition
826
+
827
+ transform: scale($transform_scale-tabs_tab_card-item);
828
+
829
+ &:hover {
830
+ background: $color-tabs_tab_card-bg-hover;
831
+ }
832
+
833
+ &:focus-visible {
834
+ outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
835
+ outline-offset: $width-tabs-outline-offset;
836
+ }
837
+
838
+ &:active {
839
+ background: $color-tabs_tab_card-bg-active;
840
+ }
841
+ }
842
+ }
843
+
844
+ &-tab-button {
845
+ border: none;
846
+
847
+ // &.#{$module}-tab-left {
848
+ // .#{$module}-tab {
849
+
850
+ // &:not(:last-of-type) {
851
+ // margin-bottom: $spacing-tabs_bar_button_tab_left-marginBottom;
852
+ // }
853
+ // }
854
+ // }
855
+
856
+ // &.#{$module}-tab-top {
857
+ // .#{$module}-tab {
858
+
859
+ // &:not(:last-of-type) {
860
+ // margin-right: $spacing-tabs_bar_button_tab-marginRight;
861
+ // }
862
+ // }
863
+ // }
864
+
865
+ &.#{$module}-tab {
866
+ padding: $spacing-tabs_bar_button_tab-paddingY $spacing-tabs_bar_button_tab-paddingX;
867
+ border-radius: $radius-tabs_tab_button;
868
+ color: $color-tabs_tab_button-text-default;
869
+ border: none;
870
+ transition: background-color $transition_duration-tabs-tab_button-bg $transition_function-tabs_tab_button-bg $transition_delay-tabs_tab_button-bg,//按钮tabs的背景色的transition
871
+ color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//按钮式tabs的 color的transition
872
+
873
+ transform: scale($transform_scale-tabs_tab_button-item);
874
+
875
+ &:hover {
876
+ border: none;
877
+ background-color: $color-tabs_tab_button-bg-hover;
878
+ }
879
+
880
+ &:focus-visible {
881
+ outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
882
+ outline-offset: $width-tabs-outline-offset;
883
+ }
884
+
885
+ &:active {
886
+ background-color: $color-tabs_tab_button-bg-active;
887
+ }
888
+ }
889
+
890
+ &.#{$module}-tab-active {
891
+
892
+ &,
893
+ &:hover {
894
+ color: $color-tabs_tab_button_selected-text-default;
895
+ border: none;
896
+ background-color: $color-tabs_tab_button_selected-bg-default;
897
+ }
898
+ }
899
+ }
560
900
  }
561
901
 
562
902
  @import "./rtl.scss";