birdpaper-ui/lib/pagination/src/style/pagination.less

一个通用的 vue3 UI组件库。A common vue3 UI component library.

@pagination-cls: ~"@{prefix}-pagination";

.@{pagination-cls} {
  position: relative;
  display: flex;
  .no-select;

  ul,
  &-container {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;

    .@{pagination-cls}-item {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      list-style: none;
      height: 30px;
      margin: 0;
      cursor: pointer;

      .bp-icon {
        width: 16px;
        height: 16px;
        fill: @gary-7;
      }

      &:not(:first-child) {
        margin-left: 10px;
      }

      .page-text {
        font-size: 12px;
        color: @gary-8;
        font-weight: normal;
      }
    }

    .@{pagination-cls}-item-disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .@{pagination-cls}-prev,
    .@{pagination-cls}-next,
    .@{pagination-cls}-pager {
      min-width: 30px;
      border-radius: 4px;
      fill: @gary-8;
      color: @gary-8;
      font-weight: normal;
      font-size: 12px;
      transition: all 0.2s ease;

      &:hover {
        background-color: @gary-2;
        transition: all 0.2s ease;
      }
    }

    .@{pagination-cls}-total {
      font-size: 12px;
      color: @gary-8;
      font-weight: normal;
      cursor: default;
    }

    .@{pagination-cls}-jumper {
      .bp-input {
        min-width: 42px;
        width: 42px;
        margin: 0 4px;
      }
    }

    .@{pagination-cls}-item-active {
      color: @primary-6;
      background-color: @primary-0;
      font-weight: bold;
      transition: all 0.2s ease;

      &:hover {
        color: @primary-6;
        background-color: @primary-0;
        font-weight: bold;
      }
    }
  }
}