New to Kendo UI for Vue? Start a free 30-day trial
Customizing Window
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-window-border-width | Number | 1px | 1px |
Description
Width of the border around the window. | |||
| $kendo-window-border-radius | Number | k-map-get( $kendo-border-radii, md ) | 0.25rem |
Description
Border radius of the window. | |||
| $kendo-window-font-family | Null | null | null |
Description
Font family of the window. | |||
| $kendo-window-font-size | Number | $kendo-font-size-md | 1rem |
Description
Font size of the window. | |||
| $kendo-window-line-height | Number | $kendo-line-height-md | 1.5 |
Description
Line height of the window. | |||
| $kendo-window-titlebar-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
Horizontal padding of the window titlebar. | |||
| $kendo-window-titlebar-padding-y | Number | k-map-get( $kendo-spacing, 3 ) | 0.75rem |
Description
Vertical padding of the window titlebar. | |||
| $kendo-window-titlebar-spacing | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
Spacing between title and actions in window titlebar. | |||
| $kendo-window-titlebar-border-width | Null | null | null |
Description
Width of the top border of the window titlebar. | |||
| $kendo-window-titlebar-border-style | String | solid | solid |
Description
Style of the top border of the window titlebar. | |||
| $kendo-window-title-font-size | Number | $kendo-font-size-lg | 1.25rem |
Description
Font size of the title of the window. | |||
| $kendo-window-title-line-height | Number | $kendo-line-height-sm | 1.25 |
Description
Line height of the title of the window. | |||
| $kendo-window-title-font-weight | Null | null | null |
Description
Font weight of the title of the window. | |||
| $kendo-window-titlebar-actions-spacing | Null | null | null |
Description
Spacing between the buttons in the header of the window. | |||
| $kendo-window-titlebar-action-opacity | Number | 1 | 1 |
Description
Opacity of the buttons in the header of the window. | |||
| $kendo-window-titlebar-action-hover-opacity | Number | 1 | 1 |
Description
Opacity of the buttons when hovered in the header of the window. | |||
| $kendo-window-inner-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
Horizontal padding of the content of the window. | |||
| $kendo-window-inner-padding-y | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
Vertical padding of the content of the window. | |||
| $kendo-window-actions-padding-x | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
Horizontal padding of the window action buttons. | |||
| $kendo-window-actions-padding-y | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
Vertical padding of the window action buttons. | |||
| $kendo-window-actions-border-width | Number | 1px | 1px |
Description
Width of the top border of the window action buttons. | |||
| $kendo-window-actions-spacing | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
Spacing between the action buttons of the window. | |||
| $kendo-window-bg | Color | $kendo-component-bg | #ffffff |
Description
Background color of the window. | |||
| $kendo-window-text | Color | $kendo-component-text | #494949 |
Description
Text color of the window. | |||
| $kendo-window-border | Color | $kendo-component-border | #ededed |
Description
Border color of the window. | |||
| $kendo-window-shadow | String | none | none |
Description
Box shadow around the window. | |||
| $kendo-window-focus-shadow | String | none | none |
Description
Box shadow around the window when hovered. | |||
