Sass Variables
The Telerik and Kendo UI Pager enables you to configure and customize its appearance through the available Sass variables. Additionally, to configure and customize the appearance of its buttons, use the Sass variables provided by the Button component.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-pager-padding-x | k-map-get( $kendo-spacing, 2 ) | 8px | Default: k-map-get( $kendo-spacing, 2 )Computed: 8px |
| Description: The horizontal padding of the Pager. | |||
kendo-pager-sm-padding-x | k-map-get( $kendo-spacing, 1 ) | 4px | Default: k-map-get( $kendo-spacing, 1 )Computed: 4px |
| Description: The horizontal padding of the small Pager. | |||
kendo-pager-md-padding-x | k-map-get( $kendo-spacing, 2 ) | 8px | Default: k-map-get( $kendo-spacing, 2 )Computed: 8px |
| Description: The horizontal padding of the medium Pager. | |||
kendo-pager-lg-padding-x | k-map-get( $kendo-spacing, 2.5 ) | 10px | Default: k-map-get( $kendo-spacing, 2.5 )Computed: 10px |
| Description: The horizontal padding of the large Pager. | |||
kendo-pager-padding-y | $kendo-pager-padding-x | 8px | Default: $kendo-pager-padding-xComputed: 8px |
| Description: The vertical padding of the Pager. | |||
kendo-pager-sm-padding-y | $kendo-pager-sm-padding-x | 4px | Default: $kendo-pager-sm-padding-xComputed: 4px |
| Description: The vertical padding of the small Pager. | |||
kendo-pager-md-padding-y | $kendo-pager-md-padding-x | 8px | Default: $kendo-pager-md-padding-xComputed: 8px |
| Description: The vertical padding of the medium Pager. | |||
kendo-pager-lg-padding-y | $kendo-pager-lg-padding-x | 10px | Default: $kendo-pager-lg-padding-xComputed: 10px |
| Description: The vertical padding of the large Pager. | |||
kendo-pager-sm-item-min-width | $kendo-button-sm-calc-size | calc(1.4285714286em + 4px + 2px) | Default: $kendo-button-sm-calc-sizeComputed: calc(1.4285714286em + 4px + 2px) |
| Description: The minimum width of the items in the small Pager. | |||
kendo-pager-md-item-min-width | $kendo-button-md-calc-size | calc(1.4285714286em + 8px + 2px) | Default: $kendo-button-md-calc-sizeComputed: calc(1.4285714286em + 8px + 2px) |
| Description: The minimum width of the items in the medium Pagers. | |||
kendo-pager-lg-item-min-width | $kendo-button-lg-calc-size | calc(1.5em + 16px + 2px) | Default: $kendo-button-lg-calc-sizeComputed: calc(1.5em + 16px + 2px) |
| Description: The minimum width of the items in the large Pagers. | |||
kendo-pager-sm-item-group-spacing | k-map-get( $kendo-spacing, 3 ) | 12px | Default: k-map-get( $kendo-spacing, 3 )Computed: 12px |
| Description: The margin between the item groups in the small Pager. | |||
kendo-pager-md-item-group-spacing | k-map-get( $kendo-spacing, 3.5 ) | 14px | Default: k-map-get( $kendo-spacing, 3.5 )Computed: 14px |
| Description: The margin between the item groups in the medium Pager. | |||
kendo-pager-lg-item-group-spacing | k-map-get( $kendo-spacing, 4 ) | 16px | Default: k-map-get( $kendo-spacing, 4 )Computed: 16px |
| Description: The margin between the item groups in the large Pager. | |||
kendo-pager-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The border width of the Pager. | |||
kendo-pager-font-family | $kendo-font-family | inherit | Default: $kendo-font-familyComputed: inherit |
| Description: The font family of the Pager. | |||
kendo-pager-font-size | $kendo-font-size-md | 14px | Default: $kendo-font-size-mdComputed: 14px |
| Description: The font size of the Pager. | |||
kendo-pager-line-height | $kendo-line-height-md | 1.4285714286 | Default: $kendo-line-height-mdComputed: 1.4285714286 |
| Description: The line height of the Pager. | |||
kendo-pager-bg | $kendo-component-header-bg | #fafafa | Default: $kendo-component-header-bgComputed: #fafafa |
| Description: The background color of the Pager. | |||
kendo-pager-text | $kendo-component-header-text | #424242 | Default: $kendo-component-header-textComputed: #424242 |
| Description: The text color of the Pager. | |||
kendo-pager-border | $kendo-component-border | rgba(0, 0, 0, 0.08) | Default: $kendo-component-borderComputed: rgba(0, 0, 0, 0.08) |
| Description: The border color of the Pager. | |||
kendo-pager-focus-bg | null | null | Default: nullComputed: null |
| Description: The background color of the focused Pager. | |||
kendo-pager-focus-shadow | $kendo-focus-shadow | inset 0 0 0 2px rgba(0, 0, 0, 0.13) | Default: $kendo-focus-shadowComputed: inset 0 0 0 2px rgba(0, 0, 0, 0.13) |
| Description: The box shadow of the focused Pager. | |||
kendo-pager-item-border-width | 0px | 0px | Default: 0pxComputed: 0px |
| Description: The border width of the Pager items. | |||
kendo-pager-item-border-radius | null | null | Default: nullComputed: null |
| Description: The border radius of the Pager items. | |||
kendo-pager-item-spacing | null | null | Default: nullComputed: null |
| Description: The spacing around the Pager items. | |||
kendo-pager-item-bg | null | null | Default: nullComputed: null |
| Description: The background color of the Pager items. | |||
kendo-pager-item-text | null | null | Default: nullComputed: null |
| Description: The text color of the Pager items. | |||
kendo-pager-item-border | null | null | Default: nullComputed: null |
| Description: The border color of the Pager items. | |||
kendo-pager-item-hover-bg | $kendo-list-item-hover-bg | #f0f0f0 | Default: $kendo-list-item-hover-bgComputed: #f0f0f0 |
| Description: The background color of the hovered Pager items. | |||
kendo-pager-item-hover-text | $kendo-list-item-hover-text | #424242 | Default: $kendo-list-item-hover-textComputed: #424242 |
| Description: The text color of the hovered Pager items. | |||
kendo-pager-item-hover-border | null | null | Default: nullComputed: null |
| Description: The border color of the hovered Pager items. | |||
kendo-pager-item-selected-bg | $kendo-list-item-selected-bg | #ff6358 | Default: $kendo-list-item-selected-bgComputed: #ff6358 |
| Description: The background color of the selected Pager items. | |||
kendo-pager-item-selected-text | $kendo-list-item-selected-text | white | Default: $kendo-list-item-selected-textComputed: white |
| Description: The text color of the selected Pager items. | |||
kendo-pager-item-selected-border | null | null | Default: nullComputed: null |
| Description: The border color of the selected Pager items. | |||
kendo-pager-item-focus-opacity | null | null | Default: nullComputed: null |
| Description: The opacity of the focused Pager items. | |||
kendo-pager-item-focus-bg | transparent | transparent | Default: transparentComputed: transparent |
| Description: The background color of the focused Pager items. | |||
kendo-pager-item-focus-shadow | $kendo-list-item-focus-shadow | inset 0 0 0 2px rgba(0, 0, 0, 0.12) | Default: $kendo-list-item-focus-shadowComputed: inset 0 0 0 2px rgba(0, 0, 0, 0.12) |
| Description: The box shadow of the focused Pager items. | |||
kendo-pager-number-border-radius | null | null | Default: nullComputed: null |
| Description: The border radius of the Pager numbers. | |||
kendo-pager-input-width | 5em | 5em | Default: 5emComputed: 5em |
| Description: The width of the Inputs in the Pager. | |||
kendo-pager-sm-dropdown-width | 5em | 5em | Default: 5emComputed: 5em |
| Description: The width of the DropDowns in the small Pager. | |||
kendo-pager-md-dropdown-width | 5em | 5em | Default: 5emComputed: 5em |
| Description: The width of the DropDowns in the medium Pager. | |||
kendo-pager-lg-dropdown-width | 5em | 5em | Default: 5emComputed: 5em |
| Description: The width of the DropDowns in the large Pager. | |||
kendo-pager-sizes | (
sm: (
padding-x: $kendo-pager-sm-padding-x,
padding-y: $kendo-pager-sm-padding-y,
item-group-spacing: $kendo-pager-sm-item-group-spacing,
item-min-width: $kendo-pager-sm-item-min-width,
pager-dropdown-width: $kendo-pager-sm-dropdown-width
),
md: (
padding-x: $kendo-pager-md-padding-x,
padding-y: $kendo-pager-md-padding-y,
item-group-spacing: $kendo-pager-md-item-group-spacing,
item-min-width: $kendo-pager-md-item-min-width,
pager-dropdown-width: $kendo-pager-md-dropdown-width
),
lg: (
padding-x: $kendo-pager-lg-padding-x,
padding-y: $kendo-pager-lg-padding-y,
item-group-spacing: $kendo-pager-lg-item-group-spacing,
item-min-width: $kendo-pager-lg-item-min-width,
pager-dropdown-width: $kendo-pager-lg-dropdown-width
)
) | (sm: (padding-x: 4px, padding-y: 4px, item-group-spacing: 12px, item-min-width: calc(1.4285714286em + 4px + 2px), pager-dropdown-width: 5em), md: (padding-x: 8px, padding-y: 8px, item-group-spacing: 14px, item-min-width: calc(1.4285714286em + 8px + 2px), pager-dropdown-width: 5em), lg: (padding-x: 10px, padding-y: 10px, item-group-spacing: 16px, item-min-width: calc(1.5em + 16px + 2px), pager-dropdown-width: 5em)) | Default: (
sm: (
padding-x: $kendo-pager-sm-padding-x,
padding-y: $kendo-pager-sm-padding-y,
item-group-spacing: $kendo-pager-sm-item-group-spacing,
item-min-width: $kendo-pager-sm-item-min-width,
pager-dropdown-width: $kendo-pager-sm-dropdown-width
),
md: (
padding-x: $kendo-pager-md-padding-x,
padding-y: $kendo-pager-md-padding-y,
item-group-spacing: $kendo-pager-md-item-group-spacing,
item-min-width: $kendo-pager-md-item-min-width,
pager-dropdown-width: $kendo-pager-md-dropdown-width
),
lg: (
padding-x: $kendo-pager-lg-padding-x,
padding-y: $kendo-pager-lg-padding-y,
item-group-spacing: $kendo-pager-lg-item-group-spacing,
item-min-width: $kendo-pager-lg-item-min-width,
pager-dropdown-width: $kendo-pager-lg-dropdown-width
)
)Computed: (sm: (padding-x: 4px, padding-y: 4px, item-group-spacing: 12px, item-min-width: calc(1.4285714286em + 4px + 2px), pager-dropdown-width: 5em), md: (padding-x: 8px, padding-y: 8px, item-group-spacing: 14px, item-min-width: calc(1.4285714286em + 8px + 2px), pager-dropdown-width: 5em), lg: (padding-x: 10px, padding-y: 10px, item-group-spacing: 16px, item-min-width: calc(1.5em + 16px + 2px), pager-dropdown-width: 5em)) |
| Description: The sizes map of the Pager. | |||
