naive-ui/styles/Pagination.scss

@import './mixins/mixins.scss';
@import './theme/default.scss';

@include b(pagination) {
  display: inline-flex;
  @include m(transition-disabled) {
    @include b(pagination-item) {
      transition: none;
      path {
        transition: none;
      }
    }
  }
  @include b(select) {
    width: 120px;
  }
  @include b(pagination-quick-jumper) {
    white-space: nowrap;
    display: flex;
    width: 110px;
    line-height: 28px;
    @include b(input) {
      margin: 0 8px;
      input {
        padding-left: 6px;
        padding-right: 10px;
      }
    }
  }
  @include b(pagination-item) {
    position: relative;
    cursor: pointer;
    user-select: none;
    color: $pagination-color;
    min-width:28px;
    height:28px;
    padding-left: 4px;
    padding-right: 4px;
    box-sizing: border-box;
    transition: color .3s $default-cubic-bezier, box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
    path {
      transition: fill .3s $default-cubic-bezier;
    }
    &:not(:last-child) {
      margin-right: 10px;
    }
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius:6px;
    line-height: 28px;
    @include e(more-icon, arrow-icon) {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateY(-50%) translateX(-50%);
      path {
        fill: $pagination-color;
      }
      @include m(reverse) {
        transform: translateY(-50%) translateX(-50%) rotate(180deg);
      }
    }
    @include e(more-icon) {
      height: 16px;
    }
    @include e(arrow-icon) {
      height: 16px;
    }
    @include m(active) {
      background: $pagination-background-color--active;
      color: $pagination-color--active;
      box-shadow: inset 0 0 0 1px $pagination-color--active;
    }
    @include m(backward, forward) {
      box-shadow: inset 0 0 0 1px  $pagination-color;
      path {
        fill: $pagination-color;
      }
    }
    @include m(fast-backward, fast-forward) {
      @include e(more-icon) {
        display: block;
      }
      @include e(arrow-icon) {
        display: none;
      }
      path {
        fill: $pagination-color;
      }
    }
    @include m(disabled) {
      @include m(active) {
        background: $pagination-background-color--disabled-active;
        box-shadow: inset 0 0 0 1px $pagination-color--disabled;
      }
      @include m(backward, forward) {
        box-shadow: inset 0 0 0 1px $pagination-color--disabled;
      }
      path {
        fill: $pagination-color--disabled;
      }
      color: $pagination-color--disabled;
      cursor: not-allowed;
    }
    &:not(.n-pagination-item--disabled):hover {
      @include m(fast-backward, fast-forward) {
        @include e(more-icon) {
          display: none;
        }
        @include e(arrow-icon) {
          display: block;
          path {
            fill: $pagination-color--active;
          }
        }
        path {
          fill: $pagination-color;
        }
      }
    }
  }
}