Sass Variables
The Telerik and Kendo UI FileManager 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 Button, SplitButton, TreeView, ListView, BreadCrumb, and Grid components.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-file-manager-spacer | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem) |
| Description: The space between the FileManager items. | |||
kendo-file-manager-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The border width of the FileManager. | |||
kendo-file-manager-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 FileManager. | |||
kendo-file-manager-font-size | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) | Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit) |
| Description: The font size of the FileManager. | |||
kendo-file-manager-line-height | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) | Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal) |
| Description: The line height of the FileManager. | |||
kendo-file-manager-bg | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-component-bgComputed: var(--kendo-color-surface-alt, #ffffff) |
| Description: The background color of the FileManager. | |||
kendo-file-manager-text | $kendo-component-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the FileManager. | |||
kendo-file-manager-border | $kendo-component-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-component-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of the FileManager. | |||
kendo-file-manager-toolbar-border-width | $kendo-file-manager-border-width | 1px | Default: $kendo-file-manager-border-widthComputed: 1px |
| Description: The border width of the FileManager Toolbar. | |||
kendo-file-manager-toolbar-bg | null | null | Default: nullComputed: null |
| Description: The background color of the FileManager Toolbar. | |||
kendo-file-manager-toolbar-text | null | null | Default: nullComputed: null |
| Description: The text color of the FileManager Toolbar. | |||
kendo-file-manager-toolbar-border | null | null | Default: nullComputed: null |
| Description: The border color of the FileManager Toolbar. | |||
kendo-file-manager-toolbar-gradient | null | null | Default: nullComputed: null |
| Description: The gradient of the FileManager Toolbar. | |||
kendo-file-manager-navigation-padding-x | $kendo-file-manager-spacer | var(--kendo-spacing-4, 1rem) | Default: $kendo-file-manager-spacerComputed: var(--kendo-spacing-4, 1rem) |
| Description: The horizontal padding of the FileManager Navigation. | |||
kendo-file-manager-navigation-padding-y | $kendo-file-manager-spacer | var(--kendo-spacing-4, 1rem) | Default: $kendo-file-manager-spacerComputed: var(--kendo-spacing-4, 1rem) |
| Description: The vertical padding of the FileManager Navigation. | |||
kendo-file-manager-navigation-width | 20% | 20% | Default: 20%Computed: 20% |
| Description: The width of the FileManager Navigation. | |||
kendo-file-manager-navigation-border-width | $kendo-file-manager-border-width | 1px | Default: $kendo-file-manager-border-widthComputed: 1px |
| Description: The border width of the FileManager Navigation. | |||
kendo-file-manager-navigation-bg | null | null | Default: nullComputed: null |
| Description: The background color of the FileManager Navigation. | |||
kendo-file-manager-navigation-text | null | null | Default: nullComputed: null |
| Description: The text color of the FileManager Navigation. | |||
kendo-file-manager-navigation-border | null | null | Default: nullComputed: null |
| Description: The border color of the FileManager Navigation. | |||
kendo-file-manager-breadcrumb-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 FileManager Breadcrumb. | |||
kendo-file-manager-breadcrumb-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 FileManager Breadcrumb. | |||
kendo-file-manager-breadcrumb-border-width | $kendo-file-manager-border-width | 1px | Default: $kendo-file-manager-border-widthComputed: 1px |
| Description: The border width of the FileManager Breadcrumb. | |||
kendo-file-manager-breadcrumb-bg | $kendo-toolbar-bg | var(--kendo-color-surface, #fafafa) | Default: $kendo-toolbar-bgComputed: var(--kendo-color-surface, #fafafa) |
| Description: The background color of the FileManager Breadcrumb. | |||
kendo-file-manager-breadcrumb-text | null | null | Default: nullComputed: null |
| Description: The text color of the FileManager Breadcrumb. | |||
kendo-file-manager-breadcrumb-border | null | null | Default: nullComputed: null |
| Description: The border color of the FileManager Breadcrumb. | |||
kendo-file-manager-listview-bg | null | null | Default: nullComputed: null |
| Description: The background color of the FileManager ListView. | |||
kendo-file-manager-listview-text | null | null | Default: nullComputed: null |
| Description: The text color of the FileManager ListView. | |||
kendo-file-manager-listview-border | null | null | Default: nullComputed: null |
| Description: The border color of the FileManager ListView. | |||
kendo-file-manager-listview-item-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 FileManager ListView item. | |||
kendo-file-manager-listview-item-padding-y | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem) |
| Description: The vertical padding of the FileManager ListView item. | |||
kendo-file-manager-listview-item-width | 120px | 120px | Default: 120pxComputed: 120px |
| Description: The width of the FileManager ListView item. | |||
kendo-file-manager-listview-item-height | 120px | 120px | Default: 120pxComputed: 120px |
| Description: The height of the FileManager ListView item. | |||
kendo-file-manager-listview-item-bg | null | null | Default: nullComputed: null |
| Description: The background color of the FileManager ListView item. | |||
kendo-file-manager-listview-item-text | null | null | Default: nullComputed: null |
| Description: The text color of the FileManager ListView item. | |||
kendo-file-manager-listview-item-border | null | null | Default: nullComputed: null |
| Description: The border color of the FileManager ListView item. | |||
kendo-file-manager-listview-item-icon-bg | null | null | Default: nullComputed: null |
| Description: The background color of the FileManager ListView item icon. | |||
kendo-file-manager-listview-item-icon-text | if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) | var(--kendo-color-subtle, #666666) | Default: if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))Computed: var(--kendo-color-subtle, #666666) |
| Description: The text color of the FileManager ListView item icon. | |||
kendo-file-manager-listview-item-icon-border | null | null | Default: nullComputed: null |
| Description: The border color of the FileManager ListView item icon. | |||
kendo-file-manager-listview-item-icon-selected-bg | null | null | Default: nullComputed: null |
| Description: Background color of the FileManager selected ListView item icon. | |||
kendo-file-manager-listview-item-icon-selected-text | inherit | inherit | Default: inheritComputed: inherit |
| Description: Text color of the FileManager selected ListView item icon. | |||
kendo-file-manager-listview-item-icon-selected-border | null | null | Default: nullComputed: null |
| Description: Border color of the FileManager selected ListView item icon. | |||
kendo-file-manager-grid-bg | null | null | Default: nullComputed: null |
| Description: The background color of the FileManager Grid. | |||
kendo-file-manager-grid-text | null | null | Default: nullComputed: null |
| Description: The text color of the FileManager Grid. | |||
kendo-file-manager-grid-border | null | null | Default: nullComputed: null |
| Description: The border color of the FileManager Grid. | |||
kendo-file-manager-preview-padding-x | $kendo-file-manager-spacer | var(--kendo-spacing-4, 1rem) | Default: $kendo-file-manager-spacerComputed: var(--kendo-spacing-4, 1rem) |
| Description: The horizontal padding of the FileManager preview. | |||
kendo-file-manager-preview-padding-y | $kendo-file-manager-spacer | var(--kendo-spacing-4, 1rem) | Default: $kendo-file-manager-spacerComputed: var(--kendo-spacing-4, 1rem) |
| Description: The vertical padding of the FileManager preview. | |||
kendo-file-manager-preview-width | 20% | 20% | Default: 20%Computed: 20% |
| Description: The width of the FileManager preview. | |||
kendo-file-manager-preview-border-width | $kendo-file-manager-border-width | 1px | Default: $kendo-file-manager-border-widthComputed: 1px |
| Description: The border width of the FileManager preview. | |||
kendo-file-manager-preview-spacing | $kendo-file-manager-spacer | var(--kendo-spacing-4, 1rem) | Default: $kendo-file-manager-spacerComputed: var(--kendo-spacing-4, 1rem) |
| Description: The spacing of the FileManager preview. | |||
kendo-file-manager-preview-column-gap | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) |
| Description: The gap between the columns in the FileManager preview. | |||
kendo-file-manager-preview-bg | null | null | Default: nullComputed: null |
| Description: The background color of the FileManager preview. | |||
kendo-file-manager-preview-text | null | null | Default: nullComputed: null |
| Description: The text color of the FileManager preview. | |||
kendo-file-manager-preview-border | null | null | Default: nullComputed: null |
| Description: The border color of the FileManager preview. | |||
kendo-file-manager-preview-icon-bg | null | null | Default: nullComputed: null |
| Description: The background color of the FileManager preview icon. | |||
kendo-file-manager-preview-icon-text | if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) | var(--kendo-color-subtle, #666666) | Default: if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))Computed: var(--kendo-color-subtle, #666666) |
| Description: The text color of the FileManager preview icon. | |||
kendo-file-manager-preview-icon-border | null | null | Default: nullComputed: null |
| Description: The border color of the FileManager preview icon. | |||
BreadCrumb Variables
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-breadcrumb-border-width | 0px | 0px | Default: 0pxComputed: 0px |
| Description: The width of the border around the Breadcrumb. | |||
kendo-breadcrumb-margin-x | null | null | Default: nullComputed: null |
| Description: The horizontal margin of the Breadcrumb. | |||
kendo-breadcrumb-margin-y | null | null | Default: nullComputed: null |
| Description: The vertical margin of the Breadcrumb. | |||
kendo-breadcrumb-padding-x | null | null | Default: nullComputed: null |
| Description: The horizontal padding of the Breadcrumb. | |||
kendo-breadcrumb-padding-y | null | null | Default: nullComputed: null |
| Description: The vertical padding of the Breadcrumb. | |||
kendo-breadcrumb-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 Breadcrumb. | |||
kendo-breadcrumb-font-size | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) | Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit) |
| Description: The font size of the Breadcrumb. | |||
kendo-breadcrumb-sm-font-size | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) | Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit) |
| Description: The font size of the small Breadcrumb. | |||
kendo-breadcrumb-md-font-size | $kendo-breadcrumb-font-size | var(--kendo-font-size, inherit) | Default: $kendo-breadcrumb-font-sizeComputed: var(--kendo-font-size, inherit) |
| Description: The font size of the medium Breadcrumb. | |||
kendo-breadcrumb-lg-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 large Breadcrumb. | |||
kendo-breadcrumb-line-height | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) | Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal) |
| Description: The line-height of the Breadcrumb. | |||
kendo-breadcrumb-sm-line-height | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) | Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal) |
| Description: The line-height of the small Breadcrumb. | |||
kendo-breadcrumb-md-line-height | $kendo-breadcrumb-line-height | var(--kendo-line-height, normal) | Default: $kendo-breadcrumb-line-heightComputed: var(--kendo-line-height, normal) |
| Description: The line-height of the medium Breadcrumb. | |||
kendo-breadcrumb-lg-line-height | var( --kendo-line-height-lg, normal ) | var(--kendo-line-height-lg, normal) | Default: var( --kendo-line-height-lg, normal )Computed: var(--kendo-line-height-lg, normal) |
| Description: The line-height of the height Breadcrumb. | |||
kendo-breadcrumb-bg | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-component-bgComputed: var(--kendo-color-surface-alt, #ffffff) |
| Description: The base background of the Breadcrumb. | |||
kendo-breadcrumb-text | $kendo-component-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The base text color of the Breadcrumb. | |||
kendo-breadcrumb-border | $kendo-component-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-component-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The base border color of the Breadcrumb. | |||
kendo-breadcrumb-focus-shadow | 0 0 2px 1px rgba(0, 0, 0, .06) | 0 0 2px 1px rgba(0, 0, 0, 0.06) | Default: 0 0 2px 1px rgba(0, 0, 0, .06)Computed: 0 0 2px 1px rgba(0, 0, 0, 0.06) |
| Description: The box shadow of the focused Breadcrumb. | |||
kendo-breadcrumb-link-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 Breadcrumb link. | |||
kendo-breadcrumb-sm-link-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 small Breadcrumb link. | |||
kendo-breadcrumb-md-link-padding-x | $kendo-breadcrumb-link-padding-x | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-breadcrumb-link-padding-xComputed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal padding of the medium Breadcrumb link. | |||
kendo-breadcrumb-lg-link-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 large Breadcrumb link. | |||
kendo-breadcrumb-link-padding-y | 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 vertical padding of the Breadcrumb link. | |||
kendo-breadcrumb-sm-link-padding-y | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) |
| Description: The vertical padding of the small Breadcrumb link. | |||
kendo-breadcrumb-md-link-padding-y | $kendo-breadcrumb-link-padding-y | var(--kendo-spacing-1\.5, 0.375rem) | Default: $kendo-breadcrumb-link-padding-yComputed: var(--kendo-spacing-1\.5, 0.375rem) |
| Description: The vertical padding of the medium Breadcrumb link. | |||
kendo-breadcrumb-lg-link-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 large Breadcrumb link. | |||
kendo-breadcrumb-link-border-radius | k-border-radius(md) | var(--kendo-border-radius-md, 0.25rem) | Default: k-border-radius(md)Computed: var(--kendo-border-radius-md, 0.25rem) |
| Description: The border-radius of the Breadcrumb link. | |||
kendo-breadcrumb-icon-link-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 Breadcrumb link icon. | |||
kendo-breadcrumb-sm-icon-link-padding-y | 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 vertical padding of the small Breadcrumb link icon. | |||
kendo-breadcrumb-md-icon-link-padding-y | $kendo-breadcrumb-icon-link-padding-y | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-breadcrumb-icon-link-padding-yComputed: var(--kendo-spacing-2, 0.5rem) |
| Description: The vertical padding of the medium Breadcrumb link icon. | |||
kendo-breadcrumb-lg-icon-link-padding-y | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) | Default: k-spacing(3)Computed: var(--kendo-spacing-3, 0.75rem) |
| Description: The vertical padding of the large Breadcrumb link icon. | |||
kendo-breadcrumb-icon-link-padding-x | $kendo-breadcrumb-icon-link-padding-y | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-breadcrumb-icon-link-padding-yComputed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal padding of the Breadcrumb link icon. | |||
kendo-breadcrumb-sm-icon-link-padding-x | $kendo-breadcrumb-sm-icon-link-padding-y | var(--kendo-spacing-1\.5, 0.375rem) | Default: $kendo-breadcrumb-sm-icon-link-padding-yComputed: var(--kendo-spacing-1\.5, 0.375rem) |
| Description: The horizontal padding of the small Breadcrumb link icon. | |||
kendo-breadcrumb-md-icon-link-padding-x | $kendo-breadcrumb-icon-link-padding-x | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-breadcrumb-icon-link-padding-xComputed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal padding of the medium Breadcrumb link icon. | |||
kendo-breadcrumb-lg-icon-link-padding-x | $kendo-breadcrumb-lg-icon-link-padding-y | var(--kendo-spacing-3, 0.75rem) | Default: $kendo-breadcrumb-lg-icon-link-padding-yComputed: var(--kendo-spacing-3, 0.75rem) |
| Description: The horizontal padding of the large Breadcrumb link icon. | |||
kendo-breadcrumb-link-initial-text | inherit | inherit | Default: inheritComputed: inherit |
| Description: The text color of the Breadcrumb link. | |||
kendo-breadcrumb-link-icon-spacing | $kendo-icon-spacing | var(--kendo-spacing-1, 0.25rem) | Default: $kendo-icon-spacingComputed: var(--kendo-spacing-1, 0.25rem) |
| Description: The spacing of the Breadcrumb link icon. | |||
kendo-breadcrumb-link-bg | null | null | Default: nullComputed: null |
| Description: The background color of the Breadcrumb link. | |||
kendo-breadcrumb-link-text | $kendo-link-text | var(--kendo-color-primary, #ff6358) | Default: $kendo-link-textComputed: var(--kendo-color-primary, #ff6358) |
| Description: The text color of the Breadcrumb link. | |||
kendo-breadcrumb-link-border | null | null | Default: nullComputed: null |
| Description: The border color of the Breadcrumb link. | |||
kendo-breadcrumb-link-hover-bg | $kendo-base-bg | var(--kendo-color-surface, #fafafa) | Default: $kendo-base-bgComputed: var(--kendo-color-surface, #fafafa) |
| Description: The background color of the hovered Breadcrumb link. | |||
kendo-breadcrumb-link-hover-text | $kendo-link-hover-text | var(--kendo-color-primary-hover, #ea5a51) | Default: $kendo-link-hover-textComputed: var(--kendo-color-primary-hover, #ea5a51) |
| Description: The text color of the hovered Breadcrumb link. | |||
kendo-breadcrumb-link-hover-border | null | null | Default: nullComputed: null |
| Description: The border color of the hovered Breadcrumb link. | |||
kendo-breadcrumb-link-focus-bg | null | null | Default: nullComputed: null |
| Description: The background color of the focused Breadcrumb link. | |||
kendo-breadcrumb-link-focus-text | $kendo-link-text | var(--kendo-color-primary, #ff6358) | Default: $kendo-link-textComputed: var(--kendo-color-primary, #ff6358) |
| Description: The text color of the focused Breadcrumb link. | |||
kendo-breadcrumb-link-focus-border | null | null | Default: nullComputed: null |
| Description: The border color of the focused Breadcrumb link. | |||
kendo-breadcrumb-link-focus-shadow | $kendo-focus-shadow | inset 0 0 0 2px rgba(0, 0, 0, 0.13) | Default: $kendo-focus-shadowComputed: inset 0 0 0 2px rgba(0, 0, 0, 0.13) |
| Description: The box shadow of the focused Breadcrumb link. | |||
kendo-breadcrumb-root-link-bg | null | null | Default: nullComputed: null |
| Description: The background color of the Breadcrumb root link. | |||
kendo-breadcrumb-root-link-text | null | null | Default: nullComputed: null |
| Description: The text color of the Breadcrumb root link. | |||
kendo-breadcrumb-root-link-border | null | null | Default: nullComputed: null |
| Description: The border color of the Breadcrumb root link. | |||
kendo-breadcrumb-root-link-hover-bg | $kendo-base-bg | var(--kendo-color-surface, #fafafa) | Default: $kendo-base-bgComputed: var(--kendo-color-surface, #fafafa) |
| Description: The background color of the hovered Breadcrumb root link. | |||
kendo-breadcrumb-root-link-hover-text | null | null | Default: nullComputed: null |
| Description: The text color of the hovered Breadcrumb root link. | |||
kendo-breadcrumb-root-link-hover-border | null | null | Default: nullComputed: null |
| Description: The border color of the hovered Breadcrumb root link. | |||
kendo-breadcrumb-root-link-focus-bg | null | null | Default: nullComputed: null |
| Description: The background color of the focused Breadcrumb root link. | |||
kendo-breadcrumb-root-link-focus-text | null | null | Default: nullComputed: null |
| Description: The text color of the focused Breadcrumb root link. | |||
kendo-breadcrumb-root-link-focus-border | null | null | Default: nullComputed: null |
| Description: The border color of the focused Breadcrumb root link. | |||
kendo-breadcrumb-root-link-focus-shadow | $kendo-breadcrumb-link-focus-shadow | inset 0 0 0 2px rgba(0, 0, 0, 0.13) | Default: $kendo-breadcrumb-link-focus-shadowComputed: inset 0 0 0 2px rgba(0, 0, 0, 0.13) |
| Description: The box shadow of the focused Breadcrumb root link. | |||
kendo-breadcrumb-current-item-bg | null | null | Default: nullComputed: null |
| Description: The background color of the current Breadcrumb root link. | |||
kendo-breadcrumb-current-item-text | null | null | Default: nullComputed: null |
| Description: The text color of the current Breadcrumb root link. | |||
kendo-breadcrumb-current-item-border | null | null | Default: nullComputed: null |
| Description: The border color of the current Breadcrumb root link. | |||
kendo-breadcrumb-sizes | (
sm: (
link-padding-x: $kendo-breadcrumb-sm-link-padding-x,
link-padding-y: $kendo-breadcrumb-sm-link-padding-y,
icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x,
icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y,
font-size: $kendo-breadcrumb-sm-font-size,
line-height: $kendo-breadcrumb-sm-line-height
),
md: (
link-padding-x: $kendo-breadcrumb-md-link-padding-x,
link-padding-y: $kendo-breadcrumb-md-link-padding-y,
icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x,
icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y,
font-size: $kendo-breadcrumb-md-font-size,
line-height: $kendo-breadcrumb-md-line-height
),
lg: (
link-padding-x: $kendo-breadcrumb-lg-link-padding-x,
link-padding-y: $kendo-breadcrumb-lg-link-padding-y,
icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x,
icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y,
font-size: $kendo-breadcrumb-lg-font-size,
line-height: $kendo-breadcrumb-lg-line-height
)
) | (sm: (link-padding-x: var(--kendo-spacing-2, 0.5rem), link-padding-y: var(--kendo-spacing-1, 0.25rem), icon-link-padding-x: var(--kendo-spacing-1\.5, 0.375rem), icon-link-padding-y: var(--kendo-spacing-1\.5, 0.375rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), md: (link-padding-x: var(--kendo-spacing-2, 0.5rem), link-padding-y: var(--kendo-spacing-1\.5, 0.375rem), icon-link-padding-x: var(--kendo-spacing-2, 0.5rem), icon-link-padding-y: var(--kendo-spacing-2, 0.5rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), lg: (link-padding-x: var(--kendo-spacing-2, 0.5rem), link-padding-y: var(--kendo-spacing-2, 0.5rem), icon-link-padding-x: var(--kendo-spacing-3, 0.75rem), icon-link-padding-y: var(--kendo-spacing-3, 0.75rem), font-size: var(--kendo-font-size-lg, inherit), line-height: var(--kendo-line-height-lg, normal))) | Default: (
sm: (
link-padding-x: $kendo-breadcrumb-sm-link-padding-x,
link-padding-y: $kendo-breadcrumb-sm-link-padding-y,
icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x,
icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y,
font-size: $kendo-breadcrumb-sm-font-size,
line-height: $kendo-breadcrumb-sm-line-height
),
md: (
link-padding-x: $kendo-breadcrumb-md-link-padding-x,
link-padding-y: $kendo-breadcrumb-md-link-padding-y,
icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x,
icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y,
font-size: $kendo-breadcrumb-md-font-size,
line-height: $kendo-breadcrumb-md-line-height
),
lg: (
link-padding-x: $kendo-breadcrumb-lg-link-padding-x,
link-padding-y: $kendo-breadcrumb-lg-link-padding-y,
icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x,
icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y,
font-size: $kendo-breadcrumb-lg-font-size,
line-height: $kendo-breadcrumb-lg-line-height
)
)Computed: (sm: (link-padding-x: var(--kendo-spacing-2, 0.5rem), link-padding-y: var(--kendo-spacing-1, 0.25rem), icon-link-padding-x: var(--kendo-spacing-1\.5, 0.375rem), icon-link-padding-y: var(--kendo-spacing-1\.5, 0.375rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), md: (link-padding-x: var(--kendo-spacing-2, 0.5rem), link-padding-y: var(--kendo-spacing-1\.5, 0.375rem), icon-link-padding-x: var(--kendo-spacing-2, 0.5rem), icon-link-padding-y: var(--kendo-spacing-2, 0.5rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), lg: (link-padding-x: var(--kendo-spacing-2, 0.5rem), link-padding-y: var(--kendo-spacing-2, 0.5rem), icon-link-padding-x: var(--kendo-spacing-3, 0.75rem), icon-link-padding-y: var(--kendo-spacing-3, 0.75rem), font-size: var(--kendo-font-size-lg, inherit), line-height: var(--kendo-line-height-lg, normal))) |
| Description: The sizes map for the Breadcrumb. | |||
Grid Variables
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-grid-padding-x | $kendo-table-md-cell-padding-x | var(--kendo-spacing-3, 0.75rem) | Default: $kendo-table-md-cell-padding-xComputed: var(--kendo-spacing-3, 0.75rem) |
| Description: The horizontal padding of the Grid. | |||
kendo-grid-padding-y | $kendo-table-md-cell-padding-y | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-table-md-cell-padding-yComputed: var(--kendo-spacing-2, 0.5rem) |
| Description: The vertical padding of the Grid. | |||
kendo-grid-header-padding-x | $kendo-grid-padding-x | var(--kendo-spacing-3, 0.75rem) | Default: $kendo-grid-padding-xComputed: var(--kendo-spacing-3, 0.75rem) |
| Description: The horizontal padding of the Grid header. | |||
kendo-grid-header-padding-y | $kendo-grid-padding-y | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-grid-padding-yComputed: var(--kendo-spacing-2, 0.5rem) |
| Description: The vertical padding of the Grid header. | |||
kendo-grid-grouping-header-padding-x | $kendo-grid-padding-y | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-grid-padding-yComputed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal padding of the Grid grouping header. | |||
kendo-grid-grouping-header-padding-y | $kendo-grid-grouping-header-padding-x | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-grid-grouping-header-padding-xComputed: var(--kendo-spacing-2, 0.5rem) |
| Description: The vertical padding of the Grid grouping header. | |||
kendo-grid-cell-padding-x | $kendo-grid-padding-x | var(--kendo-spacing-3, 0.75rem) | Default: $kendo-grid-padding-xComputed: var(--kendo-spacing-3, 0.75rem) |
| Description: The horizontal padding of the Grid cell. | |||
kendo-grid-cell-padding-y | $kendo-grid-padding-y | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-grid-padding-yComputed: var(--kendo-spacing-2, 0.5rem) |
| Description: The vertical padding of the Grid cell. | |||
kendo-grid-filter-cell-padding-x | $kendo-grid-padding-y | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-grid-padding-yComputed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal padding of the Grid filter cell. | |||
kendo-grid-filter-cell-padding-y | $kendo-grid-filter-cell-padding-x | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-grid-filter-cell-padding-xComputed: var(--kendo-spacing-2, 0.5rem) |
| Description: The vertical padding of the Grid filter cell. | |||
kendo-grid-edit-cell-padding-x | $kendo-grid-cell-padding-x | var(--kendo-spacing-3, 0.75rem) | Default: $kendo-grid-cell-padding-xComputed: var(--kendo-spacing-3, 0.75rem) |
| Description: The horizontal padding of the Grid edit cell. | |||
kendo-grid-edit-cell-padding-y | calc( #{k-spacing(1.5)} / 2 ) | calc(var(--kendo-spacing-1\.5, 0.375rem) / 2) | Default: calc( #{k-spacing(1.5)} / 2 )Computed: calc(var(--kendo-spacing-1\.5, 0.375rem) / 2) |
| Description: The vertical padding of the Grid filter cell. | |||
kendo-grid-bg | $kendo-table-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-table-bgComputed: var(--kendo-color-surface-alt, #ffffff) |
| Description: The background color of the Grid. | |||
kendo-grid-text | $kendo-table-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-table-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the Grid. | |||
kendo-grid-border | $kendo-table-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-table-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of the Grid. | |||
kendo-grid-header-bg | $kendo-table-header-bg | var(--kendo-color-surface, #fafafa) | Default: $kendo-table-header-bgComputed: var(--kendo-color-surface, #fafafa) |
| Description: The background color of Grid header. | |||
kendo-grid-header-text | $kendo-table-header-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-table-header-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of Grid header. | |||
kendo-grid-header-border | $kendo-table-header-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-table-header-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of Grid header. | |||
kendo-grid-header-gradient | $kendo-table-header-gradient | null | Default: $kendo-table-header-gradientComputed: null |
| Description: The background gradient of Grid header. | |||
kendo-grid-footer-bg | $kendo-grid-header-bg | var(--kendo-color-surface, #fafafa) | Default: $kendo-grid-header-bgComputed: var(--kendo-color-surface, #fafafa) |
| Description: The background color of Grid footer. | |||
kendo-grid-footer-text | $kendo-grid-header-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-grid-header-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of Grid footer. | |||
kendo-grid-footer-border | $kendo-grid-header-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-grid-header-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of Grid footer. | |||
kendo-grid-alt-bg | $kendo-table-alt-row-bg | color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 5%, transparent) | Default: $kendo-table-alt-row-bgComputed: color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 5%, transparent) |
| Description: The background color of the Grid alternating rows. | |||
kendo-grid-alt-text | $kendo-table-alt-row-text | null | Default: $kendo-table-alt-row-textComputed: null |
| Description: The text color of the Grid alternating rows. | |||
kendo-grid-alt-border | $kendo-table-alt-row-border | null | Default: $kendo-table-alt-row-borderComputed: null |
| Description: The border color of the Grid alternating rows. | |||
kendo-grid-hover-bg | $kendo-table-hover-bg | color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 11%, transparent) | Default: $kendo-table-hover-bgComputed: color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 11%, transparent) |
| Description: The background color of hovered Grid rows. | |||
kendo-grid-hover-text | $kendo-table-hover-text | null | Default: $kendo-table-hover-textComputed: null |
| Description: The text color of hovered Grid rows. | |||
kendo-grid-hover-border | $kendo-table-hover-border | null | Default: $kendo-table-hover-borderComputed: null |
| Description: The border color of hovered Grid rows. | |||
kendo-grid-selected-bg | $kendo-table-selected-bg | color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent) | Default: $kendo-table-selected-bgComputed: color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent) |
| Description: The background color of selected Grid rows. | |||
kendo-grid-selected-text | $kendo-table-selected-text | null | Default: $kendo-table-selected-textComputed: null |
| Description: The text color of selected Grid rows. | |||
kendo-grid-selected-border | $kendo-table-selected-border | null | Default: $kendo-table-selected-borderComputed: null |
| Description: The border color of selected Grid rows. | |||
kendo-grid-selection-aggregates-bg | $kendo-grid-header-bg | var(--kendo-color-surface, #fafafa) | Default: $kendo-grid-header-bgComputed: var(--kendo-color-surface, #fafafa) |
| Description: The background color of the Grid selection aggregates container. | |||
kendo-grid-selection-aggregates-text | $kendo-grid-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-grid-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the Grid selection aggregates container. | |||
kendo-grid-selection-aggregates-border | $kendo-grid-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-grid-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of the Grid selection aggregates container. | |||
kendo-grid-selection-aggregates-border-width | $kendo-grid-border-width | 1px | Default: $kendo-grid-border-widthComputed: 1px |
| Description: The border width of the Grid selection aggregates container. | |||
kendo-grid-selection-aggregates-spacing | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The spacing between the selection aggregates items. | |||
kendo-grid-selection-aggregates-line-height | $kendo-grid-line-height | var(--kendo-line-height, normal) | Default: $kendo-grid-line-heightComputed: var(--kendo-line-height, normal) |
| Description: The line height of the Grid selection aggregates container. | |||
kendo-grid-selection-aggregates-font-weight | var( --kendo-font-weight-bold, normal ) | var(--kendo-font-weight-bold, normal) | Default: var( --kendo-font-weight-bold, normal )Computed: var(--kendo-font-weight-bold, normal) |
| Description: The font weight of the Grid selection aggregates container. | |||
kendo-grid-row-resizer-hover-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 20%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) | color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 20%, transparent) | Default: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 20%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .12 ))Computed: color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 20%, transparent) |
| Description: The background color of the Grid row resize indicator. | |||
kendo-grid-row-resizer-active-bg | $kendo-color-primary | var(--kendo-color-primary, #ff6358) | Default: $kendo-color-primaryComputed: var(--kendo-color-primary, #ff6358) |
| Description: The background color of the active Grid row resize indicator. | |||
kendo-grid-row-resizer-height | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) | Default: k-spacing(0.5)Computed: var(--kendo-spacing-0\.5, 0.125rem) |
| Description: The height of the Grid row resize indicator. | |||
