tdesign-vue
Version:
100 lines (99 loc) • 3.04 kB
CSS
.t-collapse {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
border: solid 1px var(--td-component-border);
border-bottom: 0;
background: var(--td-bg-color-container);
}
.t-collapse.t--border-less {
border: none;
}
.t-collapse.t--border-less .t-collapse-panel__header {
border-bottom: none;
}
.t-collapse.t--border-less .t-collapse-panel__body {
background: var(--td-bg-color-container);
border: none;
}
.t-collapse-panel__icon {
transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.t-collapse-panel__icon > .t-fake-arrow {
transform: rotate(-90deg);
transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
}
.t-collapse-panel__icon--left {
margin-right: var(--td-comp-margin-s);
}
.t-collapse-panel__icon--right {
margin-left: var(--td-comp-margin-s);
}
.t-collapse-panel__icon--active > .t-fake-arrow {
transform: rotate(0);
}
.t-collapse-panel__icon:hover {
background-color: var(--td-bg-color-container-hover);
border-radius: var(--td-radius-small);
}
.t-collapse-panel__wrapper {
overflow: hidden;
}
.t-collapse-panel__wrapper.t--borderless .t-collapse-panel__header {
border-bottom: none;
}
.t-collapse-panel__wrapper.t--borderless .t-collapse-panel__body {
background: var(--td-bg-color-container);
border: none;
}
.t-collapse-panel__wrapper .t-collapse-panel__header {
padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l);
border-bottom: solid 1px var(--td-component-border);
font: var(--td-font-title-small);
display: flex;
align-items: center;
}
.t-collapse-panel__wrapper .t-collapse-panel__header--blank {
flex: 1;
}
.t-collapse-panel__wrapper .t-collapse-panel__header.t-is-clickable {
cursor: pointer;
}
.t-collapse-panel__wrapper .t-collapse-panel__header-left,
.t-collapse-panel__wrapper .t-collapse-panel__header-right,
.t-collapse-panel__wrapper .t-collapse-panel__header-right-content {
display: flex;
}
.t-collapse-panel__wrapper .t-collapse-panel__body {
border-bottom: solid 1px var(--td-component-border);
background: var(--td-bg-color-secondarycontainer);
overflow: inherit;
}
.t-collapse-panel__wrapper .t-collapse-panel__body--collapsed {
border: none;
}
.t-collapse-panel__wrapper .t-collapse-panel__content {
padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l) var(--td-comp-paddingTB-m) calc(var(--td-comp-paddingLR-l) + var(--td-comp-margin-xxl));
color: var(--td-text-color-secondary);
}
.t-collapse-panel.t-is-disabled .t-collapse-panel__header {
cursor: not-allowed;
color: var(--td-text-color-disabled);
}
.t-collapse-panel.t-is-disabled .t-collapse-panel__icon {
cursor: not-allowed;
pointer-events: none;
}
.t-collapse-panel.t-is-disabled .t-collapse-panel__body {
background: var(--td-bg-color-component-disabled);
}
.t-collapse-panel.t-is-disabled .t-collapse-panel__content {
color: var(--td-text-color-disabled);
}