New to Kendo UI for Vue? Start a free 30-day trial
Customizing Scrollview
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-scrollview-border-width | 0px | ||
Description
The width of the border around the ScrollView. | |||
| $kendo-scrollview-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the ScrollView. | |||
| $kendo-scrollview-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the ScrollView. | |||
| $kendo-scrollview-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the ScrollView. | |||
| $kendo-scrollview-text | var( --kendo-component-text, inherit ) | ||
Description
The text color of the ScrollView. | |||
| $kendo-scrollview-bg | var( --kendo-component-bg, inherit ) | ||
Description
The background color of the ScrollView. | |||
| $kendo-scrollview-border | var( --kendo-component-border, inherit ) | ||
Description
The border color of the ScrollView. | |||
| $kendo-scrollview-pagebutton-size | 10px | ||
Description
The size of the ScrollView page button. | |||
| $kendo-scrollview-pagebutton-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The background color of the ScrollView page button. | |||
| $kendo-scrollview-pagebutton-border | $kendo-scrollview-pagebutton-bg | ||
Description
The border color of the ScrollView page button. | |||
| $kendo-scrollview-pagebutton-primary-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The primary background color of the ScrollView page button. | |||
| $kendo-scrollview-pagebutton-primary-border | $kendo-scrollview-pagebutton-primary-bg | ||
Description
The primary border color of the ScrollView page button. | |||
| $kendo-scrollview-pagebutton-hover-shadow | 0 0 0 1px if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-30 )) | ||
Description
The hover box shadow of the ScrollView page button. | |||
| $kendo-scrollview-pagebutton-focus-shadow | 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | ||
Description
The focus box shadow of the ScrollView page button. | |||
| $kendo-scrollview-pagebutton-primary-hover-shadow | 0 0 0 2px if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-30 )) | ||
Description
The primary hover box shadow of the ScrollView page button. | |||
| $kendo-scrollview-pagebutton-primary-focus-shadow | 0 0 0 2px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | ||
Description
The primary focus box shadow of the ScrollView page button. | |||
| $kendo-scrollview-pager-offset | 0px | ||
Description
The offset of the ScrollView pager. | |||
| $kendo-scrollview-pager-item-spacing | 20px | ||
Description
The spacing between the ScrollView pager items. | |||
| $kendo-scrollview-pager-item-border-width | 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} + #{$kendo-scrollview-pager-item-spacing * 2} ) | ||
Description
The height of the ScrollView pager. | |||
| $kendo-scrollview-navigation-color | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
The color of the ScrollView navigation arrows. | |||
| $kendo-scrollview-navigation-arrow-shadow | var( --kendo-box-shadow-depth-3, none ) | ||
Description
The box shadow of the ScrollView navigation arrows. | |||
| $kendo-scrollview-navigation-bg | transparent | ||
Description
The background color of the ScrollView navigation. | |||
| $kendo-scrollview-navigation-focus-shadow | 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | ||
Description
The focus box shadow of the ScrollView navigation arrows. | |||
| $kendo-scrollview-navigation-arrow-hover-shadow | var( --kendo-box-shadow-depth-4, none ) | ||
Description
The hover box shadow of the ScrollView navigation arrows. | |||
| $kendo-scrollview-pager-light-bg | rgba( $kendo-color-white, .4 ) | ||
Description
The background color of the ScrollView pager in light mode. | |||
| $kendo-scrollview-pager-dark-bg | rgba( $kendo-color-black, .4 ) | ||
Description
The background color of the ScrollView pager in dark mode. | |||
| $kendo-scrollview-transition-duration | .3s | ||
Description
The duration of the ScrollView transition. | |||
| $kendo-scrollview-transition-timing-function | ease-in-out | ||
Description
The timing function of the ScrollView transition. | |||
