New to Kendo UI for Angular? 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 | map.get( $kendo-spacing, 1 ) 0 0 | ||
Description
The width of the border around the Window. | |||
| $kendo-window-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
The border radius of the Window. | |||
| $kendo-window-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Window. | |||
| $kendo-window-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the Window. | |||
| $kendo-window-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Window. | |||
| $kendo-window-titlebar-padding-x | map.get( $kendo-spacing, 6 ) | ||
Description
The horizontal padding of the Window titlebar. | |||
| $kendo-window-titlebar-padding-y | map.get( $kendo-spacing, 5 ) | ||
Description
The vertical padding of the Window titlebar. | |||
| $kendo-window-titlebar-border-width | 0 | ||
Description
The width of the border of the Window titlebar. | |||
| $kendo-window-titlebar-border-style | solid | ||
Description
The style of the border of the Window titlebar. | |||
| $kendo-window-title-font-size | var( --kendo-font-size-xl, inherit ) | ||
Description
The font size of the title of the Window. | |||
| $kendo-window-title-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the title of the Window. | |||
| $kendo-window-title-font-weight | var( --kendo-font-weight-bold, bold ) | ||
Description
The font weight of the title of the Window. | |||
| $kendo-window-actions-gap | 0px | ||
Description
The spacing between the buttons in the Window titlebar. | |||
| $kendo-window-action-opacity | 1 | ||
Description
OThe opacity of the buttons in the Window titlebar. | |||
| $kendo-window-action-hover-opacity | 1 | ||
Description
The opacity of the hovered buttons in the Window titlebar. | |||
| $kendo-window-inner-padding-x | map.get( $kendo-spacing, 6 ) | ||
Description
The horizontal padding of the content of the Window. | |||
| $kendo-window-inner-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
The vertical padding of the content of the Window. | |||
| $kendo-window-buttongroup-padding-x | map.get( $kendo-spacing, 6 ) | ||
Description
The horizontal padding of the Window action buttons. | |||
| $kendo-window-buttongroup-padding-y | map.get( $kendo-spacing, 6 ) | ||
Description
The vertical padding of the Window action buttons. | |||
| $kendo-window-buttongroup-border-width | 0 | ||
Description
The width of the top border of the Window action buttons. | |||
| $kendo-window-buttongroup-spacing | map.get( $kendo-spacing, 3 ) | ||
Description
The spacing between the Window action buttons. | |||
| $kendo-window-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the Window. | |||
| $kendo-window-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the Window. | |||
| $kendo-window-border | k-get-theme-color-var( primary-100 ) | ||
Description
The border color of the Window. | |||
| $kendo-window-shadow | var( --kendo-box-shadow-depth-8, none ) | ||
Description
The box shadow of the Window. | |||
| $kendo-window-focus-shadow | var( --kendo-box-shadow-depth-9, none ) | ||
Description
The box shadow of the focused Window. | |||
| $kendo-window-titlebar-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the Window titlebar. | |||
| $kendo-window-titlebar-text | k-get-theme-color-var( primary-100 ) | ||
Description
The text color of the Window titlebar. | |||
| $kendo-window-titlebar-border | k-get-theme-color-var( primary-100 ) | ||
Description
The border color of the Window titlebar. | |||
| $kendo-window-sizes | (
sm: 300px,
md: 800px,
lg: 1200px
) | ||
Description
The map of the width of the different Window sizes. | |||
| $kendo-window-brand-colors | (
primary: primary
) | ||
Description
The theme variations for the Window. | |||
| $kendo-window-theme-colors | () | ||
Description
The theme colors map for the Window. | |||
