@innovaccer/design-system/css/src/components/emptyState.module.css

React components library project for Innovaccer Design System

.EmptyState {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.EmptyState-Wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  width: 100%;
}

.EmptyState-image {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.EmptyState-title {
  text-align: center;
  max-width: 480px;
}

.EmptyState-description {
  text-align: center;
  margin-top: var(--spacing-10);
  max-width: 360px;
}

.EmptyState-title--large {
  margin-top: var(--spacing-120);
}

.EmptyState-title--small {
  margin-top: var(--spacing-60);
}

.EmptyState-description--large {
  margin-bottom: var(--spacing-60);
}

.EmptyState-description--small {
  margin-bottom: var(--spacing-40);
}

.EmptyState-text {
  display: flex;
  text-align: center;
  justify-content: center;
}

.EmptyState-actions {
  display: flex;
  justify-content: center;
}

.EmptyState-title--compressed {
  margin-top: var(--spacing-40);
}
.EmptyState-title--standard {
  margin-top: var(--spacing-60);
}
.EmptyState-title--tight {
  margin-top: var(--spacing-30);
}

.EmptyState-actions--compressed {
  margin-top: var(--spacing-40);
}

.EmptyState-actions--standard {
  margin-top: var(--spacing-60);
}

.EmptyState-actions--tight {
  margin-top: var(--spacing-30);
}