radio.wxss 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  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. .limit-title-row {
  29. display: -webkit-box;
  30. -webkit-box-orient: vertical;
  31. overflow: hidden;
  32. }
  33. .t-radio {
  34. display: inline-flex;
  35. vertical-align: middle;
  36. font-size: var(--td-radio-font-size, 32rpx);
  37. background: var(--td-radio-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
  38. position: relative;
  39. }
  40. .t-radio:focus {
  41. outline: 0;
  42. }
  43. .t-radio--block {
  44. display: flex;
  45. padding: var(--td-radio-vertical-padding, 32rpx);
  46. }
  47. .t-radio--right {
  48. flex-direction: row-reverse;
  49. }
  50. .t-radio__icon {
  51. position: relative;
  52. width: var(--td-radio-icon-size, 48rpx);
  53. height: var(--td-radio-icon-size, 48rpx);
  54. font-size: var(--td-radio-icon-size, 48rpx);
  55. color: var(--td-radio-icon-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
  56. overflow: hidden;
  57. }
  58. .t-radio__icon:empty {
  59. display: none;
  60. }
  61. .t-radio__icon--left {
  62. margin-right: 16rpx;
  63. }
  64. .t-radio__icon--checked {
  65. color: var(--td-radio-icon-checked-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  66. }
  67. .t-radio__icon--disabled {
  68. cursor: not-allowed;
  69. color: var(--td-radio-icon-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  70. }
  71. .t-radio__icon-circle {
  72. width: var(--td-radio-icon-size, 48rpx);
  73. height: var(--td-radio-icon-size, 48rpx);
  74. box-sizing: border-box;
  75. }
  76. .t-radio__icon-circle::after {
  77. content: '';
  78. width: calc(200% - 6rpx);
  79. height: calc(200% - 6rpx);
  80. border-radius: 50%;
  81. border: 3px solid var(--td-radio-icon-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
  82. position: absolute;
  83. top: 50%;
  84. left: 50%;
  85. transform: translate(-50%, -50%) scale(0.5);
  86. box-sizing: border-box;
  87. }
  88. .t-radio__icon-circle--disabled::after {
  89. background: var(--td-radio-icon-disabled-bg-color, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee)));
  90. }
  91. .t-radio__icon-line:before,
  92. .t-radio__icon-line:after {
  93. content: '';
  94. display: block;
  95. position: absolute;
  96. width: 5rpx;
  97. border-radius: 2rpx;
  98. background: var(--td-radio-icon-checked-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  99. transform-origin: top center;
  100. }
  101. .t-radio__icon-line:before {
  102. height: 16rpx;
  103. left: 8rpx;
  104. top: 22rpx;
  105. transform: rotate(-45deg);
  106. }
  107. .t-radio__icon-line::after {
  108. height: 26rpx;
  109. right: 8rpx;
  110. top: 14rpx;
  111. transform: rotate(45deg);
  112. }
  113. .t-radio__icon-line--disabled::before,
  114. .t-radio__icon-line--disabled::after {
  115. background: var(--td-radio-icon-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  116. }
  117. .t-radio__icon-dot {
  118. width: 84rpx;
  119. height: 84rpx;
  120. border: 3px solid var(--td-radio-icon-checked-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  121. border-radius: 50%;
  122. position: absolute;
  123. top: 50%;
  124. left: 50%;
  125. transform: translate(-50%, -50%) scale(0.5);
  126. box-sizing: border-box;
  127. display: flex;
  128. align-items: center;
  129. justify-content: center;
  130. }
  131. .t-radio__icon-dot:after {
  132. content: '';
  133. display: block;
  134. width: 48rpx;
  135. height: 48rpx;
  136. background: var(--td-radio-icon-checked-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  137. border-radius: 50%;
  138. }
  139. .t-radio__icon-dot--disabled {
  140. border-color: var(--td-radio-icon-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  141. }
  142. .t-radio__icon-dot--disabled::after {
  143. background: var(--td-radio-icon-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
  144. }
  145. .t-radio__image {
  146. line-height: var(--td-radio-icon-size, 48rpx);
  147. }
  148. .t-radio-icon__image {
  149. height: var(--td-radio-icon-size, 48rpx);
  150. width: var(--td-radio-icon-size, 48rpx);
  151. vertical-align: sub;
  152. }
  153. .t-radio__content {
  154. flex: 1;
  155. }
  156. .t-radio__content:empty {
  157. display: none;
  158. }
  159. .t-radio__title {
  160. display: -webkit-box;
  161. -webkit-box-orient: vertical;
  162. overflow: hidden;
  163. color: var(--td-radio-label-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
  164. line-height: var(--td-radio-label-line-height, 48rpx);
  165. }
  166. .t-radio__title--disabled {
  167. cursor: not-allowed;
  168. color: var(--td-radio-label-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
  169. }
  170. .t-radio__title--checked {
  171. color: var(--td-radio-label-checked-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
  172. }
  173. .t-radio__description {
  174. display: -webkit-box;
  175. -webkit-box-orient: vertical;
  176. overflow: hidden;
  177. color: var(--td-radio-content-color, var(--td-font-gray-2, rgba(0, 0, 0, 0.6)));
  178. font-size: var(--td-radio-content-font-size, 28rpx);
  179. line-height: var(--td-radio-content-line-height, 44rpx);
  180. }
  181. .t-radio__description--disabled {
  182. cursor: not-allowed;
  183. color: var(--td-radio-content-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
  184. }
  185. .t-radio__description--checked {
  186. color: var(--td-radio-content-checked-color, var(--td-font-gray-2, rgba(0, 0, 0, 0.6)));
  187. }
  188. .t-radio__description:empty {
  189. display: none;
  190. }
  191. .t-radio__title + .t-radio__description {
  192. margin-top: 8rpx;
  193. }
  194. .t-radio__border {
  195. position: absolute;
  196. bottom: 0;
  197. height: 1px;
  198. background: var(--td-radio-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
  199. left: 96rpx;
  200. right: 0;
  201. transform: scaleY(0.5);
  202. }
  203. .t-radio__border--right {
  204. left: 32rpx;
  205. }