Customizing Filter

Variables

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-filter-padding-x	String	`$kendo-padding-sm-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Filter.
$kendo-filter-padding-y	String	`$kendo-filter-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Filter.
$kendo-filter-bottom-margin	Number	`2.1em`	`2.1em`
Description The bottom margin of the Filter.
$kendo-filter-line-size	Number	`1px`	`1px`
Description The width of the line that connects the Filter items.
$kendo-filter-operator-dropdown-width	Number	`15em`	`15em`
Description The width of the dropdown elements in the Filter items.
$kendo-filter-preview-field-text	String	`$kendo-color-primary`	`var(--kendo-color-primary, #3f51b5)`
Description The text color of the Filter preview field.
$kendo-filter-preview-operator-text	String	`$kendo-subtle-text`	`var(--kendo-color-subtle, #757575)`
Description The text color of the Filter preview operator.
$kendo-filter-toolbar-focus-shadow	List	`0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12)`	`0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.14), 0 1px 10px rgba(0, 0, 0, 0.12)`
Description The box shadow of the focused Filter toolbar.