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-widthNumber1px1px
Description
The width of the border around the DockManager component.
$kendo-dock-manager-border-styleStringsolidsolid
Description
The style of the border around the DockManager component.
$kendo-dock-manager-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The color of the border around the DockManager component.
$kendo-dock-manager-pane-header-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
The vertical padding of the pane header in the DockManager component.
$kendo-dock-manager-pane-header-padding-xNumberk-map-get( $kendo-spacing, 6 )24px
Description
The horizontal padding of the pane header in the DockManager component.
$kendo-dock-manager-pane-header-border-widthNumber$kendo-dock-manager-border-width1px
Description
The width of the border around the pane header in the DockManager component.
$kendo-dock-manager-pane-header-border-styleStringsolidsolid
Description
The style of the border around the pane header in the DockManager component.
$kendo-dock-manager-pane-header-bgColor$kendo-component-bg#ffffff
Description
The background color of the pane header in the DockManager component.
$kendo-dock-manager-pane-title-padding-yNullnullnull
Description
The vertical padding of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-padding-xNullnullnull
Description
The horizontal padding of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-sizeNumber$kendo-font-size-lg16px
Description
The font size of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-line-heightNumber$kendo-line-height-sm1.2
Description
The line height of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-weightNumber$kendo-font-weight-normal400
Description
The font weight of the pane title in the DockManager component.
$kendo-dock-manager-pane-content-padding-xNumber$kendo-dock-manager-pane-header-padding-x24px
Description
The horizontal padding of the pane content in the DockManager component.
$kendo-dock-manager-pane-content-padding-yNumber$kendo-dock-manager-pane-header-padding-x24px
Description
The vertical padding of the pane content in the DockManager component.
$kendo-dock-manager-tabbed-pane-padding-yNullnullnull
Description
The horizontal padding of the tabbed pane in the DockManager component.
$kendo-dock-manager-tabbed-pane-padding-xNullnullnull
Description
The horizontal padding of the tabbed pane in the DockManager component.
$kendo-dock-manager-unpinned-container-widthNumber300px300px
Description
The width of the unpinned pane container in the DockManager component.
$kendo-dock-manager-unpinned-container-bgColor$kendo-color-white#ffffff
Description
The background-color of the unpinned pane container in the DockManager component.
$kendo-dock-manager-unpinned-container-shadowList4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03)4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03)
Description
The box shadow of the unpinned pane container in the DockManager component.
$kendo-dock-indicator-paddingNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
The padding of the dock indicator in the DockManager component.
$kendo-dock-indicator-bgColor$kendo-base-bg#ffffff
Description
The background color of the dock indicator in the DockManager component.
$kendo-dock-indicator-textColor$kendo-color-primary#3f51b5
Description
The text color of the dock indicator in the DockManager component.
$kendo-dock-indicator-outline-widthNumber1px1px
Description
The outline width of the dock indicator in the DockManager component.
$kendo-dock-indicator-outline-styleStringsolidsolid
Description
The outline style of the dock indicator in the DockManager component.
$kendo-dock-indicator-outlineColor$kendo-dock-indicator-text#3f51b5
Description
The outline color of the dock indicator in the DockManager component.
$kendo-dock-indicator-shadowListdrop-shadow( 0px 1px 18px rgba(0, 0, 0, 0.12) ) drop-shadow( 0px 6px 10px rgba(0, 0, 0, 0.14) ) drop-shadow( 0px 3px 5px rgba(0, 0, 0, 0.20) )drop-shadow(0px 1px 18px rgba(0, 0, 0, 0.12)) drop-shadow(0px 6px 10px rgba(0, 0, 0, 0.14)) drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2))
Description
The box shadow of the dock indicator in the DockManager component.
$kendo-dock-indicator-hover-bgColorif($kendo-enable-color-system, k-color( primary-hover ), k-color-mix( $kendo-color-white, $kendo-color-primary, 8% ))#4e5fbb
Description
The background color of the hovered dock indicator in the DockManager component.
$kendo-dock-indicator-hover-textColor$kendo-color-white#ffffff
Description
The text color of the hovered dock indicator in the DockManager component.
$kendo-dock-manager-dock-preview-border-widthNumber1px1px
Description
The width of the border around the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-border-styleStringdasheddashed
Description
The style of the border around the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-border-radiusNumber$kendo-border-radius-sm2px
Description
The border radius of the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 ))rgba(63, 81, 181, 0.16)
Description
The background color of the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-borderColor$kendo-color-primary#3f51b5
Description
The border color of the dropping area in the DockManager component.

In this article

Not finding the help you need?