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-map-get( $kendo-spacing, 4 ) | 16px | Default: k-map-get( $kendo-spacing, 4 )Computed: 16px |
| 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 | $kendo-font-family | inherit | Default: $kendo-font-familyComputed: inherit |
| Description: The font family of the FileManager. | |||
kendo-file-manager-font-size | $kendo-font-size-md | 14px | Default: $kendo-font-size-mdComputed: 14px |
| Description: The font size of the FileManager. | |||
kendo-file-manager-line-height | $kendo-line-height-md | 1.4285714286 | Default: $kendo-line-height-mdComputed: 1.4285714286 |
| Description: The line height of the FileManager. | |||
kendo-file-manager-bg | $kendo-component-bg | #ffffff | Default: $kendo-component-bgComputed: #ffffff |
| Description: The background color of the FileManager. | |||
kendo-file-manager-text | $kendo-component-text | #424242 | Default: $kendo-component-textComputed: #424242 |
| Description: The text color of the FileManager. | |||
kendo-file-manager-border | $kendo-component-border | rgba(0, 0, 0, 0.08) | Default: $kendo-component-borderComputed: 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 | 16px | Default: $kendo-file-manager-spacerComputed: 16px |
| Description: The horizontal padding of the FileManager Navigation. | |||
kendo-file-manager-navigation-padding-y | $kendo-file-manager-spacer | 16px | Default: $kendo-file-manager-spacerComputed: 16px |
| 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-map-get( $kendo-spacing, 2 ) | 8px | Default: k-map-get( $kendo-spacing, 2 )Computed: 8px |
| Description: The horizontal padding of the FileManager Breadcrumb. | |||
kendo-file-manager-breadcrumb-padding-y | k-map-get( $kendo-spacing, 2 ) | 8px | Default: k-map-get( $kendo-spacing, 2 )Computed: 8px |
| 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 | #fafafa | Default: $kendo-toolbar-bgComputed: #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-map-get( $kendo-spacing, 4 ) | 16px | Default: k-map-get( $kendo-spacing, 4 )Computed: 16px |
| Description: The horizontal padding of the FileManager ListView item. | |||
kendo-file-manager-listview-item-padding-y | k-map-get( $kendo-spacing, 4 ) | 16px | Default: k-map-get( $kendo-spacing, 4 )Computed: 16px |
| 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)) | #7e7e7e | Default: if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))Computed: #7e7e7e |
| 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 | 16px | Default: $kendo-file-manager-spacerComputed: 16px |
| Description: The horizontal padding of the FileManager preview. | |||
kendo-file-manager-preview-padding-y | $kendo-file-manager-spacer | 16px | Default: $kendo-file-manager-spacerComputed: 16px |
| 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 | 16px | Default: $kendo-file-manager-spacerComputed: 16px |
| Description: The spacing of the FileManager preview. | |||
kendo-file-manager-preview-column-gap | k-map-get( $kendo-spacing, 1 ) | 4px | Default: k-map-get( $kendo-spacing, 1 )Computed: 4px |
| 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)) | #7e7e7e | Default: if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))Computed: #7e7e7e |
| 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 | $kendo-font-family | inherit | Default: $kendo-font-familyComputed: inherit |
| Description: The font family of the Breadcrumb. | |||
kendo-breadcrumb-font-size | $kendo-font-size-md | 14px | Default: $kendo-font-size-mdComputed: 14px |
| Description: The font size of the Breadcrumb. | |||
kendo-breadcrumb-sm-font-size | $kendo-font-size-md | 14px | Default: $kendo-font-size-mdComputed: 14px |
| Description: The font size of the small Breadcrumb. | |||
kendo-breadcrumb-md-font-size | $kendo-breadcrumb-font-size | 14px | Default: $kendo-breadcrumb-font-sizeComputed: 14px |
| Description: The font size of the medium Breadcrumb. | |||
kendo-breadcrumb-lg-font-size | $kendo-font-size-lg | 16px | Default: $kendo-font-size-lgComputed: 16px |
| Description: The font size of the large Breadcrumb. | |||
kendo-breadcrumb-line-height | $kendo-line-height-md | 1.4285714286 | Default: $kendo-line-height-mdComputed: 1.4285714286 |
| Description: The line-height of the Breadcrumb. | |||
kendo-breadcrumb-sm-line-height | $kendo-line-height-md | 1.4285714286 | Default: $kendo-line-height-mdComputed: 1.4285714286 |
| Description: The line-height of the small Breadcrumb. | |||
kendo-breadcrumb-md-line-height | $kendo-breadcrumb-line-height | 1.4285714286 | Default: $kendo-breadcrumb-line-heightComputed: 1.4285714286 |
| Description: The line-height of the medium Breadcrumb. | |||
kendo-breadcrumb-lg-line-height | $kendo-line-height-lg | 1.5 | Default: $kendo-line-height-lgComputed: 1.5 |
| Description: The line-height of the height Breadcrumb. | |||
kendo-breadcrumb-bg | $kendo-component-bg | #ffffff | Default: $kendo-component-bgComputed: #ffffff |
| Description: The base background of the Breadcrumb. | |||
kendo-breadcrumb-text | $kendo-component-text | #424242 | Default: $kendo-component-textComputed: #424242 |
| Description: The base text color of the Breadcrumb. | |||
kendo-breadcrumb-border | $kendo-component-border | rgba(0, 0, 0, 0.08) | Default: $kendo-component-borderComputed: 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-map-get( $kendo-spacing, 2 ) | 8px | Default: k-map-get( $kendo-spacing, 2 )Computed: 8px |
| Description: The horizontal padding of the Breadcrumb link. | |||
kendo-breadcrumb-sm-link-padding-x | k-map-get( $kendo-spacing, 2 ) | 8px | Default: k-map-get( $kendo-spacing, 2 )Computed: 8px |
| Description: The horizontal padding of the small Breadcrumb link. | |||
kendo-breadcrumb-md-link-padding-x | $kendo-breadcrumb-link-padding-x | 8px | Default: $kendo-breadcrumb-link-padding-xComputed: 8px |
| Description: The horizontal padding of the medium Breadcrumb link. | |||
kendo-breadcrumb-lg-link-padding-x | k-map-get( $kendo-spacing, 2 ) | 8px | Default: k-map-get( $kendo-spacing, 2 )Computed: 8px |
| Description: The horizontal padding of the large Breadcrumb link. | |||
kendo-breadcrumb-link-padding-y | k-map-get( $kendo-spacing, 1.5 ) | 6px | Default: k-map-get( $kendo-spacing, 1.5 )Computed: 6px |
| Description: The vertical padding of the Breadcrumb link. | |||
kendo-breadcrumb-sm-link-padding-y | k-map-get( $kendo-spacing, 1 ) | 4px | Default: k-map-get( $kendo-spacing, 1 )Computed: 4px |
| Description: The vertical padding of the small Breadcrumb link. | |||
kendo-breadcrumb-md-link-padding-y | $kendo-breadcrumb-link-padding-y | 6px | Default: $kendo-breadcrumb-link-padding-yComputed: 6px |
| Description: The vertical padding of the medium Breadcrumb link. | |||
kendo-breadcrumb-lg-link-padding-y | k-map-get( $kendo-spacing, 2 ) | 8px | Default: k-map-get( $kendo-spacing, 2 )Computed: 8px |
| Description: The vertical padding of the large Breadcrumb link. | |||
kendo-breadcrumb-link-border-radius | $kendo-border-radius-md | 4px | Default: $kendo-border-radius-mdComputed: 4px |
| Description: The border-radius of the Breadcrumb link. | |||
kendo-breadcrumb-icon-link-padding-y | k-map-get( $kendo-spacing, 2 ) | 8px | Default: k-map-get( $kendo-spacing, 2 )Computed: 8px |
| Description: The vertical padding of the Breadcrumb link icon. | |||
kendo-breadcrumb-sm-icon-link-padding-y | k-map-get( $kendo-spacing, 1.5 ) | 6px | Default: k-map-get( $kendo-spacing, 1.5 )Computed: 6px |
| Description: The vertical padding of the small Breadcrumb link icon. | |||
kendo-breadcrumb-md-icon-link-padding-y | $kendo-breadcrumb-icon-link-padding-y | 8px | Default: $kendo-breadcrumb-icon-link-padding-yComputed: 8px |
| Description: The vertical padding of the medium Breadcrumb link icon. | |||
kendo-breadcrumb-lg-icon-link-padding-y | k-map-get( $kendo-spacing, 3 ) | 12px | Default: k-map-get( $kendo-spacing, 3 )Computed: 12px |
| Description: The vertical padding of the large Breadcrumb link icon. | |||
kendo-breadcrumb-icon-link-padding-x | $kendo-breadcrumb-icon-link-padding-y | 8px | Default: $kendo-breadcrumb-icon-link-padding-yComputed: 8px |
| Description: The horizontal padding of the Breadcrumb link icon. | |||
kendo-breadcrumb-sm-icon-link-padding-x | $kendo-breadcrumb-sm-icon-link-padding-y | 6px | Default: $kendo-breadcrumb-sm-icon-link-padding-yComputed: 6px |
| Description: The horizontal padding of the small Breadcrumb link icon. | |||
kendo-breadcrumb-md-icon-link-padding-x | $kendo-breadcrumb-icon-link-padding-x | 8px | Default: $kendo-breadcrumb-icon-link-padding-xComputed: 8px |
| Description: The horizontal padding of the medium Breadcrumb link icon. | |||
kendo-breadcrumb-lg-icon-link-padding-x | $kendo-breadcrumb-lg-icon-link-padding-y | 12px | Default: $kendo-breadcrumb-lg-icon-link-padding-yComputed: 12px |
| 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 | 4px | Default: $kendo-icon-spacingComputed: 4px |
| 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 | #ff6358 | Default: $kendo-link-textComputed: #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 | #fafafa | Default: $kendo-base-bgComputed: #fafafa |
| Description: The background color of the hovered Breadcrumb link. | |||
kendo-breadcrumb-link-hover-text | $kendo-link-hover-text | #d6534a | Default: $kendo-link-hover-textComputed: #d6534a |
| 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 | #ff6358 | Default: $kendo-link-textComputed: #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 | #fafafa | Default: $kendo-base-bgComputed: #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: 8px, link-padding-y: 4px, icon-link-padding-x: 6px, icon-link-padding-y: 6px, font-size: 14px, line-height: 1.4285714286), md: (link-padding-x: 8px, link-padding-y: 6px, icon-link-padding-x: 8px, icon-link-padding-y: 8px, font-size: 14px, line-height: 1.4285714286), lg: (link-padding-x: 8px, link-padding-y: 8px, icon-link-padding-x: 12px, icon-link-padding-y: 12px, font-size: 16px, line-height: 1.5)) | 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: 8px, link-padding-y: 4px, icon-link-padding-x: 6px, icon-link-padding-y: 6px, font-size: 14px, line-height: 1.4285714286), md: (link-padding-x: 8px, link-padding-y: 6px, icon-link-padding-x: 8px, icon-link-padding-y: 8px, font-size: 14px, line-height: 1.4285714286), lg: (link-padding-x: 8px, link-padding-y: 8px, icon-link-padding-x: 12px, icon-link-padding-y: 12px, font-size: 16px, line-height: 1.5)) |
| 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 | 12px | Default: $kendo-table-md-cell-padding-xComputed: 12px |
| Description: Horizontal padding of the grid. | |||
kendo-grid-padding-y | $kendo-table-md-cell-padding-y | 8px | Default: $kendo-table-md-cell-padding-yComputed: 8px |
| Description: Vertical padding of the grid. | |||
kendo-grid-header-padding-x | $kendo-grid-padding-x | 12px | Default: $kendo-grid-padding-xComputed: 12px |
| Description: Horizontal padding of the grid header. | |||
kendo-grid-header-padding-y | $kendo-grid-padding-y | 8px | Default: $kendo-grid-padding-yComputed: 8px |
| Description: Vertical padding of the grid header. | |||
kendo-grid-grouping-header-padding-x | $kendo-grid-padding-y | 8px | Default: $kendo-grid-padding-yComputed: 8px |
| Description: Horizontal padding of the grid grouping header. | |||
kendo-grid-grouping-header-padding-y | $kendo-grid-grouping-header-padding-x | 8px | Default: $kendo-grid-grouping-header-padding-xComputed: 8px |
| Description: Vertical padding of the grid grouping header. | |||
kendo-grid-cell-padding-x | $kendo-grid-padding-x | 12px | Default: $kendo-grid-padding-xComputed: 12px |
| Description: Horizontal padding of the grid cell. | |||
kendo-grid-cell-padding-y | $kendo-grid-padding-y | 8px | Default: $kendo-grid-padding-yComputed: 8px |
| Description: Vertical padding of the grid cell. | |||
kendo-grid-filter-cell-padding-x | $kendo-grid-padding-y | 8px | Default: $kendo-grid-padding-yComputed: 8px |
| Description: Horizontal padding of the grid filter cell. | |||
kendo-grid-filter-cell-padding-y | $kendo-grid-filter-cell-padding-x | 8px | Default: $kendo-grid-filter-cell-padding-xComputed: 8px |
| Description: Vertical padding of the grid filter cell. | |||
kendo-grid-edit-cell-padding-x | $kendo-grid-cell-padding-x | 12px | Default: $kendo-grid-cell-padding-xComputed: 12px |
| Description: Horizontal padding of the grid edit cell. | |||
kendo-grid-edit-cell-padding-y | 3px | 3px | Default: 3pxComputed: 3px |
| Description: Vertical padding of the grid filter cell. | |||
kendo-grid-bg | $kendo-table-bg | #ffffff | Default: $kendo-table-bgComputed: #ffffff |
| Description: Background color of the grid component | |||
kendo-grid-text | $kendo-table-text | #424242 | Default: $kendo-table-textComputed: #424242 |
| Description: Text color of the grid component | |||
kendo-grid-border | $kendo-table-border | rgba(0, 0, 0, 0.08) | Default: $kendo-table-borderComputed: rgba(0, 0, 0, 0.08) |
| Description: Border color of the grid component | |||
kendo-grid-header-bg | $kendo-table-header-bg | #fafafa | Default: $kendo-table-header-bgComputed: #fafafa |
| Description: Background color of grid header | |||
kendo-grid-header-text | $kendo-table-header-text | #424242 | Default: $kendo-table-header-textComputed: #424242 |
| Description: Text color of grid header | |||
kendo-grid-header-border | $kendo-table-header-border | rgba(0, 0, 0, 0.08) | Default: $kendo-table-header-borderComputed: rgba(0, 0, 0, 0.08) |
| Description: Border color of grid header | |||
kendo-grid-header-gradient | $kendo-table-header-gradient | null | Default: $kendo-table-header-gradientComputed: null |
| Description: Background gradient of grid header | |||
kendo-grid-footer-bg | $kendo-grid-header-bg | #fafafa | Default: $kendo-grid-header-bgComputed: #fafafa |
| Description: Background color of grid footer | |||
kendo-grid-footer-text | $kendo-grid-header-text | #424242 | Default: $kendo-grid-header-textComputed: #424242 |
| Description: Text color of grid footer | |||
kendo-grid-footer-border | $kendo-grid-header-border | rgba(0, 0, 0, 0.08) | Default: $kendo-grid-header-borderComputed: rgba(0, 0, 0, 0.08) |
| Description: Border color of grid footer | |||
kendo-grid-alt-bg | $kendo-table-alt-row-bg | rgba(0, 0, 0, 0.04) | Default: $kendo-table-alt-row-bgComputed: rgba(0, 0, 0, 0.04) |
| Description: Background color of alternating rows in grid | |||
kendo-grid-alt-text | $kendo-table-alt-row-text | null | Default: $kendo-table-alt-row-textComputed: null |
| Description: Text color of alternating rows in grid | |||
kendo-grid-alt-border | $kendo-table-alt-row-border | null | Default: $kendo-table-alt-row-borderComputed: null |
| Description: Border color of alternating rows in grid | |||
kendo-grid-hover-bg | $kendo-table-hover-bg | #ededed | Default: $kendo-table-hover-bgComputed: #ededed |
| Description: Background color of hovered rows in grid | |||
kendo-grid-hover-text | $kendo-table-hover-text | null | Default: $kendo-table-hover-textComputed: null |
| Description: Text color of hovered rows in grid | |||
kendo-grid-hover-border | $kendo-table-hover-border | null | Default: $kendo-table-hover-borderComputed: null |
| Description: Border color of hovered rows in grid | |||
kendo-grid-selected-bg | $kendo-table-selected-bg | rgba(255, 99, 88, 0.25) | Default: $kendo-table-selected-bgComputed: rgba(255, 99, 88, 0.25) |
| Description: Background color of selected rows in grid | |||
kendo-grid-selected-text | $kendo-table-selected-text | null | Default: $kendo-table-selected-textComputed: null |
| Description: Text color of selected rows in grid | |||
kendo-grid-selected-border | $kendo-table-selected-border | null | Default: $kendo-table-selected-borderComputed: null |
| Description: Border color of selected rows in grid | |||
kendo-grid-selection-aggregates-bg | $kendo-grid-header-bg | #fafafa | Default: $kendo-grid-header-bgComputed: #fafafa |
| Description: Background color of the selection aggregates container | |||
kendo-grid-selection-aggregates-text | $kendo-grid-text | #424242 | Default: $kendo-grid-textComputed: #424242 |
| Description: Text color of the selection aggregates container | |||
kendo-grid-selection-aggregates-border | $kendo-grid-border | rgba(0, 0, 0, 0.08) | Default: $kendo-grid-borderComputed: rgba(0, 0, 0, 0.08) |
| Description: Border color of the selection aggregates container | |||
kendo-grid-selection-aggregates-border-width | $kendo-grid-border-width | 1px | Default: $kendo-grid-border-widthComputed: 1px |
| Description: Border width of the selection aggregates container | |||
kendo-grid-selection-aggregates-spacing | k-map-get( $kendo-spacing, 2 ) | 8px | Default: k-map-get( $kendo-spacing, 2 )Computed: 8px |
| Description: Spacing between the selection aggregates items | |||
kendo-grid-selection-aggregates-line-height | $kendo-grid-line-height | 1.4285714286 | Default: $kendo-grid-line-heightComputed: 1.4285714286 |
| Description: Line height of the selection aggregates container | |||
kendo-grid-selection-aggregates-font-weight | $kendo-font-weight-bold | 700 | Default: $kendo-font-weight-boldComputed: 700 |
| Description: Font weight of the selection aggregates container | |||
kendo-grid-row-resizer-hover-bg | if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) | rgba(0, 0, 0, 0.12) | Default: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .12 ))Computed: rgba(0, 0, 0, 0.12) |
| Description: Background color of the grid row resize indicator | |||
kendo-grid-row-resizer-active-bg | $kendo-color-primary | #ff6358 | Default: $kendo-color-primaryComputed: #ff6358 |
| Description: Active background color of the grid row resize indicator | |||
kendo-grid-row-resizer-height | k-map-get( $kendo-spacing, .5 ) | 2px | Default: k-map-get( $kendo-spacing, .5 )Computed: 2px |
| Description: Height of the grid row resize indicator | |||
