button.wxss 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541
  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-button--size-extra-small {
  29. font-size: var(--td-button-extra-small-font-size, var(--td-font-size-base, 28rpx));
  30. padding-left: var(--td-button-extra-small-padding-horizontal, 16rpx);
  31. padding-right: var(--td-button-extra-small-padding-horizontal, 16rpx);
  32. height: var(--td-button-extra-small-height, 56rpx);
  33. line-height: var(--td-button-extra-small-height, 56rpx);
  34. }
  35. .t-button--size-extra-small .t-button__icon {
  36. font-size: var(--td-button-extra-small-icon-font-size, 36rpx);
  37. }
  38. .t-button--size-small {
  39. font-size: var(--td-button-small-font-size, var(--td-font-size-base, 28rpx));
  40. padding-left: var(--td-button-small-padding-horizontal, 24rpx);
  41. padding-right: var(--td-button-small-padding-horizontal, 24rpx);
  42. height: var(--td-button-small-height, 64rpx);
  43. line-height: var(--td-button-small-height, 64rpx);
  44. }
  45. .t-button--size-small .t-button__icon {
  46. font-size: var(--td-button-small-icon-font-size, 36rpx);
  47. }
  48. .t-button--size-medium {
  49. font-size: var(--td-button-medium-font-size, var(--td-font-size-m, 32rpx));
  50. padding-left: var(--td-button-medium-padding-horizontal, 32rpx);
  51. padding-right: var(--td-button-medium-padding-horizontal, 32rpx);
  52. height: var(--td-button-medium-height, 80rpx);
  53. line-height: var(--td-button-medium-height, 80rpx);
  54. }
  55. .t-button--size-medium .t-button__icon {
  56. font-size: var(--td-button-medium-icon-font-size, 40rpx);
  57. }
  58. .t-button--size-large {
  59. font-size: var(--td-button-large-font-size, var(--td-font-size-m, 32rpx));
  60. padding-left: var(--td-button-large-padding-horizontal, 40rpx);
  61. padding-right: var(--td-button-large-padding-horizontal, 40rpx);
  62. height: var(--td-button-large-height, 96rpx);
  63. line-height: var(--td-button-large-height, 96rpx);
  64. }
  65. .t-button--size-large .t-button__icon {
  66. font-size: var(--td-button-large-icon-font-size, 48rpx);
  67. }
  68. .t-button--default {
  69. color: var(--td-button-default-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
  70. background-color: var(--td-button-default-bg-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
  71. border-color: var(--td-button-default-border-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
  72. }
  73. .t-button--default::after {
  74. border-width: var(--td-button-border-width, 4rpx);
  75. border-color: var(--td-button-default-border-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
  76. }
  77. .t-button--default.t-button--hover {
  78. z-index: 0;
  79. }
  80. .t-button--default.t-button--hover,
  81. .t-button--default.t-button--hover::after {
  82. background-color: var(--td-button-default-active-bg-color, var(--td-bg-color-component-active, var(--td-gray-color-6, #a6a6a6)));
  83. border-color: var(--td-button-default-active-border-color, var(--td-bg-color-component-active, var(--td-gray-color-6, #a6a6a6)));
  84. }
  85. .t-button--default.t-button--disabled {
  86. color: var(--td-button-default-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
  87. background-color: var(--td-button-default-disabled-bg, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee)));
  88. }
  89. .t-button--default.t-button--disabled,
  90. .t-button--default.t-button--disabled::after {
  91. border-color: var(--td-button-default-disabled-border-color, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee)));
  92. }
  93. .t-button--primary {
  94. color: var(--td-button-primary-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
  95. background-color: var(--td-button-primary-bg-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  96. border-color: var(--td-button-primary-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  97. }
  98. .t-button--primary::after {
  99. border-width: var(--td-button-border-width, 4rpx);
  100. border-color: var(--td-button-primary-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  101. }
  102. .t-button--primary.t-button--hover {
  103. z-index: 0;
  104. }
  105. .t-button--primary.t-button--hover,
  106. .t-button--primary.t-button--hover::after {
  107. background-color: var(--td-button-primary-active-bg-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
  108. border-color: var(--td-button-primary-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
  109. }
  110. .t-button--primary.t-button--disabled {
  111. color: var(--td-button-primary-disabled-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
  112. background-color: var(--td-button-primary-disabled-bg, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  113. }
  114. .t-button--primary.t-button--disabled,
  115. .t-button--primary.t-button--disabled::after {
  116. border-color: var(--td-button-primary-disabled-border-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  117. }
  118. .t-button--light {
  119. color: var(--td-button-light-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  120. background-color: var(--td-button-light-bg-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
  121. border-color: var(--td-button-light-border-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
  122. }
  123. .t-button--light::after {
  124. border-width: var(--td-button-border-width, 4rpx);
  125. border-color: var(--td-button-light-border-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
  126. }
  127. .t-button--light.t-button--hover {
  128. z-index: 0;
  129. }
  130. .t-button--light.t-button--hover,
  131. .t-button--light.t-button--hover::after {
  132. background-color: var(--td-button-light-active-bg-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
  133. border-color: var(--td-button-light-active-border-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
  134. }
  135. .t-button--light.t-button--disabled {
  136. color: var(--td-button-light-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  137. background-color: var(--td-button-light-disabled-bg, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
  138. }
  139. .t-button--light.t-button--disabled,
  140. .t-button--light.t-button--disabled::after {
  141. border-color: var(--td-button-light-disabled-border-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
  142. }
  143. .t-button--danger {
  144. color: var(--td-button-danger-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
  145. background-color: var(--td-button-danger-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
  146. border-color: var(--td-button-danger-border-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
  147. }
  148. .t-button--danger::after {
  149. border-width: var(--td-button-border-width, 4rpx);
  150. border-color: var(--td-button-danger-border-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
  151. }
  152. .t-button--danger.t-button--hover {
  153. z-index: 0;
  154. }
  155. .t-button--danger.t-button--hover,
  156. .t-button--danger.t-button--hover::after {
  157. background-color: var(--td-button-danger-active-bg-color, var(--td-error-color-active, var(--td-error-color-7, #ad352f)));
  158. border-color: var(--td-button-danger-active-border-color, var(--td-error-color-active, var(--td-error-color-7, #ad352f)));
  159. }
  160. .t-button--danger.t-button--disabled {
  161. color: var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff));
  162. background-color: var(--td-button-danger-disabled-bg, var(--td-error-color-3, #ffb9b0));
  163. }
  164. .t-button--danger.t-button--disabled,
  165. .t-button--danger.t-button--disabled::after {
  166. border-color: var(--td-button-danger-disabled-border-color, var(--td-error-color-3, #ffb9b0));
  167. }
  168. .t-button {
  169. display: inline-flex;
  170. align-items: center;
  171. justify-content: center;
  172. position: relative;
  173. white-space: nowrap;
  174. text-align: center;
  175. background-image: none;
  176. transition: all 0.3s;
  177. touch-action: manipulation;
  178. border-radius: var(--td-button-border-radius, var(--td-radius-default, 12rpx));
  179. outline: none;
  180. font-family: PingFang SC, Microsoft YaHei, Arial Regular;
  181. font-weight: var(--td-button-font-weight, 600);
  182. vertical-align: top;
  183. box-sizing: border-box;
  184. cursor: pointer;
  185. -webkit-tap-highlight-color: transparent;
  186. -webkit-user-select: none;
  187. user-select: none;
  188. /* stylelint-disable-next-line */
  189. -webkit-appearance: none;
  190. }
  191. .t-button::after {
  192. border-radius: calc(var(--td-button-border-radius, var(--td-radius-default, 12rpx)) * 2);
  193. }
  194. .t-button--text {
  195. color: var(--td-button-default-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
  196. background-color: transparent;
  197. }
  198. .t-button--text,
  199. .t-button--text::after {
  200. border: 0;
  201. }
  202. .t-button--text.t-button--hover,
  203. .t-button--text.t-button--hover::after {
  204. background-color: var(--td-button-default-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
  205. }
  206. .t-button--text.t-button--primary {
  207. color: var(--td-button-primary-text-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  208. background-color: transparent;
  209. }
  210. .t-button--text.t-button--primary.t-button--hover,
  211. .t-button--text.t-button--primary.t-button--hover::after {
  212. background-color: var(--td-button-primary-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
  213. }
  214. .t-button--text.t-button--primary.t-button--disabled {
  215. color: var(--td-button-primary-text-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  216. background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
  217. }
  218. .t-button--text.t-button--danger {
  219. color: var(--td-button-danger-text-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
  220. background-color: transparent;
  221. }
  222. .t-button--text.t-button--danger.t-button--hover,
  223. .t-button--text.t-button--danger.t-button--hover::after {
  224. background-color: var(--td-button-danger-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
  225. }
  226. .t-button--text.t-button--danger.t-button--disabled {
  227. color: var(--td-button-danger-text-disabled-color, var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff)));
  228. background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
  229. }
  230. .t-button--text.t-button--light {
  231. color: var(--td-button-light-text-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  232. background-color: transparent;
  233. }
  234. .t-button--text.t-button--light.t-button--hover,
  235. .t-button--text.t-button--light.t-button--hover::after {
  236. background-color: var(--td-button-light-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
  237. }
  238. .t-button--text.t-button--disabled {
  239. color: var(--td-button-default-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
  240. }
  241. .t-button--outline {
  242. color: var(--td-button-default-outline-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
  243. background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
  244. }
  245. .t-button--outline,
  246. .t-button--outline::after {
  247. border-color: var(--td-button-default-outline-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
  248. }
  249. .t-button--outline.t-button--hover,
  250. .t-button--outline.t-button--hover::after {
  251. background-color: var(--td-button-default-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
  252. border-color: var(--td-button-default-outline-active-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
  253. }
  254. .t-button--outline.t-button--disabled {
  255. color: var(--td-button-default-outline-disabled-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
  256. }
  257. .t-button--outline.t-button--disabled,
  258. .t-button--outline.t-button--disabled::after {
  259. border-color: var(--td-button-default-outline-disabled-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
  260. }
  261. .t-button--outline.t-button--primary {
  262. color: var(--td-button-primary-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  263. }
  264. .t-button--outline.t-button--primary,
  265. .t-button--outline.t-button--primary::after {
  266. border-color: var(--td-button-primary-outline-border-color, var(--td-button-primary-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))));
  267. }
  268. .t-button--outline.t-button--primary.t-button--hover {
  269. color: var(--td-button-primary-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
  270. }
  271. .t-button--outline.t-button--primary.t-button--hover::after {
  272. background-color: var(--td-button-primary-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
  273. border-color: var(--td-button-primary-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
  274. }
  275. .t-button--outline.t-button--primary.t-button--disabled {
  276. background-color: transparent;
  277. color: var(--td-button-primary-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  278. }
  279. .t-button--outline.t-button--primary.t-button--disabled,
  280. .t-button--outline.t-button--primary.t-button--disabled::after {
  281. border-color: var(--td-button-primary-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  282. }
  283. .t-button--outline.t-button--danger {
  284. color: var(--td-button-danger-outline-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
  285. }
  286. .t-button--outline.t-button--danger,
  287. .t-button--outline.t-button--danger::after {
  288. border-color: var(--td-button-danger-outline-border-color, var(--td-button-danger-outline-color, var(--td-error-color, var(--td-error-color-6, #d54941))));
  289. }
  290. .t-button--outline.t-button--danger.t-button--hover {
  291. color: var(--td-button-danger-outline-active-border-color, var(--td-error-color-active, var(--td-error-color-7, #ad352f)));
  292. }
  293. .t-button--outline.t-button--danger.t-button--hover::after {
  294. background-color: var(--td-button-danger-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
  295. border-color: var(--td-button-danger-outline-active-border-color, var(--td-error-color-active, var(--td-error-color-7, #ad352f)));
  296. }
  297. .t-button--outline.t-button--danger.t-button--disabled {
  298. background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
  299. color: var(--td-button-danger-outline-disabled-color, var(--td-error-color-3, #ffb9b0));
  300. }
  301. .t-button--outline.t-button--danger.t-button--disabled,
  302. .t-button--outline.t-button--danger.t-button--disabled::after {
  303. border-color: var(--td-button-danger-outline-disabled-color, var(--td-error-color-3, #ffb9b0));
  304. }
  305. .t-button--outline.t-button--light {
  306. color: var(--td-button-light-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  307. background-color: var(--td-button-light-outline-bg-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
  308. }
  309. .t-button--outline.t-button--light,
  310. .t-button--outline.t-button--light::after {
  311. border-color: var(--td-button-light-outline-border-color, var(--td-button-light-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))));
  312. }
  313. .t-button--outline.t-button--light.t-button--hover {
  314. color: var(--td-button-light-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
  315. }
  316. .t-button--outline.t-button--light.t-button--hover,
  317. .t-button--outline.t-button--light.t-button--hover::after {
  318. background-color: var(--td-button-light-outline-active-bg-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
  319. border-color: var(--td-button-light-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
  320. }
  321. .t-button--outline.t-button--light.t-button--disabled {
  322. background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
  323. color: var(--td-button-light-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  324. }
  325. .t-button--outline.t-button--light.t-button--disabled,
  326. .t-button--outline.t-button--light.t-button--disabled::after {
  327. border-color: var(--td-button-light-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  328. }
  329. .t-button--dashed {
  330. background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
  331. border-style: dashed;
  332. border-width: 2rpx;
  333. }
  334. .t-button--dashed::after {
  335. border: 0;
  336. }
  337. .t-button--dashed.t-button--hover,
  338. .t-button--dashed.t-button--hover::after {
  339. background-color: var(--td-button-default-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
  340. border-color: var(--td-button-default-outline-active-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
  341. }
  342. .t-button--dashed.t-button--primary {
  343. color: var(--td-button-primary-dashed-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  344. }
  345. .t-button--dashed.t-button--primary,
  346. .t-button--dashed.t-button--primary::after {
  347. border-color: var(--td-button-primary-dashed-border-color, var(--td-button-primary-dashed-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))));
  348. }
  349. .t-button--dashed.t-button--primary.t-button--disabled {
  350. background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
  351. color: var(--td-button-primary-dashed-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  352. }
  353. .t-button--dashed.t-button--primary.t-button--disabled,
  354. .t-button--dashed.t-button--primary.t-button--disabled::after {
  355. border-color: var(--td-button-primary-dashed-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  356. }
  357. .t-button--dashed.t-button--danger {
  358. color: var(--td-button-danger-dashed-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
  359. }
  360. .t-button--dashed.t-button--danger,
  361. .t-button--dashed.t-button--danger::after {
  362. border-color: var(--td-button-danger-dashed-border-color, var(--td-button-danger-dashed-color, var(--td-error-color, var(--td-error-color-6, #d54941))));
  363. }
  364. .t-button--dashed.t-button--danger.t-button--disabled {
  365. background-color: transparent;
  366. color: var(--td-button-danger-dashed-disabled-color, var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff)));
  367. }
  368. .t-button--dashed.t-button--danger.t-button--disabled::after {
  369. border-color: var(--td-button-danger-dashed-disabled-color, var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff)));
  370. }
  371. .t-button--ghost {
  372. background-color: transparent;
  373. color: var(--td-button-ghost-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
  374. }
  375. .t-button--ghost,
  376. .t-button--ghost::after {
  377. border-color: var(--td-button-ghost-border-color, var(--td-button-ghost-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff))));
  378. }
  379. .t-button--ghost.t-button--default.t-button--hover {
  380. color: var(--td-button-ghost-hover-color, var(--td-font-white-2, rgba(255, 255, 255, 0.55)));
  381. }
  382. .t-button--ghost.t-button--default.t-button--hover,
  383. .t-button--ghost.t-button--default.t-button--hover::after {
  384. background-color: transparent;
  385. border-color: var(--td-button-ghost-hover-color, var(--td-font-white-2, rgba(255, 255, 255, 0.55)));
  386. }
  387. .t-button--ghost.t-button--primary {
  388. color: var(--td-button-ghost-primary-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  389. }
  390. .t-button--ghost.t-button--primary,
  391. .t-button--ghost.t-button--primary::after {
  392. border-color: var(--td-button-ghost-primary-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  393. }
  394. .t-button--ghost.t-button--primary.t-button--hover {
  395. color: var(--td-button-ghost-primary-hover-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
  396. }
  397. .t-button--ghost.t-button--primary.t-button--hover,
  398. .t-button--ghost.t-button--primary.t-button--hover::after {
  399. background-color: transparent;
  400. border-color: var(--td-button-ghost-primary-hover-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
  401. }
  402. .t-button--ghost.t-button--primary.t-button--text.t-button--hover,
  403. .t-button--ghost.t-button--primary.t-button--text.t-button--hover::after {
  404. background-color: var(--td-gray-color-10, #4b4b4b);
  405. }
  406. .t-button--ghost.t-button--primary.t-button--disabled {
  407. background-color: transparent;
  408. color: var(--td-button-ghost-disabled-color, var(--td-font-white-4, rgba(255, 255, 255, 0.22)));
  409. }
  410. .t-button--ghost.t-button--primary.t-button--disabled,
  411. .t-button--ghost.t-button--primary.t-button--disabled::after {
  412. border-color: var(--td-button-ghost-disabled-color, var(--td-font-white-4, rgba(255, 255, 255, 0.22)));
  413. }
  414. .t-button--ghost.t-button--danger {
  415. color: var(--td-button-ghost-danger-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
  416. }
  417. .t-button--ghost.t-button--danger,
  418. .t-button--ghost.t-button--danger::after {
  419. border-color: var(--td-button-ghost-danger-border-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
  420. }
  421. .t-button--ghost.t-button--danger.t-button--hover {
  422. color: var(--td-button-ghost-danger-hover-color, var(--td-error-color-active, var(--td-error-color-7, #ad352f)));
  423. }
  424. .t-button--ghost.t-button--danger.t-button--hover,
  425. .t-button--ghost.t-button--danger.t-button--hover::after {
  426. background-color: transparent;
  427. border-color: var(--td-button-ghost-danger-hover-color, var(--td-error-color-active, var(--td-error-color-7, #ad352f)));
  428. }
  429. .t-button--ghost.t-button--danger.t-button--text.t-button--hover,
  430. .t-button--ghost.t-button--danger.t-button--text.t-button--hover::after {
  431. background-color: var(--td-gray-color-10, #4b4b4b);
  432. }
  433. .t-button--ghost.t-button--danger.t-button--disabled {
  434. background-color: transparent;
  435. color: var(--td-button-ghost-disabled-color, var(--td-font-white-4, rgba(255, 255, 255, 0.22)));
  436. }
  437. .t-button--ghost.t-button--danger.t-button--disabled,
  438. .t-button--ghost.t-button--danger.t-button--disabled::after {
  439. border-color: var(--td-button-ghost-disabled-color, var(--td-font-white-4, rgba(255, 255, 255, 0.22)));
  440. }
  441. .t-button--ghost.t-button--default.t-button--text.t-button--hover,
  442. .t-button--ghost.t-button--default.t-button--text.t-button--hover::after {
  443. background-color: var(--td-gray-color-10, #4b4b4b);
  444. }
  445. .t-button--ghost.t-button--default.t-button--disabled {
  446. background-color: transparent;
  447. color: var(--td-button-ghost-disabled-color, var(--td-font-white-4, rgba(255, 255, 255, 0.22)));
  448. }
  449. .t-button--ghost.t-button--default.t-button--disabled,
  450. .t-button--ghost.t-button--default.t-button--disabled::after {
  451. border-color: var(--td-button-ghost-disabled-color, var(--td-font-white-4, rgba(255, 255, 255, 0.22)));
  452. }
  453. .t-button__loading + .t-button__content:not(:empty),
  454. .t-button__icon + .t-button__content:not(:empty) {
  455. margin-left: 8rpx;
  456. }
  457. .t-button__icon {
  458. border-radius: var(--td-button-icon-border-radius, 8rpx);
  459. }
  460. .t-button--round.t-button--size-large {
  461. border-radius: calc(var(--td-button-large-height, 96rpx) / 2);
  462. }
  463. .t-button--round.t-button--size-large::after {
  464. border-radius: var(--td-button-large-height, 96rpx);
  465. }
  466. .t-button--round.t-button--size-medium {
  467. border-radius: calc(var(--td-button-medium-height, 80rpx) / 2);
  468. }
  469. .t-button--round.t-button--size-medium::after {
  470. border-radius: var(--td-button-medium-height, 80rpx);
  471. }
  472. .t-button--round.t-button--size-small {
  473. border-radius: calc(var(--td-button-small-height, 64rpx) / 2);
  474. }
  475. .t-button--round.t-button--size-small::after {
  476. border-radius: var(--td-button-small-height, 64rpx);
  477. }
  478. .t-button--round.t-button--size-extra-small {
  479. border-radius: calc(var(--td-button-extra-small-height, 56rpx) / 2);
  480. }
  481. .t-button--round.t-button--size-extra-small::after {
  482. border-radius: var(--td-button-extra-small-height, 56rpx);
  483. }
  484. .t-button--square {
  485. padding: 0;
  486. }
  487. .t-button--square.t-button--size-large {
  488. width: var(--td-button-large-height, 96rpx);
  489. }
  490. .t-button--square.t-button--size-medium {
  491. width: var(--td-button-medium-height, 80rpx);
  492. }
  493. .t-button--square.t-button--size-small {
  494. width: var(--td-button-small-height, 64rpx);
  495. }
  496. .t-button--square.t-button--size-extra-small {
  497. width: var(--td-button-extra-small-height, 56rpx);
  498. }
  499. .t-button--circle {
  500. padding: 0;
  501. border-radius: 50%;
  502. }
  503. .t-button--circle.t-button--size-large {
  504. width: var(--td-button-large-height, 96rpx);
  505. }
  506. .t-button--circle.t-button--size-large::after {
  507. border-radius: 50%;
  508. }
  509. .t-button--circle.t-button--size-medium {
  510. width: var(--td-button-medium-height, 80rpx);
  511. }
  512. .t-button--circle.t-button--size-medium::after {
  513. border-radius: 50%;
  514. }
  515. .t-button--circle.t-button--size-small {
  516. width: var(--td-button-small-height, 64rpx);
  517. }
  518. .t-button--circle.t-button--size-small::after {
  519. border-radius: 50%;
  520. }
  521. .t-button--circle.t-button--size-extra-small {
  522. width: var(--td-button-extra-small-height, 56rpx);
  523. }
  524. .t-button--circle.t-button--size-extra-small::after {
  525. border-radius: 50%;
  526. }
  527. .t-button--block {
  528. display: flex;
  529. width: 100%;
  530. }
  531. .t-button--disabled {
  532. cursor: not-allowed;
  533. }
  534. .t-button__loading--wrapper {
  535. display: flex;
  536. align-items: center;
  537. justify-content: center;
  538. }
  539. .t-button.t-button--hover::after {
  540. z-index: -1;
  541. }