acud/es/pagination/style/index.less

acg react 组件库

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin.less';
@import '../../button/style/mixin.less';
@import './mix.less';

@pagination-prefix-cls: ~'@{acud-prefix}-pagination';

.@{pagination-prefix-cls} {

    .pagination();

    ul,
    ol {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    &::after {
        display: block;
        clear: both;
        height: 0;
        overflow: hidden;
        visibility: hidden;
        content: ' ';
    }

    li {
        font-size: @pagination-font-size;
    }

    &-total-text {
        display: inline-block;
        height: @pagination-height-md;
        margin-right: @pagination-margin-left-right;
        line-height: @pagination-height-md;
        vertical-align: middle;
        color: @G5;
    }

    &-item {
        display: inline-block;
        min-width: @pagination-height-md;
        height: @pagination-height-md;
        font-family: @font-family;
        line-height: @pagination-height-md - 2;
        text-align: center;
        vertical-align: middle;
        list-style: none;
        outline: 0;
        cursor: pointer;
        user-select: none;
        box-sizing: border-box;
        font-weight: @font-weight-400;
        border: @pagination-border-width solid rgba(0, 0, 0, 0);
        border-radius: @pagination-radius;

        .basic-config(@pagination-default-tp, @pagination-default-p);

        a {
            display: block;
            transition: none;
            padding: 0 6px;
            .basic-config(@pagination-default-tp, @pagination-default-p);

            &:hover {
                text-decoration: none;
            }
        }

        &:focus,
        &:hover {
            transition: all 0.3s;
        }

        &-active {
            .basic-config(@pagination-active-tp, @pagination-active-p);
            a {
                .basic-config(@pagination-active-tp, @pagination-default-p);
            }
        }
    }

    &-jump-prev,
    &-jump-next {
        outline: 0;
        .@{pagination-prefix-cls}-item-container {
            position: relative;

            .@{pagination-prefix-cls}-item-link-icon {
                display: inline-block;
                position: relative;
                font-size: @pagination-font-size;
                letter-spacing: -1px;
                opacity: 0;
                transition: all 0.2s;
                top: 0px;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
            }

            .@{pagination-prefix-cls}-item-ellipsis {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                display: block;
                margin: auto;
                font-family: Arial, Helvetica, sans-serif;
                letter-spacing: 2px;
                text-align: center;
                opacity: 1;
                transition: all 0.2s;
                .@{iconfont-css-prefix} {
                    line-height: 0;
                }
            }
        }

        &:hover {
            .@{pagination-prefix-cls}-item-link-icon {
                opacity: 1;
            }
            .@{pagination-prefix-cls}-item-ellipsis {
                opacity: 0;
            }
        }
    }

    &-jump-prev,
    &-jump-next {
        margin-right: @pagination-margin-left-right;
    }
    &-prev,
    &-next,
    &-jump-prev,
    &-jump-next {
        display: inline-block;
        min-width: @pagination-height-md;
        height: @pagination-height-md;
        font-family: @font-family;
        font-weight: @font-weight-400;
        line-height: @pagination-height-md - 2px;
        text-align: center;
        vertical-align: middle;
        list-style: none;
        cursor: pointer;
        transition: all 0.3s;
    }
  
    &-prev,
    &-next {
        font-family: Arial, Helvetica, sans-serif;
        outline: 0;
    
        button {
            cursor: pointer;
            user-select: none;
        }

        &.@{pagination-prefix-cls}-disabled {
            button {
                cursor: not-allowed;
            }
        }
    
        .@{pagination-prefix-cls}-item-link {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 100%;
            padding: 0;
            font-size: @pagination-font-size-prev-next;
            text-align: center;
            outline: none;
            transition: all 0.3s;
            border: 1px solid transparent;

            .basic-config(@pagination-arrow-tp, @pagination-arrow-p);

            .@{iconfont-css-prefix} {
                line-height: 0;
                font-size: 16px;
            }
        }
    }
  
    &-slash {
        margin: 0 12px;
    }
  
    &-options {
        display: inline-block;
        margin-left: @pagination-margin-left-right;
        vertical-align: middle;
        
        // IE11 css hack. `*::-ms-backdrop,` is a must have
        @media all and (-ms-high-contrast: none) {
            *::-ms-backdrop,
            & {
                vertical-align: top;
            }
        }

        &-tip {
            margin-right: @pagination-margin-left-right;
        }
    
        &-quick-jumper {
            display: flex;
            align-content: center;
            height: @pagination-height-md;
            line-height: @pagination-height-md;
            vertical-align: top;
    
            input {
                .input();
                .basic-config(@pagination-jump-tp, @pagination-jump-p);

                border-radius: @pagination-radius 0 0 @pagination-radius;
                display: inline-flex;
                width: @pagination-jump-width;
                padding: 0 @pagination-padding-jump;
                margin: 0 0 0 @pagination-margin-left-right;
            }

            button {
                .btn();
                .basic-config(@pagination-goto-tp, @pagination-goto-p);

                border-radius: 0 @pagination-radius @pagination-radius 0;
                min-width: @pagination-goto-width;
                border-left-width: 0;
                position: relative;
                font-weight: @font-weight-400;

                &:active, &:hover, &:focus {
                    border-left-width: 1px;
                    margin-left: -1px;
                    z-index: 2;
                }
            }
        }
    }
  
//     // ============================ Disabled ============================
    &&-disabled {
        cursor: not-allowed;
    
        .@{pagination-prefix-cls}-item {
            cursor: not-allowed;
    
            a {
                border: none;
                cursor: not-allowed;
            }
        }
    
        .@{pagination-prefix-cls}-item-link {
            cursor: not-allowed;
        }
    
        .@{pagination-prefix-cls}-item-link-icon {
            opacity: 0;
        }
    
        .@{pagination-prefix-cls}-item-ellipsis {
            opacity: 1;
        }

        &.@{pagination-prefix-cls}-simple {
            color: @G6;
        }
    }


    &-simple {
        &-pager {
            display: inline-block;
            line-height: @pagination-height-md;
            input {
                .input();
                .basic-config(@pagination-jump-tp, @pagination-jump-p);

                width: 40px;
                display: inline-flex;
                text-align: center;
            }
        }
    }
}

@media only screen and (max-width: @screen-lg) {
    .@{pagination-prefix-cls}-item {
        &-after-jump-prev,
        &-before-jump-next {
            display: none;
        }
    }
}

@media only screen and (max-width: @screen-sm) {
    .@{pagination-prefix-cls}-options {
        display: none;
    }
}