xdesign-vue-next/es/collapse/style/index.css

XDesign Component for vue-next

.x-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);
}
.x-collapse.x--border-less {
  border: none;
}
.x-collapse.x--border-less .x-collapse-panel__header {
  border-bottom: none;
}
.x-collapse.x--border-less .x-collapse-panel__body {
  background: var(--td-bg-color-container);
  border: none;
}
.x-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;
}
.x-collapse-panel__icon > .x-fake-arrow {
  transform: rotate(-90deg);
  transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
}
.x-collapse-panel__icon--left {
  margin-right: var(--td-comp-margin-s);
}
.x-collapse-panel__icon--right {
  margin-left: var(--td-comp-margin-s);
}
.x-collapse-panel__icon--active > .x-fake-arrow {
  transform: rotate(0);
}
.x-collapse-panel__icon:hover {
  background-color: var(--td-bg-color-container-hover);
  border-radius: var(--td-radius-small);
}
.x-collapse-panel__wrapper {
  overflow: hidden;
}
.x-collapse-panel__wrapper .x-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;
}
.x-collapse-panel__wrapper .x-collapse-panel__header--blank {
  flex: 1;
}
.x-collapse-panel__wrapper .x-collapse-panel__header.x-is-clickable {
  cursor: pointer;
}
.x-collapse-panel__wrapper .x-collapse-panel__header-left,
.x-collapse-panel__wrapper .x-collapse-panel__header-right,
.x-collapse-panel__wrapper .x-collapse-panel__header-right-content {
  display: flex;
}
.x-collapse-panel__wrapper .x-collapse-panel__body {
  border-bottom: solid 1px var(--td-component-border);
  background: var(--td-bg-color-secondarycontainer);
  overflow: inherit;
}
.x-collapse-panel__wrapper .x-collapse-panel__body--collapsed {
  border: none;
}
.x-collapse-panel__wrapper .x-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);
}
.x-collapse-panel.x-is-disabled .x-collapse-panel__header {
  cursor: not-allowed;
  color: var(--td-text-color-disabled);
}
.x-collapse-panel.x-is-disabled .x-collapse-panel__icon {
  cursor: not-allowed;
  pointer-events: none;
}
.x-collapse-panel.x-is-disabled .x-collapse-panel__body {
  background: var(--td-bg-color-component-disabled);
}
.x-collapse-panel.x-is-disabled .x-collapse-panel__content {
  color: var(--td-text-color-disabled);
}