Sass Variables
The Telerik and Kendo UI ScrollView enables you to configure and customize its appearance through the available Sass variables.
Variable | Default Value | Computed Value | Value |
---|---|---|---|
kendo-scrollview-border-width | 1px | 1px | Default: 1px Computed: 1px |
Description: The width of the border around the ScrollView. | |||
kendo-scrollview-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 ScrollView. | |||
kendo-scrollview-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 ScrollView. | |||
kendo-scrollview-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 ScrollView. | |||
kendo-scrollview-text | $kendo-component-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-text Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
Description: The text color of the ScrollView. | |||
kendo-scrollview-bg | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-component-bg Computed: var(--kendo-color-surface-alt, #ffffff) |
Description: The background color of the ScrollView. | |||
kendo-scrollview-border | $kendo-component-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-component-border Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description: The border color of the ScrollView. | |||
kendo-scrollview-pagebutton-size | 10px | 10px | Default: 10px Computed: 10px |
Description: The size of the ScrollView page button. | |||
kendo-scrollview-pagebutton-bg | $kendo-button-bg | var(--kendo-color-base, #f5f5f5) | Default: $kendo-button-bg Computed: var(--kendo-color-base, #f5f5f5) |
Description: The background color of the ScrollView page button. | |||
kendo-scrollview-pagebutton-border | $kendo-button-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-button-border Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description: The border color of the ScrollView page button. | |||
kendo-scrollview-pagebutton-primary-bg | $kendo-color-primary | var(--kendo-color-primary, #ff6358) | Default: $kendo-color-primary Computed: var(--kendo-color-primary, #ff6358) |
Description: The primary background color of the ScrollView page button. | |||
kendo-scrollview-pagebutton-primary-border | $kendo-color-primary | var(--kendo-color-primary, #ff6358) | Default: $kendo-color-primary Computed: var(--kendo-color-primary, #ff6358) |
Description: The primary border color of the ScrollView page button. | |||
kendo-scrollview-pagebutton-shadow | 0 0 0 2px rgba(0, 0, 0, .13) | (0 0 0 2px rgba(0, 0, 0, 0.13)) | Default: 0 0 0 2px rgba(0, 0, 0, .13) Computed: (0 0 0 2px rgba(0, 0, 0, 0.13)) |
Description: The box shadow of the ScrollView page button. | |||
kendo-scrollview-pager-offset | 0 | 0 | Default: 0 Computed: 0 |
Description: The offset of the ScrollView pager. | |||
kendo-scrollview-pager-item-spacing | k-spacing(5) | var(--kendo-spacing-5, 1.25rem) | Default: k-spacing(5) Computed: var(--kendo-spacing-5, 1.25rem) |
Description: The spacing between the ScrollView pager items. | |||
kendo-scrollview-pager-item-border-width | 0px | 0px | Default: 0px Computed: 0px |
Description: The border width of the ScrollView pager items. | |||
kendo-scrollview-pager-height | calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + calc( #{$kendo-scrollview-pager-item-spacing} * 2 ) ) | calc(10px + 0px + var(--kendo-spacing-5, 1.25rem) * 2) | Default: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + calc( #{$kendo-scrollview-pager-item-spacing} * 2 ) ) Computed: calc(10px + 0px + var(--kendo-spacing-5, 1.25rem) * 2) |
Description: The height of the ScrollView pager. | |||
kendo-scrollview-arrow-tap-highlight-color | $kendo-color-rgba-transparent | rgba(0, 0, 0, 0) | Default: $kendo-color-rgba-transparent Computed: rgba(0, 0, 0, 0) |
Description: The text color of the highlight over the tapped ScrollView navigation arrows. | |||
kendo-scrollview-navigation-color | white | white | Default: white Computed: white |
Description: The color of the ScrollView navigation arrows. | |||
kendo-scrollview-navigation-icon-shadow | rgba(0, 0, 0, .3) 0 0 15px | (rgba(0, 0, 0, 0.3) 0 0 15px) | Default: rgba(0, 0, 0, .3) 0 0 15px Computed: (rgba(0, 0, 0, 0.3) 0 0 15px) |
Description: The box shadow of the ScrollView navigation arrows. | |||
kendo-scrollview-navigation-bg | rgba(0, 0, 0, 0) | rgba(0, 0, 0, 0) | Default: rgba(0, 0, 0, 0) Computed: rgba(0, 0, 0, 0) |
Description: The background color of the ScrollView navigation. | |||
kendo-scrollview-navigation-default-opacity | .7 | 0.7 | Default: .7 Computed: 0.7 |
Description: The opacity of the ScrollView navigation. | |||
kendo-scrollview-navigation-hover-opacity | 1 | 1 | Default: 1 Computed: 1 |
Description: The hover opacity of the ScrollView navigation. | |||
kendo-scrollview-navigation-hover-span-bg | null | null | Default: null Computed: null |
Description: The hover background color of the ScrollView navigation arrows. | |||
kendo-scrollview-light-bg | rgba(255, 255, 255, .4) | rgba(255, 255, 255, 0.4) | Default: rgba(255, 255, 255, .4) Computed: rgba(255, 255, 255, 0.4) |
Description: The background color of the ScrollView pager in light mode. | |||
kendo-scrollview-dark-bg | rgba(0, 0, 0, .4) | rgba(0, 0, 0, 0.4) | Default: rgba(0, 0, 0, .4) Computed: rgba(0, 0, 0, 0.4) |
Description: The background color of the ScrollView pager in dark mode. | |||
kendo-scrollview-transition-duration | .3s | 0.3s | Default: .3s Computed: 0.3s |
Description: The duration of the ScrollView transition. | |||
kendo-scrollview-transition-timing-function | ease-in-out | ease-in-out | Default: ease-in-out Computed: ease-in-out |
Description: The timing function of the ScrollView transition. |