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

Sense UI components library

@value (
  colorBorderPrimary,
  colorBackgroundPrimary,
  colorBackgroundTertiary,
  colorBackgroundSecondary,
  colorFillPrimary
) from '../../styles/variables/_color.css';
@value (
  sizeFluid,
  size58,
  size34,
  size42,
  size8,
  size400,
  size20,
  size100,
  size200
) from '../../styles/variables/_size.css';
@value (
  spaceSmall,
  spaceXSmall
) from '../../styles/variables/_space.css';
@value (
  elevationCard,
  elevationMenu
) from '../../styles/variables/_elevation.css';
@value (
  borderWidthPrimary,
  borderRadiusSmall,
  borderRadiusNone
) from '../../styles/variables/_border.css';

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

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

.header.isOpen {
  min-height: size58;
  background-color: colorBackgroundPrimary;
}

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

.content {
  display: flex;
  flex-flow: column;
  background-color: colorBackgroundPrimary;
  position: relative;
  margin-top: calc(-1 * size20);
  border-radius: borderRadiusSmall;
  width: sizeFluid;
}

.cardWrapper {
  z-index: elevationMenu;
}

.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;
}

.titleContainer {
  display: flex;
  gap: spaceXSmall;
  align-items: center;
}

.cardContentContainer {
  display: flex;
  flex-flow: column;
  gap: spaceXSmall;
  padding: spaceSmall;
  width: sizeFluid;
  justify-content: space-between;
  max-height: size400;
  overflow-y: auto;
}

.checklistItemContainer {
  display: flex;
  gap: spaceXSmall;
  align-items: center;
  width: sizeFluid;
  background-color: colorBackgroundTertiary;
  height: size34;
  border-radius: borderRadiusSmall;
  padding: spaceXSmall;
  cursor: pointer;
}

.checklistItemContainer:hover {
  background-color: colorBackgroundSecondary;
}

.checklistItemLeft {
  display: flex;
  gap: spaceXSmall;
  align-items: center;
  width: sizeFluid;
}

.checklistItemRight {
  display: flex;
  gap: spaceXSmall;
  align-items: center;
}

.progressLinear {
  min-width: size100;
  max-width: size200;
  background-color: colorBorderPrimary;
  border-radius: borderRadiusSmall;
  height: size8;
  box-sizing: content-box;
}

.progressLinearBar {
  height: size8;
  background-color: colorFillPrimary;
  border-radius: borderRadiusSmall;
}

.checklistProgressBar {
  display: flex;
  gap: spaceXSmall;
  align-items: center;
  min-width: max-content;
}