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: 1px Computed: 1px |
Description: The width of the border around the DockManager component. | |||
kendo-dock-manager-border-style | solid | solid | Default: solid Computed: solid |
Description: The style of the border around the DockManager component. | |||
kendo-dock-manager-border | $kendo-base-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-base-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-width Computed: 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: solid Computed: solid |
Description: The style of the border around the pane header in the DockManager component. | |||
kendo-dock-manager-pane-header-bg | $kendo-component-header-bg | var(--kendo-color-surface, #fafafa) | Default: $kendo-component-header-bg Computed: 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: null Computed: null |
Description: The vertical padding of the pane title in the DockManager component. | |||
kendo-dock-manager-pane-title-padding-x | null | null | Default: null Computed: 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-x Computed: 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-x Computed: 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: 300px Computed: 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-white Computed: #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: #f5f5f5 Computed: #f5f5f5 |
Description: The background color of the dock indicator in the DockManager component. | |||
kendo-dock-indicator-text | $kendo-color-primary | var(--kendo-color-primary, #ff6358) | Default: $kendo-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: 1px Computed: 1px |
Description: The outline width of the dock indicator in the DockManager component. | |||
kendo-dock-indicator-outline-style | solid | solid | Default: solid Computed: 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-text Computed: 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 | $kendo-color-primary | var(--kendo-color-primary, #ff6358) | Default: $kendo-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-white Computed: #ffffff |
Description: The text color of the hovered dock indicator in the DockManager component. | |||
kendo-dock-manager-dock-preview-border-width | 1px | 1px | Default: 1px Computed: 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: dashed Computed: 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 | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 16%, transparent), rgba( $kendo-color-primary, .16 )) | color-mix(in srgb, var(--kendo-color-primary, #ff6358) 16%, transparent) | Default: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 16%, transparent), rgba( $kendo-color-primary, .16 )) 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 | $kendo-color-primary | var(--kendo-color-primary, #ff6358) | Default: $kendo-color-primary Computed: var(--kendo-color-primary, #ff6358) |
Description: The border color of the dropping area in the DockManager component. |