devextreme/less/sources/widgets/common/pager.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/common/pager.less)
* Version: 19.2.6
* Build date: Thu Jan 30 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@import (once) "./selectBox.less";
@import (once) "./numberBox.less";

@PAGER_PADDINGS: 8px;
@PAGER_INFO_PADDINGS: 9px;

.dx-pager {
    overflow: hidden;
    width: 100%;
    padding-top: @PAGER_PADDINGS;
    padding-bottom: @PAGER_PADDINGS;
    line-height: normal;
    .user-select(none);

    .dx-pages {
        float: right;

        .dx-page {
            &:first-child {
                margin-left: 1px;
            }

            display: inline-block;
            cursor: pointer;
            padding: 7px 8px 8px;
            margin-left: 5px;
            margin-right: 1px;
        }

        .dx-separator {
            display: inline-block;
            padding-left: 8px;
            padding-right: 8px;
        }

        .dx-info {
            display: inline-block;
            margin-right: @PAGER_INFO_PADDINGS;
            opacity: 0.6;
        }

        .dx-navigate-button {
            width: 10px;
            height: 20px;
            cursor: pointer;
            display: inline-block;
            vertical-align: top;
            padding: @PAGER_PADDINGS - 1px 13px;
            box-sizing: content-box;

            &.dx-button-disable {
                opacity: 0.3;
                cursor: inherit;
            }
        }

        .dx-prev-button,
        .dx-next-button {
            position: relative;
        }
    }

    .dx-page-sizes {
        float: left;

        .dx-page-size {
            &:first-child {
                margin-left: 1px;
            }

            display: inline-block;
            cursor: pointer;
            padding-left: 10px;
            padding-right: 9px;
            padding-top: 7px;
            padding-bottom: 8px;
            margin-left: 4px;
            margin-right: 1px;
        }
    }

    .dx-pages,
    .dx-page-sizes {
        .dx-selection {
            cursor: inherit;
            text-shadow: none;
        }
    }

    .dx-light-pages {
        display: inline-block;

        .dx-page-index {
            width: 40px;
        }

        .dx-pages-count {
            cursor: pointer;
        }

        .dx-info-text,
        .dx-pages-count {
            padding-left: 6px;
        }

        .dx-page-index,
        .dx-info-text,
        .dx-pages-count {
            display: table-cell;
        }
    }
}

.dx-rtl .dx-pager,
.dx-pager.dx-rtl {
    .dx-pages {
        float: left;
        direction: ltr;

        .dx-page {
            direction: ltr;
        }

        .dx-info {
            direction: rtl;
            margin-left: @PAGER_INFO_PADDINGS;
            margin-right: 0;
        }
    }

    .dx-page-sizes {
        float: right;
    }
}