nishant-design-system/lib/components/Modal/Modal.module.css

Sense UI components library

@value (colorBackgroundTertiary, colorBackgroundPrimary, colorBackdropFill) from '../../styles/variables/_color.css';
@value (spaceNone, spaceSmall, spaceMedium, spaceXXSmall, spaceHalfFluid, spaceNegHalfFluid) from '../../styles/variables/_space.css';
@value (sizeFluid, size60) from '../../styles/variables/_size.css';
@value (elevationNone, elevationModal, elevationBackdrop) from '../../styles/variables/_elevation.css';
@value (opacity100, opacity0) from '../../styles/variables/_opacity.css';
@value (motionDurationNormal, motionEaseInEaseOut) 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) scale(0.95);
  opacity: opacity0;
  composes: boxShadow4 from '../../styles/shadow.module.css';
  display: flex;
  max-height: sizeFluid;
  flex-flow: column;
  background: colorBackgroundTertiary;
  overflow: auto;
  z-index: elevationModal;
  transition: opacity motionDurationNormal, transform motionDurationNormal;
  border-radius: borderRadiusMedium;
}

.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: spaceNone spaceSmall spaceNone spaceMedium;
  min-height: size60;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: spaceMedium;
}

.headerContent {
  display: flex;
}

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

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

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