Customizing FileManager

Variables

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-file-manager-spacer	String	k-spacing(4)	var(--kendo-spacing-4, 1rem)
Description The space between the FileManager items.
$kendo-file-manager-border-width	Number	1px	1px
Description The border width of the FileManager.
$kendo-file-manager-font-family	String	var( --kendo-font-family, inherit )	var(--kendo-font-family, inherit)
Description The font family of the FileManager.
$kendo-file-manager-font-size	String	var( --kendo-font-size, inherit )	var(--kendo-font-size, inherit)
Description The font size of the FileManager.
$kendo-file-manager-line-height	String	var( --kendo-line-height, normal )	var(--kendo-line-height, normal)
Description The line height of the FileManager.
$kendo-file-manager-bg	String	$kendo-component-bg	var(--kendo-color-surface-alt, #ffffff)
Description The background color of the FileManager.
$kendo-file-manager-text	String	$kendo-component-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the FileManager.
$kendo-file-manager-border	String	$kendo-component-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the FileManager.
$kendo-file-manager-toolbar-border-width	Number	$kendo-file-manager-border-width	1px
Description The border width of the FileManager Toolbar.
$kendo-file-manager-toolbar-bg	Null	null	null
Description The background color of the FileManager Toolbar.
$kendo-file-manager-toolbar-text	Null	null	null
Description The text color of the FileManager Toolbar.
$kendo-file-manager-toolbar-border	Null	null	null
Description The border color of the FileManager Toolbar.
$kendo-file-manager-toolbar-gradient	Null	null	null
Description The gradient of the FileManager Toolbar.
$kendo-file-manager-navigation-padding-x	String	$kendo-file-manager-spacer	var(--kendo-spacing-4, 1rem)
Description The horizontal padding of the FileManager Navigation.
$kendo-file-manager-navigation-padding-y	String	$kendo-file-manager-spacer	var(--kendo-spacing-4, 1rem)
Description The vertical padding of the FileManager Navigation.
$kendo-file-manager-navigation-width	Number	20%	20%
Description The width of the FileManager Navigation.
$kendo-file-manager-navigation-border-width	Number	$kendo-file-manager-border-width	1px
Description The border width of the FileManager Navigation.
$kendo-file-manager-navigation-bg	Null	null	null
Description The background color of the FileManager Navigation.
$kendo-file-manager-navigation-text	Null	null	null
Description The text color of the FileManager Navigation.
$kendo-file-manager-navigation-border	Null	null	null
Description The border color of the FileManager Navigation.
$kendo-file-manager-breadcrumb-padding-x	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The horizontal padding of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-padding-y	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The vertical padding of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-border-width	Number	$kendo-file-manager-border-width	1px
Description The border width of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-bg	String	$kendo-toolbar-bg	var(--kendo-color-surface, #fafafa)
Description The background color of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-text	Null	null	null
Description The text color of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-border	Null	null	null
Description The border color of the FileManager Breadcrumb.
$kendo-file-manager-listview-bg	Null	null	null
Description The background color of the FileManager ListView.
$kendo-file-manager-listview-text	Null	null	null
Description The text color of the FileManager ListView.
$kendo-file-manager-listview-border	Null	null	null
Description The border color of the FileManager ListView.
$kendo-file-manager-listview-item-padding-x	String	k-spacing(4)	var(--kendo-spacing-4, 1rem)
Description The horizontal padding of the FileManager ListView item.
$kendo-file-manager-listview-item-padding-y	String	k-spacing(4)	var(--kendo-spacing-4, 1rem)
Description The vertical padding of the FileManager ListView item.
$kendo-file-manager-listview-item-width	Number	120px	120px
Description The width of the FileManager ListView item.
$kendo-file-manager-listview-item-height	Number	120px	120px
Description The height of the FileManager ListView item.
$kendo-file-manager-listview-item-bg	Null	null	null
Description The background color of the FileManager ListView item.
$kendo-file-manager-listview-item-text	Null	null	null
Description The text color of the FileManager ListView item.
$kendo-file-manager-listview-item-border	Null	null	null
Description The border color of the FileManager ListView item.
$kendo-file-manager-listview-item-icon-bg	Null	null	null
Description The background color of the FileManager ListView item icon.
$kendo-file-manager-listview-item-icon-text	String	if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))	var(--kendo-color-subtle, #666666)
Description The text color of the FileManager ListView item icon.
$kendo-file-manager-listview-item-icon-border	Null	null	null
Description The border color of the FileManager ListView item icon.
$kendo-file-manager-listview-item-icon-selected-bg	Null	null	null
Description Background color of the FileManager selected ListView item icon.
$kendo-file-manager-listview-item-icon-selected-text	String	inherit	inherit
Description Text color of the FileManager selected ListView item icon.
$kendo-file-manager-listview-item-icon-selected-border	Null	null	null
Description Border color of the FileManager selected ListView item icon.
$kendo-file-manager-grid-bg	Null	null	null
Description The background color of the FileManager Grid.
$kendo-file-manager-grid-text	Null	null	null
Description The text color of the FileManager Grid.
$kendo-file-manager-grid-border	Null	null	null
Description The border color of the FileManager Grid.
$kendo-file-manager-preview-padding-x	String	$kendo-file-manager-spacer	var(--kendo-spacing-4, 1rem)
Description The horizontal padding of the FileManager preview.
$kendo-file-manager-preview-padding-y	String	$kendo-file-manager-spacer	var(--kendo-spacing-4, 1rem)
Description The vertical padding of the FileManager preview.
$kendo-file-manager-preview-width	Number	20%	20%
Description The width of the FileManager preview.
$kendo-file-manager-preview-border-width	Number	$kendo-file-manager-border-width	1px
Description The border width of the FileManager preview.
$kendo-file-manager-preview-spacing	String	$kendo-file-manager-spacer	var(--kendo-spacing-4, 1rem)
Description The spacing of the FileManager preview.
$kendo-file-manager-preview-column-gap	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description The gap between the columns in the FileManager preview.
$kendo-file-manager-preview-bg	Null	null	null
Description The background color of the FileManager preview.
$kendo-file-manager-preview-text	Null	null	null
Description The text color of the FileManager preview.
$kendo-file-manager-preview-border	Null	null	null
Description The border color of the FileManager preview.
$kendo-file-manager-preview-icon-bg	Null	null	null
Description The background color of the FileManager preview icon.
$kendo-file-manager-preview-icon-text	String	if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))	var(--kendo-color-subtle, #666666)
Description The text color of the FileManager preview icon.
$kendo-file-manager-preview-icon-border	Null	null	null
Description The border color of the FileManager preview icon.

Suggested Links

• Styling Overview
• Web Font Icons
• Preview of the Themed Components