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

Sense UI components library

@value (colorBackgroundTertiary, colorFillPrimary, colorBorderSecondary, colorFocusPrimary) from '../../styles/variables/_color.css';
@value (borderRadiusMedium, borderWidthNone, borderWidthTertiary) from '../../styles/variables/_border.css';
@value (spaceSmall, spaceMedium, spaceLarge, spaceXSmall) from '../../styles/variables/_space.css';
@value (size58, sizeFluid) from '../../styles/variables/_size.css';

.cardWrapper {
  --card-padding-top: spaceMedium;
  --card-padding-right: spaceMedium;
  --card-padding-bottom: spaceMedium;
  --card-padding-left: spaceMedium;
}

.cardWrapper {
  display: flex;
  composes: borderPrimary from '../../styles/border.module.css';
  background-color: colorBackgroundTertiary;
  border-radius: borderRadiusMedium;
}

.cardWrapper:not(:has(.cardHeader, .cardFooter, .cardContent)) {
  padding-top: var(--card-padding-top);
  padding-right: var(--card-padding-right);
  padding-bottom: var(--card-padding-bottom);
  padding-left: var(--card-padding-left);
}

.cardWrapper:has(.cardHeader, .cardFooter, .cardContent) {
  flex-flow: column;
}

.cardHeader {
  display: flex;
  justify-content: space-between;
  width: sizeFluid;
  align-items: center;
  min-height: size58;
  composes: subTitleSmall from '../../styles/typography.module.css';
  composes: borderBottomPrimary from '../../styles/border.module.css';
  padding: spaceSmall var(--card-padding-right) spaceSmall
    var(--card-padding-left);
  gap: spaceXSmall;
}

.cardFooter {
  display: flex;
  justify-content: space-between;
  width: sizeFluid;
  align-items: center;
  min-height: size58;
  composes: subTitleSmall from '../../styles/typography.module.css';
  composes: borderTopPrimary from '../../styles/border.module.css';
  padding: spaceSmall var(--card-padding-right) spaceSmall
    var(--card-padding-left);
  gap: spaceXSmall;
  margin-top: auto;
}

.cardTitle {
  display: flex;
}

.cardActions {
  display: flex;
  gap: spaceXSmall;
  margin-left: auto;
}

.cardContent {
  display: flex;
  padding-top: var(--card-padding-top);
  padding-right: var(--card-padding-right);
  padding-bottom: var(--card-padding-bottom);
  padding-left: var(--card-padding-left);
}

.clickableCard {
  cursor: pointer;
  outline: none;
}
.clickableCard.disabled {
  pointer-events: none;
}

.clickableCard:hover {
  border-color: colorBorderSecondary;
}

.clickableCard:focus-within {
  border-color: colorFillPrimary;
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}