@fesjs/fes-design/es/pagination/style/index.less

fes-design for PC

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

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

@pager-border-color: var(--f-border-color-base);

@pagination-min-width-base: 32px;
@pagination-min-width-sm: @pagination-min-width-base - 8;

@pagination-ellipsis-min-width: 20px;

@pagination-height-base: @data-input-height-base;
@pagination-height-sm: @pagination-height-base - 8;

@pagination-pager-line-height-base: @pagination-height-base - 2;
@pagination-pager-line-height-sm: @pagination-height-sm - 2;

@pagination-normal-item-horizontal-margin-base: @padding-xs;
@pagination-normal-item-horizontal-margin-sm: calc(@padding-xs * 0.5);

@pagination-large-item-horizontal-margin-base: calc(@pagination-normal-item-horizontal-margin-base * 2);
@pagination-large-item-horizontal-margin-sm: calc(@pagination-normal-item-horizontal-margin-sm * 2);

@pagination-text-item-horizontal-margin: calc(@padding-xs * 0.5);

@pagination-font-size-base: @font-size-body;
@pagination-font-size-sm: @font-size-caption;

@pagination-size-min-width-base: 100px;
@pagination-size-min-width-sm: @pagination-size-min-width-base - 8;

@pagination-big-btn-width-base: 48px;
@pagination-big-btn-width-sm: 36px;

@pagination-disabled-color: var(--f-disabled-color-base);

.@{pagination-prefix-cls} {
    .flex-box();
    color: var(--f-text-color);
    font-size: @pagination-font-size-base;
    &-pager, &-size, &-jumper, &-total {
        height: @pagination-height-base;
        margin: 0 0 0 @pagination-large-item-horizontal-margin-base;
    }
    &-pager {
        .flex-box();
        margin: 0;
        padding-left:0;
        text-align: center;
        user-select: none;
        &-item {
            --f-pager-item-color: var(--f-text-color);
            --f-pager-item-bg-color: var(--f-white);
            --f-pager-item-border-color: @pager-border-color;
            --f-pager-item-min-width: @pagination-min-width-base;
            --f-pager-item-height: @pagination-height-base;
            --f-pager-item-line-height: @pagination-pager-line-height-base;
            --f-pager-item-border-radius: var(--f-border-radius-base);
            justify-content: center;
            box-sizing: border-box;

            min-width: var(--f-pager-item-min-width);
            height: var(--f-pager-item-height);
            margin-right: @pagination-normal-item-horizontal-margin-base;
            padding: 0 4px;
            color: var(--f-pager-item-color);
            line-height: var(--f-pager-item-line-height);
            background-color: var(--f-pager-item-bg-color);
            border-color: var(--f-pager-item-border-color);
            border-style: solid;
            border-width: 1px;
            border-radius: var(--f-pager-item-border-radius);
            cursor: pointer;
            transition: all @animation-duration-slow @ease-base-out;

            .flex-box();

            &:hover {
                --f-pager-item-color: var(--f-primary-color);
                --f-pager-item-bg-color: var(--f-hover-color-ligh);
                --f-pager-item-border-color: var(--f-primary-color);  
                transition: all @animation-duration-base @ease-base-in;
            }

            &.is-active {
                --f-pager-item-color: var(--f-white);
                --f-pager-item-bg-color: var(--f-primary-color);
                --f-pager-item-border-color: var(--f-primary-color);
                transition: all @animation-duration-base @ease-base-in;
                &:hover {
                    --f-pager-item-bg-color: var(--f-hover-color-base);
                    --f-pager-item-border-color: var(--f-hover-color-base); 
                }
            }
            &.is-double-jump {
                .flex-box();
                justify-content: center;
                min-width: @pagination-ellipsis-min-width;
                border-color: transparent;
                .is-more{
                    display: block;
                }
                .is-jump {
                    display: none;
                }
                &:hover {
                    .is-more {
                        display: none;
                    }
                    .is-jump {
                        display: block;
                    }
                }
            }
            &.is-disabled {
                .pagination-disabled();
            }
            &:last-child {
                margin-right: 0;
            }
        }
    }
    &-size {
        width: @pagination-size-min-width-base;
    }
    &-jumper {
        .flex-box();
        white-space: nowrap;
        &-item {
            margin-right: @pagination-text-item-horizontal-margin;
            line-height: @pagination-height-base;
        }
        &-item {
            &:last-child {
                margin-right: 0;
            }
        }
    }
    &-total {
        line-height: @pagination-height-base;
    }
    &-simpler {
        &-total {
            margin-right: @pagination-normal-item-horizontal-margin-base;
            list-style: none;

            --f-pager-total-color: var(--f-text-color);
            --f-pager-total-bg-color: var(--f-white);
            --f-pager-total-border-color: @pager-border-color;
            --f-pager-total-min-width: @pagination-min-width-base;
            --f-pager-total-height: @pagination-height-base;
            --f-pager-total-line-height: @pagination-height-base;
            --f-pager-total-border-radius: var(--f-border-radius-base);
            &-split {
                margin-right: @pagination-normal-item-horizontal-margin-base;
                font-style: normal;
            }
        }
    }
}

.@{pagination-prefix-cls} {
    .@{pagination-prefix-cls}-jumper-input {
        width: @pagination-big-btn-width-base;
        margin-right: @pagination-text-item-horizontal-margin;
        line-height: @pagination-height-base;
    }
}

.@{pagination-prefix-cls}-small {
    font-size: @pagination-font-size-sm;
    .@{pagination-prefix-cls}-pager, .@{pagination-prefix-cls}-size, .@{pagination-prefix-cls}-jumper, .@{pagination-prefix-cls}-total {
        height: @pagination-height-sm;
        margin: 0 0 0 @pagination-large-item-horizontal-margin-sm;
    }
    .@{pagination-prefix-cls}-pager {
        margin: 0 @pagination-normal-item-horizontal-margin-sm 0 0;
        &-item {
            --f-pager-item-min-width: @pagination-min-width-sm;
            --f-pager-item-height: @pagination-height-sm;
            --f-pager-item-line-height: @pagination-pager-line-height-sm;
            margin-right: @pagination-normal-item-horizontal-margin-sm;
            &.is-double-jump {
                min-width: @pagination-ellipsis-min-width;
            }
            &:last-child {
                margin-right: 0;
            }
        }
    }
    .@{pagination-prefix-cls}-size {
        width: @pagination-size-min-width-sm;
        &-select {
            > div {
                min-height: @pagination-height-sm;
                padding-top: 0;
                padding-bottom: 0;
                font-size: @pagination-font-size-sm;
            }
        }
    }
    .@{pagination-prefix-cls}-jumper {
        &-item {
            line-height: @pagination-height-sm;
        }
    }
    .@{pagination-prefix-cls}-total {
        line-height: @pagination-height-sm;
    }
    .@{pagination-prefix-cls}-simpler {
        &-total {
            margin-right: @pagination-normal-item-horizontal-margin-sm;

            --f-pager-total-min-width: @pagination-min-width-sm;
            --f-pager-total-height: @pagination-height-sm;
            --f-pager-total-line-height: @pagination-height-sm;
            --f-pager-total-border-radius: var(--f-border-radius-sm);
            &-split {
                margin-right: @pagination-normal-item-horizontal-margin-sm;
            }
        }
    }
}

.@{pagination-prefix-cls}-small {
    .@{pagination-prefix-cls}-jumper-input {
        width: @pagination-big-btn-width-sm;
        height: @pagination-height-sm;
        font-size: @pagination-font-size-sm;
        line-height: @pagination-height-sm;
    }
}