devextreme/less/sources/widgets/material/pager.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/pager.material.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.material.less";
@import (once) "./numberBox.material.less";

.dx-size-default() {
    @MATERIAL_PAGER_PADDINGS: 13px;
    @MATERIAL_PAGER_SEPARATOR_PADDINGS: 8px;
    @MATERIAL_PAGER_PAGE_PADDING: 9px 12px;
    @MATERIAL_PAGER_PAGE_LINE_HEIGHT: 12px;
    @MATERIAL_PAGER_PAGE_FONT_SIZE: 12px;
    @MATERIAL_PAGER_NAVBUTTON_PADDINGS: @MATERIAL_PAGER_PAGE_PADDING;
    @MATERIAL_PAGER_NAVBUTTON_HEIGHT: 12px;
    @MATERIAL_PAGER_PAGESIZE_PADDING_TOP: 7px;
    @MATERIAL_PAGER_PAGESIZE_PADDING_BOTTOM: 8px;
    @MATERIAL_PAGER_PAGESIZE_PADDING_LEFT: 10px;
    @MATERIAL_PAGER_PAGESIZE_PADDING_RIGHT: 9px;
}

.dx-size-compact() {
    @MATERIAL_PAGER_PADDINGS: 13px;
    @MATERIAL_PAGER_SEPARATOR_PADDINGS: 8px;
    @MATERIAL_PAGER_PAGE_PADDING: 9px 12px;
    @MATERIAL_PAGER_PAGE_LINE_HEIGHT: 12px;
    @MATERIAL_PAGER_PAGE_FONT_SIZE: 12px;
    @MATERIAL_PAGER_NAVBUTTON_PADDINGS: @MATERIAL_PAGER_PAGE_PADDING;
    @MATERIAL_PAGER_NAVBUTTON_HEIGHT: 12px;
    @MATERIAL_PAGER_PAGESIZE_PADDING_TOP: 7px;
    @MATERIAL_PAGER_PAGESIZE_PADDING_BOTTOM: 8px;
    @MATERIAL_PAGER_PAGESIZE_PADDING_LEFT: 10px;
    @MATERIAL_PAGER_PAGESIZE_PADDING_RIGHT: 9px;
}

.dx-pager {
    padding: @MATERIAL_PAGER_PADDINGS 14px  @MATERIAL_PAGER_PADDINGS 24px;

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

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

    .dx-pages {
        .dx-page {
            padding: @MATERIAL_PAGER_PAGE_PADDING;
            line-height: @MATERIAL_PAGER_PAGE_LINE_HEIGHT;
        }

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

        .dx-navigate-button {
            width: 9px;
            height: @MATERIAL_PAGER_NAVBUTTON_HEIGHT;
            padding: @MATERIAL_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 {
        font-size: @MATERIAL_PAGER_PAGE_FONT_SIZE;

        &:hover {
            background-color: @pager-page-hovered-bg;
        }

        border-radius: 20px;
    }

    .dx-page-sizes .dx-page-size {
        padding: @MATERIAL_PAGER_PAGE_PADDING;
        line-height: @MATERIAL_PAGER_PAGE_LINE_HEIGHT;
    }

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

    .dx-page-sizes .dx-page-size:first-child {
        margin-left: 0;
    }
}