@dnb/eufemia/components/pagination/style/dnb-pagination.css

DNB Eufemia Design System UI Library

/*
 * Pagination component
 *
 */
/*
 * Utilities
 */
.dnb-pagination {
  display: flex;
  flex-direction: column-reverse;
}
.dnb-pagination__bar, .dnb-pagination__loadbar, .dnb-pagination__bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.dnb-pagination__page, .dnb-pagination__loadbar {
  min-height: 6rem;
}
.dnb-pagination__bar {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.dnb-pagination--left .dnb-pagination__bar {
  justify-content: flex-start;
}
.dnb-pagination--center .dnb-pagination__bar {
  justify-content: center;
}
@media screen and (max-width: 40em) {
  .dnb-pagination--center .dnb-pagination__bar {
    justify-content: flex-start;
  }
}
.dnb-pagination--right .dnb-pagination__bar {
  justify-content: flex-end;
}
.dnb-pagination__bar__wrapper {
  display: flex;
  flex-flow: column wrap;
  row-gap: 0.5rem;
}
@media screen and (min-width: 72.00625em) {
  .dnb-pagination--layout-horizontal .dnb-pagination__bar__wrapper {
    flex-flow: row-reverse wrap;
    justify-content: space-between;
    flex: 1;
  }
}
.dnb-pagination--center .dnb-pagination__bar__wrapper {
  align-items: center;
}
.dnb-pagination--right .dnb-pagination__bar__wrapper {
  align-items: flex-end;
}
.dnb-pagination__bar__inner {
  gap: 0.5rem;
}
.dnb-pagination__button {
  max-width: 3.5rem;
}
.dnb-pagination__button--large-number {
  max-width: unset;
}
.dnb-pagination__loadbar {
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dnb-pagination__indicator {
  cursor: default;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: inherit;
}
.dnb-pagination__indicator__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: show-page 300ms ease-out forwards;
}
.dnb-pagination__dots {
  align-self: flex-end;
}
.dnb-pagination__marker {
  pointer-events: none;
  position: relative;
  height: 1px;
  width: 1px;
  margin: -1px 0 0 -1px;
  overflow: hidden;
}
.dnb-pagination__marker td, .dnb-pagination__marker__inner {
  padding: 0 !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.dnb-pagination__bar__skip {
  display: flex;
  column-gap: 1.5rem;
}

@keyframes show-page {
  from {
    transform: translate3d(0, -8px, 0);
    opacity: 0.1;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}