储能智慧云小程序
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

button.wxss 23KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477
  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. border-color: var(--td-button-default-active-border-color, var(--td-bg-color-component-active, var(--td-gray-color-6, #a6a6a6)));
  80. }
  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. border-color: var(--td-button-default-disabled-border-color, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee)));
  89. }
  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-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. border-color: var(--td-button-primary-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
  105. }
  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-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. border-color: var(--td-button-primary-disabled-border-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  114. }
  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. border-color: var(--td-button-light-active-border-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
  130. }
  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. border-color: var(--td-button-light-disabled-border-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
  139. }
  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-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. border-color: var(--td-button-danger-active-border-color, var(--td-error-color-7, #ad352f));
  155. }
  156. .t-button--danger.t-button--hover::after {
  157. background-color: var(--td-button-danger-active-bg-color, var(--td-error-color-7, #ad352f));
  158. border-color: var(--td-button-danger-active-border-color, 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. border-color: var(--td-button-danger-disabled-border-color, var(--td-error-color-3, #ffb9b0));
  164. }
  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: none;
  197. border: 0;
  198. }
  199. .t-button--text::after {
  200. border: 0;
  201. }
  202. .t-button--text.t-button--hover::after {
  203. background-color: var(--td-button-default-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
  204. }
  205. .t-button--text.t-button--primary {
  206. color: var(--td-button-primary-text-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  207. background: none;
  208. }
  209. .t-button--text.t-button--primary.t-button--hover::after {
  210. background-color: var(--td-button-primary-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
  211. }
  212. .t-button--text.t-button--primary.t-button--disabled {
  213. color: var(--td-button-primary-text-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  214. background: none;
  215. }
  216. .t-button--text.t-button--danger {
  217. color: var(--td-button-danger-text-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
  218. background: none;
  219. }
  220. .t-button--text.t-button--danger.t-button--hover::after {
  221. background-color: var(--td-button-danger-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
  222. }
  223. .t-button--text.t-button--danger.t-button--disabled {
  224. color: var(--td-button-danger-text-disabled-color, var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff)));
  225. background: none;
  226. }
  227. .t-button--text.t-button--light {
  228. color: var(--td-button-light-text-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  229. background: none;
  230. }
  231. .t-button--text.t-button--light.t-button--hover::after {
  232. background-color: var(--td-button-light-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
  233. }
  234. .t-button--text.t-button--disabled {
  235. color: var(--td-button-default-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
  236. }
  237. .t-button--ghost {
  238. background-color: transparent;
  239. color: var(--td-button-ghost-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
  240. border-color: var(--td-button-ghost-border-color, var(--td-button-ghost-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff))));
  241. }
  242. .t-button--ghost::after {
  243. border-color: var(--td-button-ghost-border-color, var(--td-button-ghost-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff))));
  244. }
  245. .t-button--ghost.t-button--hover::after {
  246. background: none;
  247. }
  248. .t-button--ghost.t-button--primary {
  249. color: var(--td-button-ghost-primary-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  250. border-color: var(--td-button-ghost-primary-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  251. }
  252. .t-button--ghost.t-button--primary::after {
  253. border-color: var(--td-button-ghost-primary-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  254. }
  255. .t-button--ghost.t-button--danger {
  256. color: var(--td-button-ghost-danger-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
  257. border-color: var(--td-button-ghost-danger-border-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
  258. }
  259. .t-button--ghost.t-button--danger::after {
  260. border-color: var(--td-button-ghost-danger-border-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
  261. }
  262. .t-button--ghost.t-button--disabled {
  263. background-color: transparent;
  264. color: var(--td-button-ghost-disabled-color, rgba(255, 255, 255, 0.35));
  265. border-color: var(--td-button-ghost-disabled-color, rgba(255, 255, 255, 0.35));
  266. }
  267. .t-button--ghost.t-button--disabled::after {
  268. border-color: var(--td-button-ghost-disabled-color, rgba(255, 255, 255, 0.35));
  269. }
  270. .t-button--outline {
  271. color: var(--td-button-default-outline-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
  272. background-color: transparent;
  273. border-color: var(--td-button-default-outline-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
  274. }
  275. .t-button--outline::after {
  276. border-color: var(--td-button-default-outline-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
  277. }
  278. .t-button--outline.t-button--hover::after {
  279. background-color: var(--td-button-default-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
  280. border-color: var(--td-button-default-outline-active-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
  281. }
  282. .t-button--outline.t-button--disabled {
  283. color: var(--td-button-default-outline-disabled-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
  284. border-color: var(--td-button-default-outline-disabled-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
  285. }
  286. .t-button--outline.t-button--disabled::after {
  287. border-color: var(--td-button-default-outline-disabled-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
  288. }
  289. .t-button--outline.t-button--primary {
  290. color: var(--td-button-primary-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  291. 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))));
  292. }
  293. .t-button--outline.t-button--primary::after {
  294. 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))));
  295. }
  296. .t-button--outline.t-button--primary.t-button--hover {
  297. color: var(--td-button-primary-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
  298. }
  299. .t-button--outline.t-button--primary.t-button--hover::after {
  300. background-color: var(--td-button-primary-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
  301. border-color: var(--td-button-primary-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
  302. }
  303. .t-button--outline.t-button--primary.t-button--disabled {
  304. background-color: transparent;
  305. color: var(--td-button-primary-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  306. border-color: var(--td-button-primary-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  307. }
  308. .t-button--outline.t-button--primary.t-button--disabled::after {
  309. border-color: var(--td-button-primary-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  310. }
  311. .t-button--outline.t-button--danger {
  312. color: var(--td-button-danger-outline-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
  313. 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))));
  314. }
  315. .t-button--outline.t-button--danger::after {
  316. 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))));
  317. }
  318. .t-button--outline.t-button--danger.t-button--hover {
  319. color: var(--td-button-danger-outline-active-border-color, var(--td-error-color-7, #ad352f));
  320. }
  321. .t-button--outline.t-button--danger.t-button--hover::after {
  322. background-color: var(--td-button-danger-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
  323. border-color: var(--td-button-danger-outline-active-border-color, var(--td-error-color-7, #ad352f));
  324. }
  325. .t-button--outline.t-button--danger.t-button--disabled {
  326. background-color: transparent;
  327. color: var(--td-button-danger-outline-disabled-color, var(--td-error-color-3, #ffb9b0));
  328. border-color: var(--td-button-danger-outline-disabled-color, var(--td-error-color-3, #ffb9b0));
  329. }
  330. .t-button--outline.t-button--danger.t-button--disabled::after {
  331. border-color: var(--td-button-danger-outline-disabled-color, var(--td-error-color-3, #ffb9b0));
  332. }
  333. .t-button--outline.t-button--light {
  334. color: var(--td-button-light-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  335. background-color: var(--td-button-light-outline-bg-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
  336. 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))));
  337. }
  338. .t-button--outline.t-button--light::after {
  339. 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))));
  340. }
  341. .t-button--outline.t-button--light.t-button--hover {
  342. color: var(--td-button-light-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
  343. }
  344. .t-button--outline.t-button--light.t-button--hover::after {
  345. background-color: var(--td-button-light-outline-active-bg-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
  346. border-color: var(--td-button-light-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
  347. }
  348. .t-button--outline.t-button--light.t-button--disabled {
  349. background-color: transparent;
  350. color: var(--td-button-light-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  351. border-color: var(--td-button-light-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  352. }
  353. .t-button--outline.t-button--light.t-button--disabled::after {
  354. border-color: var(--td-button-light-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  355. }
  356. .t-button--dashed {
  357. background-color: transparent;
  358. border-style: dashed;
  359. }
  360. .t-button--dashed.t-button--primary {
  361. color: var(--td-button-primary-dashed-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  362. 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))));
  363. }
  364. .t-button--dashed.t-button--primary::after {
  365. 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))));
  366. }
  367. .t-button--dashed.t-button--primary.t-button--disabled {
  368. background-color: transparent;
  369. color: var(--td-button-primary-dashed-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  370. border-color: var(--td-button-primary-dashed-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  371. }
  372. .t-button--dashed.t-button--primary.t-button--disabled::after {
  373. border-color: var(--td-button-primary-dashed-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  374. }
  375. .t-button--dashed.t-button--danger {
  376. color: var(--td-button-danger-dashed-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
  377. 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))));
  378. }
  379. .t-button--dashed.t-button--danger::after {
  380. 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))));
  381. }
  382. .t-button--dashed.t-button--danger.t-button--disabled {
  383. background-color: transparent;
  384. color: var(--td-button-danger-dashed-disabled-color, var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff)));
  385. }
  386. .t-button--dashed.t-button--danger.t-button--disabled::after {
  387. border-color: var(--td-button-danger-dashed-disabled-color, var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff)));
  388. }
  389. .t-button__loading + .t-button__content:not(:empty),
  390. .t-button__icon + .t-button__content:not(:empty) {
  391. margin-left: 8rpx;
  392. }
  393. .t-button__icon {
  394. border-radius: var(--td-button-icon-border-radius, 8rpx);
  395. }
  396. .t-button--round.t-button--size-large {
  397. border-radius: calc(var(--td-button-large-height, 96rpx) / 2);
  398. }
  399. .t-button--round.t-button--size-large::after {
  400. border-radius: var(--td-button-large-height, 96rpx);
  401. }
  402. .t-button--round.t-button--size-medium {
  403. border-radius: calc(var(--td-button-medium-height, 80rpx) / 2);
  404. }
  405. .t-button--round.t-button--size-medium::after {
  406. border-radius: var(--td-button-medium-height, 80rpx);
  407. }
  408. .t-button--round.t-button--size-small {
  409. border-radius: calc(var(--td-button-small-height, 64rpx) / 2);
  410. }
  411. .t-button--round.t-button--size-small::after {
  412. border-radius: var(--td-button-small-height, 64rpx);
  413. }
  414. .t-button--round.t-button--size-extra-small {
  415. border-radius: calc(var(--td-button-extra-small-height, 56rpx) / 2);
  416. }
  417. .t-button--round.t-button--size-extra-small::after {
  418. border-radius: var(--td-button-extra-small-height, 56rpx);
  419. }
  420. .t-button--square {
  421. padding: 0;
  422. }
  423. .t-button--square.t-button--size-large {
  424. width: var(--td-button-large-height, 96rpx);
  425. }
  426. .t-button--square.t-button--size-medium {
  427. width: var(--td-button-medium-height, 80rpx);
  428. }
  429. .t-button--square.t-button--size-small {
  430. width: var(--td-button-small-height, 64rpx);
  431. }
  432. .t-button--square.t-button--size-extra-small {
  433. width: var(--td-button-extra-small-height, 56rpx);
  434. }
  435. .t-button--circle {
  436. padding: 0;
  437. border-radius: 50%;
  438. }
  439. .t-button--circle.t-button--size-large {
  440. width: var(--td-button-large-height, 96rpx);
  441. }
  442. .t-button--circle.t-button--size-large::after {
  443. border-radius: 50%;
  444. }
  445. .t-button--circle.t-button--size-medium {
  446. width: var(--td-button-medium-height, 80rpx);
  447. }
  448. .t-button--circle.t-button--size-medium::after {
  449. border-radius: 50%;
  450. }
  451. .t-button--circle.t-button--size-small {
  452. width: var(--td-button-small-height, 64rpx);
  453. }
  454. .t-button--circle.t-button--size-small::after {
  455. border-radius: 50%;
  456. }
  457. .t-button--circle.t-button--size-extra-small {
  458. width: var(--td-button-extra-small-height, 56rpx);
  459. }
  460. .t-button--circle.t-button--size-extra-small::after {
  461. border-radius: 50%;
  462. }
  463. .t-button--block {
  464. display: flex;
  465. width: 100%;
  466. }
  467. .t-button--disabled {
  468. cursor: not-allowed;
  469. }
  470. .t-button__loading--wrapper {
  471. display: flex;
  472. align-items: center;
  473. justify-content: center;
  474. }
  475. .t-button.t-button--hover::after {
  476. z-index: -1;
  477. }