react-responsive-pagination/themes/bootstrap.css

React component for responsive pagination

/*
Bootstrap theme [light only]
(see ./bootstrap-light-dark.css for auto light/dark version of this theme)

Want to override color variables? See reference at:
https://github.com/jonelantha/react-responsive-pagination/tree/main/packages/react-responsive-pagination/themes/bootstrap.md
*/

.pagination {
  font-family: var(
    --pagination-font-family,
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    'Noto Sans',
    'Liberation Sans',
    Arial,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji'
  );
  font-weight: var(--pagination-font-weight, 400);
  line-height: var(--pagination-line-height, 1.5);
  display: flex;
  padding-left: 0;
  margin-top: var(--pagination-margin-top, 0);
  margin-bottom: var(--pagination-margin-bottom, 0);
  list-style: none;
  justify-content: var(
    --pagination-justify-content,
    var(--pagination-justify-content-fb)
  );
}

.pagination .page-link {
  position: relative;
  display: block;
  padding: var(--pagination-padding-y, 0.375rem) var(--pagination-padding-x, 0.75rem);
  font-size: var(--pagination-font-size, 1rem);
  color: var(--pagination-color, #0d6efd);
  text-decoration: none;
  background-color: var(--pagination-bg, #fff);
  border: var(--pagination-border-width, 1px) solid
    var(--pagination-border-color, #dee2e6);
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .pagination .page-link {
    transition: none;
  }
}
@media (hover: hover) {
  .pagination .page-link:hover {
    z-index: 2;
    color: var(--pagination-hover-color, #0a58ca);
    background-color: var(--pagination-hover-bg, #e9ecef);
    border-color: var(
      --pagination-hover-border-color,
      var(--pagination-border-color, #dee2e6)
    );
  }
}

.pagination .page-link:focus {
  z-index: 3;
  color: var(--pagination-focus-color, var(--pagination-hover-color, #0a58ca));
  background-color: var(--pagination-focus-bg, var(--pagination-hover-bg, #e9ecef));
  outline: 0;
  box-shadow: var(
    --pagination-focus-box-shadow,
    0 0 0 0.25rem rgba(13, 110, 253, 0.25)
  );
}
.pagination .active > .page-link {
  z-index: 3;
  color: var(--pagination-active-color, #fff);
  background-color: var(--pagination-active-bg, var(--pagination-color, #0d6efd));
  border-color: var(
    --pagination-active-border-color,
    var(--pagination-color, #0d6efd)
  );
}
.pagination .disabled > .page-link {
  color: var(--pagination-disabled-color, #6c757d);
  pointer-events: none;
  background-color: var(--pagination-disabled-bg, var(--pagination-bg, #fff));
  border-color: var(
    --pagination-disabled-border-color,
    var(--pagination-border-color, #dee2e6)
  );
}

.pagination .page-item:not(:first-child) .page-link {
  margin-left: -1px;
}
.pagination .page-item:first-child .page-link {
  border-top-left-radius: var(--pagination-border-radius, 0.375rem);
  border-bottom-left-radius: var(--pagination-border-radius, 0.375rem);
}
.pagination .page-item:last-child .page-link {
  border-top-right-radius: var(--pagination-border-radius, 0.375rem);
  border-bottom-right-radius: var(--pagination-border-radius, 0.375rem);
}

.pagination.pagination-lg {
  --pagination-padding-x: 1.5rem;
  --pagination-padding-y: 0.75rem;
  --pagination-font-size: 1.25rem;
  --pagination-border-radius: 0.5rem;
}

.pagination.pagination-sm {
  --pagination-padding-x: 0.5rem;
  --pagination-padding-y: 0.25rem;
  --pagination-font-size: 0.875rem;
  --pagination-border-radius: 0.25rem;
}

.pagination.justify-content-start {
  --pagination-justify-content-fb: flex-start;
}

.pagination.justify-content-end {
  --pagination-justify-content-fb: flex-end;
}

.pagination.justify-content-center {
  --pagination-justify-content-fb: center;
}