vuestic-ui/dist/esm-node/VaPagination.css

Vue 3 UI Framework

:root,
:host {
  --va-pagination-gap: 0.5rem;
  --va-pagination-input-background: var(--va-background-primary);
  --va-pagination-input-border-style: solid;
  --va-pagination-input-border-width: 1px 0;
  --va-pagination-input-text-align: center;
  --va-pagination-input-font-size: 1rem;
  --va-pagination-button-content-width: 0.5rem;
  --va-pagination-button-sm-size: var(--va-button-sm-size);
  --va-pagination-button-size: var(--va-button-size);
  --va-pagination-button-lg-size: var(--va-button-lg-ze);
}
.va-pagination {
  display: flex;
  font-family: var(--va-font-family);
}
.va-pagination__input {
  background: var(--va-pagination-input-background);
  border-style: var(--va-pagination-input-border-style);
  border-width: var(--va-pagination-input-border-width);
  text-align: var(--va-pagination-input-text-align);
  font-size: var(--va-pagination-input-font-size);
  font-weight: normal;
}
.va-pagination__input--sm {
  height: var(--va-pagination-button-sm-size);
}
.va-pagination__input--md {
  height: var(--va-pagination-button-size);
}
.va-pagination__input--lg {
  height: var(--va-pagination-button-lg-size);
}
.va-pagination__input--auto {
  height: auto;
}
.va-pagination .va-button.va-input {
  cursor: default;
}
.va-pagination .va-button--small {
  height: var(--va-pagination-button-sm-size);
  min-width: var(--va-pagination-button-sm-size);
}
.va-pagination .va-button--normal {
  height: var(--va-pagination-button-size);
  min-width: var(--va-pagination-button-size);
}
.va-pagination .va-button--large {
  height: var(--va-pagination-button-lg-size);
  min-width: var(--va-pagination-button-lg-size);
}
.va-pagination .va-button--ellipsis {
  cursor: default;
  opacity: 1;
}
.va-pagination .va-button--ellipsis > .va-button__content {
  opacity: 0.4;
}
.va-pagination .va-button:focus-visible {
  outline-offset: -2px;
}
.va-pagination .va-button:focus-visible:focus-visible {
  outline: 2px solid var(--va-focus) !important;
  border-radius: "inherit";
}
.va-pagination > :not(:first-child):not(:last-child) {
  border-radius: 0;
}
.va-pagination > :first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.va-pagination > :last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.va-pagination--gapped.va-pagination > .va-button {
  border-radius: var(--va-button-border-radius);
  margin-right: var(--va-pagination-gap);
  border-style: solid;
}
.va-pagination--gapped.va-pagination > .va-button:last-child {
  margin-right: 0;
}
.va-pagination--bordered.va-pagination > .va-button {
  border-style: solid;
}
.va-pagination--bordered.va-pagination > .va-button::before {
  border-radius: unset;
}
.va-pagination--rounded.va-pagination > .va-button {
  border-radius: 50%;
}
.va-pagination--rounded.va-pagination > .va-button::before {
  border-radius: inherit;
}
.va-pagination--rounded.va-pagination > .va-button.va-button--small.va-button--icon-only {
  height: var(--va-pagination-button-sm-size);
  width: var(--va-pagination-button-sm-size);
}
.va-pagination--rounded.va-pagination > .va-button.va-button--small .va-button__content {
  padding-right: var(--va-button-sm-content-px);
  padding-left: var(--va-button-sm-content-px);
}
.va-pagination--rounded.va-pagination > .va-button.va-button--normal.va-button--icon-only {
  height: var(--va-pagination-button-size);
  width: var(--va-pagination-button-size);
}
.va-pagination--rounded.va-pagination > .va-button.va-button--normal .va-button__content {
  padding-right: var(--va-button-content-px);
  padding-left: var(--va-button-content-px);
}
.va-pagination--rounded.va-pagination > .va-button.va-button--large.va-button--icon-only {
  height: var(--va-pagination-button-lg-size);
  width: var(--va-pagination-button-lg-size);
}
.va-pagination--rounded.va-pagination > .va-button.va-button--large .va-button__content {
  padding-right: var(--va-button-lg-content-px);
  padding-left: var(--va-button-lg-content-px);
}