storybookdesignpack/css/src/components/pagination.css

React components library project for censa 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;
}

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

@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;
  }
}


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

}
.MetricInput--regular {
  height: var(--spacing-xl);
  padding-left: var(--spacing-l);
}
.MetricInput-input {
  display: flex;
  width: 100%;
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size);
  line-height: var(--font-height-s);
  color: var(--night);
  padding: 0;
  border: none;
  background: transparent;
}
.MetricInput {
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  border-radius: var(--spacing-m);
  border: 1px solid var(--stone);
  padding-right: var(--spacing-m);
  background: var(--white);
  transition: var(--duration--fast-01) var(--standard-productive-curve);
}