yonui-ys/lib/components/Pagination/index.less

yonui ys

@font-color-normal: #666;
@font-color-hover: #333;
@font-color-active: #fff;
@font-color-disable: #ccc;
@bg-white: #fff;
@grey-active: #adb4bc;
@grey-normal: #e4e4e4;
@pagination-input-height: 22px;

.u-pagination{
  display: flex;
  align-items: center;
  .u-select-arrow:hover:before{
    color: @font-color-hover;
  }
  .u-pagination-total,
  .data_per_select,
  .page_jump {
    font-size: 12px;
  }

  .u-pagination-list,
  .u-pagination-total,
  .page_jump {
    margin: 0;
  }

  .data_per_select {
    min-width: auto;
    margin: 0 8px 0 4px;
  }

  .u-pagination-total {
    margin-right: 4px;

    span {
      padding: 0;
    }
  }
}

.u-pagination-list{
  order: 0;
  margin-left: 4px;
  >li{
    >a{    
      border-color: @grey-normal;
      color: @font-color-normal;
      &:hover {
        background-color: @bg-white;
        color: @font-color-hover;
        border-color: @grey-active;
      }

    }
    &.active{
      >a,
      >a:hover {
        background-color: @grey-active;
        color: @font-color-active;
        border-color: @grey-active;
      }
    }
    &.u-pagination-next,
    &.u-pagination-prev {
      & > a {
        padding: 0;
        margin: 0 4px;
        border: 0;
        background: transparent;
        i {
          color: @font-color-normal;
        }
        &:hover i{
          color: @font-color-hover;
        }
      }

      &.disabled {
        cursor: not-allowed;
      }
    }
    
    &.disabled{
      & > a {
        cursor: not-allowed;
        i {
          color: @font-color-disable;
        }
      }
    }

    &:not(.u-pagination-prev):not(.u-pagination-next){
      & > a {
        min-width: 20px;
        height: 20px;
        line-height: 20px;
        padding: 0 6px;
        margin: 0 2px;
        border-radius: 4px;
        box-sizing: border-box;
        
        &:not(:hover){
          border-color: transparent;
        }
      }
    }
    &:not(.active):not(.u-pagination-prev):not(.u-pagination-next){
      & > a:hover{
        background: transparent;
      }
    }
  }
}

.ensu .pagination-delayload {
  &>ul::before {
    content: 'loading';
  }
}

.pagination-delayload {
  @timelimit: .5s;

  @keyframes flashbutton {
    0% {
      background: #e3e3e4;
      color: #e3e3e4;
      border-color: #e3e3e4;
    }

    50% {
      background: #adb4bc;
      color: #adb4bc;
      border-color: #adb4bc;
    }

    100% {
      background: #e3e3e4;
      color: #e3e3e4;
      border-color: #e3e3e4;
    }
  }

  &-text {
    line-height: 28px;
    font-size: 13px;
    color: #000;
    padding-right: 5px;
    user-select: none;
    cursor: not-allowed;
  }

  .u-pagination-total {
    display: none;
  }

  & .u-pagination-disabled-mask {
    background: rgba(255, 255, 255, 0) !important;
  }

  .u-pagination-list {
    .active>a {
      color: transparent;
    }

    &>li:not(.u-pagination-item-ellipsis):not(.iconBtn)>a {
      user-select: none;
      color: transparent;

      &:nth-child(odd)>a {
        background-color: #e3e3e4;
        border-color: #e3e3e4;
      }

      &:nth-child(even)>a {
        background-color: #adb4bc;
        border-color: #adb4bc;
      }
    }

    &>li:not(.u-pagination-item-ellipsis):not(.iconBtn) {
      &>a {
        animation-name: flashbutton;
        animation-duration: (@timelimit*2);
        animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-play-state: running;
      }

      &:nth-child(2)>a {
        background: #adb4bc;
        animation-delay: @timelimit;
      }

      &:nth-child(3)>a {
        animation-delay: .0s;
      }

      &:nth-child(4)>a {
        background: #adb4bc;
        animation-delay: @timelimit;
      }

      &:nth-child(5)>a {
        background: #e3e3e4;
        animation-delay: 0s;
      }

      &:nth-child(6)>a {
        background: #adb4bc;
        animation-delay: @timelimit;
      }

      &:nth-child(8)>a {
        background: #e3e3e4;
        animation-delay: 0s;
      }
    }

    .u-pagination-item-ellipsis {
      color: #777;
      font-weight: 999;
    }

    .iconBtn {
      user-select: none;
    }
  }


}

.pagination-new .u-pagination span {
  margin-left: 0;
  line-height: 1;
}

// form 下 pagination
.form {

  /*选配参照-分页*/
  .ant-modal.referModal.Table {
    .pagination-new .ant-pagination.mini ul.ant-select-dropdown-menu li {
      border: none !important;
      font-size: 12px;
      margin: 0px !important;
      padding: 0px;
      line-height: 30px;
      text-align: center;
    }
  }
}

// modal 下 pagination
.modal {

  .ant-modal.referModal.Table,
  .ant-modal.TreeTable {
    .pagination-new {
      padding-bottom: 0px;
    }

    .readOnlyTable {
      .ant-pagination {

        li.ant-pagination-prev,
        li.ant-pagination-next {
          border: 1px solid #e4e4e4 !important;
        }

        li.ant-pagination-item {
          border: 1px solid #e4e4e4 !important;
        }

        li.ant-pagination-prev,
        .ant-pagination-item {
          margin: 0 4px !important;
        }

        li.ant-pagination-next {
          margin: 0 4px !important;
        }

        li.ant-pagination-disabled.ant-pagination-prev:hover a,
        li.ant-pagination-disabled.ant-pagination-prev:visited a {
          color: #d7d7d7;
        }

        .ant-pagination-options {
          .ant-select-sm {
            .ant-select-selection--single {
              height: 30px !important;
            }
          }
        }
      }

      .pagination-new .ant-pagination-total-text {
        border: none !important;
      }

      .ant-pagination-options {
        position: relative;

        .ant-select {
          width: 80px;

          .ant-select-selection-selected-value {
            font-size: 12px;
          }

          .ant-select-selection__rendered {
            height: @pagination-input-height;
            line-height: 26px;
          }

          .ant-select-arrow {
            margin-top: 0px;
            top: 0px;
          }
        }

        .ant-pagination-options-quick-jumper {
          height: 30px;
          width: 110px;

          input {
            width: 50px;
            height: 30px;
          }
        }
      }
    }
  }
}

// pagination 自覆写
.pagination-new {
  float: right;
  padding-bottom: 8px;
  color: #666;
  padding-right: 20px;
  margin-top: 10px;

  .pag-selected-op {
    display: none
  }

  span {
    line-height: @pagination-input-height;
    margin-left: 10px;
    color: #666;
  }

  i {
    font-style: normal;
  }
}

// 分页中的下拉高度
.u-pagination-sm+.u-pagination-total+.data_per_select .u-select .u-select-selection {
  height: @pagination-input-height;
  .u-select-selection-rendered{
    line-height: 20px;
  }
}

.u-pagination-sm+.u-pagination-total+.data_per_select+.page_jump>.page_jump_value {
  height: @pagination-input-height;
  line-height: @pagination-input-height;
}

// 调整分页 DOM 元素显示顺序
.pagination-new {
  .u-pagination {
    display: flex;

    .u-pagination-total {
      order: -1;
    }

    .u-pagination-list {
      order: 0;
    }

    .data_per_select {
      .u-select {
        width: 65px;
      }
    }
  }
}

// fix: 参照框中表格分页多时，换行问题
.modal-body .pagination-new {
  .u-pagination {
    margin: 5px 0;

    .u-pagination-total {
      white-space: nowrap;
    }

    .u-pagination-list {
      line-height: @pagination-input-height - 2;
    }
  }
}

.u-pagination .data_per_select>span:first-child {
  display: none;
}

.pagination-new .u-pagination .data_per_select .u-select {
  width: 64px;
  height: 22px;
  margin-left: 0;
}

.u-pagination-list {
  &>li.u-pagination-prev,
  &>li.u-pagination-next {
    a {
      line-height: 20px;
      height: 20px;
      width: 20px;
    }
  }
}

// 工作台分页
.workbench-classname .u-pagination-sm+.u-pagination-total+.data_per_select>span {
  margin-left: 4px;
}

// 工作台分页
.workbench-classname .u-pagination-sm+.u-pagination-total+.data_per_select>span {
  margin-left: 4px;
}

// 工作台分页
.workbench-classname .u-pagination-sm+.u-pagination-total+.data_per_select>span {
  margin-left: 4px;
}

// 工作台分页
.workbench-classname .u-pagination-sm+.u-pagination-total+.data_per_select>span {
  margin-left: 4px;
}