checkbox.wxss 5.3 KB

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