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-md-x`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the Filter.
$kendo-filter-padding-y	String	`$kendo-padding-md-y`	`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, #0d6efd)`
Description The text color of the Filter preview field.
$kendo-filter-preview-operator-text	String	`$kendo-subtle-text`	`var(--kendo-color-subtle, #606970)`
Description The text color of the Filter preview operator.
$kendo-filter-toolbar-focus-shadow	List	`0 0 0 .25rem if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 ))`	`0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent)`
Description The box shadow of the focused Filter toolbar.