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

Sense UI components library

@value (
  colorBackgroundTertiary, 
  colorBackgroundPrimary, 
  colorBackdropFill
) from '../../styles/variables/_color.css';
@value (
  spaceNone, 
  spaceSmall, 
  spaceXSmall, 
  spaceMedium, 
  spaceXXSmall, 
  spaceHalfFluid, 
  spaceNegHalfFluid
) from '../../styles/variables/_space.css';
@value (
  sizeFluid, 
  size58, 
  size60, 
  size66,
  size320, 
  size480, 
  size640
) from '../../styles/variables/_size.css';
@value (
  elevationNone, 
  elevationModal, 
  elevationBackdrop
) from '../../styles/variables/_elevation.css';
@value (
  opacity100, 
  opacity0
) from '../../styles/variables/_opacity.css';
@value (
  motionDurationNormal
) from '../../styles/variables/_motion.css';
@value (
  borderRadiusMedium
) from '../../styles/variables/_border.css';

.modalContainer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  position: fixed;
  top: spaceHalfFluid;
  left: spaceHalfFluid;
  transform: translate(spaceNegHalfFluid, spaceNegHalfFluid);
  composes: boxShadow4 from '../../styles/shadow.module.css';
  display: flex;
  max-height: sizeFluid;
  flex-flow: column;
  background: colorBackgroundTertiary;
  overflow: auto;
  z-index: elevationModal;
  border-radius: borderRadiusMedium;
}

.small {
  width: size320;
}

.medium {
  width: size480;
}

.large {
  width: size640;
}

.fullscreenModalContainer {
  width: sizeFluid;
  height: sizeFluid;
  border-radius: initial;
}

.modalContainer.open.in .modal {
  opacity: opacity100;
  transform: translate(spaceNegHalfFluid, spaceNegHalfFluid) scale(1);
}

.backdrop {
  display: flex;
  flex-flow: column;
  visibility: hidden;
  opacity: opacity0;
  background-color: transparent;
  backdrop-filter: blur(spaceNone);
  width: sizeFluid;
  height: sizeFluid;
  top: spaceNone;
  left: spaceNone;
  position: fixed;
  pointer-events: none;
  z-index: elevationNone;
  transition: visibility motionDurationNormal,
    backdrop-filter motionDurationNormal;
}

.modalContainer.open.in .backdrop {
  visibility: visible;
  opacity: opacity100;
  pointer-events: auto;
  z-index: elevationBackdrop;
}

.modalContainer.open.in .darkBackdrop {
  backdrop-filter: blur(spaceXXSmall);
  background-color: colorBackdropFill;
}

.modalHeader {
  composes: borderBottomPrimary from '../../styles/border.module.css';
  composes: subTitleLarge from '../../styles/typography.module.css';
  padding: spaceSmall spaceSmall spaceSmall spaceMedium;
  min-height: size58;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: spaceXSmall;
}

.headerContent {
  display: flex;
}

.modalBody {
  padding: spaceMedium;
  height: sizeFluid;
  overflow: auto;
}

.modalFooter {
  composes: borderTopPrimary from '../../styles/border.module.css';
  min-height: size66;
  background-color: colorBackgroundPrimary;
  margin-top: auto;
  padding: spaceSmall spaceMedium;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: spaceXSmall;
}

.modalFooterActions {
  display: flex;
  gap: spaceXSmall;
}