smart-webcomponents-react/source/styles/default/smart.pager.css

[](https://jqwidgets.com/license/)

/*smart-pager*/
.smart-pager-middle-buttons-container {
  order: 1;
  height: 100%;
}

.smart-pager-far-buttons-container {
  order: 2;
  height: 100%;
}
.smart-pager-far-buttons-container.near {
  order: 0;
}
.smart-pager-far-buttons-container.far {
  order: 2;
}

.smart-pager-input-and-label-container {
  order: 3;
}
.smart-pager-input-and-label-container.near {
  order: -2;
}

.smart-pager-size-selector-and-label-container {
  order: 4;
}
.smart-pager-size-selector-and-label-container.near {
  order: -1;
}

.smart-pager-summary-container {
  order: 5;
}
.smart-pager-summary-container.near {
  order: -2;
}

.smart-pager-near-buttons-container {
  order: 0;
  height: 100%;
}
.smart-pager-near-buttons-container.near {
  order: 0;
}
.smart-pager-near-buttons-container.far {
  order: 2;
}

smart-pager {
  min-width: 300px;
  height: var(--smart-pager-default-height);
  justify-content: center;
  padding: var(--smart-pager-padding);
  --smart-item-border-radius: 100%;
  --smart-item-border-top-left-radius: 100%;
  --smart-item-border-top-right-radius: 100%;
  --smart-item-border-bottom-left-radius: 100%;
  --smart-item-border-bottom-right-radius: 100%;
}
smart-pager.smart-element {
  overflow: visible;
  border-radius: 0px;
  background: var(--smart-surface);
  color: var(--smart-surface-color);
}
smart-pager:focus {
  border-color: var(--smart-outline);
}
smart-pager > .smart-container, smart-pager.smart-container {
  flex-direction: row;
  display: flex;
  align-items: center;
}
smart-pager .smart-pager-near-buttons-container,
smart-pager .smart-pager-far-buttons-container,
smart-pager .smart-pager-middle-buttons-container,
smart-pager .smart-pager-input-and-label-container,
smart-pager .smart-pager-size-selector-and-label-container,
smart-pager .smart-pager-summary-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 0px 4px;
}
smart-pager .smart-pager-page-index-selectors-container {
  display: flex;
  color: var(--smart-pager-color);
  width: auto;
  height: 100%;
  outline: none;
  align-items: center;
}
smart-pager .smart-pager-page-index-selectors-container:focus .smart-pager-page-index-selector[selected] {
  text-decoration: underline;
}
smart-pager .smart-pager-label {
  display: flex;
  border: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 100%;
  margin: 0px 8px;
}
smart-pager .smart-pager-label span {
  padding: 2px;
}
smart-pager .smart-pager-button {
  display: flex;
  font-size: inherit;
  font-family: inherit;
  align-items: center;
  justify-content: center;
  border-top-left-radius: var(--smart-item-border-top-left-radius);
  border-top-right-radius: var(--smart-item-border-top-right-radius);
  border-bottom-left-radius: var(--smart-item-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-item-border-bottom-right-radius);
  width: var(--smart-pager-button-width);
  height: var(--smart-pager-button-height);
  position: relative;
  overflow: hidden;
  /*margin-left: -1px;*/
}
smart-pager .smart-pager-button:hover {
  background: var(--smart-ui-state-hover);
  border-color: var(--smart-ui-state-border-hover);
  color: var(--smart-ui-state-color-hover);
}
smart-pager .smart-pager-button:active {
  background: var(--smart-ui-state-active);
  border-color: var(--smart-ui-state-border-active);
  color: var(--smart-ui-state-color-active);
}
smart-pager .smart-pager-button:active .smart-ripple {
  background-color: var(--smart-ui-state-color-active);
}
smart-pager .smart-pager-button[disabled] {
  opacity: 0.55;
}
smart-pager .smart-pager-button .smart-ripple {
  background-color: var(--smart-ui-state-active);
}
smart-pager .smart-pager-page-index-selector {
  font-size: inherit;
  font-family: inherit;
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  width: var(--smart-pager-page-index-selector-width);
  height: var(--smart-pager-page-index-selector-height);
  position: relative;
  margin-left: var(--smart-pager-page-index-selector-horizontal-offset);
  border-top-left-radius: var(--smart-item-border-top-left-radius);
  border-top-right-radius: var(--smart-item-border-top-right-radius);
  border-bottom-left-radius: var(--smart-item-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-item-border-bottom-right-radius);
}
smart-pager .smart-pager-page-index-selector:first-child {
  margin-left: -1px;
}
smart-pager .smart-pager-page-index-selector:hover {
  background-color: var(--smart-ui-state-hover);
  color: var(--smart-ui-state-color-hover);
  border-color: var(--smart-ui-state-border-hover);
}
smart-pager .smart-pager-page-index-selector .smart-ripple {
  background-color: var(--smart-ui-state-active);
}
smart-pager .smart-pager-page-index-selector[selected] {
  background-color: var(--smart-ui-state-active);
  color: var(--smart-ui-state-color-active);
  border-color: var(--smart-ui-state-border-active);
  box-shadow: var(--smart-elevation-2);
}
smart-pager .smart-pager-page-index-selector[selected] .smart-ripple {
  background-color: var(--smart-ui-state-color-active);
}
smart-pager .smart-previous-ellipsis-button,
smart-pager .smart-next-ellipsis-button {
  width: var(--smart-pager-page-index-ellipsis-selector-width);
  height: var(--smart-pager-page-index-ellipsis-selector-height);
}
smart-pager .smart-page-size-selector {
  width: var(--smart-pager-page-size-selector-width);
  background: var(--smart-background);
  color: var(--smart-background-color);
  --smart-item-border-top-left-radius: var(--smart-border-radius);
  --smart-item-border-top-right-radius: var(--smart-border-radius);
  --smart-item-border-bottom-left-radius: var(--smart-border-radius);
  --smart-item-border-bottom-right-radius: var(--smart-border-radius);
}
smart-pager .smart-pager-input {
  width: var(--smart-pager-input-width);
  box-sizing: border-box;
  padding: 0px var(--smart-editor-label-padding);
  margin: 0px 5px;
  background: var(--smart-background);
  color: var(--smart-background-color);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
  border-color: var(--smart-border);
  border-style: solid;
  border-width: var(--smart-border-width);
  height: var(--smart-text-box-default-height);
}
smart-pager:not([show-navigation-button-labels]) .smart-pager-button {
  border-top-left-radius: var(--smart-item-border-top-left-radius);
  border-top-right-radius: var(--smart-item-border-top-right-radius);
  border-bottom-left-radius: var(--smart-item-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-item-border-bottom-right-radius);
  width: var(--smart-pager-page-index-selector-width);
}
smart-pager[disabled] .smart-pager-page-index-selector {
  user-select: none;
  cursor: default;
}

smart-pager[right-to-left] > .smart-container,
smart-pager[right-to-left] .smart-pager-middle-buttons-container,
smart-pager[right-to-left] .smart-pager-near-buttons-container,
smart-pager[right-to-left] .smart-pager-far-buttons-container,
smart-pager[right-to-left] .smart-pager-page-index-selectors-container,
smart-pager[right-to-left] .smart-pager-size-selector-and-label-container,
smart-pager[right-to-left] .smart-pager-input-and-label-container,
smart-pager[right-to-left] .smart-pager-label {
  flex-direction: row-reverse;
}
smart-pager[right-to-left] .smart-arrow-left:after,
smart-pager[right-to-left] .smart-arrow-right:after,
smart-pager[right-to-left] .smart-arrow-left-first:after,
smart-pager[right-to-left] .smart-arrow-right-last:after {
  transform: rotate(180deg);
  transform-origin: center;
}
smart-pager[right-to-left] .smart-pager-label > span,
smart-pager[right-to-left] .smart-first-button,
smart-pager[right-to-left] .smart-last-button,
smart-pager[right-to-left] .smart-next-page-button,
smart-pager[right-to-left] .smart-previous-page-button,
smart-pager[right-to-left] .smart-pager-page-index-selector,
smart-pager[right-to-left] .smart-pager-input,
smart-pager[right-to-left] .smart-pager-label {
  direction: rtl;
}