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

Sense UI components library

@value (spaceLarge, spaceXSmall, spaceMedium, spaceSmall) from '../../styles/variables/_space.css';
@value (size42, size380, sizeFluid) from '../../styles/variables/_size.css';
@value (borderRadiusMedium, borderRadiusCircle) from '../../styles/variables/_border.css';
@value (
  colorNeutralLightest,
  colorSuccessLightest,
  colorInformationLightest,
  colorWarningLightest,
  colorDangerLightest
) from '../../styles/variables/_color.css';

.dialog {
  composes: boxShadow4 from '../../styles/shadow.module.css';
  border-radius: borderRadiusMedium;
  padding: spaceMedium;
  max-width: size380;
}

.dialogHeader {
  composes: subTitleLarge from '../../styles/typography.module.css';
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.topBlock {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-bottom: spaceMedium;
}

.iconContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: size42;
  height: size42;
  border-radius: borderRadiusCircle;
}

.headerContent {
  display: flex;
}

.neutral {
  background-color: colorNeutralLightest;
}

.success {
  background-color: colorSuccessLightest;
}

.information {
  background-color: colorInformationLightest;
}

.warning {
  background-color: colorWarningLightest;
}

.danger {
  background-color: colorDangerLightest;
}

.dialogBody {
  margin-top: spaceXSmall;
  display: flex;
  height: sizeFluid;
  overflow: auto;
  text-align: center;
}

.dialogFooter {
  margin-top: spaceLarge;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: spaceMedium;
}

.dialogFooterActions {
  display: flex;
  gap: spaceSmall;
  width: sizeFluid;
}