censa_front_end_library/css/src/components/modal.css

React components library project for censa 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: 0px;
  margin: 0px 30px 10px 30px;
}
.modal-confirmation .Modal-header {
  border-bottom: 1px solid #e7e7e8;
}
.Modal--open img {
  width: 60px;
}
.alertModal {
  padding: var(--spacing-xl);
  align-items: center;
  border-radius: var(--Corner-300, 12px);
  border: 1px solid var(--Neutral-300, #e7e7e8);
}
.alertModal .Text {
  text-align: center;
}
.alertModal h4 {
  padding-top: var(--spacing-l);
  padding-bottom: var(--spacing-l);
}
.modalbtns {
  width: 100%;
}
.modalbtns .Button {
  width: 50%;
}
.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-2);
}

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

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

.Modal-description span {
  margin-bottom: 15px;
  float: left;
}
.OverlayBody.Modal-body {
  border-bottom: 1px solid #e7e7e8;
}
.cancelbtn {
  /* border-radius: 8px;
  background-color: #f4f3f5;
  color: #0a080c !important;
  border: 1px solid #f4f3f5;
  font-weight: 600; */
}
.Modal .OverlayFooter {
  padding: 32px 30px 32px 30px;
}