New to Kendo UI for Angular? 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 | Number | 1px | 1px |
Description
The width of the border around the ScrollView. | |||
$kendo-scrollview-font-family | List | $kendo-font-family | system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" |
Description
The font family of the ScrollView. | |||
$kendo-scrollview-font-size | Number | $kendo-font-size-md | 1rem |
Description
The font size of the ScrollView. | |||
$kendo-scrollview-line-height | Number | $kendo-line-height-md | 1.5 |
Description
The line height of the ScrollView. | |||
$kendo-scrollview-text | Color | $kendo-component-text | #212529 |
Description
The text color of the ScrollView. | |||
$kendo-scrollview-bg | Color | $kendo-component-bg | #ffffff |
Description
The background color of the ScrollView. | |||
$kendo-scrollview-border | Color | $kendo-component-border | #dee2e6 |
Description
The border color of the ScrollView. | |||
$kendo-scrollview-pagebutton-size | Number | 10px | 10px |
Description
The size of the ScrollView page button. | |||
$kendo-scrollview-pagebutton-bg | Color | $kendo-button-bg | #e4e7eb |
Description
The background color of the ScrollView page button. | |||
$kendo-scrollview-pagebutton-border | Color | $kendo-button-border | #e4e7eb |
Description
The border color of the ScrollView page button. | |||
$kendo-scrollview-pagebutton-primary-bg | Color | $kendo-color-primary | #0d6efd |
Description
The primary background color of the ScrollView page button. | |||
$kendo-scrollview-pagebutton-primary-border | Color | $kendo-color-primary | #0d6efd |
Description
The primary border color of the ScrollView page button. | |||
$kendo-scrollview-pagebutton-shadow | List | 0 0 0 2px rgba( black, .13 ) | 0 0 0 2px rgba(0, 0, 0, 0.13) |
Description
The box shadow of the ScrollView page button. | |||
$kendo-scrollview-pager-offset | Number | 0 | 0 |
Description
The offset of the ScrollView pager. | |||
$kendo-scrollview-pager-item-spacing | Number | 20px | 20px |
Description
The spacing between the ScrollView pager items. | |||
$kendo-scrollview-pager-item-border-width | Number | 0px | 0px |
Description
The border width of the ScrollView pager items. | |||
$kendo-scrollview-pager-height | Calculation | calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + #{$kendo-scrollview-pager-item-spacing * 2} ) | calc(10px + 0px + 40px) |
Description
The height of the ScrollView pager. | |||
$kendo-scrollview-arrow-tap-highlight-color | Color | $kendo-color-rgba-transparent | rgba(0, 0, 0, 0) |
Description
The text color of the highlight over the tapped ScrollView navigation arrows. | |||
$kendo-scrollview-navigation-color | Color | white | white |
Description
The color of the ScrollView navigation arrows. | |||
$kendo-scrollview-navigation-icon-shadow | List | rgba( black, .3 ) 0 0 15px | rgba(0, 0, 0, 0.3) 0 0 15px |
Description
The box shadow of the ScrollView navigation arrows. | |||
$kendo-scrollview-navigation-bg | Color | rgba( black, 0 ) | rgba(0, 0, 0, 0) |
Description
The background color of the ScrollView navigation. | |||
$kendo-scrollview-navigation-default-opacity | Number | .7 | 0.7 |
Description
The opacity of the ScrollView navigation. | |||
$kendo-scrollview-navigation-hover-opacity | Number | 1 | 1 |
Description
The hover opacity of the ScrollView navigation. | |||
$kendo-scrollview-navigation-hover-span-bg | Null | null | null |
Description
The hover background color of the ScrollView navigation arrows. | |||
$kendo-scrollview-light-bg | Color | rgba( white, .4 ) | rgba(255, 255, 255, 0.4) |
Description
The background color of the ScrollView pager in light mode. | |||
$kendo-scrollview-dark-bg | Color | rgba( black, .4 ) | rgba(0, 0, 0, 0.4) |
Description
The background color of the ScrollView pager in dark mode. | |||
$kendo-scrollview-transition-duration | Number | .3s | 0.3s |
Description
The duration of the ScrollView transition. | |||
$kendo-scrollview-transition-timing-function | String | ease-in-out | ease-in-out |
Description
The timing function of the ScrollView transition. |