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

Customizing Popup

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-popup-padding-xNullnullnull
Description
Horizontal padding of the popup.
$kendo-popup-padding-yNullnullnull
Description
Vertical padding of the popup.
$kendo-popup-border-widthNumber1px1px
Description
Width of the border around the popup.
$kendo-popup-border-radiusNumber$kendo-border-radius-md0.375rem
Description
Border radius of the popup.
$kendo-popup-font-sizeNumber$kendo-font-size-md1rem
Description
Font size of the popup.
$kendo-popup-line-heightNumber$kendo-line-height-md1.5
Description
Line height of the popup.
$kendo-popup-content-padding-xNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
Horizontal padding of the popup content.
$kendo-popup-content-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
Vertical padding of the popup content.
$kendo-popup-bgColor$kendo-component-bg#ffffff
Description
Background color of the popup.
$kendo-popup-textColor$kendo-component-text#212529
Description
Text color of the popup.
$kendo-popup-borderColor$kendo-component-border#dee2e6
Description
Border color of the popup.
$kendo-popup-shadowStringk-elevation(4)var(--kendo-elevation-4, 0px 6px 13px rgba(0, 0, 0, 0.125))
Description
Box shadow of the popup.

In this article

Not finding the help you need?