radio.wxss 4.6 KB

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