examplepackageversion/css/src/components/pagination.css

React components library project for Innovaccer Design System

/* pagination */

.Pagination {
  display: flex;
  vertical-align: middle;
  flex-direction: row;
  flex-wrap: wrap;
}

.Pagination .Button {
  padding-left: var(--spacing);
  padding-right: var(--spacing);
}

.Pagination-buttonWrapper {
  display: flex;
  flex-direction: row;
}

.Pagination-pageIndex {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: var(--spacing-l);
  padding-right: var(--spacing-l);
}

.Pagination-MetricInput {
  width: var(--spacing-4);
  margin-right: var(--spacing);
  padding-left: var(--spacing);
  padding-right: var(--spacing);
}

.Pagination-MetricInput .MetricInput-input {
  text-align: center;
}
.Pagination-MetricInput .MetricInput-arrowIcons {
  display: none;
}

@media (max-width: 575px) {
  .Pagination-pageIndex {
    order: -1;
    flex-basis: 100%;
  }
  .Pagination-buttonWrapper {
    margin-top: var(--spacing);
    width: 50%;
  }
  .Pagination-buttonWrapper--next {
    justify-content: flex-start;
  }
  .Pagination-buttonWrapper--previous {
    justify-content: flex-end;
  }
}