@workday/canvas-kit-css/expandable.css

The parent module that contains all Workday Canvas Kit CSS components

.cnvs-expandable-content {
  box-sizing: border-box;
  background: var(--cnvs-sys-color-bg-transparent-default);
  padding: var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2);
}


.cnvs-expandable-target {
  box-sizing: border-box;
  background: var(--cnvs-sys-color-bg-transparent-default);
  border-color: var(--cnvs-sys-color-bg-transparent-default);
  border-radius: var(--cnvs-sys-shape-x1);
  border-width: 0;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: var(--cnvs-sys-space-x2);
  justify-content: start;
  padding: var(--cnvs-sys-space-x2);
  cursor: pointer;
  width: 100%;
}

.cnvs-expandable-target:hover, .cnvs-expandable-target.hover {
  background-color: var(--cnvs-sys-color-bg-alt-soft);
}

.cnvs-expandable-target:focus-visible, .cnvs-expandable-target.focus {
  outline: var(--cnvs-brand-common-focus-outline) solid 0.125rem;
}


.cnvs-expandable-icon {
  box-sizing: border-box;
  padding: var(--cnvs-sys-space-x1);
}







.cnvs-expandable-icon.position-end.is-expanded {
  margin-inline-start: auto;
  transform: rotate(180deg);
  padding-inline-end: var(--cnvs-sys-space-x3);
}


.cnvs-expandable-icon.position-end.is-expanded {
  margin-inline-start: auto;
  padding-inline-start: var(--cnvs-sys-space-x3);
}


.cnvs-expandable-icon.position-start.is-expanded {
  margin-inline-end: var(--cnvs-sys-space-x2);
  transform: rotate(90deg);
}

.cnvs-expandable-icon.position-start.is-expanded :dir(rtl) {
  transform: rotate(-90deg);
}


.cnvs-expandable-icon.position-start.is-expanded {
  margin-inline-end: var(--cnvs-sys-space-x2);
  transform: rotate(180deg);
}


.cnvs-expandable-title {
  box-sizing: border-box;
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-bold);
  line-height: var(--cnvs-sys-line-height-body-medium);
  font-size: var(--cnvs-sys-font-size-body-medium);
  color: var(--cnvs-sys-color-text-strong);
  padding: 0.125rem var(--cnvs-sys-space-zero);
  text-align: left;
}


.cnvs-expandable-avatar {
  box-sizing: border-box;
  flex-shrink: 0;
}


.cnvs-expandable-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: var(--cnvs-sys-space-x2);
}