collapse-panel.wxss 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  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-collapse-panel {
  29. background-color: var(--td-collapse-panel-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
  30. }
  31. .t-collapse-panel--disabled {
  32. pointer-events: none;
  33. }
  34. .t-collapse-panel--disabled .t-collapse-panel__content,
  35. .t-collapse-panel--disabled .t-collapse-panel__header {
  36. opacity: 0.3;
  37. }
  38. .t-collapse-panel--top {
  39. display: flex;
  40. flex-direction: column-reverse;
  41. }
  42. .t-collapse-panel__header {
  43. position: relative;
  44. display: flex;
  45. justify-content: space-between;
  46. align-items: center;
  47. padding-left: var(--td-collapse-horizontal-padding, 32rpx);
  48. height: var(--td-collapse-header-height, auto);
  49. color: var(--td-collapse-header-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
  50. }
  51. .t-collapse-panel__header--top {
  52. position: relative;
  53. }
  54. .t-collapse-panel__header--top::after {
  55. content: '';
  56. display: block;
  57. position: absolute;
  58. top: 0;
  59. bottom: unset;
  60. left: unset;
  61. right: unset;
  62. background-color: var(--td-collapse-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
  63. }
  64. .t-collapse-panel__header--top::after {
  65. height: 1px;
  66. left: 0;
  67. right: 0;
  68. transform: scaleY(0.5);
  69. }
  70. .t-collapse-panel__header--bottom {
  71. position: relative;
  72. }
  73. .t-collapse-panel__header--bottom::after {
  74. content: '';
  75. display: block;
  76. position: absolute;
  77. top: unset;
  78. bottom: 0;
  79. left: unset;
  80. right: unset;
  81. background-color: var(--td-collapse-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
  82. }
  83. .t-collapse-panel__header--bottom::after {
  84. height: 1px;
  85. left: 0;
  86. right: 0;
  87. transform: scaleY(0.5);
  88. }
  89. .t-collapse-panel__header::after {
  90. left: 32rpx;
  91. }
  92. .t-collapse-panel__header-right {
  93. display: inline-flex;
  94. align-items: center;
  95. height: 100%;
  96. }
  97. .t-collapse-panel__header-icon {
  98. height: 100%;
  99. padding-left: 8px;
  100. width: 44px;
  101. padding-right: 8px;
  102. color: var(--td-collapse-icon-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
  103. }
  104. .t-collapse-panel__extra {
  105. font-size: var(--td-collapse-extra-font-size, var(--td-font-size-m, 32rpx));
  106. }
  107. .t-collapse-panel__body {
  108. position: relative;
  109. }
  110. .t-collapse-panel__body::after {
  111. content: '';
  112. display: block;
  113. position: absolute;
  114. top: unset;
  115. bottom: 0;
  116. left: unset;
  117. right: unset;
  118. background-color: var(--td-collapse-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
  119. }
  120. .t-collapse-panel__body::after {
  121. height: 1px;
  122. left: 0;
  123. right: 0;
  124. transform: scaleY(0.5);
  125. }
  126. .t-collapse-panel__wrapper {
  127. height: 0;
  128. overflow: hidden;
  129. }
  130. .t-collapse-panel__content {
  131. color: var(--td-collapse-content-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
  132. font-size: var(--td-collapse-content-font-size, var(--td-font-size-base, 28rpx));
  133. padding: var(--td-collapse-content-padding, 32rpx);
  134. line-height: var(--td-collapse-content-line-height, 1.5);
  135. }
  136. .t-collapse-panel__content--disabled {
  137. color: var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
  138. }
  139. .t-collapse-panel__content--expanded.t-collapse-panel__content--bottom {
  140. position: relative;
  141. }
  142. .t-collapse-panel__content--expanded.t-collapse-panel__content--bottom::after {
  143. content: '';
  144. display: block;
  145. position: absolute;
  146. top: unset;
  147. bottom: 0;
  148. left: unset;
  149. right: unset;
  150. background-color: var(--td-collapse-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
  151. }
  152. .t-collapse-panel__content--expanded.t-collapse-panel__content--bottom::after {
  153. height: 1px;
  154. left: 0;
  155. right: 0;
  156. transform: scaleY(0.5);
  157. }
  158. .t-collapse-panel__content--expanded.t-collapse-panel__content--top {
  159. position: relative;
  160. }
  161. .t-collapse-panel__content--expanded.t-collapse-panel__content--top::after {
  162. content: '';
  163. display: block;
  164. position: absolute;
  165. top: 0;
  166. bottom: unset;
  167. left: unset;
  168. right: unset;
  169. background-color: var(--td-collapse-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
  170. }
  171. .t-collapse-panel__content--expanded.t-collapse-panel__content--top::after {
  172. height: 1px;
  173. left: 0;
  174. right: 0;
  175. transform: scaleY(0.5);
  176. }
  177. .t-collapse-panel__arrow--top {
  178. transform: rotate(180deg);
  179. }
  180. .class-title {
  181. font-size: var(--td-collapse-title-font-size, var(--td-font-size-m, 32rpx));
  182. }
  183. .class-title--disabled {
  184. color: var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
  185. }
  186. .class-note--disabled {
  187. color: var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
  188. }
  189. .class-right-icon--disabled {
  190. color: var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
  191. }