New to Kendo UI for Vue? Start a free 30-day trial
Customizing Notification
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-notification-group-gap | map.get( $kendo-spacing, 2 ) | ||
Description
The row-gap between the elements in the Notification group. | |||
| $kendo-notification-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
The horizontal padding of the Notification. | |||
| $kendo-notification-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the Notification. | |||
| $kendo-notification-border-width | 1px | ||
| $kendo-notification-border-radius | map.get( $kendo-spacing, 0.5 ) | ||
Description
The border radius of the Notification. | |||
| $kendo-notification-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Notification. | |||
| $kendo-notification-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
The font size of the Notification. | |||
| $kendo-notification-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Notification. | |||
| $kendo-notification-bg | var( --kendo-component-bg, inherit ) | ||
Description
The background color of the Notification. | |||
| $kendo-notification-text | var( --kendo-component-text, inherit ) | ||
Description
The text color of the Notification. | |||
| $kendo-notification-border | var( --kendo-component-border, inherit ) | ||
Description
The border color of the Notification. | |||
| $kendo-notification-box-shadow | none | ||
Description
The box shadow of the Notification. | |||
| $kendo-notification-icon-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal spacing of the Notification icon. | |||
| $kendo-notification-close-icon-spacing | map.get( $kendo-spacing, 4 ) | ||
Description
The horizontal spacing of the Notification close icon. | |||
| $kendo-notification-icon-text | var( --kendo-component-text, inherit ) | ||
Description
The color of the Notification icon. | |||
| $kendo-notification-brand-colors | (
primary: primary,
error: error,
warning: warning,
success: success,
info: info,
secondary: if($kendo-enable-color-system, secondary, neutral),
tertiary: tertiary,
) | ||
Description
The theme variations for the Notification. | |||
| $kendo-notification-theme-colors | () | ||
Description
The theme colors map for the Notification variations. | |||
