@workday/canvas-kit-css/pagination.css

The parent module that contains all Workday Canvas Kit CSS components

.cnvs-pagination-controls {
  box-sizing: border-box;
  display: flex;
  gap: var(--cnvs-sys-space-x1);
  align-items: center;
}


.cnvs-pagination-list {
  box-sizing: border-box;
  display: flex;
  margin-block: var(--cnvs-sys-space-zero);
  margin-inline: var(--cnvs-sys-space-zero);
  padding: var(--cnvs-sys-space-zero);
  list-style: none;
}


.cnvs-pagination-list-item {
  box-sizing: border-box;
  display: flex;
}


.cnvs-pagination-page-list {
  box-sizing: border-box;
  display: flex;
  margin: var(--cnvs-sys-space-zero);
  padding-inline-start: var(--cnvs-sys-space-zero);
  padding-inline-end: var(--cnvs-sys-space-zero);
  gap: var(--cnvs-sys-space-x1);
}


.cnvs-pagination-page-button {
  box-sizing: border-box;
  min-width: var(--cnvs-sys-space-x8);
  padding: var(--cnvs-sys-space-zero);
  font-weight: var(--cnvs-sys-font-weight-normal);
  --cnvs-button-label: var(--cnvs-sys-color-fg-default);
}

.cnvs-pagination-page-button:hover, .cnvs-pagination-page-button.hover {
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
}

.cnvs-pagination-page-button:active, .cnvs-pagination-page-button.active, .cnvs-pagination-page-button:focus-visible, .cnvs-pagination-page-button.focus {
  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
}

.cnvs-pagination-page-button:disabled, .cnvs-pagination-page-button.disabled {
  --cnvs-button-background: var(--cnvs-sys-color-fg-disabled);
}


.cnvs-pagination-page-button.toggled {
  font-weight: var(--cnvs-sys-font-weight-bold);
  --cnvs-button-background: var(--cnvs-brand-primary-base);
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
}

.cnvs-pagination-page-button.toggled:hover, .cnvs-pagination-page-button.toggled.hover, .cnvs-pagination-page-button.toggled:active, .cnvs-pagination-page-button.toggled.active, .cnvs-pagination-page-button.toggled:focus-visible, .cnvs-pagination-page-button.toggled.focus {
  --cnvs-button-background: var(--cnvs-brand-primary-base);
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
}

.cnvs-pagination-page-button.toggled:disabled, .cnvs-pagination-page-button.toggled.disabled {
  --cnvs-button-background: var(--cnvs-sys-color-fg-disabled);
}


.cnvs-pagination-additional-details {
  box-sizing: border-box;
  display: flex;
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-normal);
  line-height: var(--cnvs-sys-line-height-subtext-medium);
  font-size: var(--cnvs-sys-font-size-subtext-medium);
  letter-spacing: var(--cnvs-base-letter-spacing-100);
  color: var(--cnvs-sys-color-text-hint);
  margin-block-start: var(--cnvs-sys-space-x3);
}


.cnvs-pagination-additional-details.should-hide-details {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  height: 1px;
  min-height: 1px;
  width: 1px;
  min-width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  margin-block-start: var(--cnvs-sys-space-zero);
}


.cnvs-pagination-go-to-form {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--cnvs-sys-space-x2);
}

.cnvs-pagination-go-to-form :dir(rtl) {
  padding-inline-start: var(--cnvs-sys-space-x2);
  padding-inline-end: var(--cnvs-sys-space-x2);
}


.cnvs-pagination-go-to-text-input {
  box-sizing: border-box;
  min-width: 3.4375rem;
  width: 3.4375rem;
}


.cnvs-pagination-go-to-label {
  box-sizing: border-box;
  white-space: nowrap;
}


.cnvs-pagination {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}


.cnvs-pagination-nav {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}