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

Sense UI components library

@value (
  colorBorderPrimary,
  colorBackgroundTertiary,
  colorNeutralLightest,
  colorNeutral,
  colorInformationLightest,
  colorInformation,
  colorSuccessLightest,
  colorSuccess,
  colorDangerLightest,
  colorDanger,
  colorWarningLightest,
  colorWarning
) from '../../styles/variables/_color.css';

@value (
  size58,
  sizeFluid
) from '../../styles/variables/_size.css';

@value (
  spaceSmall,
  spaceMedium,
  spaceLarge
) from '../../styles/variables/_space.css';

@value (
  borderRadiusSmall,
  borderRadiusCircle,
  borderWidthPrimary,
  borderWidthSecondary
) from '../../styles/variables/_border.css';

.wrapper {
  display: flex;
  flex-direction: column;
  width: sizeFluid;
  background-color: colorBackgroundTertiary;
  border-radius: borderRadiusSmall;
  border: borderWidthPrimary solid colorBorderPrimary;
  overflow: hidden;
}

.header {
  position: relative;
  width: sizeFluid;
  height: 49px;
  display: flex;
  align-items: flex-start;
}

/* Header background colors for each state */
.header.neutral {
  background-color: colorNeutralLightest;
}

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

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

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

.header.error {
  background-color: colorDangerLightest;
}

.header.pending {
  background-color: colorWarningLightest;
}

.iconContainer {
  position: absolute;
  left: spaceSmall;
  top: spaceSmall;
  width: size58;
  height: size58;
  min-width: size58;
  min-height: size58;
  border-radius: borderRadiusCircle;
  border: borderWidthSecondary solid colorBackgroundTertiary;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon container background colors for each state */
.iconContainer.neutral {
  background-color: colorNeutralLightest;
}

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

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

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

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

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

/* Icon colors using descendant selectors */
.iconContainer .neutral {
  color: colorNeutral;
}

.iconContainer .information {
  color: colorInformation;
}

.iconContainer .success {
  color: colorSuccess;
}

.iconContainer .warning {
  color: colorWarning;
}

.iconContainer .error {
  color: colorDanger;
}

.iconContainer .pending {
  color: colorWarning;
}

.content {
  display: flex;
  flex-direction: column;
  background-color: colorBackgroundTertiary;
  padding: spaceSmall spaceMedium;
  padding-top: spaceLarge;
}

.footer {
  display: flex;
  flex-direction: column;
  background-color: colorBackgroundTertiary;
  padding: spaceSmall spaceMedium;
  padding-top: 0;
  gap: spaceSmall;
}

.footerSeparator {
  width: sizeFluid;
  height: 0;
  composes: borderTopPrimary from '../../styles/border.module.css';
}

.footerContent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: sizeFluid;
}