New to Kendo UI for AngularStart a free 30-day trial

Customizing Window

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-window-border-widthNumber0px0px
Description
The width of the border around the Window.
$kendo-window-border-radiusNumber4px4px
Description
The border radius of the Window.
$kendo-window-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Window.
$kendo-window-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Window.
$kendo-window-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The line height of the Window.
$kendo-window-titlebar-padding-xStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the Window titlebar.
$kendo-window-titlebar-padding-yStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The vertical padding of the Window titlebar.
$kendo-window-titlebar-border-widthNumber0px0px
Description
The width of the border of the Window titlebar.
$kendo-window-titlebar-border-styleStringsolidsolid
Description
The style of the border of the Window titlebar.
$kendo-window-title-font-sizeStringvar( --kendo-font-size-lg, inherit )var(--kendo-font-size-lg, inherit)
Description
The font size of the title of the Window.
$kendo-window-title-line-heightStringvar( --kendo-line-height-lg, normal )var(--kendo-line-height-lg, normal)
Description
The line height of the title of the Window.
$kendo-window-actions-gapNullnullnull
Description
The spacing between the buttons in the Window titlebar.
$kendo-window-action-opacityNullnullnull
Description
The opacity of the buttons in the Window titlebar.
$kendo-window-action-hover-opacityNullnullnull
Description
The opacity of the hovered buttons in the Window titlebar.
$kendo-window-inner-padding-xStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the content of the Window.
$kendo-window-inner-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the content of the Window.
$kendo-window-buttongroup-padding-xString$kendo-actions-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Window action buttons.
$kendo-window-buttongroup-padding-yString$kendo-actions-padding-yvar(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the Window action buttons.
$kendo-window-buttongroup-border-widthNumber0px0px
Description
The width of the top border of the Window action buttons.
$kendo-window-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Window.
$kendo-window-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the Window.
$kendo-window-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Window.
$kendo-window-shadowString$box-shadow-depth-8var(--kendo-elevation-8, 0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14))
Description
The box shadow of the Window.
$kendo-window-focus-shadowString$box-shadow-depth-9var(--kendo-elevation-9, 0px 11px 15px rgba(0, 0, 0, 0.2), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14))
Description
The box shadow of the focused Window.
$kendo-window-titlebar-bgNullnullnull
Description
The background color of the Window titlebar.
$kendo-window-titlebar-textNullnullnull
Description
The text color of the Window titlebar.
$kendo-window-titlebar-borderNullnullnull
Description
The border color of the Window titlebar.
$kendo-window-titlebar-gradientNullnullnull
Description
The background gradient of the Window titlebar.
$kendo-window-sizesMap( sm: 300px, md: 800px, lg: 1200px )
  • sm: 300px
  • md: 800px
  • lg: 1200px
Description
The map of the width for the different Window sizes.
$kendo-window-theme-colorsMap( "primary": k-map-get($kendo-theme-colors, "primary"), "light": k-map-get($kendo-theme-colors, "light"), "dark": k-map-get($kendo-theme-colors, "dark") )
  • primary: var(--kendo-color-primary, #3f51b5)
  • light: var(--kendo-color-light, #f5f5f5)
  • dark: var(--kendo-color-dark, #424242)
Description
The theme colors map for the Window.
In this article
VariablesSuggested Links
Not finding the help you need?
Contact Support