/** * DevExtreme (widgets/material/pager.material.less) * Version: 19.2.12 * Build date: Thu Apr 22 2021 * * Copyright (c) 2012 - 2021 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; } }