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 | Number | k-map-get( $kendo-spacing, 3 ) | 0.75rem |
Description
The row-gap between the elements in the Notification group. | |||
$kendo-notification-padding-x | Number | $alert-padding-x | 1rem |
Description
The horizontal padding of the Notification. | |||
$kendo-notification-padding-y | Number | $alert-padding-y | 1rem |
Description
The vertical padding of the Notification. | |||
$kendo-notification-border-width | Number | $alert-border-width | 1px |
Description
The width of the border around the Notification. | |||
$kendo-notification-border-radius | Number | $alert-border-radius | 0.375rem |
Description
The border radius of the Notification. | |||
$kendo-notification-font-family | List | $kendo-font-family | system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" |
Description
The font family of the Notification. | |||
$kendo-notification-font-size | Number | $kendo-font-size-sm | 0.875rem |
Description
The font size of the Notification. | |||
$kendo-notification-line-height | Number | $kendo-line-height-md | 1.5 |
Description
The line height of the Notification. | |||
$kendo-notification-bg | Color | $kendo-component-bg | #ffffff |
Description
The background color of the Notification. | |||
$kendo-notification-text | Color | $kendo-component-text | #212529 |
Description
The text color of the Notification. | |||
$kendo-notification-border | Color | $kendo-component-border | #dee2e6 |
Description
The border color of the Notification. | |||
$kendo-notification-shadow | String | $kendo-popup-shadow | var(--kendo-elevation-4, 0px 6px 13px rgba(0, 0, 0, 0.125)) |
Description
The box shadow of the Notification. | |||
$kendo-notification-icon-spacing | Number | $kendo-icon-spacing | 0.5rem |
Description
The horizontal spacing of the Notification icon. | |||
$kendo-notification-theme-colors | Map | $kendo-theme-colors | ("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529) |
Description
The theme colors map for the Notification. | |||
$kendo-notification-theme | Map | notification-theme( $kendo-notification-theme-colors ) | ("inverse": (color: #111315, background-color: #c1c2c3, border: #d3d3d4), "light": (color: #818182, background-color: #fdfdfe, border: #fefefe), "dark": (color: #111315, background-color: #c1c2c3, border: #d3d3d4), "error": (color: #721c24, background-color: #f5c6cb, border: #f8d7da), "warning": (color: #856404, background-color: #ffeeba, border: #fff3cd), "success": (color: #0d462c, background-color: #bfddcf, border: #d1e7dd), "info": (color: #07697d, background-color: #bbf0fb, border: #cff4fc), "tertiary": (color: #3a2264, background-color: #d7caee, border: #e2d9f3), "secondary": (color: #383d41, background-color: #d6d8db, border: #e2e3e5), "primary": (color: #073984, background-color: #bbd6fe, border: #cfe2ff)) |
Description
The generated theme colors map for the Notification. |