New to Kendo UI for Angular? Start a free 30-day trial

Customizing Window

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-window-border-widthListk-spacing(1) 0 0var(--kendo-spacing-1, 0.25rem) 0 0
Description
The width of the border around the Window.
$kendo-window-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
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-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
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(5)var(--kendo-spacing-5, 1.25rem)
Description
The vertical padding of the Window titlebar.
$kendo-window-titlebar-border-widthNumber00
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-xl, inherit )var(--kendo-font-size-xl, inherit)
Description
The font size of the title of the Window.
$kendo-window-title-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the title of the Window.
$kendo-window-title-font-weightStringvar( --kendo-font-weight-bold, bold )var(--kendo-font-weight-bold, bold)
Description
The font weight of the title of the Window.
$kendo-window-actions-gapStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The spacing between the buttons in the Window titlebar.
$kendo-window-action-opacityNumber11
Description
OThe opacity of the buttons in the Window titlebar.
$kendo-window-action-hover-opacityNumber11
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(3)var(--kendo-spacing-3, 0.75rem)
Description
The vertical padding of the content of the Window.
$kendo-window-buttongroup-padding-xStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the Window action buttons.
$kendo-window-buttongroup-padding-yStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The vertical padding of the Window action buttons.
$kendo-window-buttongroup-border-widthNumber00
Description
The width of the top border of the Window action buttons.
$kendo-window-buttongroup-spacingStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The spacing between the Window action buttons.
$kendo-window-bgStringvar( --kendo-component-bg, initial )var(--kendo-component-bg, initial)
Description
The background color of the Window.
$kendo-window-textStringvar( --kendo-component-text, initial )var(--kendo-component-text, initial)
Description
The text color of the Window.
$kendo-window-borderStringif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))var(--kendo-color-primary, #0078d4)
Description
The border color of the Window.
$kendo-window-shadowStringvar( --kendo-box-shadow-depth-8, none )var(--kendo-box-shadow-depth-8, none)
Description
The box shadow of the Window.
$kendo-window-focus-shadowStringvar( --kendo-box-shadow-depth-9, none )var(--kendo-box-shadow-depth-9, none)
Description
The box shadow of the focused Window.
$kendo-window-titlebar-bgStringvar( --kendo-component-bg, initial )var(--kendo-component-bg, initial)
Description
The background color of the Window titlebar.
$kendo-window-titlebar-textStringif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))var(--kendo-color-primary, #0078d4)
Description
The text color of the Window titlebar.
$kendo-window-titlebar-borderStringif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))var(--kendo-color-primary, #0078d4)
Description
The border color 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 of the different Window sizes.
$kendo-window-brand-colorsMap( primary: primary )
  • primary: primary
Description
The theme variations for the Window.
$kendo-window-theme-colorsMap()
  • primary: "bg":"var(--kendo-color-primary, #0078d4)","text":"var(--kendo-color-on-primary, #ffffff)","border":"var(--kendo-color-primary, #0078d4)"
  • 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 Window.

In this article

Not finding the help you need?