Sass Variables
The Telerik and Kendo UI ListView enables you to configure and customize its appearance through the available Sass variables. Additionally, to configure and customize the appearance of its pager, use the Sass variables provided by the Pager Sass variables.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-listview-padding-x | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) |
| Description: The horizontal padding of the ListView. | |||
kendo-listview-padding-y | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) |
| Description: The vertical padding of the ListView. | |||
kendo-listview-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The width of the border around bordered ListView. | |||
kendo-listview-font-family | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit) |
| Description: The font family of the ListView. | |||
kendo-listview-font-size | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) | Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit) |
| Description: The font size of the ListView. | |||
kendo-listview-line-height | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) | Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal) |
| Description: The line height of the ListView. | |||
kendo-listview-text | $kendo-component-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the ListView. | |||
kendo-listview-bg | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-component-bgComputed: var(--kendo-color-surface-alt, #ffffff) |
| Description: The background color of the ListView. | |||
kendo-listview-border | $kendo-component-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-component-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of the ListView. | |||
kendo-listview-item-padding-x | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) |
| Description: The horizontal padding of the ListView items. | |||
kendo-listview-item-padding-y | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) |
| Description: The vertical padding of the ListView items. | |||
kendo-listview-item-selected-text | null | null | Default: nullComputed: null |
| Description: The text color of the selected ListView items. | |||
kendo-listview-item-selected-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) | color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent) | Default: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))Computed: color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent) |
| Description: The background color of the selected ListView items. | |||
kendo-listview-item-selected-border | null | null | Default: nullComputed: null |
| Description: The border color of the selected ListView items. | |||
kendo-listview-item-focus-text | null | null | Default: nullComputed: null |
| Description: The text color of the focused ListView items. | |||
kendo-listview-item-focus-bg | null | null | Default: nullComputed: null |
| Description: The background color of the focused ListView items. | |||
kendo-listview-item-focus-border | null | null | Default: nullComputed: null |
| Description: The border color of the focused ListView items. | |||
kendo-listview-item-focus-shadow | inset 0 0 0 2px rgba(0, 0, 0, .13) | inset 0 0 0 2px rgba(0, 0, 0, 0.13) | Default: inset 0 0 0 2px rgba(0, 0, 0, .13)Computed: inset 0 0 0 2px rgba(0, 0, 0, 0.13) |
| Description: The box shadow of the focused ListView items. | |||
