@spaced-out/ui-design-system/lib/components/CollapsibleCard/CollapsibleCard.module.css

Sense UI components library

@value (colorBorderPrimary,
colorBackgroundPrimary,
colorBackgroundTertiary,
colorNeutralLightest,
colorNeutral,
colorInformationLightest,
colorInformation,
colorSuccessLightest,
colorSuccess,
colorDangerLightest,
colorDanger,
colorWarningLightest,
colorWarning,
colorFocusPrimary
) from '../../styles/variables/_color.css';
@value (sizeFluid, size58, size34) from '../../styles/variables/_size.css';
@value (spaceSmall, spaceXSmall) from '../../styles/variables/_space.css';
@value (elevationCard) from '../../styles/variables/_elevation.css';
@value (borderWidthNone,
borderWidthPrimary,
borderRadiusSmall,
borderRadiusNone,
borderWidthTertiary
) from '../../styles/variables/_border.css';

.wrapper {
  display: flex;
  flex-flow: column;
  width: sizeFluid;
}

.header {
  composes: subTitleSmall from '../../styles/typography.module.css';
  composes: borderPrimary from '../../styles/border.module.css';
  /* composes: motionEaseInEaseOut from '../../styles/animation.module.css'; */
  min-height: size58;
  border-radius: borderRadiusSmall;
  display: flex;
  cursor: pointer;
  align-items: center;
  width: sizeFluid;
  justify-content: space-between;
  gap: spaceSmall;
  padding: spaceSmall;
  background-color: colorBackgroundTertiary;
  z-index: elevationCard;
}

.header:focus {
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

.header.isOpen {
  border-radius: borderRadiusSmall borderRadiusSmall borderRadiusNone
    borderRadiusNone;
}

.headerContent {
  display: flex;
  gap: spaceXSmall;
  align-items: center;
  text-align: left;
  width: sizeFluid;
}

.iconContainer {
  display: flex;
  min-width: size34;
  min-height: size34;
  border-radius: borderRadiusSmall;
  align-items: center;
  justify-content: center;
}

.iconContainer.neutral {
  background-color: colorNeutralLightest;
}

.iconContainer .neutral {
  color: colorNeutral;
}

.iconContainer.success {
  background-color: colorSuccessLightest;
}

.iconContainer .success {
  color: colorSuccess;
}

.iconContainer.information {
  background-color: colorInformationLightest;
}

.iconContainer .information {
  color: colorInformation;
}

.iconContainer.warning {
  background-color: colorWarningLightest;
}

.iconContainer .warning {
  color: colorWarning;
}

.iconContainer.danger {
  background-color: colorDangerLightest;
}

.iconContainer .danger {
  color: colorDanger;
}

.content {
  display: flex;
  flex-flow: column;
  background-color: colorBackgroundPrimary;
  border-left: borderWidthPrimary solid colorBorderPrimary;
  border-right: borderWidthPrimary solid colorBorderPrimary;
  border-bottom: borderWidthPrimary solid colorBorderPrimary;
  border-radius: borderRadiusNone borderRadiusNone borderRadiusSmall
    borderRadiusSmall;
}

.contentContainer {
  display: flex;
  padding: spaceSmall;
}

.actionContainer {
  display: flex;
  border-top: borderWidthPrimary solid colorBorderPrimary;
  border-radius: borderRadiusNone borderRadiusNone borderRadiusSmall
    borderRadiusSmall;
  background-color: colorBackgroundTertiary;
  padding: spaceSmall;
  gap: spaceXSmall;
}