bk-magic-vue/lib/ui/pagination.css

基于蓝鲸 Magicbox 和 Vue 的前端组件库

.bk-page{
    overflow:hidden;
    white-space:normal;
}

.bk-page .icon-angle-right, .bk-page .icon-angle-left{
        line-height:36px;
        font-size:22px;
    }

.bk-page a{
        text-decoration:none;
    }

.bk-page .bk-page-count{
        font-size:12px;
        margin-top:2px;
    }

.bk-page .bk-page-count-left{
            float:left;
        }

.bk-page .bk-page-count-right{
            float:right;
            margin-left:12px;
        }

.bk-page .bk-page-count-small{
            line-height:34px;
            height:34px;
        }

.bk-page .bk-page-count > span{
            display:inline-block;
            vertical-align:middle;
        }

.bk-page .bk-page-count .bk-select{
            min-width:60px;
            display:inline-block;
            vertical-align:middle;
            text-align:left;
            margin:0 4px;
        }

.bk-page .bk-page-count .bk-select .bk-selected{
                padding:0 22px 0 10px;
            }

.bk-page .bk-page-count .bk-total-page{
            display:inline-block;
            margin-right:20px;
        }

.bk-page .bk-page-count .page-select-small{
            border:1px solid #f0f1f5;
            background:#f0f1f5;
            border-radius:2px;
            -webkit-box-shadow:none;
                    box-shadow:none
        }

.bk-page .bk-page-count .page-select-small:hover{
                background:#e1ecff;
            }

.bk-page .bk-page-total-count{
        font-size:12px;
        line-height:36px;
        color:#989dab;
    }

.bk-page .bk-page-total-count-right{
            float:right;
            margin-left:12px;
        }

.bk-page .bk-page-total-count-left{
            float:left;
            margin-right:12px;
        }

.bk-page .bk-page-total-count .stress{
            padding:0 2px;
            color:#3f4046;
        }

.bk-page .bk-page-total-small{
        line-height:26px;
        margin-top:2px;
    }

.bk-page .bk-page-selection-count{
        font-size:12px;
        line-height:36px;
    }

.bk-page .bk-page-selection-count-right{
            float:right;
        }

.bk-page .bk-page-selection-count-left{
            float:left;
            margin-left:12px;
        }

.bk-page .bk-page-selection-count .count{
            padding:0 2px;
            font-weight:bold;
        }

.bk-page .bk-page-jumper{
        margin-left:10px;
        display:inline-block;
    }

.bk-page .bk-page-jumper > span{
            font-size:14px;
            color:#63656e;
        }

.bk-page.bk-page-align-left{
            text-align:left;
        }

.bk-page.bk-page-align-center{
            text-align:center;
        }

.bk-page.bk-page-align-right{
            text-align:right;
        }

.bk-page.bk-page-small .bk-page-count{
            margin-top:0;
        }

.bk-page.bk-page-small .page-item .page-button{
                min-width:32px;
                height:32px;
                line-height:30px;
            }

.bk-page.bk-page-small .bk-page-jumper{
            font-size:14px;
        }

.bk-page.bk-page-small .bk-page-total-count,
        .bk-page.bk-page-small .bk-page-selection-count{
            line-height:32px;
        }

.bk-page.bk-page-small .icon-angle-right, .bk-page.bk-page-small .icon-angle-left{
            line-height:30px;
            font-size:20px;
        }

.bk-page.bk-page-compact .page-item{
            margin-right:-1px;
            border-radius:0
        }

.bk-page.bk-page-compact .page-item:hover{
                position:relative;
                z-index:1;
            }

.bk-page.bk-page-compact .page-item.disabled:hover{
                    z-index:0;
                }

.bk-page.bk-page-compact .page-item:first-child{
                border-radius:2px 0 0 2px;
            }

.bk-page.bk-page-compact .page-item:last-child{
                border-radius:0 2px 2px 0;
            }

.bk-page.bk-page-compact .page-item.cur-page{
                position:relative;
                z-index:1;
            }

.bk-page .bk-page-list{
        margin:0;
        padding:0;
        overflow:hidden;
        font-size:0;
        display:inline-block;
        vertical-align:middle;
    }

.bk-page .page-item{
        text-align:center;
        display:inline-block;
        vertical-align:middle;
        font-size:12px;
        margin-right:4px;
        -webkit-box-sizing:border-box;
                box-sizing:border-box;
        border-radius:2px;
        overflow:hidden
    }

.bk-page .page-item.page-omit{
            border:none;
            min-width:auto;
        }

.bk-page .page-item.page-omit > span{
                display:inline-block;
            }

.bk-page .page-item .page-button{
            display:block;
            min-width:36px;
            height:36px;
            padding:0 4px;
            line-height:34px;
            border:1px solid #c4c6cc;
            color:#63656e;
            background:#fff;
            cursor:pointer
        }

.bk-page .page-item .page-button:hover{
                color:#3a84ff;
                border-color:#3a84ff;
            }

.bk-page .page-item.cur-page .page-button{
                border-color:#3a84ff;
                color:#3a84ff;
            }

.bk-page .page-item.disabled .page-button{
                border-color:#dcdee5;
                cursor:not-allowed;
                color:#c4c6cc;
                background-color:#fafbfd
            }

.bk-page .page-item.disabled .page-button:hover{
                    color:#c4c6cc;
                }

.bk-page .page-item:last-child{
            margin-right:0;
        }

.bk-page .bk-page-small-jump{
        line-height:34px;
        display:-webkit-inline-box;
        display:-ms-inline-flexbox;
        display:inline-flex;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        color:#63656E;
    }

.bk-page .bk-page-small-jump .btn-pre,
        .bk-page .bk-page-small-jump .btn-next{
            display:-webkit-box;
            display:-ms-flexbox;
            display:flex;
            -webkit-box-align:center;
                -ms-flex-align:center;
                    align-items:center;
            -webkit-box-pack:center;
                -ms-flex-pack:center;
                    justify-content:center;
            width:24px;
            height:24px;
            font-size:14px;
            cursor:pointer;
            -webkit-transition:all .15s;
            transition:all .15s;
            color:#979ba5
        }

.bk-page .bk-page-small-jump .btn-pre:hover,.bk-page .bk-page-small-jump .btn-next:hover{
                color:#3A84FF;
            }

.bk-page .bk-page-small-jump .btn-pre.disable,.bk-page .bk-page-small-jump .btn-next.disable{
                color:#DCDEE5;
                cursor:not-allowed;
            }

.bk-page .bk-page-small-jump .btn-pre .bk-icon,.bk-page .bk-page-small-jump .btn-next .bk-icon{
                line-height:1;
            }

.bk-page .bk-page-small-jump .jump-input-wrapper{
            display:-webkit-box;
            display:-ms-flexbox;
            display:flex;
            -webkit-box-align:center;
                -ms-flex-align:center;
                    align-items:center;
            background-color:#f0f1f5;
            padding:0 8px;
            border-radius:2px;
            cursor:pointer;
            border:1px solid #f0f1f5;
            height:24px
        }

.bk-page .bk-page-small-jump .jump-input-wrapper:hover{
                background-color:#e1ecff;
            }

.bk-page .bk-page-small-jump .jump-input-wrapper.focus{
                background-color:#fff;
                border:1px solid #3a84ff;
                -webkit-box-shadow:0px 0px 4px rgba(58, 132, 255, 0.4);
                        box-shadow:0px 0px 4px rgba(58, 132, 255, 0.4);
            }

.bk-page .bk-page-small-jump .jump-input{
            min-width:22px;
            height:16px;
            font-size:14px;
            line-height:16px;
            text-align:center;
            border:0;
            border-radius:2px;
            background-color:transparent;
            -webkit-transition:all .15s;
            transition:all .15s
        }

.bk-page .bk-page-small-jump .jump-input:hover,
            .bk-page .bk-page-small-jump .jump-input:focus{
                border-color:#3A84FF;
            }

.bk-page .bk-page-small-jump .page-total{
            min-width:28px;
            font-size:14px;
            vertical-align:top;
            text-align:center;
            line-height:16px;
            margin-left:2px
        }

.bk-page .bk-page-small-jump .page-total.focus{
                color:#c4c6cc;
            }

.small-jump-options{
  padding:0;
  margin:0;
  overflow-y:auto;
  list-style:none;
  padding:6px 0;
  max-height:204px;
  min-width:68px
}

.small-jump-options::-webkit-scrollbar{
        width:6px;
        height:6px;
    }

.small-jump-options::-webkit-scrollbar-thumb{
        min-height:24px;
        border-radius:3px;
        background-color:#dcdee5;
    }

.small-jump-options .small-jump-option{
      padding:0 16px;
      line-height:32px;
      cursor:pointer
  }

.small-jump-options .small-jump-option:hover{
          background-color:#eaf3ff;
          color:#3a84ff;
      }

.small-jump-options .small-jump-option.is-selected{
          background-color:#eaf3ff;
          color:#3a84ff;
      }