.t-collapse-panel { background-color: var(--td-collapse-panel-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff))); } .t-collapse-panel--disabled { pointer-events: none; } .t-collapse-panel--disabled .t-collapse-panel__content, .t-collapse-panel--disabled .t-collapse-panel__header { opacity: 0.3; } .t-collapse-panel--top { display: flex; flex-direction: column-reverse; } .t-collapse-panel__header { position: relative; display: flex; justify-content: space-between; align-items: center; padding-left: var(--td-collapse-horizontal-padding, 32rpx); height: var(--td-collapse-header-height, auto); } .t-collapse-panel__header--top { position: relative; } .t-collapse-panel__header--top::after { content: ''; display: block; position: absolute; top: 0; bottom: unset; left: unset; right: unset; background-color: var(--td-collapse-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7))); } .t-collapse-panel__header--top::after { height: 1px; left: 0; right: 0; transform: scaleY(0.5); } .t-collapse-panel__header--bottom { position: relative; } .t-collapse-panel__header--bottom::after { content: ''; display: block; position: absolute; top: unset; bottom: 0; left: unset; right: unset; background-color: var(--td-collapse-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7))); } .t-collapse-panel__header--bottom::after { height: 1px; left: 0; right: 0; transform: scaleY(0.5); } .t-collapse-panel__header::after { left: var(--td-spacer-2, 32rpx); } .t-collapse-panel__extra { font: var(--td-collapse-extra-font, var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular))); } .t-collapse-panel__body { position: relative; } .t-collapse-panel__body::after { content: ''; display: block; position: absolute; top: unset; bottom: 0; left: unset; right: unset; background-color: var(--td-collapse-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7))); } .t-collapse-panel__body::after { height: 1px; left: 0; right: 0; transform: scaleY(0.5); } .t-collapse-panel__wrapper { height: 0; overflow: hidden; } .t-collapse-panel__content { color: var(--td-collapse-content-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)))); font: var(--td-collapse-content-font, var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular))); padding: var(--td-collapse-content-padding, 32rpx); } .t-collapse-panel__content--disabled { color: var(--td-collapse-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)))); } .t-collapse-panel__content--expanded.t-collapse-panel__content--bottom { position: relative; } .t-collapse-panel__content--expanded.t-collapse-panel__content--bottom::after { content: ''; display: block; position: absolute; top: unset; bottom: 0; left: unset; right: unset; background-color: var(--td-collapse-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7))); } .t-collapse-panel__content--expanded.t-collapse-panel__content--bottom::after { height: 1px; left: 0; right: 0; transform: scaleY(0.5); } .t-collapse-panel__content--expanded.t-collapse-panel__content--top { position: relative; } .t-collapse-panel__content--expanded.t-collapse-panel__content--top::after { content: ''; display: block; position: absolute; top: 0; bottom: unset; left: unset; right: unset; background-color: var(--td-collapse-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7))); } .t-collapse-panel__content--expanded.t-collapse-panel__content--top::after { height: 1px; left: 0; right: 0; transform: scaleY(0.5); } .t-collapse-panel__arrow--top { transform: rotate(180deg); } .class-title { font: var(--td-collapse-title-font, var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular))); color: var(--td-collapse-header-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)))); } .class-left-icon { color: var(--td-collapse-left-icon-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))); } .class-right-icon { color: var(--td-collapse-icon-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)))); } .class-title--disabled, .class-note--disabled, .class-left-icon--disabled, .class-right-icon--disabled { color: var(--td-collapse-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)))); }