atui/src/styles/pagination.less

components built with Vue.js

// Pagination
// --------------------------------------------------
@prefix-cls-pagination: e("@{prefix-cls}-pagination");

@pagination-color:                     #666;
@pagination-bg:                        #fff;
@pagination-border:                    #d9d9d9;

@pagination-hover-color:               tint(@primary-color, 40%);

@pagination-current-color:              #fff;
@pagination-current-bg:                 @primary-color;
@pagination-current-border:             @primary-color;

@pagination-disabled-color:            #e6e6e6;
@pagination-disabled-bg:               #fff;
@pagination-disabled-border:           @pagination-disabled-color;

@pagination-ellipsis-color:             #999;

@pagination-item-default-lineHeight:            30px;
@pagination-item-mini-lineHeight:               20px;
@pagination-item-default-prev-lineHeight:       2.5;
@pagination-item-mini-prev-lineHeight:          1.6;

.@{prefix-cls-pagination} {
    display: inline-block;
    vertical-align: middle;
    margin: 0;

    .@{prefix-cls-pagination}-selector {
        float: left;
        display: inline-block;
        height: 34px;
        vertical-align: middle;
        margin: 0 30px 0 0;
        .@{prefix-cls}-select-cont {
            margin-top: 2px;
        }
        .@{prefix-cls-pagination}-totalpage {
            display: inline-block;
            height: 34px;
            line-height: 34px;
            padding-left: 16px;
            vertical-align: top;
        }
    }

    .@{prefix-cls-pagination}-jump {
        float: right;
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
        font-size: 12px;

        .@{prefix-cls-pagination}-jumper-wrap {
            display: inline-block;
            vertical-align: middle;
            padding-top: 1px;

            .@{prefix-cls-pagination}-input-jumper {
                width: 38px;
                text-align: center;
                border: 1px solid #d9d9d9;
                background: #fff;
                border-radius: 4px;
                height: 28px;
                outline: none;
            }

            .@{prefix-cls-pagination}-mini-input {
                width: 28px;
                height: 21px;
                border-radius: 4px;
                border: 1px solid #d9d9d9;
                outline: none;
            }
        }
    }

    .@{prefix-cls-pagination}-items {
        float: right;
        padding: 0;
        margin-top: 2px;
        & > li.@{prefix-cls-pagination}-item {
            transition: all .3s ease;
            user-select: none;
            cursor: pointer;
            border: 1px solid @pagination-border;
            height: @pagination-item-default-lineHeight;
            line-height: @pagination-item-default-lineHeight;
            padding: 0 6px;
            text-align: center;
            list-style: none;
            float: left;
            margin: 0 5px;
            color: #666;
            border-radius: 4px;
            font-size: 12px;
            min-width: 28px;
            &:hover {
                border: 1px solid @pagination-hover-color;
                color: @pagination-hover-color;
                text-decoration: none;
            }
            &.@{prefix-cls-pagination}-item-current {
                background-color: @pagination-current-bg;
                border: 1px solid @pagination-current-border;
                color: @pagination-current-color;
            }

            &-prev, &-next {
                line-height: @pagination-item-default-prev-lineHeight;
            }

            &-ellipsis {
              border: 0;
              line-height: .8;
              padding: 0;
              margin: 0;
              color: @pagination-ellipsis-color;
              font-size: 20px;
              &:hover {
                border: 0;
              }
            }

            &-disabled {
                border-color: @pagination-disabled-border;
                color: @pagination-disabled-color;
                &:hover {
                  border-color: @pagination-disabled-border;
                  color: @pagination-disabled-color;
                  cursor: not-allowed;
                }
            }
        }
    }


    .@{prefix-cls-pagination}-items-simple {
        float: right;
        padding: 0;
        margin-top: 2px;
        & > li.@{prefix-cls-pagination}-item {
            cursor: pointer;
            height: 30px;
            line-height: @pagination-item-default-lineHeight;
            padding-left: 6px;
            padding-right: 6px;
            text-align: center;
            list-style: none;
            float: left;
            user-select: none;
            color: #666;
            font-size: 12px;
            min-width: 28px;
            &:hover {
                color: @pagination-hover-color;
                text-decoration: none;
            }
            &.current {
                border-radius: 4px;
                border: 1px solid @pagination-border;
                color: @pagination-color;
            }

            &-prev, &-next {
                line-height: @pagination-item-default-prev-lineHeight;
            }

            &-disabled {
                color: @pagination-disabled-color;
                &:hover {
                  color: @pagination-disabled-color;
                  cursor: not-allowed;
                }
            }
        }
    }

    .@{prefix-cls-pagination}-items-mini {
        float: right;
        padding: 0;
        margin-top: 2px;
        & > li.@{prefix-cls-pagination}-item {
            cursor: pointer;
            height: 22px;
            line-height: @pagination-item-mini-lineHeight;
            padding-left: 3px;
            padding-right: 3px;
            text-align: center;
            list-style: none;
            float: left;
            margin: 0 3px;
            user-select: none;
            color: #666;
            border-radius: 4px;
            font-size: 12px;
            min-width: 23px;
            &:hover {
                color: @pagination-hover-color;
                text-decoration: none;
            }
            &.@{prefix-cls-pagination}-item-current {
                background-color: @pagination-current-bg;
                border: 1px solid @pagination-current-border;
                color: @pagination-current-color;
            }

            &-prev, &-next {
                line-height: @pagination-item-mini-prev-lineHeight;
            }

            &-ellipsis {
              border: 0;
              line-height: 1.2;
              padding: 0;
              margin: 0;
              color: @pagination-ellipsis-color;
              &:hover {
                border: 0;
              }
            }

            &-disabled {
                border-color: @pagination-disabled-border;
                color: @pagination-disabled-color;
                &:hover {
                  border-color: @pagination-disabled-border;
                  color: @pagination-disabled-color;
                  cursor: not-allowed;
                }
            }
        }
    }
}


//
// Pagination (multiple pages)
// @pagination-color:                     @link-color;
// @pagination-bg:                        #fff;
// @pagination-border:                    #ddd;

// @pagination-hover-color:               @link-hover-color;
// @pagination-hover-bg:                  @gray-lighter;
// @pagination-hover-border:              #ddd;

// @pagination-active-color:              #fff;
// @pagination-active-bg:                 @primary-color;
// @pagination-active-border:             @primary-color;

// @pagination-disabled-color:            @gray-light;
// @pagination-disabled-bg:               #fff;
// @pagination-disabled-border:           #ddd;
// // --------------------------------------------------
// .@{prefix-cls-pagination} {
//   display: inline-block;
//   padding-left: 0;
//   margin: @line-height-computed 0;
//   border-radius: @border-radius-base;

//   > li {
//     display: inline; // Remove list-style and block-level defaults
//     > a,
//     > span {
//       position: relative;
//       float: left; // Collapse white-space
//       padding: @padding-base-vertical @padding-base-horizontal;
//       line-height: @line-height-base;
//       text-decoration: none;
//       color: @pagination-color;
//       background-color: @pagination-bg;
//       border: 1px solid @pagination-border;
//       margin-left: -1px;
//     }
//     &:first-child {
//       > a,
//       > span {
//         margin-left: 0;
//         .border-left-radius(@border-radius-base);
//       }
//     }
//     &:last-child {
//       > a,
//       > span {
//         .border-right-radius(@border-radius-base);
//       }
//     }
//   }

//   > li > a,
//   > li > span {
//     &:hover,
//     &:focus {
//       z-index: 2;
//       color: @pagination-hover-color;
//       background-color: @pagination-hover-bg;
//       border-color: @pagination-hover-border;
//     }
//   }

//   > .active > a,
//   > .active > span {
//     &,
//     &:hover,
//     &:focus {
//       z-index: 3;
//       color: @pagination-active-color;
//       background-color: @pagination-active-bg;
//       border-color: @pagination-active-border;
//       cursor: default;
//     }
//   }

//   > .disabled {
//     > span,
//     > span:hover,
//     > span:focus,
//     > a,
//     > a:hover,
//     > a:focus {
//       color: @pagination-disabled-color;
//       background-color: @pagination-disabled-bg;
//       border-color: @pagination-disabled-border;
//       cursor: @cursor-disabled;
//       pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
//     }
//   }
// }

// // Sizing
// // --------------------------------------------------

// // Large
// .@{prefix-cls-pagination}-lg {
//   .@{prefix-cls-pagination}-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
// }

// // Small
// .@{prefix-cls-pagination}-sm {
//   .pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
// }