Customizing Scrollview

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-scrollview-border-widthNumber1px1px
Description
The width of the border around the ScrollView.
$kendo-scrollview-font-familyString$kendo-font-familyinherit
Description
The font family of the ScrollView.
$kendo-scrollview-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the ScrollView.
$kendo-scrollview-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the ScrollView.
$kendo-scrollview-textColor$kendo-component-text#424242
Description
The text color of the ScrollView.
$kendo-scrollview-bgColor$kendo-component-bg#ffffff
Description
The background color of the ScrollView.
$kendo-scrollview-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the ScrollView.
$kendo-scrollview-pagebutton-sizeNumber10px10px
Description
The size of the ScrollView page button.
$kendo-scrollview-pagebutton-bgColor$kendo-button-bg#f5f5f5
Description
The background color of the ScrollView page button.
$kendo-scrollview-pagebutton-borderColor$kendo-button-borderrgba(0, 0, 0, 0.08)
Description
The border color of the ScrollView page button.
$kendo-scrollview-pagebutton-primary-bgColor$kendo-color-primary#ff6358
Description
The primary background color of the ScrollView page button.
$kendo-scrollview-pagebutton-primary-borderColor$kendo-color-primary#ff6358
Description
The primary border color of the ScrollView page button.
$kendo-scrollview-pagebutton-shadowList0 0 0 2px rgba(0, 0, 0, .13)0 0 0 2px rgba(0, 0, 0, 0.13)
Description
The box shadow of the ScrollView page button.
$kendo-scrollview-pager-offsetNumber00
Description
The offset of the ScrollView pager.
$kendo-scrollview-pager-item-spacingNumber20px20px
Description
The spacing between the ScrollView pager items.
$kendo-scrollview-pager-item-border-widthNumber0px0px
Description
The border width of the ScrollView pager items.
$kendo-scrollview-pager-heightCalculationcalc( #{$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-colorColor$kendo-color-rgba-transparentrgba(0, 0, 0, 0)
Description
The text color of the highlight over the tapped ScrollView navigation arrows.
$kendo-scrollview-navigation-colorColorwhitewhite
Description
The color of the ScrollView navigation arrows.
$kendo-scrollview-navigation-icon-shadowListrgba(0, 0, 0, .3) 0 0 15pxrgba(0, 0, 0, 0.3) 0 0 15px
Description
The box shadow of the ScrollView navigation arrows.
$kendo-scrollview-navigation-bgColorrgba(0, 0, 0, 0)rgba(0, 0, 0, 0)
Description
The background color of the ScrollView navigation.
$kendo-scrollview-navigation-default-opacityNumber.70.7
Description
The opacity of the ScrollView navigation.
$kendo-scrollview-navigation-hover-opacityNumber11
Description
The hover opacity of the ScrollView navigation.
$kendo-scrollview-navigation-hover-span-bgNullnullnull
Description
The hover background color of the ScrollView navigation arrows.
$kendo-scrollview-light-bgColorrgba(255, 255, 255, .4)rgba(255, 255, 255, 0.4)
Description
The background color of the ScrollView pager in light mode.
$kendo-scrollview-dark-bgColorrgba(0, 0, 0, .4)rgba(0, 0, 0, 0.4)
Description
The background color of the ScrollView pager in dark mode.
$kendo-scrollview-transition-durationNumber.3s0.3s
Description
The duration of the ScrollView transition.
$kendo-scrollview-transition-timing-functionStringease-in-outease-in-out
Description
The timing function of the ScrollView transition.

In this article

Not finding the help you need?