tabs.wxss 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  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-tabs {
  29. position: relative;
  30. font-size: var(--tab-font-size, 28rpx);
  31. background: var(--td-tab-nav-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
  32. }
  33. .t-tabs__wrapper {
  34. display: flex;
  35. overflow: hidden;
  36. background: var(--td-tab-nav-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
  37. }
  38. .t-tabs__wrapper--card {
  39. background: var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3));
  40. --td-tab-border-color: transparent;
  41. }
  42. .t-tabs__item {
  43. position: relative;
  44. display: flex;
  45. flex: none;
  46. align-items: center;
  47. justify-content: center;
  48. font-weight: 400;
  49. color: var(--td-tab-item-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
  50. padding: 0 32rpx;
  51. box-sizing: border-box;
  52. white-space: nowrap;
  53. overflow: hidden;
  54. }
  55. .t-tabs__item--active {
  56. font-weight: 600;
  57. color: var(--td-tab-item-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  58. }
  59. .t-tabs__item--disabled {
  60. color: var(--td-tab-item-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
  61. }
  62. .t-tabs__item--evenly {
  63. flex: 1;
  64. }
  65. .t-tabs__item--top,
  66. .t-tabs__item--bottom {
  67. height: var(--td-tab-item-height, 96rpx);
  68. }
  69. .t-tabs__item-inner {
  70. display: flex;
  71. align-items: center;
  72. justify-content: center;
  73. }
  74. .t-tabs__item-inner--tag {
  75. width: 100%;
  76. text-align: center;
  77. padding: 0 32rpx;
  78. line-height: var(--td-tab-item-tag-height, 64rpx);
  79. border-radius: calc(var(--td-tab-item-tag-height, 64rpx) / 2);
  80. background-color: var(--td-tab-item-tag-bg, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
  81. }
  82. .t-tabs__item-inner--active.t-tabs__item-inner--tag {
  83. background-color: var(--td-tab-item-tag-active-bg, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
  84. }
  85. .t-tabs__item--tag:not(.t-tabs__item--evenly) {
  86. padding: 0 8rpx;
  87. }
  88. .t-tabs__item--tag:not(.t-tabs__item--evenly):first-child {
  89. margin-left: 16rpx;
  90. }
  91. .t-tabs__item--tag:not(.t-tabs__item--evenly):last-child {
  92. padding-right: 24rpx;
  93. }
  94. .t-tabs__item--tag {
  95. padding: 0 16rpx;
  96. }
  97. .t-tabs__item--card.t-tabs__item--active {
  98. background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
  99. border-radius: 18rpx 18rpx 0 0;
  100. }
  101. .t-tabs__item--card.t-tabs__item--active:first-child {
  102. border-top-left-radius: 0;
  103. }
  104. .t-tabs__item--card.t-tabs__item--active:last-child {
  105. border-top-right-radius: 0;
  106. }
  107. .t-tabs__item--card.t-tabs__item--pre {
  108. border-bottom-right-radius: 18rpx;
  109. }
  110. .t-tabs__item-prefix,
  111. .t-tabs__item-suffix {
  112. position: absolute;
  113. bottom: 0;
  114. width: 36rpx;
  115. height: 36rpx;
  116. background: #fff;
  117. }
  118. .t-tabs__item-prefix::after,
  119. .t-tabs__item-suffix::after {
  120. content: '';
  121. display: block;
  122. width: 100%;
  123. height: 100%;
  124. background-color: var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3));
  125. }
  126. .t-tabs__item-prefix {
  127. right: 0;
  128. }
  129. .t-tabs__item-prefix::after {
  130. border-bottom-right-radius: 18rpx;
  131. }
  132. .t-tabs__item-suffix {
  133. left: 0;
  134. }
  135. .t-tabs__item-suffix::after {
  136. border-bottom-left-radius: 18rpx;
  137. }
  138. .t-tabs__icon {
  139. font-size: var(--td-tab-icon-size, 36rpx);
  140. margin-right: 4rpx;
  141. }
  142. .t-tabs__content {
  143. overflow: hidden;
  144. }
  145. .t-tabs__nav {
  146. position: relative;
  147. user-select: none;
  148. width: 100%;
  149. display: flex;
  150. flex-wrap: nowrap;
  151. align-items: center;
  152. }
  153. .t-tabs__track {
  154. position: absolute;
  155. font-weight: 600;
  156. z-index: 1;
  157. transition-duration: 0.3s;
  158. background-color: var(--td-tab-track-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  159. }
  160. .t-tabs__track--top,
  161. .t-tabs__track--bottom {
  162. left: 0;
  163. bottom: 1rpx;
  164. width: var(--td-tab-track-width, 32rpx);
  165. height: var(--td-tab-track-thickness, 6rpx);
  166. border-radius: var(--td-tab-track-radius, 8rpx);
  167. }
  168. .t-tabs__scroll::-webkit-scrollbar {
  169. display: none;
  170. }
  171. .t-tabs__scroll--top,
  172. .t-tabs__scroll--bottom {
  173. height: var(--td-tab-item-height, 96rpx);
  174. position: relative;
  175. }
  176. .t-tabs__scroll--top {
  177. position: relative;
  178. }
  179. .t-tabs__scroll--top::after {
  180. content: '';
  181. display: block;
  182. position: absolute;
  183. top: unset;
  184. bottom: 0;
  185. left: unset;
  186. right: unset;
  187. background-color: var(--td-tab-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
  188. }
  189. .t-tabs__scroll--top::after {
  190. height: 1px;
  191. left: 0;
  192. right: 0;
  193. transform: scaleY(0.5);
  194. }
  195. .t-tabs__content-inner {
  196. display: block;
  197. }
  198. .t-tabs--top,
  199. .t-tabs--bottom {
  200. flex-wrap: wrap;
  201. }
  202. .t-tabs--top .t-tabs__content,
  203. .t-tabs--bottom .t-tabs__content {
  204. width: 100%;
  205. }
  206. .t-tabs--top .t-tabs__content--animated .t-tabs__content-inner,
  207. .t-tabs--bottom .t-tabs__content--animated .t-tabs__content-inner {
  208. position: relative;
  209. width: 100%;
  210. height: 100%;
  211. display: flex;
  212. will-change: left;
  213. transition-property: transform;
  214. }
  215. .t-tabs--bottom {
  216. flex-direction: column-reverse;
  217. }