choerodon-ui/pro/lib/pagination/style/index.less

An enterprise-class UI design language and React-based implementation

@import '../../../../lib/style/themes/default';
@import '../../../../lib/style/mixins/index';

.@{c7n-pro-prefix}-pagination {
  color: @pagination-color;
  line-height: 0.3rem;

  > * {
    vertical-align: middle;
  }

  &-size-changer:not(&-size-editable) .@{c7n-pro-prefix}-select,
  &-size-changer&-size-editable:not(:hover):not(:focus) .@{c7n-pro-prefix}-select:not(:hover):not(:focus) {
    border-color: @pagination-size-changer-not-editable-border-color;
  }

  &-size-changer {
    margin: @pagination-size-changer-margin;

    + .@{c7n-pro-prefix}-btn-wrapper {
      margin-left: 0.1rem;
    }
  }

  &-page-info {
    margin: 0 0.2rem;
  }

  &-pager {
    min-width: @pagination-pager-min-width;
    height: @pagination-pager-height;
  }

  &-quick-jumper {
    margin: @pagination-quick-jumper-margin;

    &-input {
      display: inline-block;
      padding-right: .05rem;
      line-height: 1;
      border: @border-width-base @border-style-base @pagination-quick-jumper-border-color;
      border-radius: @input-border-radius;
      transition: border @animation-duration-slow;

      &-focused {
        border-color: @input-focus-border-color;
      }

      &:hover {
        border-color: @input-hover-border-color;
      }

      .@{c7n-pro-prefix}-input-number-wrapper {
        vertical-align: baseline;
      }
    }
  }

  &-simple-pager {
    display: inline-block;
    height: 0.3rem;
    margin-right: 0.08rem;
    vertical-align: middle;

    input {
      position: relative;
      display: inline-block;
      width: 0.5rem;
      height: 0.3rem;
      margin: 0 0.08rem;
      padding: 0.04rem 0.11rem;
      color: rgba(0, 0, 0, 0.65);
      line-height: 1.5;
      -webkit-transition: all @animation-duration-slow;
      transition: all @animation-duration-slow;
    }
  }

  &-go-button {
    margin-left: 0.1rem;
  }
}