avatar-group.wxss 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. .t-float-left {
  2. float: left;
  3. }
  4. .t-float-right {
  5. float: right;
  6. }
  7. @keyframes tdesign-fade-out {
  8. from {
  9. opacity: 1;
  10. }
  11. to {
  12. opacity: 0;
  13. }
  14. }
  15. .hotspot-expanded.relative {
  16. position: relative;
  17. }
  18. .hotspot-expanded::after {
  19. content: '';
  20. display: block;
  21. position: absolute;
  22. left: 0;
  23. top: 0;
  24. right: 0;
  25. bottom: 0;
  26. transform: scale(1.5);
  27. }
  28. .t-avatar-group {
  29. display: inline-flex;
  30. flex-wrap: wrap;
  31. align-items: center;
  32. }
  33. .t-avatar-group-offset-left .t-avatar__wrapper,
  34. .t-avatar-group-offset-right .t-avatar__wrapper {
  35. padding: var(--td-avatar-group-line-spacing, 4rpx) 0;
  36. }
  37. .t-avatar-group-offset-left-small,
  38. .t-avatar-group-offset-right-small {
  39. --td-avatar-margin-left: var(--td-avatar-group-margin-left-small, -16rpx);
  40. }
  41. .t-avatar-group-offset-left-medium,
  42. .t-avatar-group-offset-right-medium {
  43. --td-avatar-margin-left: var(--td-avatar-group-margin-left-medium, -16rpx);
  44. }
  45. .t-avatar-group-offset-left-large,
  46. .t-avatar-group-offset-right-large {
  47. --td-avatar-margin-left: var(--td-avatar-group-margin-left-large, -16rpx);
  48. }
  49. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(1) {
  50. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 1);
  51. }
  52. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(2) {
  53. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 2);
  54. }
  55. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(3) {
  56. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 3);
  57. }
  58. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(4) {
  59. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 4);
  60. }
  61. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(5) {
  62. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 5);
  63. }
  64. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(6) {
  65. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 6);
  66. }
  67. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(7) {
  68. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 7);
  69. }
  70. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(8) {
  71. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 8);
  72. }
  73. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(9) {
  74. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 9);
  75. }
  76. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(10) {
  77. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 10);
  78. }
  79. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(11) {
  80. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 11);
  81. }
  82. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(12) {
  83. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 12);
  84. }
  85. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(13) {
  86. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 13);
  87. }
  88. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(14) {
  89. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 14);
  90. }
  91. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(15) {
  92. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 15);
  93. }
  94. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(16) {
  95. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 16);
  96. }
  97. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(17) {
  98. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 17);
  99. }
  100. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(18) {
  101. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 18);
  102. }
  103. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(19) {
  104. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 19);
  105. }
  106. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(20) {
  107. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 20);
  108. }
  109. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(21) {
  110. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 21);
  111. }
  112. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(22) {
  113. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 22);
  114. }
  115. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(23) {
  116. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 23);
  117. }
  118. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(24) {
  119. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 24);
  120. }
  121. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(25) {
  122. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 25);
  123. }
  124. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(26) {
  125. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 26);
  126. }
  127. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(27) {
  128. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 27);
  129. }
  130. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(28) {
  131. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 28);
  132. }
  133. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(29) {
  134. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 29);
  135. }
  136. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(30) {
  137. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 30);
  138. }
  139. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(31) {
  140. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 31);
  141. }
  142. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(32) {
  143. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 32);
  144. }
  145. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(33) {
  146. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 33);
  147. }
  148. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(34) {
  149. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 34);
  150. }
  151. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(35) {
  152. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 35);
  153. }
  154. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(36) {
  155. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 36);
  156. }
  157. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(37) {
  158. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 37);
  159. }
  160. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(38) {
  161. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 38);
  162. }
  163. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(39) {
  164. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 39);
  165. }
  166. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(40) {
  167. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 40);
  168. }
  169. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(41) {
  170. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 41);
  171. }
  172. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(42) {
  173. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 42);
  174. }
  175. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(43) {
  176. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 43);
  177. }
  178. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(44) {
  179. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 44);
  180. }
  181. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(45) {
  182. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 45);
  183. }
  184. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(46) {
  185. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 46);
  186. }
  187. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(47) {
  188. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 47);
  189. }
  190. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(48) {
  191. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 48);
  192. }
  193. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(49) {
  194. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 49);
  195. }
  196. .t-avatar-group-offset-left .t-avatar__wrapper:nth-child(50) {
  197. z-index: calc(var(--td-avatar-group-init-z-index, 50) - 50);
  198. }
  199. .t-avatar-group__collapse--slot,
  200. .t-avatar-group__collapse--default {
  201. z-index: 0;
  202. font-weight: 600;
  203. }
  204. .t-avatar-group__collapse--slot {
  205. float: left;
  206. }
  207. .t-avatar-group__collapse--slot:not(:empty) + .t-avatar-group__collapse--default {
  208. display: none;
  209. float: left;
  210. }
  211. .t-avatar-group__collapse--slot:empty + .t-avatar-group__collapse--default {
  212. display: block;
  213. float: left;
  214. }