@progress/kendo-ui/css/web/common/pager.less

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

/*!
 * Copyright 2018 Telerik EAD
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
.k-pager-wrap
{
    clear: both;
    overflow: hidden;
    position: relative;
    border-style: solid;
    border-width: 1px;
    line-height: 2.0em;
    padding:0.333em 0 0.333em 0.250em;
}

.k-pager-numbers .k-link,
.k-pager-numbers .k-state-selected
{
    display: inline-block;
    vertical-align: top;
    margin-right: 1px;
}

.k-pager-numbers
{
    margin:0 2px;
}

.k-pager-numbers .k-state-selected
{
    vertical-align:top;
}

.k-pager-numbers .k-current-page
{
    display: none;
}

.k-pager-numbers li,
.k-pager-input
{
    float:left;
}

.k-pager-info
{
    float: right;
    padding:0 1.333em;
}

.k-pager-numbers .k-link
{
    text-decoration: none;
}

.k-pager-wrap > .k-link,
.k-pager-numbers .k-link,
.k-pager-numbers .k-state-selected
{
    min-width: 2em;
}

.k-pager-wrap>.k-link
{
    float:left;
    margin:0 0.08333em;
    height: 2em;// IE7
    line-height: 2em;// IE7
    border-radius: 1.0833em;
    cursor:pointer;
    text-align: center;

    & > .k-icon {
        margin-top: -2px;
        color: inherit;
    }
}

.k-pager-wrap>a.k-state-disabled:hover
{
    background:none;
    cursor:default;
}

.k-pager-numbers .k-link
{
    text-align: center;
    line-height:2em;
    border-style:solid;
    border-width:1px;
    border-radius: 1.0833em;
}

.k-pager-wrap>.k-link
{
    border-style:solid;
    border-width:1px;
}

.k-pager-wrap .k-pager-refresh
{
    float:right;
    margin-right:0.5em;
    border-width:0;
    border-radius: 0;
}

.k-pager-numbers .k-state-selected
{
    border-style:solid;
    border-width:1px;
    text-align: center;
    border-radius: 1.0833em;
}

.k-pager-wrap .k-textbox
{
    width:3.333em;
}

.k-pager-wrap .k-dropdown
{
    width:4.500em;
}

.k-pager-refresh
{
    float:right;
}

.k-pager-input,
.k-pager-sizes
{
    padding: 0 1.4166em;
}

.k-pager-sizes
{
    display: inline-block;
    padding-top: 1px;
}

.k-pager-sizes .k-widget.k-dropdown
{
    margin-top: -2px;
}

.k-pager-wrap .k-textbox,
.k-pager-wrap .k-widget
{
    margin: 0 .4em 0;
}

@media only screen and (max-width: 1024px) {
    .k-webkit,
    .k-ff,
    .k-ie11,
    .k-edge,
    .k-safari {
        .k-pager-wrap
        {
            overflow: visible;
            min-height: 2.1em;
        }

        .k-pager-wrap .k-pager-nav,
        .k-pager-input {
            display: inline-block;
            vertical-align: top;
        }

        .k-pager-numbers {
            position: absolute;
            left: 4.8em;
            display: inline-flex;
            flex-direction: column-reverse;
            overflow: visible;
            height: auto;
        }

        .k-pager-numbers:first-child { // move left when previousNext: false
            left: .2em;
        }

        .k-pager-numbers.k-state-expanded {
            transform: translatey(-100%);
            -webkit-transform: translatey(-100%);
        }


        .km-pane-wrapper .k-pager-numbers {
            position: relative;
            left: 50%;
            transform: translate(-50%, -100%);
            -webkit-transform: translate(-50%, -100%);
        }

        .km-pane-wrapper .k-pager-numbers .k-link,
        .km-pane-wrapper .k-pager-numbers .k-state-selected,
        .km-pane-wrapper .k-pager-wrap > .k-link,
        .km-pane-wrapper .k-pager-wrap > .k-pager-info {
            padding-top: 0;
            padding-bottom: 0;
        }

        .k-rtl .k-pager-numbers {
            left: auto;
            right: 4.8em;
            width: 4.5em
        }

        .k-rtl .k-pager-numbers:first-child { // move right when previousNext: false
            left: auto;
            right: .2em;
        }

        .k-rtl .km-pane-wrapper .k-pager-numbers {
            right: 5.8em;
        }

        .k-pager-numbers .k-current-page {
            display: block;
            border-left: 0;
        }

        .k-pager-numbers.k-state-expanded .k-current-page {
            transform: translatey(100%);
            -webkit-transform: translatey(100%);
        }

        .k-pager-numbers li:not(.k-current-page) {
            display: none;
        }

        .k-pager-numbers .k-current-page .k-link {
            width: 3.2em;
            padding: 0 .429em 0 .714em;
            border-radius:  1.0833em;
        }

        .k-pager-numbers + .k-link {
            margin-left: 4.8em;
        }

        .k-rtl .k-pager-numbers + .k-link {
            margin-right: 5.1em;
            margin-left: 0;
        }

        .k-pager-numbers .k-state-selected,
        .k-pager-numbers .k-link {
            display: block;
            margin-right: 0;
            padding: 1px 5px 1px 5px;
            text-align: left;
        }

        .k-pager-numbers.k-state-expanded {
            box-sizing: border-box;
            padding: 2px 2px 0;
        }

        .k-pager-numbers.k-state-expanded .k-current-page {
            margin: -2em -3px 0;
            padding: 0;
        }

        .k-pager-numbers.k-state-expanded .k-current-page .k-link {
            border-radius: 0 0 1.0833em 1.0833em;
        }

        .k-pager-numbers.k-state-expanded li {
            display: inline-block;
        }
    }
}

@media only screen and (max-width: 640px) {
    .k-webkit,
    .k-ff,
    .k-ie11,
    .k-edge,
    .k-safari {
        .k-pager-info {
            display: none;
        }
    }
}

@media only screen and (max-width: 480px) {
    .k-webkit,
    .k-ff,
    .k-ie11,
    .k-edge,
    .k-safari {
        .k-pager-sizes {
            display: none;
        }
    }
}

.k-rtl {
    .k-pager-wrap {
        .k-i-seek-e,
        .k-i-seek-w,
        .k-i-arrow-e,
        .k-i-arrow-w {
            transform: scaleX(-1);
        }
    }
}