devextreme/less/sources/widgets/generic/pager.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

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

.dx-size-default() {
    @GENERIC_PAGER_PADDINGS: 9px;
    @GENERIC_PAGER_SEPARATOR_PADDINGS: 8px;
    @GENERIC_PAGER_PAGE_PADDING_LEFT_RIGHT: 9px;
    @GENERIC_PAGER_PAGE_PADDING_TOP: 7px;
    @GENERIC_PAGER_PAGE_PADDING_BOTTOM: 8px;
    @GENERIC_PAGER_NAVBUTTON_PADDINGS: @GENERIC_PAGER_PADDINGS 13px;
    @GENERIC_PAGER_NAVBUTTON_HEIGHT: 17px;
    @GENERIC_PAGER_PAGESIZE_PADDING_TOP: 7px;
    @GENERIC_PAGER_PAGESIZE_PADDING_BOTTOM: 8px;
    @GENERIC_PAGER_PAGESIZE_PADDING_LEFT: 10px;
    @GENERIC_PAGER_PAGESIZE_PADDING_RIGHT: 9px;
}

.dx-size-compact() {
    @GENERIC_PAGER_PADDINGS: 5px;
    @GENERIC_PAGER_PAGE_PADDING_LEFT_RIGHT: 6px;
    @GENERIC_PAGER_PAGE_PADDING_TOP: 4px;
    @GENERIC_PAGER_PAGE_PADDING_BOTTOM: 5px;
    @GENERIC_PAGER_SEPARATOR_PADDINGS: 4px;
    @GENERIC_PAGER_NAVBUTTON_PADDINGS: @GENERIC_PAGER_PADDINGS 7px;
    @GENERIC_PAGER_NAVBUTTON_HEIGHT: 16px;
    @GENERIC_PAGER_PAGESIZE_PADDING_TOP: 4px;
    @GENERIC_PAGER_PAGESIZE_PADDING_BOTTOM: 5px;
    @GENERIC_PAGER_PAGESIZE_PADDING_LEFT: 8px;
    @GENERIC_PAGER_PAGESIZE_PADDING_RIGHT: 6px;
}

.dx-pager {
    padding-top: @GENERIC_PAGER_PADDINGS;
    padding-bottom: @GENERIC_PAGER_PADDINGS;

    &.dx-light-mode {
        .dx-page-sizes {
            min-width: 42px;
        }

        .dx-page-index {
            min-width: 19px;
        }
    }

    .dx-pages {
        .dx-page {
            padding: @GENERIC_PAGER_PAGE_PADDING_TOP @GENERIC_PAGER_PAGE_PADDING_LEFT_RIGHT @GENERIC_PAGER_PAGE_PADDING_BOTTOM;
        }

        .dx-separator {
            padding-left: @GENERIC_PAGER_SEPARATOR_PADDINGS;
            padding-right: @GENERIC_PAGER_SEPARATOR_PADDINGS;
        }

        .dx-navigate-button {
            width: 9px;
            height: @GENERIC_PAGER_NAVBUTTON_HEIGHT;
            padding: @GENERIC_PAGER_NAVBUTTON_PADDINGS;
        }

        .dx-prev-button {
            .dx-icon(chevronleft);
        }

        .dx-next-button {
            .dx-icon(chevronright);
        }

        .dx-prev-button,
        .dx-next-button {
            .dx-icon-font-centered-sizing(21px);
        }
    }

    .dx-page,
    .dx-page-size {
        border-radius: @pager-page-border-radius;
        border-style: solid;
        border-width: 1px;
        border-color: transparent;
    }

    .dx-page-sizes .dx-page-size {
        padding-left: @GENERIC_PAGER_PAGESIZE_PADDING_LEFT;
        padding-right: @GENERIC_PAGER_PAGESIZE_PADDING_RIGHT;
        padding-top: @GENERIC_PAGER_PAGESIZE_PADDING_TOP;
        padding-bottom: @GENERIC_PAGER_PAGESIZE_PADDING_BOTTOM;
    }

    .dx-pages,
    .dx-page-sizes {
        .dx-selection {
            color: @pager-page-selected-color;
            border-color: @pager-page-selected-border-color;
            background-color: @pager-page-selected-bg;
        }
    }
}