Customizing Notification
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-notification-group-gap | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The row-gap between the elements in the Notification group. | |||
| $kendo-notification-padding-x | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding of the Notification. | |||
| $kendo-notification-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the Notification. | |||
| $kendo-notification-border-width | Number | 1px | 1px |
| $kendo-notification-border-radius | String | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The border radius of the Notification. | |||
| $kendo-notification-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Notification. | |||
| $kendo-notification-font-size | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
Description
The font size of the Notification. | |||
| $kendo-notification-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Notification. | |||
| $kendo-notification-bg | String | var( --kendo-component-bg, inherit ) | var(--kendo-component-bg, inherit) |
Description
The background color of the Notification. | |||
| $kendo-notification-text | String | var( --kendo-component-text, inherit ) | var(--kendo-component-text, inherit) |
Description
The text color of the Notification. | |||
| $kendo-notification-border | String | var( --kendo-component-border, inherit ) | var(--kendo-component-border, inherit) |
Description
The border color of the Notification. | |||
| $kendo-notification-box-shadow | String | none | none |
Description
The box shadow of the Notification. | |||
| $kendo-notification-icon-spacing | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal spacing of the Notification icon. | |||
| $kendo-notification-close-icon-spacing | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The horizontal spacing of the Notification close icon. | |||
| $kendo-notification-icon-text | String | var( --kendo-component-text, inherit ) | var(--kendo-component-text, inherit) |
Description
The color of the Notification icon. | |||
| $kendo-notification-brand-colors | Map | (
primary: primary,
error: error,
warning: warning,
success: success,
info: info,
secondary: if($kendo-enable-color-system, secondary, neutral),
tertiary: tertiary,
) | (primary: primary, error: error, warning: warning, success: success, info: info, secondary: secondary, tertiary: tertiary) |
Description
The theme variations for the Notification. | |||
| $kendo-notification-theme-colors | Map | () | (primary: (bg: var(--kendo-color-primary-subtle, #deecf9), text: var(--kendo-color-primary-on-subtle, #001c30), border: var(--kendo-color-primary-subtle, #deecf9)), error: (bg: var(--kendo-color-error-subtle, #fde7e9), text: var(--kendo-color-error-on-subtle, #420f12), border: var(--kendo-color-error-subtle, #fde7e9)), warning: (bg: var(--kendo-color-warning-subtle, #fff4ce), text: var(--kendo-color-warning-on-subtle, #323130), border: var(--kendo-color-warning-subtle, #fff4ce)), success: (bg: var(--kendo-color-success-subtle, #dff6dd), text: var(--kendo-color-success-on-subtle, #063206), border: var(--kendo-color-success-subtle, #dff6dd)), info: (bg: var(--kendo-color-info-subtle, #cee5ff), text: var(--kendo-color-info-on-subtle, #032040), border: var(--kendo-color-info-subtle, #cee5ff)), secondary: (bg: var(--kendo-color-secondary-subtle, #faf9f8), text: var(--kendo-color-secondary-on-subtle, #323130), border: var(--kendo-color-secondary-subtle, #faf9f8)), tertiary: (bg: var(--kendo-color-tertiary-subtle, #deecf9), text: var(--kendo-color-tertiary-on-subtle, #174974), border: var(--kendo-color-tertiary-subtle, #deecf9)), dark: (bg: var(--kendo-color-dark, #323130), text: var(--kendo-color-on-dark, #ffffff), border: var(--kendo-color-dark, #323130)), light: (bg: var(--kendo-color-light, #d2d0ce), text: var(--kendo-color-on-light, #323130), border: var(--kendo-color-light, #d2d0ce))) |
Description
The theme colors map for the Notification variations. | |||
