@conduction/components/src/components/Pagination/Pagination.module.css

React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)

:root {
  --conduction-pagination-container-background-color: unset;
  --conduction-pagination-container-padding-inline-start: 0px;
  --conduction-pagination-container-padding-inline-end: 0px;
  --conduction-pagination-container-padding-block-start: 0px;
  --conduction-pagination-container-padding-block-end: 0px;

  --conduction-pagination-item-gap: 8px;
  --conduction-pagination-item-color: #000000;
  --conduction-pagination-item-background-color: #ffffff;
  --conduction-pagination-item-border-radius: 4px;
  --conduction-pagination-item-padding-inline-start: 8px;
  --conduction-pagination-item-padding-inline-end: 8px;
  --conduction-pagination-item-padding-block-start: 8px;
  --conduction-pagination-item-padding-block-end: 8px;
  --conduction-pagination-item-font-size: var(--skeleton-font-size-md);
  --conduction-pagination-item-font-weight: var(--skeleton-font-weight-normal);
  --conduction-pagination-item-font-family: inherit;
  --conduction-pagination-item-border-width: unset;
  --conduction-pagination-item-border-style: unset;
  --conduction-pagination-item-border-color: unset;
  /* --conduction-pagination-item-border-bottom-width: unset;
  --conduction-pagination-item-border-bottom-style: unset;
  --conduction-pagination-item-border-bottom-color: unset; */
  /* --conduction-pagination-item-text-decoration: unset; */
  /* --conduction-pagination-item-text-decoration-thickness: 0px; */

  /* --conduction-pagination-navigation-button-background-color: #4376fc; */
  /* --conduction-pagination-navigation-button-color: #ffffff; */
  /* --conduction-pagination-navigation-button-border-width: 1px; */
  /* --conduction-pagination-navigation-button-border-style: solid; */
  /* --conduction-pagination-navigation-button-border-color: #4376fc; */
  /* --conduction-pagination-navigation-button-border-bottom-width: 1px; */
  /* --conduction-pagination-navigation-button-border-bottom-style: solid; */
  /* --conduction-pagination-navigation-button-border-bottom-color: #4376fc; */
  /* --conduction-pagination-navigation-button-border-radius: 1px; */
  --conduction-pagination-navigation-button-padding-inline-start: 8px;
  --conduction-pagination-navigation-button-padding-inline-end: 8px;
  --conduction-pagination-navigation-button-padding-block-start: 0px;
  --conduction-pagination-navigation-button-padding-block-end: 0px;

  --conduction-pagination-navigation-button-disabled-color: #d1d1d1;
  --conduction-pagination-navigation-button-disabled-background-color: #fefefe;
  /* --conduction-pagination-navigation-button-disabled-border-width: 1px; */
  /* --conduction-pagination-navigation-button-disabled-border-style: solid; */
  /* --conduction-pagination-navigation-button-disabled-border-color: #4376fc; */
  /* --conduction-pagination-navigation-button-disabled-border-bottom-width: 1px; */
  /* --conduction-pagination-navigation-button-disabled-border-bottom-style: solid; */
  /* --conduction-pagination-navigation-button-disabled-border-bottom-color: #4376fc; */
  /* --conduction-pagination-navigation-button-disabled-border-radius: 1px; */

  --conduction-pagination-navigation-button-hover-color: #d1d1d1;
  --conduction-pagination-navigation-button-hover-background-color: #fefefe;
  /* --conduction-pagination-navigation-button-hover-border-width: 1px; */
  /* --conduction-pagination-navigation-button-hover-border-style: solid; */
  /* --conduction-pagination-navigation-button-hover-border-color: #4376fc; */
  /* --conduction-pagination-navigation-button-hover-border-bottom-width: 1px; */
  /* --conduction-pagination-navigation-button-hover-border-bottom-style: solid; */
  /* --conduction-pagination-navigation-button-hover-border-bottom-color: #4376fc; */
  /* --conduction-pagination-navigation-button-hover-border-radius: 1px; */

  --conduction-pagination-current-page-background-color: #4376fc;
  --conduction-pagination-current-page-color: #ffffff;
  --conduction-pagination-current-page-font-weight: bold;
  --conduction-pagination-current-page-text-decoration: unset;
  --conduction-pagination-current-page-border-width: unset;
  --conduction-pagination-current-page-border-style: unset;
  --conduction-pagination-current-page-border-color: unset;
  /* --conduction-pagination-current-page-border-bottom-width: unset; */
  /* --conduction-pagination-current-page-border-bottom-style: unset; */
  /* --conduction-pagination-current-page-border-bottom-color: unset; */

  --conduction-pagination-page-hover-color: #4376fc;
  --conduction-pagination-page-hover-background-color: #ffffff;
  --conduction-pagination-page-hover-text-decoration: unset;
  --conduction-pagination-page-hover-text-decoration-thickness: 0px;
  --conduction-pagination-page-hover-border-width: unset;
  --conduction-pagination-page-hover-border-style: unset;
  --conduction-pagination-page-hover-border-color: unset;
  /* --conduction-pagination-page-hover-border-bottom-width: unset; */
  /* --conduction-pagination-page-hover-border-bottom-style: unset; */
  /* --conduction-pagination-page-hover-border-bottom-color: unset; */
}

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style-type: none;
  gap: var(--conduction-pagination-item-gap);
  background-color: var(--conduction-pagination-container-background-color);
  padding-inline-start: var(--conduction-pagination-container-padding-inline-start);
  padding-inline-end: var(--conduction-pagination-container-padding-inline-end);
  padding-block-start: var(--conduction-pagination-container-padding-block-start);
  padding-block-end: var(--conduction-pagination-container-padding-block-end);
  user-select: none;
}

.container > li.currentPage > a {
  color: var(--conduction-pagination-current-page-color);
  background-color: var(--conduction-pagination-current-page-background-color);
  border-width: var(--conduction-pagination-current-page-border-width);
  border-style: var(--conduction-pagination-current-page-border-style);
  border-color: var(--conduction-pagination-current-page-border-color);
  border-bottom-width: var(--conduction-pagination-current-page-border-bottom-width, var(--conduction-pagination-current-page-border-width));
  border-bottom-style: var(--conduction-pagination-current-page-border-bottom-style, var(--conduction-pagination-current-page-border-style));
  border-bottom-color: var(--conduction-pagination-current-page-border-bottom-color, var(--conduction-pagination-current-page-border-color));
  border-radius: var(--conduction-pagination-item-border-radius);
  padding-inline-start: var(--conduction-pagination-item-padding-inline-start);
  padding-inline-end: var(--conduction-pagination-item-padding-inline-end);
  padding-block-start: var(--conduction-pagination-item-padding-block-start);
  padding-block-end: var(--conduction-pagination-item-padding-block-end);
  font-size: var(--conduction-pagination-item-font-size);
  font-weight: var(--conduction-pagination-current-page-font-weight);
  font-family: var(--conduction-pagination-item-font-family);
  text-decoration: var(--conduction-pagination-current-page-text-decoration);
  text-decoration-thickness: var(--conduction-pagination-current-page-text-decoration-thickness);
}

.container > li:not(.previous):not(.next):not(.currentPage) > a {
  color: var(--conduction-pagination-item-color);
  background-color: var(--conduction-pagination-item-background-color);
  border-width: var(--conduction-pagination-item-border-width);
  border-style: var(--conduction-pagination-item-border-style);
  border-color: var(--conduction-pagination-item-border-color);
  border-bottom-width: var(--conduction-pagination-item-border-bottom-width, var(--conduction-pagination-item-border-width));
  border-bottom-style: var(--conduction-pagination-item-border-bottom-style, var(--conduction-pagination-item-border-style));
  border-bottom-color: var(--conduction-pagination-item-border-bottom-color, var(--conduction-pagination-item-border-color));
  border-radius: var(--conduction-pagination-item-border-radius);
  padding-inline-start: var(--conduction-pagination-item-padding-inline-start);
  padding-inline-end: var(--conduction-pagination-item-padding-inline-end);
  padding-block-start: var(--conduction-pagination-item-padding-block-start);
  padding-block-end: var(--conduction-pagination-item-padding-block-end);
  font-size: var(--conduction-pagination-item-font-size);
  font-weight: var(--conduction-pagination-item-font-weight);
  font-family: var(--conduction-pagination-item-font-family);
  text-decoration: var(--conduction-pagination-item-text-decoration);
}

.button {
  pointer-events: none;
}

.disabled:hover,
.currentPage:hover {
  cursor: not-allowed;
}

.container > li.disabled > a > .button {
  color: var(--conduction-pagination-navigation-button-disabled-color) !important;
  background-color: var(--conduction-pagination-navigation-button-disabled-background-color) !important;
  border-width: var(--conduction-pagination-navigation-button-disabled-border-width, var(--utrecht-button-border-width)) !important;
  border-style: var(--conduction-pagination-navigation-button-disabled-border-style, var(--utrecht-button-border-style)) !important;
  border-color: var(--conduction-pagination-navigation-button-disabled-border-color, var(--utrecht-button-border-color)) !important;
  border-bottom-width: var(--conduction-pagination-navigation-button-disabled-border-bottom-width, var(--utrecht-button-border-bottom-width)) !important;
  border-bottom-style: var(--conduction-pagination-navigation-button-disabled-border-bottom-style, var(--utrecht-button-border-bottom-style)) !important;
  border-bottom-color: var(--conduction-pagination-navigation-button-disabled-border-bottom-color, var(--utrecht-button-border-bottom-color)) !important;
  border-radius: var(--conduction-pagination-navigation-button-disabled-border-radius, var(--utrecht-button-border-radius)) !important;
}

.container > li:hover:not(.disabled) > a > .button {
  color: var(--conduction-pagination-navigation-button-hover-color) !important;
  background-color: var(--conduction-pagination-navigation-button-hover-background-color) !important;
  border-width: var(--conduction-pagination-navigation-button-hover-border-width, var(--utrecht-button-border-width)) !important;
  border-style: var(--conduction-pagination-navigation-button-hover-border-style, var(--utrecht-button-border-style)) !important;
  border-color: var(--conduction-pagination-navigation-button-hover-border-color, var(--utrecht-button-border-color)) !important;
  border-bottom-width: var(--conduction-pagination-navigation-button-hover-border-bottom-width, var(--utrecht-button-border-bottom-width)) !important;
  border-bottom-style: var(--conduction-pagination-navigation-button-hover-border-bottom-style, var(--utrecht-button-border-bottom-style)) !important;
  border-bottom-color: var(--conduction-pagination-navigation-button-hover-border-bottom-color, var(--utrecht-button-border-bottom-color)) !important;
  border-radius: var(--conduction-pagination-navigation-button-hover-border-radius, var(--utrecht-button-border-radius)) !important;
}

.container > li:hover:not(.disabled):not(.currentPage) {
  cursor: pointer;
}

.container > li:hover:not(.disabled):not(.currentPage):not(.next):not(.previous) > a {
  color: var(--conduction-pagination-page-hover-color);
  background-color: var(--conduction-pagination-page-hover-background-color);
  text-decoration: var(--conduction-pagination-page-hover-text-decoration);
  text-decoration-thickness: var(--conduction-pagination-page-hover-text-decoration-thickness);
  border-width: var(--conduction-pagination-page-hover-border-width);
  border-style: var(--conduction-pagination-page-hover-border-style);
  border-color: var(--conduction-pagination-page-hover-border-color);
  border-bottom-width: var(--conduction-pagination-page-hover-border-bottom-width, var(--conduction-pagination-page-hover-border-width));
  border-bottom-style: var(--conduction-pagination-page-hover-border-bottom-style, var(--conduction-pagination-page-hover-border-style));
  border-bottom-color: var(--conduction-pagination-page-hover-border-bottom-color, var(--conduction-pagination-page-hover-border-color));
}

.button {
  background-color: var(--conduction-pagination-navigation-button-background-color, var(--utrecht-button-background-color)) !important;
  color: var(--conduction-pagination-navigation-button-color, var(--utrecht-button-color)) !important;
  border-width: var(--conduction-pagination-navigation-button-border-width, var(--utrecht-button-border-width)) !important;
  border-style: var(--conduction-pagination-navigation-button-border-style, var(--utrecht-button-border-style)) !important;
  border-color: var(--conduction-pagination-navigation-button-border-color, var(--utrecht-button-border-color)) !important;
  border-bottom-width: var(--conduction-pagination-navigation-button-border-bottom-width, var(--utrecht-button-border-bottom-width)) !important;
  border-bottom-style: var(--conduction-pagination-navigation-button-border-bottom-style, var(--utrecht-button-border-bottom-style)) !important;
  border-bottom-color: var(--conduction-pagination-navigation-button-border-bottom-color, var(--utrecht-button-border-bottom-color)) !important;
  border-radius: var(--conduction-pagination-navigation-button-border-radius, var(--utrecht-button-border-radius)) !important;
  padding-inline-start: var(--conduction-pagination-navigation-button-padding-inline-start) !important;
  padding-inline-end: var(--conduction-pagination-navigation-button-padding-inline-end) !important;
  padding-block-start: var(--conduction-pagination-navigation-button-padding-block-start) !important;
  padding-block-end: var(--conduction-pagination-navigation-button-padding-block-end) !important;
}