storybookdesignpack/css/src/components/fullscreenModal.css

React components library project for censa Design System

@keyframes fullscreenModal-open {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 100;
    transform: translateY(0px);
  }
}

@keyframes fullscreenModal-close {
  from {
    opacity: 100;
    transform: translateY(0px);
  }
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

.FullscreenModal {
  position: fixed !important;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding-top: var(--spacing-4);
  background-color: var(--white);
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.FullscreenModal-animation--open {
  animation: fullscreenModal-open 240ms cubic-bezier(0, 0, 0.3, 1);
}

.FullscreenModal-animation--close {
  animation: fullscreenModal-close 120ms cubic-bezier(0.4, 0.14, 1, 1);
}

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

.FullscreenModal-footer {
  justify-content: flex-end;
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}

.FullscreenModal-body {
  padding: var(--spacing-2) var(--spacing-xl);
}