examplepackageversion/css/src/components/modal.css

React components library project for Innovaccer Design System

@keyframes modal-open {
  from {
    top: 20px;
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modal-close {
  from {
    top: 104px;
    opacity: 1;
  }
  to {
    top: 124px;
    opacity: 0;
  }
}

.Modal {
  position: fixed !important;
  max-height: calc(100vh - 128px);
  box-shadow: var(--shadow-m);
  background-color: var(--white);
  border-radius: var(--spacing);
  overflow: auto;
  flex-direction: column;
  display: none;
  margin: auto;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: min-content;
}

.Modal--open {
  display: flex;
}

.Modal-animation--open {
  animation: modal-open var(--duration--moderate-02) var(--entrance-expressive-curve);
}

.Modal-animation--close {
  animation: modal-close var(--duration--fast-02) var(--exit-expressive-curve);
}

.Modal-header {
  display: flex;
  justify-content: flex-start;
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-l);
  padding-right: var(--spacing-2);
}

.Modal-header--withSeperator {
  border-bottom: var(--border);
}

.Modal-description {
  padding: var(--spacing) 0;
}

.Modal-footer {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
  justify-content: flex-end;
  position: absolute;
  bottom: 0;
}

.Modal-footer--withSeperator {
  border-top: var(--border);
}

.Modal-body {
  padding: 0 var(--spacing-xl);
}

.Modal-body--withMargin {
  margin-bottom: 80px;
}

.Modal-body--withPadding {
  padding-bottom: var(--spacing-2);
}