.view-page
    &-all
        height: 20px
        line-height: 20px
        padding-left 10px
        font-size 12px
        color#444444
    &:after
        content: ''
        display: block
        height: 0
        clear: both
        overflow: hidden
        visibility: hidden
    &-item
        display: inline-block
        vertical-align: middle
        min-width: $btn-circle-size
        height: $btn-circle-size
        line-height: $btn-circle-size - 2px
        margin-right: 4px
        text-align: center
        list-style: none
        background-color: #fff
        user-select: none
        cursor: pointer
        font-family: Arial
        border: 1px solid $border-color-base
        border-radius: $btn-border-radius
        transition: border $transition-time $ease-in-out, color $transition-time $ease-in-out

        a
            margin: 0 6px
            text-decoration: none
            color: $text-color

        &:hover
            border-color: $primary-color
            a
                color: $primary-color
        &-active
            background-color: $primary-color
            border-color: $primary-color

            a, &:hover a 
                color: #fff

    &-item-jump-prev, &-item-jump-next 
        &:after 
            content: "..."
            display: block
            letter-spacing: 1px
            color: #ccc
            text-align: center
        i
            display: none
        &:hover 
            &:after 
                color: $primary-color

    &-prev
        margin-right: 8px

    &-item-jump-prev,
    &-item-jump-next
        margin-right: 4px

    &-next
        margin-left: 4px

    &-prev,
    &-next,
    &-item-jump-prev,
    &-item-jump-next 
        display: inline-block
        vertical-align: middle
        min-width: $btn-circle-size
        height: $btn-circle-size
        line-height: $btn-circle-size - 2px
        list-style: none
        text-align: center
        cursor: pointer
        color: #666
        font-family: Arial
        border-radius: $btn-border-radius
        transition: all $transition-time $ease-in-out

    &-prev,
    &-next 
        a 
            color: #666
            font-size: 14px
        i
            font-weight: 300

        &:hover 
            border-color: $primary-color
            a 
                color: $primary-color

    &-disabled 
        cursor: $cursor-disabled
        a 
            color: #ccc
        &:hover 
            border-color: $border-color-base
            a 
                color: #ccc
                cursor: $cursor-disabled
            
    &-total
        display: inline-block
        height: @btn-circle-size
        line-height: @btn-circle-size
        margin-right: 10px

.view-page
    &.mini &-total
        height: $btn-circle-size-small
        line-height: $btn-circle-size-small
    &.mini &-item
        border: 0
        margin: 0
        min-width: $btn-circle-size-small
        height: $btn-circle-size-small
        line-height: $btn-circle-size-small
        border-radius: $btn-border-radius-small

    &.mini &-prev,
    &.mini &-next
        margin: 0
        min-width: $btn-circle-size-small
        height: $btn-circle-size-small
        line-height: $btn-circle-size-small
        border: 0

        a 
            i
                font-size 10px
            i:after 
                height: $btn-circle-size-small
                line-height: $btn-circle-size-small

    &.mini &-item-jump-prev,
    &.mini &-item-jump-next
        height: $btn-circle-size-small
        line-height: $btn-circle-size-small
        border: none
        margin-right: 0