radio.wxss 5.9 KB

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