@aifuxi/semi-theme-default 0.1.0-alpha.4 → 1.0.0-next.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/dist/dropdown.css CHANGED
@@ -749,6 +749,221 @@ body, :host {
749
749
  min-width: max-content;
750
750
  }
751
751
 
752
+ @keyframes semi-tooltip-zoomIn {
753
+ from {
754
+ opacity: 0;
755
+ transform: scale(0.8, 0.8);
756
+ }
757
+ 50% {
758
+ opacity: 1;
759
+ }
760
+ }
761
+ @keyframes semi-tooltip-bounceIn {
762
+ from {
763
+ opacity: 0;
764
+ transform: scale(0.6, 0.6);
765
+ }
766
+ 70% {
767
+ opacity: 1;
768
+ transform: scale(1.01, 1.01);
769
+ }
770
+ to {
771
+ opacity: 1;
772
+ transform: scale(1, 1);
773
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
774
+ }
775
+ }
776
+ @keyframes semi-tooltip-zoomOut {
777
+ from {
778
+ opacity: 1;
779
+ }
780
+ 60% {
781
+ opacity: 0;
782
+ transform: scale(0.8, 0.8);
783
+ }
784
+ to {
785
+ opacity: 0;
786
+ }
787
+ }
788
+ .semi-tooltip-wrapper {
789
+ position: relative;
790
+ background-color: rgba(var(--semi-grey-7), 1);
791
+ backdrop-filter: none;
792
+ color: var(--semi-color-bg-0);
793
+ border-radius: var(--semi-border-radius-medium);
794
+ padding-top: 8px;
795
+ padding-right: 12px;
796
+ padding-bottom: 8px;
797
+ padding-left: 12px;
798
+ font-size: 14px;
799
+ left: 0;
800
+ top: 0;
801
+ word-wrap: break-word;
802
+ overflow-wrap: break-word;
803
+ font-size: 14px;
804
+ line-height: 20px;
805
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
806
+ opacity: 0;
807
+ max-width: 240px;
808
+ }
809
+ .semi-tooltip-wrapper-show {
810
+ opacity: 1;
811
+ }
812
+ .semi-tooltip-content {
813
+ min-width: 0;
814
+ }
815
+ .semi-tooltip-trigger {
816
+ display: inline-block;
817
+ width: auto;
818
+ height: auto;
819
+ }
820
+ .semi-tooltip-with-arrow {
821
+ display: flex;
822
+ align-items: center;
823
+ justify-content: center;
824
+ box-sizing: border-box;
825
+ }
826
+ .semi-tooltip-animation-show {
827
+ animation: semi-tooltip-zoomIn 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
828
+ animation-fill-mode: forwards;
829
+ }
830
+ .semi-tooltip-animation-hide {
831
+ animation: semi-tooltip-zoomOut 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
832
+ animation-fill-mode: forwards;
833
+ }
834
+
835
+ .semi-tooltip-wrapper .semi-tooltip-icon-arrow {
836
+ height: 7px;
837
+ width: 24px;
838
+ position: absolute;
839
+ color: rgba(var(--semi-grey-7), 1);
840
+ }
841
+ .semi-tooltip-wrapper[x-placement=top] .semi-tooltip-icon-arrow {
842
+ left: var(--semi-tooltip-arrow-offset-x, 50%);
843
+ transform: translateX(-50%);
844
+ bottom: -6px;
845
+ }
846
+ .semi-tooltip-wrapper[x-placement=top].semi-tooltip-with-arrow,
847
+ .semi-tooltip-wrapper[x-placement=top] .semi-tooltip-with-arrow {
848
+ min-width: 36px;
849
+ }
850
+ .semi-tooltip-wrapper[x-placement=topLeft] .semi-tooltip-icon-arrow {
851
+ bottom: -6px;
852
+ left: 6px;
853
+ }
854
+ .semi-tooltip-wrapper[x-placement=topLeft].semi-tooltip-with-arrow,
855
+ .semi-tooltip-wrapper[x-placement=topLeft] .semi-tooltip-with-arrow {
856
+ min-width: 36px;
857
+ }
858
+ .semi-tooltip-wrapper[x-placement=topRight] .semi-tooltip-icon-arrow {
859
+ bottom: -6px;
860
+ right: 6px;
861
+ }
862
+ .semi-tooltip-wrapper[x-placement=topRight].semi-tooltip-with-arrow,
863
+ .semi-tooltip-wrapper[x-placement=topRight] .semi-tooltip-with-arrow {
864
+ min-width: 36px;
865
+ }
866
+ .semi-tooltip-wrapper[x-placement=leftTop] .semi-tooltip-icon-arrow {
867
+ width: 7px;
868
+ height: 24px;
869
+ right: -6px;
870
+ top: 5px;
871
+ }
872
+ .semi-tooltip-wrapper[x-placement=leftTop].semi-tooltip-with-arrow,
873
+ .semi-tooltip-wrapper[x-placement=leftTop] .semi-tooltip-with-arrow {
874
+ min-height: 34px;
875
+ }
876
+ .semi-tooltip-wrapper[x-placement=left] .semi-tooltip-icon-arrow {
877
+ width: 7px;
878
+ height: 24px;
879
+ right: -6px;
880
+ top: var(--semi-tooltip-arrow-offset-y, 50%);
881
+ transform: translateY(-50%);
882
+ }
883
+ .semi-tooltip-wrapper[x-placement=left].semi-tooltip-with-arrow,
884
+ .semi-tooltip-wrapper[x-placement=left] .semi-tooltip-with-arrow {
885
+ min-height: 34px;
886
+ }
887
+ .semi-tooltip-wrapper[x-placement=leftBottom] .semi-tooltip-icon-arrow {
888
+ width: 7px;
889
+ height: 24px;
890
+ right: -6px;
891
+ bottom: 5px;
892
+ }
893
+ .semi-tooltip-wrapper[x-placement=leftBottom].semi-tooltip-with-arrow,
894
+ .semi-tooltip-wrapper[x-placement=leftBottom] .semi-tooltip-with-arrow {
895
+ min-height: 34px;
896
+ }
897
+ .semi-tooltip-wrapper[x-placement=rightTop] .semi-tooltip-icon-arrow {
898
+ width: 7px;
899
+ height: 24px;
900
+ left: -6px;
901
+ top: 5px;
902
+ transform: rotate(180deg);
903
+ }
904
+ .semi-tooltip-wrapper[x-placement=rightTop].semi-tooltip-with-arrow,
905
+ .semi-tooltip-wrapper[x-placement=rightTop] .semi-tooltip-with-arrow {
906
+ min-height: 34px;
907
+ }
908
+ .semi-tooltip-wrapper[x-placement=right] .semi-tooltip-icon-arrow {
909
+ width: 7px;
910
+ height: 24px;
911
+ left: -6px;
912
+ top: var(--semi-tooltip-arrow-offset-y, 50%);
913
+ transform: translateY(-50%) rotate(180deg);
914
+ }
915
+ .semi-tooltip-wrapper[x-placement=right].semi-tooltip-with-arrow,
916
+ .semi-tooltip-wrapper[x-placement=right] .semi-tooltip-with-arrow {
917
+ min-height: 34px;
918
+ }
919
+ .semi-tooltip-wrapper[x-placement=rightBottom] .semi-tooltip-icon-arrow {
920
+ width: 7px;
921
+ height: 24px;
922
+ left: -6px;
923
+ bottom: 5px;
924
+ transform: rotate(180deg);
925
+ }
926
+ .semi-tooltip-wrapper[x-placement=rightBottom].semi-tooltip-with-arrow,
927
+ .semi-tooltip-wrapper[x-placement=rightBottom] .semi-tooltip-with-arrow {
928
+ min-height: 34px;
929
+ }
930
+ .semi-tooltip-wrapper[x-placement=bottomLeft] .semi-tooltip-icon-arrow {
931
+ top: -6px;
932
+ left: 6px;
933
+ transform: rotate(180deg);
934
+ }
935
+ .semi-tooltip-wrapper[x-placement=bottomLeft].semi-tooltip-with-arrow,
936
+ .semi-tooltip-wrapper[x-placement=bottomLeft] .semi-tooltip-with-arrow {
937
+ min-width: 36px;
938
+ }
939
+ .semi-tooltip-wrapper[x-placement=bottom] .semi-tooltip-icon-arrow {
940
+ top: -6px;
941
+ left: var(--semi-tooltip-arrow-offset-x, 50%);
942
+ transform: translateX(-50%) rotate(180deg);
943
+ }
944
+ .semi-tooltip-wrapper[x-placement=bottom].semi-tooltip-with-arrow,
945
+ .semi-tooltip-wrapper[x-placement=bottom] .semi-tooltip-with-arrow {
946
+ min-width: 36px;
947
+ }
948
+ .semi-tooltip-wrapper[x-placement=bottomRight] .semi-tooltip-icon-arrow {
949
+ right: 6px;
950
+ top: -6px;
951
+ transform: rotate(180deg);
952
+ }
953
+ .semi-tooltip-wrapper[x-placement=bottomRight].semi-tooltip-with-arrow,
954
+ .semi-tooltip-wrapper[x-placement=bottomRight] .semi-tooltip-with-arrow {
955
+ min-width: 36px;
956
+ }
957
+
958
+ .semi-rtl .semi-tooltip-wrapper,
959
+ .semi-portal-rtl .semi-tooltip-wrapper {
960
+ direction: rtl;
961
+ padding-right: 12px;
962
+ padding-left: 12px;
963
+ left: auto;
964
+ right: 0;
965
+ }
966
+
752
967
  .semi-dropdown {
753
968
  font-size: 14px;
754
969
  line-height: 20px;