naive-ui/styles/Pagination.scss

@import './mixins/mixins.scss';
@import './themes/vars.scss';

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