Sass Variables
The Telerik and Kendo UI DockManager is a composite UI component. To configure and customize its appearance, use not only its dedicated Sass variables but also the Toolbar Sass variables, as well as the Sass variables provided by the Splitter, and TabStrip components.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-dock-manager-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The width of the border around the DockManager component. | |||
kendo-dock-manager-border-style | solid | solid | Default: solidComputed: solid |
| Description: The style of the border around the DockManager component. | |||
kendo-dock-manager-border | k-color(border) | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: k-color(border)Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The color of the border around the DockManager component. | |||
kendo-dock-manager-pane-header-padding-y | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The vertical padding of the pane header in the DockManager component. | |||
kendo-dock-manager-pane-header-padding-x | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem) |
| Description: The horizontal padding of the pane header in the DockManager component. | |||
kendo-dock-manager-pane-header-border-width | $kendo-dock-manager-border-width | 1px | Default: $kendo-dock-manager-border-widthComputed: 1px |
| Description: The width of the border around the pane header in the DockManager component. | |||
kendo-dock-manager-pane-header-border-style | solid | solid | Default: solidComputed: solid |
| Description: The style of the border around the pane header in the DockManager component. | |||
kendo-dock-manager-pane-header-bg | k-color(surface)!default | var(--kendo-color-surface, #fafafa) | Default: k-color(surface)!defaultComputed: var(--kendo-color-surface, #fafafa) |
| Description: The background color of the pane header in the DockManager component. | |||
kendo-dock-manager-pane-title-padding-y | null | null | Default: nullComputed: null |
| Description: The vertical padding of the pane title in the DockManager component. | |||
kendo-dock-manager-pane-title-padding-x | null | null | Default: nullComputed: null |
| Description: The horizontal padding of the pane title in the DockManager component. | |||
kendo-dock-manager-pane-title-font-family | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit) |
| Description: The font family of the pane title in the DockManager component. | |||
kendo-dock-manager-pane-title-font-size | var( --kendo-font-size-lg, inherit ) | var(--kendo-font-size-lg, inherit) | Default: var( --kendo-font-size-lg, inherit )Computed: var(--kendo-font-size-lg, inherit) |
| Description: The font size of the pane title in the DockManager component. | |||
kendo-dock-manager-pane-title-line-height | var( --kendo-line-height-sm, normal ) | var(--kendo-line-height-sm, normal) | Default: var( --kendo-line-height-sm, normal )Computed: var(--kendo-line-height-sm, normal) |
| Description: The line height of the pane title in the DockManager component. | |||
kendo-dock-manager-pane-title-font-weight | var( --kendo-font-weight-normal, normal ) | var(--kendo-font-weight-normal, normal) | Default: var( --kendo-font-weight-normal, normal )Computed: var(--kendo-font-weight-normal, normal) |
| Description: The font weight of the pane title in the DockManager component. | |||
kendo-dock-manager-pane-content-padding-x | $kendo-dock-manager-pane-header-padding-x | var(--kendo-spacing-4, 1rem) | Default: $kendo-dock-manager-pane-header-padding-xComputed: var(--kendo-spacing-4, 1rem) |
| Description: The horizontal padding of the pane content in the DockManager component. | |||
kendo-dock-manager-pane-content-padding-y | $kendo-dock-manager-pane-header-padding-x | var(--kendo-spacing-4, 1rem) | Default: $kendo-dock-manager-pane-header-padding-xComputed: var(--kendo-spacing-4, 1rem) |
| Description: The vertical padding of the pane content in the DockManager component. | |||
kendo-dock-manager-tabbed-pane-padding-y | k-spacing(3.5) | var(--kendo-spacing-3\.5, 0.875rem) | Default: k-spacing(3.5)Computed: var(--kendo-spacing-3\.5, 0.875rem) |
| Description: The horizontal padding of the tabbed pane in the DockManager component. | |||
kendo-dock-manager-tabbed-pane-padding-x | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal padding of the tabbed pane in the DockManager component. | |||
kendo-dock-manager-unpinned-container-width | 300px | 300px | Default: 300pxComputed: 300px |
| Description: The width of the unpinned pane container in the DockManager component. | |||
kendo-dock-manager-unpinned-container-bg | $kendo-color-white | #ffffff | Default: $kendo-color-whiteComputed: #ffffff |
| Description: The background-color of the unpinned pane container in the DockManager component. | |||
kendo-dock-manager-unpinned-container-shadow | 4px 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)) | Default: 4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03)Computed: (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-padding | k-spacing(1.5) | var(--kendo-spacing-1\.5, 0.375rem) | Default: k-spacing(1.5)Computed: var(--kendo-spacing-1\.5, 0.375rem) |
| Description: The padding of the dock indicator in the DockManager component. | |||
kendo-dock-indicator-bg | #f5f5f5 | #f5f5f5 | Default: #f5f5f5Computed: #f5f5f5 |
| Description: The background color of the dock indicator in the DockManager component. | |||
kendo-dock-indicator-text | k-color(primary) | var(--kendo-color-primary, #ff6358) | Default: k-color(primary)Computed: var(--kendo-color-primary, #ff6358) |
| Description: The text color of the dock indicator in the DockManager component. | |||
kendo-dock-indicator-outline-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The outline width of the dock indicator in the DockManager component. | |||
kendo-dock-indicator-outline-style | solid | solid | Default: solidComputed: solid |
| Description: The outline style of the dock indicator in the DockManager component. | |||
kendo-dock-indicator-outline | $kendo-dock-indicator-text | var(--kendo-color-primary, #ff6358) | Default: $kendo-dock-indicator-textComputed: var(--kendo-color-primary, #ff6358) |
| Description: The outline color of the dock indicator in the DockManager component. | |||
kendo-dock-indicator-shadow | 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.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))) | Default: 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.20) )Computed: (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-bg | k-color(primary) | var(--kendo-color-primary, #ff6358) | Default: k-color(primary)Computed: var(--kendo-color-primary, #ff6358) |
| Description: The background color of the hovered dock indicator in the DockManager component. | |||
kendo-dock-indicator-hover-text | $kendo-color-white | #ffffff | Default: $kendo-color-whiteComputed: #ffffff |
| Description: The text color of the hovered dock indicator in the DockManager component. | |||
kendo-dock-manager-dock-preview-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The width of the border around the dropping area in the DockManager component. | |||
kendo-dock-manager-dock-preview-border-style | dashed | dashed | Default: dashedComputed: dashed |
| Description: The style of the border around the dropping area in the DockManager component. | |||
kendo-dock-manager-dock-preview-border-radius | k-border-radius(sm) | var(--kendo-border-radius-sm, 0.125rem) | Default: k-border-radius(sm)Computed: var(--kendo-border-radius-sm, 0.125rem) |
| Description: The border radius of the dropping area in the DockManager component. | |||
kendo-dock-manager-dock-preview-bg | color-mix(in srgb, k-color(primary) 16%, transparent) | color-mix(in srgb, var(--kendo-color-primary, #ff6358) 16%, transparent) | Default: color-mix(in srgb, k-color(primary) 16%, transparent)Computed: color-mix(in srgb, var(--kendo-color-primary, #ff6358) 16%, transparent) |
| Description: The background color of the dropping area in the DockManager component. | |||
kendo-dock-manager-dock-preview-border | k-color(primary) | var(--kendo-color-primary, #ff6358) | Default: k-color(primary)Computed: var(--kendo-color-primary, #ff6358) |
| Description: The border color of the dropping area in the DockManager component. | |||
