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

Customizing Dock-manager

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-dock-manager-border-width1px
Description
The width of the border around the DockManager component.
$kendo-dock-manager-border-stylesolid
Description
The style of the border around the DockManager component.
$kendo-dock-manager-bordervar( --kendo-component-border, inherit )
Description
The color of the border around the DockManager component.
$kendo-dock-manager-pane-header-padding-ymap.get( $kendo-spacing, 1 )
Description
The vertical padding of the pane header in the DockManager component.
$kendo-dock-manager-pane-header-padding-xmap.get( $kendo-spacing, 6 )
Description
The horizontal padding of the pane header in the DockManager component.
$kendo-dock-manager-pane-header-border-width$kendo-dock-manager-border-width
Description
The width of the border around the pane header in the DockManager component.
$kendo-dock-manager-pane-header-border-stylesolid
Description
The style of the border around the pane header in the DockManager component.
$kendo-dock-manager-pane-header-bgvar( --kendo-component-bg, inherit )
Description
The background color of the pane header in the DockManager component.
$kendo-dock-manager-pane-header-textif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The text color of the pane header in the DockManager component.
$kendo-dock-manager-pane-title-padding-ynull
Description
The vertical padding of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-padding-xnull
Description
The horizontal padding of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-sizevar( --kendo-font-size-lg, inherit )
Description
The font size of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-line-heightvar( --kendo-line-height, normal )
Description
The line height of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-weightvar( --kendo-font-weight, normal )
Description
The font weight of the pane title in the DockManager component.
$kendo-dock-manager-pane-content-padding-xmap.get( $kendo-spacing, 3 )
Description
The horizontal padding of the pane content in the DockManager component.
$kendo-dock-manager-pane-content-padding-ymap.get( $kendo-spacing, 3 )
Description
The vertical padding of the pane content in the DockManager component.
$kendo-dock-manager-tabbed-pane-padding-ynull
Description
The horizontal padding of the tabbed pane in the DockManager component.
$kendo-dock-manager-tabbed-pane-padding-xnull
Description
The horizontal padding of the tabbed pane in the DockManager component.
$kendo-dock-manager-unpinned-container-width300px
Description
The width of the unpinned pane container in the DockManager component.
$kendo-dock-manager-unpinned-container-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background-color of the unpinned pane container in the DockManager component.
$kendo-dock-manager-unpinned-container-shadow25.6px 0px 57.6px 0px rgba(0, 0, 0, 0.22), 4.8px 0px 14.4px 0px rgba(0, 0, 0, 0.18)
Description
The box shadow of the unpinned pane container in the DockManager component.
$kendo-dock-indicator-paddingmap.get( $kendo-spacing, 1.5 )
Description
The padding of the dock indicator in the DockManager component.
$kendo-dock-indicator-bg$kendo-component-bg
Description
The background color of the dock indicator in the DockManager component.
$kendo-dock-indicator-textif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The text color of the dock indicator in the DockManager component.
$kendo-dock-indicator-outline-width1px
Description
The outline width of the dock indicator in the DockManager component.
$kendo-dock-indicator-outline-stylesolid
Description
The outline style of the dock indicator in the DockManager component.
$kendo-dock-indicator-outline$kendo-dock-indicator-text
Description
The outline color of the dock indicator in the DockManager component.
$kendo-dock-indicator-shadow0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 3px 5px -1px rgba(0, 0, 0, 0.20)
Description
The box shadow of the dock indicator in the DockManager component.
$kendo-dock-indicator-hover-bgif($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
Description
The background color of the hovered dock indicator in the DockManager component.
$kendo-dock-indicator-hover-textif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The text color of the hovered dock indicator in the DockManager component.
$kendo-dock-manager-dock-preview-border-width1px
Description
The width of the border around the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-border-styledashed
Description
The style of the border around the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-border-radiusvar( --kendo-border-radius-md, 0)
Description
The border radius of the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-bgif($kendo-enable-color-system, rgba( k-color( primary, true ), .2 ), color-mix(in srgb, k-get-theme-color-var( primary-100 ) 20%, transparent))
Description
The background color of the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of the dropping area in the DockManager component.

In this article

Not finding the help you need?