diff --git a/packages/bootstrap/docs/customization-chat.md b/packages/bootstrap/docs/customization-chat.md new file mode 100644 index 00000000000..656edceebfe --- /dev/null +++ b/packages/bootstrap/docs/customization-chat.md @@ -0,0 +1,608 @@ +--- +title: Customizing Chat +description: "Refer to the list of the Kendo UI Bootstrap theme variables available for customization." +slug: variables_kendothemebootstrap_chat +position: 9 +--- + +# Customizing Chat + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-chat-padding-xNumber16px16px
Description
The horizontal padding of the Chat.
+
$kendo-chat-padding-yNumber16px16px
Description
The vertical padding of the Chat.
+
$kendo-chat-widthNumber500px500px
Description
The width of the Chat.
+
$kendo-chat-heightNumber600px600px
Description
The height of the Chat.
+
$kendo-chat-border-widthNumber1px1px
Description
The border width of the Chat.
+
$kendo-chat-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the Chat.
+
$kendo-chat-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Chat.
+
$kendo-chat-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Chat.
+
$kendo-chat-item-spacing-xNumber8px8px
Description
The horizontal spacing between items of the Chat.
+
$kendo-chat-item-spacing-yNumber16px16px
Description
The vertical spacing between items of the Chat.
+
$kendo-chat-message-list-padding-xNumber$kendo-chat-padding-x16px
Description
The horizontal padding of the Chat message list.
+
$kendo-chat-message-list-padding-yNumber$kendo-chat-padding-y16px
Description
The vertical padding of the Chat message list.
+
$kendo-chat-message-list-spacingNumber$kendo-chat-item-spacing-y16px
Description
The spacing of the Chat message list.
+
$kendo-chat-timestamp-font-sizeStringsmallersmaller
Description
The font size of the Chat timestamp.
+
$kendo-chat-timestamp-line-heightNullnullnull
Description
The line height of the Chat timestamp.
+
$kendo-chat-timestamp-transformStringuppercaseuppercase
Description
The text transform of the Chat timestamp.
+
$kendo-chat-timestamp-textColor$kendo-subtle-text#6c757d
Description
The text color of the Chat timestamp.
+
$kendo-chat-timestamp-bgNullnullnull
Description
The background color of the Chat timestamp.
+
$kendo-chat-bubble-padding-xNumber16px16px
Description
The horizontal padding of the Chat bubble message.
+
$kendo-chat-bubble-padding-yNumber8px8px
Description
The vertical padding of the Chat bubble message.
+
$kendo-chat-bubble-spacingNumber2px2px
Description
The spacing of the Chat bubble message.
+
$kendo-chat-bubble-line-heightNumber1.251.25
Description
The line height of the Chat bubble message.
+
$kendo-chat-bubble-border-radiusNumber12px12px
Description
The border radius of the Chat bubble message.
+
$kendo-chat-bubble-border-radius-smNumber2px2px
Description
The border radius of the Chat small bubble message
+
$kendo-chat-avatar-sizeNumber32px32px
Description
The size of the Chat Avatar.
+
$kendo-chat-avatar-spacingNumber$kendo-chat-item-spacing-x8px
Description
The spacing of the Chat Avatar.
+
$kendo-chat-toolbar-padding-xNumber$kendo-toolbar-md-padding-x0.5rem
Description
The horizontal padding of the Chat Toolbar.
+
$kendo-chat-toolbar-padding-yNumber$kendo-toolbar-md-padding-y0.5rem
Description
The vertical padding of the Chat Toolbar.
+
$kendo-chat-toolbar-spacingNumber$kendo-toolbar-md-spacing0.5rem
Description
The spacing of the Chat Toolbar.
+
$kendo-chat-toolbar-bgColor$kendo-toolbar-bg#f8f9fa
Description
The background color of the Chat Toolbar.
+
$kendo-chat-toolbar-textColor$kendo-toolbar-text#212529
Description
The text color of the Chat Toolbar.
+
$kendo-chat-toolbar-borderStringinheritinherit
Description
The border color of the Chat Toolbar.
+
$kendo-chat-quick-reply-padding-xNumber12px12px
Description
The horizontal padding of the Chat quick reply.
+
$kendo-chat-quick-reply-padding-yNumber8px8px
Description
The vertical padding of the Chat quick reply.
+
$kendo-chat-quick-reply-spacingNumber8px8px
Description
The spacing of the Chat quick reply.
+
$kendo-chat-quick-reply-line-heightNumber$kendo-chat-bubble-line-height1.25
Description
The line height of the Chat quick reply.
+
$kendo-chat-bgColor$kendo-app-bg#fafafa
Description
The background color of the Chat.
+
$kendo-chat-textColor$kendo-app-text#212529
Description
The text color of the Chat.
+
$kendo-chat-borderColor$kendo-app-border#dee2e6
Description
The border color of the Chat.
+
$kendo-chat-bubble-bgColor$kendo-button-bg#e4e7eb
Description
The background color of the Chat bubble.
+
$kendo-chat-bubble-textColor$kendo-button-text#212529
Description
The text color of the Chat bubble.
+
$kendo-chat-bubble-borderColor$kendo-chat-bubble-bg#e4e7eb
Description
The border color of the Chat bubble.
+
$kendo-chat-bubble-shadowStringnonenone
Description
The box shadow of the Chat bubble.
+
$kendo-chat-bubble-hover-shadowStringnonenone
Description
The shadow of the hovered Chat bubble.
+
$kendo-chat-bubble-selected-shadowStringnonenone
Description
The shadow of the selected Chat bubble.
+
$kendo-chat-alt-bubble-bgColor$kendo-color-primary#0d6efd
Description
The background color of the Chat alt bubble.
+
$kendo-chat-alt-bubble-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-chat-alt-bubble-bg ))white
Description
The text color of the Chat alt bubble.
+
$kendo-chat-alt-bubble-borderColor$kendo-chat-alt-bubble-bg#0d6efd
Description
The border color of the Chat alt bubble.
+
$kendo-chat-alt-bubble-shadowStringnonenone
Description
The shadow of the Chat alt bubble.
+
$kendo-chat-alt-bubble-hover-shadowStringnonenone
Description
The shadow of the hovered Chat alt bubble.
+
$kendo-chat-alt-bubble-selected-shadowStringnonenone
Description
The shadow of the selected Chat alt bubble.
+
$kendo-chat-quick-reply-bgColortransparenttransparent
Description
The background color of Chat quick reply.
+
$kendo-chat-quick-reply-textColor$kendo-color-primary#0d6efd
Description
The text color of Chat quick reply.
+
$kendo-chat-quick-reply-borderColor$kendo-color-primary#0d6efd
Description
The border color of Chat quick reply.
+
$kendo-chat-quick-reply-hover-bgColor$kendo-color-primary#0d6efd
Description
The background color of the hovered Chat quick reply.
+
$kendo-chat-quick-reply-hover-textColor$kendo-color-primary-contrastwhite
Description
The text color of the Chat quick reply.
+
$kendo-chat-quick-reply-hover-borderColor$kendo-color-primary#0d6efd
Description
The border color of the hovered Chat quick reply.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/bootstrap/docs/customization-orgchart.md b/packages/bootstrap/docs/customization-orgchart.md new file mode 100644 index 00000000000..ffdd50702cf --- /dev/null +++ b/packages/bootstrap/docs/customization-orgchart.md @@ -0,0 +1,478 @@ +--- +title: Customizing Orgchart +description: "Refer to the list of the Kendo UI Bootstrap theme variables available for customization." +slug: variables_kendothemebootstrap_orgchart +position: 9 +--- + +# Customizing Orgchart + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-orgchart-spacerNumberk-map-get( $kendo-spacing, 6 )1.5rem
Description
The spacing index of the OrgChart.
+
$kendo-orgchart-padding-yNumber$kendo-orgchart-spacer1.5rem
Description
The vertical padding of the OrgChart.
+
$kendo-orgchart-padding-xNumber$kendo-orgchart-padding-y1.5rem
Description
The horizontal padding of the OrgChart.
+
$kendo-orgchart-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the OrgChart.
+
$kendo-orgchart-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the OrgChart.
+
$kendo-orgchart-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the OrgChart.
+
$kendo-orgchart-bgColor$kendo-component-bg#ffffff
Description
The background color of the OrgChart.
+
$kendo-orgchart-textColor$kendo-component-text#212529
Description
The text color of the OrgChart.
+
$kendo-orgchart-borderColor$kendo-component-border#dee2e6
Description
The border color of the OrgChart.
+
$kendo-orgchart-node-gapNumber$kendo-orgchart-spacer1.5rem
Description
The spacing of the OrgChart node.
+
$kendo-orgchart-group-gapNumber$kendo-orgchart-spacer1.5rem
Description
The spacing of the OrgChart group.
+
$kendo-orgchart-node-container-gapNumber$kendo-orgchart-spacer1.5rem
Description
The spacing of the OrgChart node container.
+
$kendo-orgchart-node-group-padding-yNumber$kendo-orgchart-spacer1.5rem
Description
The vertical padding of the OrgChart node group.
+
$kendo-orgchart-node-group-padding-xNumber$kendo-orgchart-node-group-padding-y1.5rem
Description
The horizontal padding of the OrgChart node group.
+
$kendo-orgchart-node-group-border-widthNumber1px1px
Description
The border width of the OrgChart node group.
+
$kendo-orgchart-node-group-border-radiusNumber$kendo-border-radius-md0.375rem
Description
The border radius of the OrgChart node group.
+
$kendo-orgchart-node-group-bgColor$kendo-base-bg#f8f9fa
Description
The background color of the OrgChart node group.
+
$kendo-orgchart-node-group-textColor$kendo-base-text#212529
Description
The text color of the OrgChart node group.
+
$kendo-orgchart-node-group-borderColor$kendo-base-border#e4e5e6
Description
The border color of the OrgChart node group.
+
$kendo-orgchart-node-group-focus-borderNull$kendo-card-focus-bordernull
Description
The border color of the focused OrgChart node group.
+
$kendo-orgchart-node-group-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The shadow of the focused OrgChart node group.
+
$kendo-orgchart-node-group-title-font-sizeNumber$kendo-font-size-lg1.25rem
Description
The font size of the OrgChart node group title.
+
$kendo-orgchart-node-group-title-margin-bottomNumberk-math-div( $kendo-orgchart-spacer, 4 )0.375rem
Description
The bottom margin of the OrgChart node group title.
+
$kendo-orgchart-node-group-title-line-heightNumber$kendo-line-height-sm1.25
Description
The line height of the OrgChart node group title.
+
$kendo-orgchart-node-group-subtitle-margin-bottomNumber$kendo-orgchart-spacer1.5rem
Description
The bottom margin of the OrgChart node group subtitle.
+
$kendo-orgchart-node-group-subtitle-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the OrgChart node group subtitle.
+
$kendo-orgchart-node-group-subtitle-textColor$kendo-subtle-text#6c757d
Description
The line height of the OrgChart node group subtitle.
+
$kendo-orgchart-card-widthNumber300px300px
Description
The width of the OrgChart Card.
+
$kendo-orgchart-card-padding-yNumber$kendo-card-padding-y1rem
Description
The vertical padding of the OrgChart Card.
+
$kendo-orgchart-card-padding-xNumber$kendo-orgchart-card-padding-y1rem
Description
The horizontal padding of the OrgChart Card.
+
$kendo-orgchart-card-border-widthNumber$kendo-card-border-width1px
Description
The border width of the OrgChart Card.
+
$kendo-orgchart-card-shadowNull$kendo-card-shadownull
Description
The shadow of the OrgChart Card.
+
$kendo-orgchart-card-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The shadow of the focused OrgChart Card.
+
$kendo-orgchart-card-title-margin-bottomNumber0px0px
Description
The bottom margin of the OrgChart Card title.
+
$kendo-orgchart-card-title-font-sizeNullnullnull
Description
The font size of the OrgChart Card title.
+
$kendo-orgchart-card-subtitle-margin-bottomNumber0px0px
Description
The bottom margin of the OrgChart Card subtitle.
+
$kendo-orgchart-card-subtitle-font-sizeNullnullnull
Description
The font size of the OrgChart Card subtitle.
+
$kendo-orgchart-card-body-border-widthList2px 0 02px 0 0
Description
The border width of the OrgChart Card body.
+
$kendo-orgchart-card-body-border-colorColortransparenttransparent
Description
The border color of the OrgChart Card body.
+
$kendo-orgchart-card-body-vbox-margin-rightNumberk-math-div( $kendo-orgchart-spacer, 2 )0.75rem
Description
The right margin of the OrgChart Card body title wrap.
+
$kendo-orgchart-card-body-vbox-min-heightNumber$kendo-card-avatar-size45px
Description
The min height of the OrgChart Card body title wrap.
+
$kendo-orgchart-line-sizeNumber1px1px
Description
The size of the OrgChart connecting line.
+
$kendo-orgchart-line-fillColor$kendo-base-border#e4e5e6
Description
The fill color of the OrgChart connecting line.
+
$kendo-orgchart-line-v-heightNumber25px25px
Description
The height of the OrgChart connecting line.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/bootstrap/docs/customization-splitter.md b/packages/bootstrap/docs/customization-splitter.md new file mode 100644 index 00000000000..d2b0acc29ef --- /dev/null +++ b/packages/bootstrap/docs/customization-splitter.md @@ -0,0 +1,228 @@ +--- +title: Customizing Splitter +description: "Refer to the list of the Kendo UI Bootstrap theme variables available for customization." +slug: variables_kendothemebootstrap_splitter +position: 9 +--- + +# Customizing Splitter + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-splitter-border-widthNumber1px1px
Description
The width of the border around the Splitter.
+
$kendo-splitter-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the Splitter.
+
$kendo-splitter-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Splitter.
+
$kendo-splitter-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Splitter.
+
$kendo-splitter-bgColor$kendo-component-bg#ffffff
Description
The background color of the Splitter.
+
$kendo-splitter-textColor$kendo-component-text#212529
Description
The text color of the Splitter.
+
$kendo-splitter-borderColor$kendo-component-border#dee2e6
Description
The border color of the Splitter.
+
$kendo-splitter-splitbar-sizeNumberk-map-get( $kendo-spacing, 3 )0.75rem
Description
The size of the Splitter splitbar.
+
$kendo-splitter-drag-handle-lengthNumber20px20px
Description
The length of the Splitter drag handle.
+
$kendo-splitter-drag-handle-thicknessNumber2px2px
Description
The thickness of the Splitter drag handle.
+
$kendo-splitter-drag-icon-marginNumber7px7px
Description
The margin of the Splitter drag handle icon.
+
$kendo-splitter-collapse-icon-padding-xNullnullnull
Description
The horizontal padding of the collapse icon in the Splitter.
+
$kendo-splitter-collapse-icon-padding-yNumberk-map-get( $kendo-spacing, .5 )0.125rem
Description
The vertical padding of the collapse icon in the Splitter.
+
$kendo-splitbar-bgColor$kendo-base-bg#f8f9fa
Description
The background color of the Splitter splitbar.
+
$kendo-splitbar-textColor$kendo-base-text#212529
Description
The text color of the Splitter splitbar.
+
$kendo-splitbar-hover-bgColorif($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-splitbar-bg, .5 ))#eeeff0
Description
The hover background color of the Splitter splitbar.
+
$kendo-splitbar-hover-textColor$kendo-splitbar-text#212529
Description
The hover text color of the Splitter splitbar.
+
$kendo-splitbar-selected-bgColor$kendo-selected-bg#0d6efd
Description
The selected background color of the Splitter splitbar.
+
$kendo-splitbar-selected-textColor$kendo-selected-textwhite
Description
The selected text color of the Splitter splitbar.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/bootstrap/docs/customization-stepper.md b/packages/bootstrap/docs/customization-stepper.md new file mode 100644 index 00000000000..b61096a1907 --- /dev/null +++ b/packages/bootstrap/docs/customization-stepper.md @@ -0,0 +1,718 @@ +--- +title: Customizing Stepper +description: "Refer to the list of the Kendo UI Bootstrap theme variables available for customization." +slug: variables_kendothemebootstrap_stepper +position: 9 +--- + +# Customizing Stepper + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-stepper-margin-xNullnullnull
Description
The horizontal margin the Stepper.
+
$kendo-stepper-margin-yNullnullnull
Description
The vertical margin the Stepper.
+
$kendo-stepper-padding-xNullnullnull
Description
The horizontal padding the Stepper.
+
$kendo-stepper-padding-yNullnullnull
Description
The vertical padding the Stepper.
+
$kendo-stepper-label-margin-xNumber12px12px
Description
The horizontal margin the Stepper label.
+
$kendo-stepper-label-padding-xNumber12px12px
Description
The horizontal padding the Stepper label.
+
$kendo-stepper-label-padding-yNumber5px5px
Description
The vertical padding the Stepper label.
+
$kendo-stepper-border-widthNumber0px0px
Description
The width of the border around the Stepper.
+
$kendo-stepper-inline-content-padding-xNumber20px20px
Description
The horizontal padding the Stepper content.
+
$kendo-stepper-inline-content-padding-yNumber10px10px
Description
The vertical padding the Stepper content.
+
$kendo-stepper-font-sizeNumber$kendo-font-size-md1rem
+
$kendo-stepper-line-heightNumber$kendo-line-height-md1.5
+
$kendo-stepper-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
+
$kendo-stepper-bgNullnullnull
Description
The background color of the Stepper.
+
$kendo-stepper-textColor$kendo-component-text#212529
Description
The text color of the Stepper.
+
$kendo-stepper-borderNullnullnull
Description
The border color of the Stepper.
+
$kendo-stepper-indicator-widthNumber28px28px
Description
The width of the Stepper indicator.
+
$kendo-stepper-indicator-heightNumber$kendo-stepper-indicator-width28px
Description
The height of the Stepper indicator.
+
$kendo-stepper-indicator-border-radiusNumber50%50%
Description
The border radius of the Stepper indicator.
+
$kendo-stepper-indicator-border-widthNumber1px1px
Description
The border width of the Stepper indicator.
+
$kendo-stepper-indicator-focus-border-widthNumber1px1px
Description
The border width of the focused Stepper indicator.
+
$kendo-stepper-indicator-focus-sizeNumber2px2px
Description
The size of the focused Stepper indicator.
+
$kendo-stepper-indicator-focus-offsetNumber3px3px
Description
The offset of the Stepper focused indicator.
+
$kendo-stepper-indicator-focus-calc-offsetCalculationcalc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} )calc(1px + 3px)
Description
The calculated offset of the focused Stepper indicator.
+
$kendo-stepper-indicator-bgColor$kendo-component-bg#ffffff
Description
The background color of the Stepper indicator.
+
$kendo-stepper-indicator-textColor$kendo-component-text#212529
Description
The text color of the Stepper indicator.
+
$kendo-stepper-indicator-borderColor$kendo-component-border#dee2e6
Description
The border color of the Stepper indicator.
+
$kendo-stepper-indicator-hover-bgColorif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-stepper-indicator-bg ))#ebebeb
Description
The background color of the hovered Stepper indicator.
+
$kendo-stepper-indicator-hover-textNullnullnull
Description
The text color of the hovered Stepper indicator.
+
$kendo-stepper-indicator-hover-borderNullnullnull
Description
The border color of the hovered Stepper indicator.
+
$kendo-stepper-indicator-disabled-bgNullnullnull
Description
The background color of the disabled Stepper indicator.
+
$kendo-stepper-indicator-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .65 ), $kendo-disabled-text)#adb5bd
Description
The text color of the disabled Stepper indicator.
+
$kendo-stepper-indicator-disabled-borderNullnullnull
Description
The border color of the disabled Stepper indicator.
+
$kendo-stepper-indicator-done-bgColor$kendo-color-primary#0d6efd
Description
The background color of the Stepper done indicator.
+
$kendo-stepper-indicator-done-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg ))white
Description
The text color of the Stepper done indicator.
+
$kendo-stepper-indicator-done-borderColor$kendo-stepper-indicator-done-bg#0d6efd
Description
The border color of the Stepper done indicator.
+
$kendo-stepper-indicator-done-hover-bgColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg ))#0c65e9
Description
The background color of the hovered Stepper done indicator.
+
$kendo-stepper-indicator-done-hover-textNullnullnull
Description
The text color of the hovered Stepper done indicator.
+
$kendo-stepper-indicator-done-hover-borderNullnullnull
Description
The border color of the hovered Stepper done indicator.
+
$kendo-stepper-indicator-done-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .6 ), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%))#6ea8fe
Description
The background color of the disabled Stepper done indicator.
+
$kendo-stepper-indicator-done-disabled-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg ))white
Description
The text color of the disabled Stepper done indicator.
+
$kendo-stepper-indicator-done-disabled-borderColor$kendo-stepper-indicator-done-disabled-bg#6ea8fe
Description
The border color of the disabled Stepper done indicator.
+
$kendo-stepper-indicator-current-bgColor$kendo-stepper-indicator-done-bg#0d6efd
Description
The background color of the Stepper current indicator.
+
$kendo-stepper-indicator-current-textColor$kendo-stepper-indicator-done-textwhite
Description
The text color of the Stepper current indicator.
+
$kendo-stepper-indicator-current-borderColor$kendo-stepper-indicator-done-border#0d6efd
Description
The border color of the Stepper current indicator.
+
$kendo-stepper-indicator-current-hover-bgColor$kendo-stepper-indicator-done-hover-bg#0c65e9
Description
The background color of the hovered Stepper current indicator.
+
$kendo-stepper-indicator-current-hover-textNull$kendo-stepper-indicator-done-hover-textnull
Description
The text color of the hovered Stepper current indicator.
+
$kendo-stepper-indicator-current-hover-borderNull$kendo-stepper-indicator-done-hover-bordernull
Description
The border color of the hovered Stepper current indicator.
+
$kendo-stepper-indicator-current-disabled-bgColor$kendo-stepper-indicator-done-disabled-bg#6ea8fe
Description
The background color of the disabled Stepper current indicator.
+
$kendo-stepper-indicator-current-disabled-textColor$kendo-stepper-indicator-done-disabled-textwhite
Description
The text color of the disabled Stepper current indicator.
+
$kendo-stepper-indicator-current-disabled-borderColor$kendo-stepper-indicator-done-disabled-border#6ea8fe
Description
The border color of the disabled Stepper current indicator.
+
$kendo-stepper-label-textNullnullnull
Description
The text color of the Stepper label.
+
$kendo-stepper-label-success-textColor$kendo-color-success#198754
Description
The success text color of the Stepper label.
+
$kendo-stepper-label-error-textColor$kendo-color-error#dc3545
Description
The error text color of the Stepper label.
+
$kendo-stepper-label-hover-textNullnullnull
Description
The text color of the hovered Stepper label.
+
$kendo-stepper-label-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .65 ), $kendo-disabled-text)#adb5bd
Description
The text color of the disabled Stepper label.
+
$kendo-stepper-optional-label-textColor$kendo-subtle-text#6c757d
Description
The text color of the Stepper optional label.
+
$kendo-stepper-optional-label-opacityNullnullnull
Description
The opacity of the Stepper optional label.
+
$kendo-stepper-optional-label-font-sizeNumber$kendo-font-size-sm0.875rem
Description
The font size of the Stepper optional label.
+
$kendo-stepper-optional-label-font-styleNullnullnull
Description
The font style of the Stepper optional label.
+
$kendo-stepper-progressbar-sizeNumber2px2px
Description
The size of the Stepper ProgressBar.
+
$kendo-stepper-progressbar-bgNullnullnull
Description
The background color of the Stepper ProgressBar.
+
$kendo-stepper-progressbar-textNullnullnull
Description
The text color of the Stepper ProgressBar.
+
$kendo-stepper-progressbar-fill-bgNullnullnull
Description
The background color of the selected Stepper ProgressBar.
+
$kendo-stepper-progressbar-fill-textNullnullnull
Description
The text color of the selected Stepper ProgressBar.
+
$kendo-stepper-content-transition-propertyStringheightheight
Description
The property name of the Stepper transition.
+
$kendo-stepper-content-transition-durationNumber300ms300ms
Description
The duration of the Stepper transition.
+
$kendo-stepper-content-transition-timing-functionListcubic-bezier(.4, 0, .2, 1) 0mscubic-bezier(0.4, 0, 0.2, 1) 0ms
Description
The timing function of the Stepper transition.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/bootstrap/docs/customization-taskboard.md b/packages/bootstrap/docs/customization-taskboard.md new file mode 100644 index 00000000000..16bbc0df198 --- /dev/null +++ b/packages/bootstrap/docs/customization-taskboard.md @@ -0,0 +1,788 @@ +--- +title: Customizing Taskboard +description: "Refer to the list of the Kendo UI Bootstrap theme variables available for customization." +slug: variables_kendothemebootstrap_taskboard +position: 9 +--- + +# Customizing Taskboard + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-taskboard-spacerNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The spacing index of the TaskBoard.
+
$kendo-taskboard-padding-yNullnullnull
Description
The vertical padding of the TaskBoard.
+
$kendo-taskboard-padding-xNullnullnull
Description
The horizontal of the TaskBoard.
+
$kendo-taskboard-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the TaskBoard.
+
$kendo-taskboard-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the TaskBoard.
+
$kendo-taskboard-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the TaskBoard.
+
$kendo-taskboard-bgNullnullnull
Description
The background color of the TaskBoard.
+
$kendo-taskboard-textNullnullnull
Description
The text color of the TaskBoard.
+
$kendo-taskboard-borderNullnullnull
Description
The border color of the TaskBoard.
+
$kendo-taskboard-toolbar-padding-yNumber$kendo-taskboard-spacer1rem
Description
The vertical padding of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-padding-xNumber$kendo-taskboard-toolbar-padding-y1rem
Description
The horizontal padding of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-bgNullnullnull
Description
The background color of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-textNullnullnull
Description
The text color of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-borderNullnullnull
Description
The border color of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-gradientNullnullnull
Description
The gradient of the TaskBoard Toolbar.
+
$kendo-taskboard-content-padding-yNumber$kendo-taskboard-spacer1rem
Description
The vertical padding of the TaskBoard content.
+
$kendo-taskboard-content-padding-xNumber$kendo-taskboard-content-padding-y1rem
Description
The horizontal padding of the TaskBoard content.
+
$kendo-taskboard-column-container-spacing-yNumber$kendo-taskboard-spacer * .750.75rem
Description
The vertical spacing of the TaskBoard column container.
+
$kendo-taskboard-column-container-padding-yNumber0px0px
Description
The vertical padding of the TaskBoard column container.
+
$kendo-taskboard-column-container-padding-xNumber$kendo-taskboard-spacer * .750.75rem
Description
The horizontal padding of the TaskBoard column container.
+
$kendo-taskboard-columns-container-gapNumber$kendo-taskboard-spacer1rem
Description
The spacing of the TaskBoard columns container.
+
$kendo-taskboard-column-widthNumber320px320px
Description
The default width of the TaskBoard column.
+
$kendo-taskboard-column-border-widthNumber1px1px
Description
The border width of the TaskBoard column.
+
$kendo-taskboard-column-border-radiusNumber$kendo-border-radius-sm0.25rem
Description
The border radius of the TaskBoard column.
+
$kendo-taskboard-column-bgColorif($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $gray-900, $gray-100 ))#f8f9fa
Description
The background color of the TaskBoard column.
+
$kendo-taskboard-column-textNullnullnull
Description
The text color of the TaskBoard column.
+
$kendo-taskboard-column-borderColortransparenttransparent
Description
The border color of the TaskBoard column.
+
$kendo-taskboard-column-focus-bgNullnullnull
Description
The background color of the focused TaskBoard column.
+
$kendo-taskboard-column-focus-textNullnullnull
Description
The text color of the focused TaskBoard column.
+
$kendo-taskboard-column-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 ))#b6b7b8
Description
The border color of the focused TaskBoard column.
+
$kendo-taskboard-column-header-padding-yNumber$kendo-taskboard-spacer * .750.75rem
Description
The vertical padding of the TaskBoard column header.
+
$kendo-taskboard-column-header-padding-xNumber$kendo-taskboard-column-header-padding-y0.75rem
Description
The horizontal padding of the TaskBoard column header.
+
$kendo-taskboard-column-header-gapNumberk-math-div( $kendo-taskboard-spacer, 4 )0.25rem
Description
The spacing of the TaskBoard column header.
+
$kendo-taskboard-column-header-actions-gapNumberk-math-div( $kendo-taskboard-spacer, 2 )0.5rem
Description
The spacing of the TaskBoard column header actions.
+
$kendo-taskboard-column-header-font-weightNumber500500
Description
The font weight of the TaskBoard column header.
+
$kendo-taskboard-column-header-textColor$kendo-component-header-text#212529
Description
The text color of the TaskBoard column header.
+
$kendo-taskboard-column-cards-padding-yNumber$kendo-taskboard-spacer * .250.25rem
Description
The vertical padding of the TaskBoard column Card wrapper.
+
$kendo-taskboard-column-cards-padding-xNumber0px0px
Description
The horizontal padding of the TaskBoard column Card wrapper.
+
$kendo-taskboard-column-cards-gapNumber$kendo-taskboard-spacer * .750.75rem
Description
The spacing of the TaskBoard column Card wrapper.
+
$kendo-taskboard-pane-widthNumber$kendo-taskboard-column-width320px
Description
The default width of the TaskBoard pane.
+
$kendo-taskboard-pane-padding-yNullnullnull
Description
The vertical padding of the TaskBoard pane.
+
$kendo-taskboard-pane-padding-xNullnullnull
Description
The horizontal padding of the TaskBoard pane.
+
$kendo-taskboard-pane-border-widthNumber1px1px
Description
The border width of the TaskBoard pane.
+
$kendo-taskboard-pane-bgColor$kendo-component-bg#ffffff
Description
The background color of the TaskBoard pane.
+
$kendo-taskboard-pane-textColor$kendo-component-text#212529
Description
The text color of the TaskBoard pane.
+
$kendo-taskboard-pane-borderColor$kendo-component-border#dee2e6
Description
The border color of the TaskBoard pane.
+
$kendo-taskboard-pane-header-padding-yNumber( $kendo-taskboard-spacer * .75 )0.75rem
Description
The vertical padding of the TaskBoard pane header.
+
$kendo-taskboard-pane-header-padding-xNumber$kendo-taskboard-spacer1rem
Description
The horizontal padding of the TaskBoard pane header.
+
$kendo-taskboard-pane-header-font-weightNumber500500
Description
The font weight of the TaskBoard pane header.
+
$kendo-taskboard-pane-header-textColor$kendo-component-header-text#212529
Description
The text color of the TaskBoard pane header.
+
$kendo-taskboard-pane-content-padding-yNumber0px0px
Description
The vertical padding of the TaskBoard pane content.
+
$kendo-taskboard-pane-content-padding-xNumber$kendo-taskboard-spacer1rem
Description
The horizontal padding of the TaskBoard pane content.
+
$kendo-taskboard-pane-actions-padding-yNumber( $kendo-taskboard-spacer * .75 )0.75rem
Description
The vertical padding of the TaskBoard pane actions.
+
$kendo-taskboard-pane-actions-padding-xNumber$kendo-taskboard-spacer1rem
Description
The horizontal padding of the TaskBoard pane actions.
+
$kendo-taskboard-card-padding-yNumber$kendo-taskboard-spacer1rem
Description
The vertical padding of the TaskBoard Card.
+
$kendo-taskboard-card-padding-xNumber$kendo-taskboard-card-padding-y1rem
Description
The horizontal padding of the TaskBoard Card.
+
$kendo-taskboard-card-border-widthNumber$kendo-card-border-width1px
Description
The border width of the TaskBoard Card.
+
$kendo-taskboard-card-border-radiusNumber$kendo-card-border-radius0.375rem
Description
The border radius of the TaskBoard Card.
+
$kendo-taskboard-card-bgColor$kendo-card-bg#ffffff
Description
The background color of the TaskBoard Card.
+
$kendo-taskboard-card-textColor$kendo-card-text#212529
Description
The text color of the TaskBoard Card.
+
$kendo-taskboard-card-borderColor$kendo-card-border#dee2e6
Description
The border color of the TaskBoard Card.
+
$kendo-taskboard-card-shadowNull$kendo-card-shadownull
Description
The shadow of the TaskBoard Card.
+
$kendo-taskboard-card-category-border-widthNumber4px4px
Description
The border width of the TaskBoard Card category.
+
$kendo-taskboard-card-hover-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% ))#c8cbcf
Description
The border color of the hovered TaskBoard Card.
+
$kendo-taskboard-card-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% ))#b6b9bd
Description
The border color of the focused TaskBoard Card.
+
$kendo-taskboard-card-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The shadow of the focused TaskBoard Card.
+
$kendo-taskboard-card-selected-borderColorif($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary-lighter, 8 ))#b6d3fe
Description
The border of the selected TaskBoard Card.
+
$kendo-taskboard-card-selected-shadowStringnonenone
Description
The shadow of the selected TaskBoard Card.
+
$kendo-taskboard-card-header-textColor$kendo-color-primary#0d6efd
Description
The text color of the TaskBoard Card header text.
+
$kendo-taskboard-card-header-focus-textColor$kendo-color-primary-darker#0b5cd5
Description
The text color of the hovered TaskBoard Card header text.
+
$kendo-taskboard-card-header-hover-textColor$kendo-color-primary-darker#0b5cd5
Description
The text color of the focused TaskBoard Card header text.
+
$kendo-taskboard-drag-placeholder-border-widthNumber1px1px
Description
The border width of the TaskBoard Card placeholder.
+
$kendo-taskboard-drag-placeholder-border-radiusNumber$kendo-taskboard-card-border-radius0.375rem
Description
The border radius of the TaskBoard Card placeholder.
+
$kendo-taskboard-drag-placeholder-bgColorrgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .1 )rgba(0, 0, 0, 0.1)
Description
The background color of the TaskBoard Card placeholder.
+
$kendo-taskboard-drag-placeholder-borderColor$kendo-component-border#dee2e6
Description
The border color of the TaskBoard Card placeholder.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/bootstrap/docs/customization-wizard.md b/packages/bootstrap/docs/customization-wizard.md new file mode 100644 index 00000000000..98687e8666c --- /dev/null +++ b/packages/bootstrap/docs/customization-wizard.md @@ -0,0 +1,138 @@ +--- +title: Customizing Wizard +description: "Refer to the list of the Kendo UI Bootstrap theme variables available for customization." +slug: variables_kendothemebootstrap_wizard +position: 9 +--- + +# Customizing Wizard + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-wizard-padding-xNumber$kendo-padding-md-x * 1.251.25rem
Description
The horizontal padding of the Wizard.
+
$kendo-wizard-padding-yNumber$kendo-wizard-padding-x1.25rem
Description
The vertical padding of the Wizard.
+
$kendo-wizard-content-padding-xNumber$kendo-padding-md-x * 22rem
Description
The horizontal padding of the Wizard content.
+
$kendo-wizard-content-padding-yNumber$kendo-padding-md-y * 42rem
Description
The vertical padding of the Wizard content.
+
$kendo-wizard-buttons-margin-xNumber10px10px
Description
The horizontal margin of the Wizard Button container.
+
$kendo-wizard-border-widthNumber0px0px
Description
The border width of the Wizard.
+
$kendo-wizard-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Wizard.
+
$kendo-wizard-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Wizard.
+
$kendo-wizard-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the Wizard.
+
$kendo-wizard-step-focus-borderColor#656565#656565
Description
The outline of the focused Wizard step.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/bootstrap/docs/customization.md b/packages/bootstrap/docs/customization.md index 4a417daa3c8..3d5d3cb6a6b 100644 --- a/packages/bootstrap/docs/customization.md +++ b/packages/bootstrap/docs/customization.md @@ -3057,7 +3057,7 @@ The following table lists the available variables for customizing the Bootstrap -### Checkbox +### Chat @@ -3075,479 +3075,579 @@ The following table lists the available variables for customizing the Bootstrap - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + - - - - - + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + +
$kendo-checkbox-border-width$kendo-chat-padding-x Number1px1px16px16px
Description
The border width of the CheckBox.
+
Description
The horizontal padding of the Chat.
$kendo-checkbox-sm-size$kendo-chat-padding-y Numberk-map-get( $kendo-spacing, 3 )0.75rem16px16px
Description
The size of a small CheckBox.
+
Description
The vertical padding of the Chat.
$kendo-checkbox-md-size$kendo-chat-width Numberk-map-get( $kendo-spacing, 4 )1rem500px500px
Description
The size of a medium CheckBox.
+
Description
The width of the Chat.
$kendo-checkbox-lg-size$kendo-chat-height Numberk-map-get( $kendo-spacing, 5 )1.25rem600px600px
Description
The size of a large CheckBox.
+
Description
The height of the Chat.
$kendo-checkbox-sm-glyph-size$kendo-chat-border-width Numberk-map-get( $kendo-spacing, 2.5 )0.625rem1px1px
Description
The glyph size of a small CheckBox.
+
Description
The border width of the Chat.
$kendo-checkbox-md-glyph-sizeNumberk-map-get( $kendo-spacing, 3.5 )0.875rem$kendo-chat-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The glyph size of a medium CheckBox.
+
Description
The font family of the Chat.
$kendo-checkbox-lg-glyph-size$kendo-chat-font-size Numberk-map-get( $kendo-spacing, 4.5 )1.125rem$kendo-font-size-md1rem
Description
The glyph size of a large CheckBox.
+
Description
The font size of the Chat.
$kendo-checkbox-sm-ripple-size$kendo-chat-line-height Number300%300%$kendo-line-height-md1.5
Description
The ripple size of a small CheckBox.
+
Description
The line height of the Chat.
$kendo-checkbox-md-ripple-size$kendo-chat-item-spacing-x Number300%300%8px8px
Description
The ripple size of a medium CheckBox.
+
Description
The horizontal spacing between items of the Chat.
$kendo-checkbox-lg-ripple-size$kendo-chat-item-spacing-y Number300%300%16px16px
Description
The ripple size of a large CheckBox.
+
Description
The vertical spacing between items of the Chat.
$kendo-checkbox-bgColor$kendo-component-bg#ffffff$kendo-chat-message-list-padding-xNumber$kendo-chat-padding-x16px
Description
The background color of CheckBox.
+
Description
The horizontal padding of the Chat message list.
$kendo-checkbox-textNullnullnull$kendo-chat-message-list-padding-yNumber$kendo-chat-padding-y16px
Description
The text color of CheckBox.
+
Description
The vertical padding of the Chat message list.
$kendo-checkbox-borderColorif($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-checkbox-bg ), $gray-400, $gray-600 ))#ced4da$kendo-chat-message-list-spacingNumber$kendo-chat-item-spacing-y16px
Description
The border color of CheckBox.
+
Description
The spacing of the Chat message list.
$kendo-checkbox-hover-bgNullnullnull$kendo-chat-timestamp-font-sizeStringsmallersmaller
Description
The background color of the hovered CheckBox.
+
Description
The font size of the Chat timestamp.
$kendo-checkbox-hover-text$kendo-chat-timestamp-line-height Null null null
Description
The text color of the hovered CheckBox.
+
Description
The line height of the Chat timestamp.
$kendo-checkbox-hover-borderNullnullnull$kendo-chat-timestamp-transformStringuppercaseuppercase
Description
The border color of the hovered CheckBox.
+
Description
The text transform of the Chat timestamp.
$kendo-checkbox-checked-bg$kendo-chat-timestamp-text Color$kendo-color-primary#0d6efd$kendo-subtle-text#6c757d
Description
The background color of the checked CheckBox.
+
Description
The text color of the Chat timestamp.
$kendo-checkbox-checked-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-checked-bg ))white$kendo-chat-timestamp-bgNullnullnull
Description
The color of the checked CheckBox.
+
Description
The background color of the Chat timestamp.
$kendo-checkbox-checked-borderColor$kendo-checkbox-checked-bg#0d6efd$kendo-chat-bubble-padding-xNumber16px16px
Description
The border color of the checked CheckBox.
+
Description
The horizontal padding of the Chat bubble message.
$kendo-checkbox-indeterminate-bgColor$kendo-checkbox-checked-bg#0d6efd$kendo-chat-bubble-padding-yNumber8px8px
Description
The background color of the indeterminate CheckBox.
+
Description
The vertical padding of the Chat bubble message.
$kendo-checkbox-indeterminate-textColor$kendo-checkbox-checked-textwhite$kendo-chat-bubble-spacingNumber2px2px
Description
The text color of the indeterminate CheckBox.
+
Description
The spacing of the Chat bubble message.
$kendo-checkbox-indeterminate-borderColor$kendo-checkbox-checked-border#0d6efd$kendo-chat-bubble-line-heightNumber1.251.25
Description
The border color of the indeterminate CheckBox.
+
Description
The line height of the Chat bubble message.
$kendo-checkbox-focus-borderColorif($kendo-enable-color-system, k-color( primary-emphasis ), k-try-tint( $kendo-color-primary, 50% ))#86b7fe$kendo-chat-bubble-border-radiusNumber12px12px
Description
The border color of the focused CheckBox.
+
Description
The border radius of the Chat bubble message.
$kendo-checkbox-focus-shadowList0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))0 0 0 0.25rem rgba(13, 110, 253, 0.25)$kendo-chat-bubble-border-radius-smNumber2px2px
Description
The box shadow of the focused CheckBox.
+
Description
The border radius of the Chat small bubble message
$kendo-checkbox-focus-checked-borderColor$kendo-checkbox-checked-border#0d6efd$kendo-chat-avatar-sizeNumber32px32px
Description
The border color of the focused and checked CheckBox.
+
Description
The size of the Chat Avatar.
$kendo-checkbox-focus-checked-shadowList$kendo-checkbox-focus-shadow0 0 0 0.25rem rgba(13, 110, 253, 0.25)$kendo-chat-avatar-spacingNumber$kendo-chat-item-spacing-x8px
Description
The box shadow of the focused and checked CheckBox.
+
Description
The spacing of the Chat Avatar.
$kendo-checkbox-disabled-bgNullnullnull$kendo-chat-toolbar-padding-xNumber$kendo-toolbar-md-padding-x0.5rem
Description
The background color of the disabled CheckBox.
+
Description
The horizontal padding of the Chat Toolbar.
$kendo-checkbox-disabled-textNullnullnull$kendo-chat-toolbar-padding-yNumber$kendo-toolbar-md-padding-y0.5rem
Description
The text color of the disabled CheckBox.
+
Description
The vertical padding of the Chat Toolbar.
$kendo-checkbox-disabled-borderNullnullnull$kendo-chat-toolbar-spacingNumber$kendo-toolbar-md-spacing0.5rem
Description
The border color of the disabled CheckBox.
+
Description
The spacing of the Chat Toolbar.
$kendo-checkbox-disabled-checked-bgNullnullnull$kendo-chat-toolbar-bgColor$kendo-toolbar-bg#f8f9fa
Description
The background color of the disabled and checked CheckBox.
+
Description
The background color of the Chat Toolbar.
$kendo-checkbox-disabled-checked-textNullnullnull$kendo-chat-toolbar-textColor$kendo-toolbar-text#212529
Description
The text color of the disabled and checked CheckBox.
+
Description
The text color of the Chat Toolbar.
$kendo-checkbox-disabled-checked-borderNullnullnull$kendo-chat-toolbar-borderStringinheritinherit
Description
The border color of the disabled and checked CheckBox.
+
Description
The border color of the Chat Toolbar.
$kendo-checkbox-invalid-bgNullnullnull$kendo-chat-quick-reply-padding-xNumber12px12px
Description
The background color of the invalid CheckBox.
+
Description
The horizontal padding of the Chat quick reply.
$kendo-checkbox-invalid-textColor$kendo-invalid-text#dc3545$kendo-chat-quick-reply-padding-yNumber8px8px
Description
The text color of the invalid CheckBox.
+
Description
The vertical padding of the Chat quick reply.
$kendo-checkbox-invalid-borderColor$kendo-invalid-border#dc3545$kendo-chat-quick-reply-spacingNumber8px8px
Description
The border color of the invalid CheckBox.
+
Description
The spacing of the Chat quick reply.
$kendo-checkbox-indicator-typeStringimageimage$kendo-chat-quick-reply-line-heightNumber$kendo-chat-bubble-line-height1.25
Description
The type of the CheckBox indicator.
+
Description
The line height of the Chat quick reply.
$kendo-checkbox-glyph-font-familyList"WebComponentsIcons", monospace"WebComponentsIcons", monospace$kendo-chat-bgColor$kendo-app-bg#fafafa
Description
The font family of the CheckBox indicator glyph.
+
Description
The background color of the Chat.
$kendo-checkbox-checked-glyphString"\e118""\e118"$kendo-chat-textColor$kendo-app-text#212529
Description
The glyph of the CheckBox indicator.
+
Description
The text color of the Chat.
$kendo-checkbox-indeterminate-glyphString"\e121""\e121"$kendo-chat-borderColor$kendo-app-border#dee2e6
Description
The glyph of the indeterminate CheckBox indicator.
+
Description
The border color of the Chat.
$kendo-checkbox-checked-image$kendo-chat-bubble-bgColor$kendo-button-bg#e4e7eb
Description
The background color of the Chat bubble.
+
$kendo-chat-bubble-textColor$kendo-button-text#212529
Description
The text color of the Chat bubble.
+
$kendo-chat-bubble-borderColor$kendo-chat-bubble-bg#e4e7eb
Description
The border color of the Chat bubble.
+
$kendo-chat-bubble-shadow Stringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")nonenone
Description
The image for a checked CheckBox indicator.
+
Description
The box shadow of the Chat bubble.
$kendo-checkbox-indeterminate-image$kendo-chat-bubble-hover-shadow Stringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")nonenone
Description
The image for a indeterminate CheckBox indicator.
+
Description
The shadow of the hovered Chat bubble.
$kendo-checkbox-label-margin-xNumberk-map-get( $kendo-spacing, 1 )0.25rem$kendo-chat-bubble-selected-shadowStringnonenone
Description
The horizontal margin of the CheckBox inside a label.
+
Description
The shadow of the selected Chat bubble.
$kendo-checkbox-list-spacingNumberk-map-get( $kendo-spacing, 4 )1rem$kendo-chat-alt-bubble-bgColor$kendo-color-primary#0d6efd
Description
The spacing between the items in a horizontal CheckBox list.
+
Description
The background color of the Chat alt bubble.
$kendo-checkbox-list-item-padding-xNumber0px0px$kendo-chat-alt-bubble-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-chat-alt-bubble-bg ))white
Description
The horizontal padding of the CheckBox list items.
+
Description
The text color of the Chat alt bubble.
$kendo-checkbox-list-item-padding-yNumber$kendo-list-md-item-padding-y0.25rem$kendo-chat-alt-bubble-borderColor$kendo-chat-alt-bubble-bg#0d6efd
Description
The vertical padding of the CheckBox list items
+
Description
The border color of the Chat alt bubble.
$kendo-checkbox-ripple-bg$kendo-chat-alt-bubble-shadowStringnonenone
Description
The shadow of the Chat alt bubble.
+
$kendo-chat-alt-bubble-hover-shadowStringnonenone
Description
The shadow of the hovered Chat alt bubble.
+
$kendo-chat-alt-bubble-selected-shadowStringnonenone
Description
The shadow of the selected Chat alt bubble.
+
$kendo-chat-quick-reply-bg Color$kendo-checkbox-checked-bgtransparenttransparent
Description
The background color of Chat quick reply.
+
$kendo-chat-quick-reply-textColor$kendo-color-primary #0d6efd
Description
The background color of the CheckBox' ripple.
+
Description
The text color of Chat quick reply.
$kendo-checkbox-ripple-opacityNumber.250.25$kendo-chat-quick-reply-borderColor$kendo-color-primary#0d6efd
Description
The opacity of the CheckBox' ripple.
+
Description
The border color of Chat quick reply.
+
$kendo-chat-quick-reply-hover-bgColor$kendo-color-primary#0d6efd
Description
The background color of the hovered Chat quick reply.
+
$kendo-chat-quick-reply-hover-textColor$kendo-color-primary-contrastwhite
Description
The text color of the Chat quick reply.
+
$kendo-chat-quick-reply-hover-borderColor$kendo-color-primary#0d6efd
Description
The border color of the hovered Chat quick reply.
-### Chip +### Checkbox @@ -3565,898 +3665,938 @@ The following table lists the available variables for customizing the Bootstrap - + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - + + + + + + + + + + - - + + - - + - - + + - - + - + - - + - - + - - - - - + + + + - - + - - - - - + + + + - - + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
$kendo-chip-border-width$kendo-checkbox-border-width Number 1px 1px
Description
The width of the border around the Chip.
+
Description
The border width of the CheckBox.
$kendo-chip-spacing$kendo-checkbox-sm-size Numberk-map-get( $kendo-spacing, 1 )0.25remk-map-get( $kendo-spacing, 3 )0.75rem
Description
The spacing between the text and the icons of the Chip.
+
Description
The size of a small CheckBox.
$kendo-chip-padding-x$kendo-checkbox-md-size Numberk-map-get( $kendo-spacing, 1 )0.25remk-map-get( $kendo-spacing, 4 )1rem
Description
The horizontal padding of the Chip.
+
Description
The size of a medium CheckBox.
$kendo-chip-sm-padding-x$kendo-checkbox-lg-size Numberk-map-get( $kendo-spacing, 1 )0.25remk-map-get( $kendo-spacing, 5 )1.25rem
Description
The horizontal padding of the small Chip.
+
Description
The size of a large CheckBox.
$kendo-chip-md-padding-x$kendo-checkbox-sm-glyph-size Numberk-map-get( $kendo-spacing, 1 )0.25remk-map-get( $kendo-spacing, 2.5 )0.625rem
Description
The horizontal padding of the medium Chip.
+
Description
The glyph size of a small CheckBox.
$kendo-chip-lg-padding-x$kendo-checkbox-md-glyph-size Numberk-map-get( $kendo-spacing, 1 )0.25remk-map-get( $kendo-spacing, 3.5 )0.875rem
Description
The horizontal padding of the large Chip.
+
Description
The glyph size of a medium CheckBox.
$kendo-chip-padding-y$kendo-checkbox-lg-glyph-size Numberk-map-get( $kendo-spacing, 1 )0.25remk-map-get( $kendo-spacing, 4.5 )1.125rem
Description
The vertical padding of the Chip.
+
Description
The glyph size of a large CheckBox.
$kendo-chip-sm-padding-y$kendo-checkbox-sm-ripple-size Numberk-map-get( $kendo-spacing, 0.5 )0.125rem300%300%
Description
The vertical padding of the small Chip.
+
Description
The ripple size of a small CheckBox.
$kendo-chip-md-padding-y$kendo-checkbox-md-ripple-size Numberk-map-get( $kendo-spacing, 1 )0.25rem300%300%
Description
The vertical padding of the medium Chip.
+
Description
The ripple size of a medium CheckBox.
$kendo-chip-lg-padding-y$kendo-checkbox-lg-ripple-size Numberk-map-get( $kendo-spacing, 1.5 )0.375rem300%300%
Description
The vertical padding of the large Chip.
+
Description
The ripple size of a large CheckBox.
$kendo-chip-font-sizeNumber$kendo-font-size-md1rem$kendo-checkbox-bgColor$kendo-component-bg#ffffff
Description
The font size of the Chip.
+
Description
The background color of CheckBox.
$kendo-chip-sm-font-sizeNumber$kendo-font-size-sm0.875rem$kendo-checkbox-textNullnullnull
Description
The font size of the small Chip.
+
Description
The text color of CheckBox.
$kendo-chip-md-font-sizeNumber$kendo-font-size-md1rem$kendo-checkbox-borderColorif($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-checkbox-bg ), $gray-400, $gray-600 ))#ced4da
Description
The font size of the medium Chip.
+
Description
The border color of CheckBox.
$kendo-chip-line-heightNumber1.251.25$kendo-checkbox-hover-bgNullnullnull
Description
The Chip's line height that is related to the $kendo-font-size.
+
Description
The background color of the hovered CheckBox.
$kendo-chip-sm-line-heightNumber$kendo-chip-line-height1.25$kendo-checkbox-hover-textNullnullnull
Description
The small Chip's line height that is related to the $kendo-font-size.
+
Description
The text color of the hovered CheckBox.
$kendo-chip-md-line-heightNumber$kendo-chip-line-height1.25$kendo-checkbox-hover-borderNullnullnull
Description
The medium Chip's line height that is related to the $kendo-font-size.
+
Description
The border color of the hovered CheckBox.
$kendo-chip-lg-line-heightNumber$kendo-chip-line-height1.25$kendo-checkbox-checked-bgColor$kendo-color-primary#0d6efd
Description
The large Chip's line height that is related to the $kendo-font-size.
+
Description
The background color of the checked CheckBox.
$kendo-chip-calc-sizeCalculationcalc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} )calc(1.25em + 0.5rem + 2px)$kendo-checkbox-checked-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-checked-bg ))white
Description
The calculated height of the Chip.
+
Description
The color of the checked CheckBox.
$kendo-chip-sizesMap( - sm: ( - padding-x: $kendo-chip-sm-padding-x, - padding-y: $kendo-chip-sm-padding-y, - font-size: $kendo-chip-sm-font-size, - line-height: $kendo-chip-sm-line-height - ), - md: ( - padding-x: $kendo-chip-md-padding-x, - padding-y: $kendo-chip-md-padding-y, - font-size: $kendo-chip-md-font-size, - line-height: $kendo-chip-md-line-height - ), - lg: ( - padding-x: $kendo-chip-lg-padding-x, - padding-y: $kendo-chip-lg-padding-y, - font-size: $kendo-chip-lg-font-size, - line-height: $kendo-chip-lg-line-height - ) -)(sm: (padding-x: 0.25rem, padding-y: 0.125rem, font-size: 0.875rem, line-height: 1.25), md: (padding-x: 0.25rem, padding-y: 0.25rem, font-size: 1rem, line-height: 1.25), lg: (padding-x: 0.25rem, padding-y: 0.375rem, font-size: 1rem, line-height: 1.25))$kendo-checkbox-checked-borderColor$kendo-checkbox-checked-bg#0d6efd
Description
The map with the sizes of the Chip.
+
Description
The border color of the checked CheckBox.
$kendo-chip-base-bg$kendo-checkbox-indeterminate-bg Color$kendo-button-bg#e4e7eb$kendo-checkbox-checked-bg#0d6efd
Description
The base background color of the Chip.
+
Description
The background color of the indeterminate CheckBox.
$kendo-chip-theme-colorsMap( - "base": $kendo-chip-base-bg, - "error": k-map-get( $kendo-theme-colors, "error" ), - "info": k-map-get( $kendo-theme-colors, "info" ), - "warning": k-map-get( $kendo-theme-colors, "warning" ), - "success": k-map-get( $kendo-theme-colors, "success" ) -)("base": #e4e7eb, "error": #dc3545, "info": #0dcaf0, "warning": #ffc107, "success": #198754)$kendo-checkbox-indeterminate-textColor$kendo-checkbox-checked-textwhite
Description
The theme colors map for the Chip.
+
Description
The text color of the indeterminate CheckBox.
$kendo-chip-solid-bg$kendo-checkbox-indeterminate-border Color$kendo-chip-base-bg#e4e7eb$kendo-checkbox-checked-border#0d6efd
Description
The base background color of the solid Chip.
+
Description
The border color of the indeterminate CheckBox.
$kendo-chip-solid-text$kendo-checkbox-focus-border Color$kendo-button-text#212529if($kendo-enable-color-system, k-color( primary-emphasis ), k-try-tint( $kendo-color-primary, 50% ))#86b7fe
Description
he base text color of the solid Chip.
+
Description
The border color of the focused CheckBox.
$kendo-chip-solid-border$kendo-checkbox-focus-shadowList0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))0 0 0 0.25rem rgba(13, 110, 253, 0.25)
Description
The box shadow of the focused CheckBox.
+
$kendo-checkbox-focus-checked-border Color$kendo-button-border#e4e7eb$kendo-checkbox-checked-border#0d6efd
Description
The base border color of the solid Chip.
+
Description
The border color of the focused and checked CheckBox.
$kendo-chip-solid-shadow$kendo-checkbox-focus-checked-shadow List0 0 0 2px rgba( $kendo-chip-base-bg, .16 )0 0 0 2px rgba(228, 231, 235, 0.16)$kendo-checkbox-focus-shadow0 0 0 0.25rem rgba(13, 110, 253, 0.25)
Description
The base shadow of the solid Chip.
+
Description
The box shadow of the focused and checked CheckBox.
$kendo-chip-solid-gradient$kendo-checkbox-disabled-bg Null$kendo-button-gradientnull null
Description
The base gradient of the solid Chip.
+
Description
The background color of the disabled CheckBox.
$kendo-chip-solid-focus-bg$kendo-checkbox-disabled-text Null null null
Description
The base background color of the focused solid Chip.
+
Description
The text color of the disabled CheckBox.
$kendo-chip-solid-focus-text$kendo-checkbox-disabled-border Null null null
Description
The base text color of the focused solid Chip.
+
Description
The border color of the disabled CheckBox.
$kendo-chip-solid-hover-bgColor$kendo-button-hover-bg#ced3db$kendo-checkbox-disabled-checked-bgNullnullnull
Description
The base background color of the hovered solid Chip.
+
Description
The background color of the disabled and checked CheckBox.
$kendo-chip-solid-hover-text$kendo-checkbox-disabled-checked-text Null null null
Description
The base text color of the hovered solid Chip.
+
Description
The text color of the disabled and checked CheckBox.
$kendo-chip-solid-selected-bgColor$kendo-button-active-bg#c7cdd5$kendo-checkbox-disabled-checked-borderNullnullnull
Description
The base background color of the selected solid Chip.
+
Description
The border color of the disabled and checked CheckBox.
$kendo-chip-solid-selected-text$kendo-checkbox-invalid-bg Null null null
Description
The base text color of the selected solid Chip.
+
Description
The background color of the invalid CheckBox.
$kendo-chip-outline-bg$kendo-checkbox-invalid-text Color$kendo-component-bg#ffffff$kendo-invalid-text#dc3545
Description
The base background color of the outline Chip.
+
Description
The text color of the invalid CheckBox.
$kendo-chip-outline-text$kendo-checkbox-invalid-border Color$kendo-chip-solid-text#212529$kendo-invalid-border#dc3545
Description
The base text color of the outline Chip.
+
Description
The border color of the invalid CheckBox.
$kendo-chip-outline-borderColor$kendo-chip-outline-text#212529$kendo-checkbox-indicator-typeStringimageimage
Description
The base border color of the outline Chip.
+
Description
The type of the CheckBox indicator.
$kendo-chip-outline-shadow$kendo-checkbox-glyph-font-family List0 0 0 2px rgba( $kendo-chip-base-bg, .16 )0 0 0 2px rgba(228, 231, 235, 0.16)"WebComponentsIcons", monospace"WebComponentsIcons", monospace
Description
The base shadow of the outline Chip.
+
Description
The font family of the CheckBox indicator glyph.
$kendo-chip-outline-hover-bgColor$kendo-chip-outline-text#212529$kendo-checkbox-checked-glyphString"\e118""\e118"
Description
The base background color of the hovered outline Chip.
+
Description
The glyph of the CheckBox indicator.
$kendo-chip-outline-hover-textColorif($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-chip-outline-hover-bg ))white$kendo-checkbox-indeterminate-glyphString"\e121""\e121"
Description
The base text color of the hovered outline Chip.
+
Description
The glyph of the indeterminate CheckBox indicator.
$kendo-chip-outline-selected-bgColor$kendo-chip-outline-hover-bg#212529$kendo-checkbox-checked-imageStringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")
Description
The base background color of the selected outline Chip.
+
Description
The image for a checked CheckBox indicator.
$kendo-chip-outline-selected-textColor$kendo-chip-outline-hover-textwhite$kendo-checkbox-indeterminate-imageStringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")
Description
The base text color of the selected outline Chip.
+
Description
The image for a indeterminate CheckBox indicator.
$kendo-chip-list-sizesMap( - sm: k-map-get( $kendo-spacing, 1 ), - md: k-map-get( $kendo-spacing, 1 ), - lg: k-map-get( $kendo-spacing, 1 ) -)(sm: 0.25rem, md: 0.25rem, lg: 0.25rem)$kendo-checkbox-label-margin-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The sizes of the Chip list.
+
Description
The horizontal margin of the CheckBox inside a label.
- -### Cologradient - - - - - - - - - - - - - - - - - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - + +
NameTypeDefault valueComputed value
$kendo-color-gradient-spacer
$kendo-checkbox-list-spacing Number k-map-get( $kendo-spacing, 4 ) 1rem
Description
The spacer of the ColorGradient.
+
Description
The spacing between the items in a horizontal CheckBox list.
$kendo-color-gradient-width$kendo-checkbox-list-item-padding-x Number328px328px0px0px
Description
The width of the ColorGradient.
+
Description
The horizontal padding of the CheckBox list items.
$kendo-color-gradient-border-width$kendo-checkbox-list-item-padding-y Number1px1px$kendo-list-md-item-padding-y0.25rem
+
Description
The vertical padding of the CheckBox list items
$kendo-color-gradient-border-radiusNumber$kendo-border-radius-md0.375rem$kendo-checkbox-ripple-bgColor$kendo-checkbox-checked-bg#0d6efd
Description
The border radius of the ColorGradient.
+
Description
The background color of the CheckBox' ripple.
$kendo-color-gradient-padding-y$kendo-checkbox-ripple-opacity Number$kendo-color-gradient-spacer1rem.250.25
Description
The vertical padding of the ColorGradient.
+
Description
The opacity of the CheckBox' ripple.
$kendo-color-gradient-padding-x
+ +### Chip + + + + + + + + + + + + + + + + + + - - + + - - + - - - - - - - - - - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-chip-border-width Number$kendo-color-gradient-padding-y1rem1px1px
Description
The horizontal padding of the ColorGradient.
+
Description
The width of the border around the Chip.
$kendo-color-gradient-gap$kendo-chip-spacing Number$kendo-color-gradient-spacer1rem
Description
The spacing between the sections of the ColorGradient.
-
$kendo-color-gradient-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"k-map-get( $kendo-spacing, 1 )0.25rem
Description
The font family of the ColorGradient.
+
Description
The spacing between the text and the icons of the Chip.
$kendo-color-gradient-font-size$kendo-chip-padding-x Number$kendo-font-size-md1remk-map-get( $kendo-spacing, 1 )0.25rem
Description
The font size of the ColorGradient.
+
Description
The horizontal padding of the Chip.
$kendo-color-gradient-line-height$kendo-chip-sm-padding-x Number$kendo-line-height-md1.5k-map-get( $kendo-spacing, 1 )0.25rem
Description
The line height of the ColorGradient.
+
Description
The horizontal padding of the small Chip.
$kendo-color-gradient-textColor$kendo-component-text#212529$kendo-chip-md-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The text color of the ColorGradient.
+
Description
The horizontal padding of the medium Chip.
$kendo-color-gradient-bgColor$kendo-component-bg#ffffff$kendo-chip-lg-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The background color of the ColorGradient.
+
Description
The horizontal padding of the large Chip.
$kendo-color-gradient-borderColor$kendo-component-border#dee2e6$kendo-chip-padding-yNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The border color of the ColorGradient.
+
Description
The vertical padding of the Chip.
$kendo-color-gradient-focus-borderColor$kendo-hover-border#d6d9dc$kendo-chip-sm-padding-yNumberk-map-get( $kendo-spacing, 0.5 )0.125rem
Description
The border color of the focused ColorGradient.
+
Description
The vertical padding of the small Chip.
$kendo-color-gradient-focus-shadowNullnullnull$kendo-chip-md-padding-yNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The box shadow of the focused ColorGradient.
+
Description
The vertical padding of the medium Chip.
$kendo-color-gradient-canvas-border-radius$kendo-chip-lg-padding-y Number$kendo-border-radius-mdk-map-get( $kendo-spacing, 1.5 ) 0.375rem
Description
The border radius of the ColorGradient canvas.
+
Description
The vertical padding of the large Chip.
$kendo-color-gradient-canvas-gap$kendo-chip-font-size Numberk-map-get( $kendo-spacing, 3 )0.75rem$kendo-font-size-md1rem
Description
The spacing between the items of the ColorGradient canvas.
+
Description
The font size of the Chip.
$kendo-color-gradient-canvas-rectangle-height$kendo-chip-sm-font-size Number180px180px$kendo-font-size-sm0.875rem
Description
The height the ColorGradient canvas hsv rectangle.
+
Description
The font size of the small Chip.
$kendo-color-gradient-slider-track-size$kendo-chip-md-font-size Number10px10px$kendo-font-size-md1rem
Description
The width of the ColorGradient slider.
+
Description
The font size of the medium Chip.
$kendo-color-gradient-slider-border-radius$kendo-chip-line-height Number10px10px1.251.25
Description
The border radius of the ColorGradient slider.
+
Description
The Chip's line height that is related to the $kendo-font-size.
$kendo-color-gradient-slider-draghandle-border-width$kendo-chip-sm-line-height Number3px3px$kendo-chip-line-height1.25
Description
The width of the border around the ColorGradient slider drag handle.
+
Description
The small Chip's line height that is related to the $kendo-font-size.
$kendo-color-gradient-slider-vertical-size$kendo-chip-md-line-height Number180px180px$kendo-chip-line-height1.25
Description
The height of the ColorGradient vertical slider.
+
Description
The medium Chip's line height that is related to the $kendo-font-size.
$kendo-color-gradient-slider-horizontal-size$kendo-chip-lg-line-height Number100%100%$kendo-chip-line-height1.25
Description
The width of the ColorGradient horizontal slider.
+
Description
The large Chip's line height that is related to the $kendo-font-size.
$kendo-color-gradient-draghandle-widthNumber14px14px$kendo-chip-calc-sizeCalculationcalc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} )calc(1.25em + 0.5rem + 2px)
Description
The width of the ColorGradient canvas drag handle.
+
Description
The calculated height of the Chip.
$kendo-color-gradient-draghandle-heightNumber14px14px$kendo-chip-sizesMap( + sm: ( + padding-x: $kendo-chip-sm-padding-x, + padding-y: $kendo-chip-sm-padding-y, + font-size: $kendo-chip-sm-font-size, + line-height: $kendo-chip-sm-line-height + ), + md: ( + padding-x: $kendo-chip-md-padding-x, + padding-y: $kendo-chip-md-padding-y, + font-size: $kendo-chip-md-font-size, + line-height: $kendo-chip-md-line-height + ), + lg: ( + padding-x: $kendo-chip-lg-padding-x, + padding-y: $kendo-chip-lg-padding-y, + font-size: $kendo-chip-lg-font-size, + line-height: $kendo-chip-lg-line-height + ) +)(sm: (padding-x: 0.25rem, padding-y: 0.125rem, font-size: 0.875rem, line-height: 1.25), md: (padding-x: 0.25rem, padding-y: 0.25rem, font-size: 1rem, line-height: 1.25), lg: (padding-x: 0.25rem, padding-y: 0.375rem, font-size: 1rem, line-height: 1.25))
Description
The height of the ColorGradient canvas drag handle.
+
Description
The map with the sizes of the Chip.
$kendo-color-gradient-draghandle-border-widthNumber1px1px$kendo-chip-base-bgColor$kendo-button-bg#e4e7eb
Description
The width of the border around the ColorGradient canvas drag handle.
+
Description
The base background color of the Chip.
$kendo-color-gradient-draghandle-outline-widthNumber1px1px$kendo-chip-theme-colorsMap( + "base": $kendo-chip-base-bg, + "error": k-map-get( $kendo-theme-colors, "error" ), + "info": k-map-get( $kendo-theme-colors, "info" ), + "warning": k-map-get( $kendo-theme-colors, "warning" ), + "success": k-map-get( $kendo-theme-colors, "success" ) +)("base": #e4e7eb, "error": #dc3545, "info": #0dcaf0, "warning": #ffc107, "success": #198754)
Description
The width of the outline around the ColorGradient canvas drag handle.
+
Description
The theme colors map for the Chip.
$kendo-color-gradient-draghandle-border-radiusNumber50%50%$kendo-chip-solid-bgColor$kendo-chip-base-bg#e4e7eb
Description
The border radius of the ColorGradient canvas drag handle.
+
Description
The base background color of the solid Chip.
$kendo-color-gradient-draghandle-text$kendo-chip-solid-textColor$kendo-button-text#212529
Description
he base text color of the solid Chip.
+
$kendo-chip-solid-borderColor$kendo-button-border#e4e7eb
Description
The base border color of the solid Chip.
+
$kendo-chip-solid-shadowList0 0 0 2px rgba( $kendo-chip-base-bg, .16 )0 0 0 2px rgba(228, 231, 235, 0.16)
Description
The base shadow of the solid Chip.
+
$kendo-chip-solid-gradientNull$kendo-button-gradientnull
Description
The base gradient of the solid Chip.
+
$kendo-chip-solid-focus-bg Null null null
Description
The text color of the ColorGradient canvas drag handle.
+
Description
The base background color of the focused solid Chip.
$kendo-color-gradient-draghandle-bgColortransparenttransparent$kendo-chip-solid-focus-textNullnullnull
Description
The background color of the ColorGradient canvas drag handle.
+
Description
The base text color of the focused solid Chip.
$kendo-color-gradient-draghandle-border$kendo-chip-solid-hover-bg Colorrgba( $kendo-color-white, .8)rgba(255, 255, 255, 0.8)$kendo-button-hover-bg#ced3db
Description
The color of the border around the ColorGradient canvas drag handle.
+
Description
The base background color of the hovered solid Chip.
$kendo-color-gradient-draghandle-shadowColorrgba( $kendo-color-black, .5)rgba(0, 0, 0, 0.5)$kendo-chip-solid-hover-textNullnullnull
Description
The color of the outline around the ColorGradient canvas drag handle.
+
Description
The base text color of the hovered solid Chip.
$kendo-color-gradient-draghandle-focus-shadow$kendo-chip-solid-selected-bg Color$kendo-color-black#000000$kendo-button-active-bg#c7cdd5
Description
The focus color of the outline around the ColorGradient canvas drag handle.
+
Description
The base background color of the selected solid Chip.
$kendo-color-gradient-draghandle-hover-shadowColor$kendo-color-black#000000$kendo-chip-solid-selected-textNullnullnull
Description
The outline color of the outline around the ColorGradient canvas drag handle.
+
Description
The base text color of the selected solid Chip.
$kendo-color-gradient-draghandle-shadow$kendo-chip-outline-bg Colork-elevation(2)rgba(0, 0, 0, 0.5)$kendo-component-bg#ffffff
Description
The box shadow of the ColorGradient canvas drag handle.
+
Description
The base background color of the outline Chip.
$kendo-color-gradient-canvas-draghandle-margin-yNumber- k-math-div( $kendo-color-gradient-draghandle-height, 2 )-7px$kendo-chip-outline-textColor$kendo-chip-solid-text#212529
Description
The vertical margin of the ColorGradient canvas drag handle.
+
Description
The base text color of the outline Chip.
$kendo-color-gradient-canvas-draghandle-margin-xNumber- k-math-div( $kendo-color-gradient-draghandle-width, 2 )-7px$kendo-chip-outline-borderColor$kendo-chip-outline-text#212529
Description
The horizontal margin of the ColorGradient canvas drag handle.
+
Description
The base border color of the outline Chip.
$kendo-color-gradient-input-widthNumber56px56px$kendo-chip-outline-shadowList0 0 0 2px rgba( $kendo-chip-base-bg, .16 )0 0 0 2px rgba(228, 231, 235, 0.16)
Description
The width of the ColorGradient input.
+
Description
The base shadow of the outline Chip.
$kendo-color-gradient-input-gapNumberk-math-div( $kendo-color-gradient-spacer, 2 )0.5rem$kendo-chip-outline-hover-bgColor$kendo-chip-outline-text#212529
Description
The spacing between the ColorGradient inputs.
+
Description
The base background color of the hovered outline Chip.
$kendo-color-gradient-input-label-gapNumberk-map-get( $kendo-spacing, 1 )0.25rem$kendo-chip-outline-hover-textColorif($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-chip-outline-hover-bg ))white
Description
The spacing between the ColorGradient inputs and their labels.
+
Description
The base text color of the hovered outline Chip.
$kendo-color-gradient-input-label-text$kendo-chip-outline-selected-bg Color$kendo-subtle-text#6c757d$kendo-chip-outline-hover-bg#212529
Description
The text color of the ColorGradient input labels.
+
Description
The base background color of the selected outline Chip.
$kendo-color-gradient-contrast-ratio-font-weightNumber$kendo-font-weight-bold700$kendo-chip-outline-selected-textColor$kendo-chip-outline-hover-textwhite
Description
The font weight of the ColorGradient contrast ratio text.
+
Description
The base text color of the selected outline Chip.
$kendo-color-gradient-contrast-spacerNumberk-math-div( $kendo-color-gradient-spacer, 2 )0.5rem$kendo-chip-list-sizesMap( + sm: k-map-get( $kendo-spacing, 1 ), + md: k-map-get( $kendo-spacing, 1 ), + lg: k-map-get( $kendo-spacing, 1 ) +)(sm: 0.25rem, md: 0.25rem, lg: 0.25rem)
Description
The spacing between the items in the ColorGradient contrast tool.
+
Description
The sizes of the Chip list.
-### Color System +### Cologradient @@ -4474,509 +4614,439 @@ The following table lists the available variables for customizing the Bootstrap - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - -
$kendo-colorsMap$_default-colors(app-surface: #ffffff, on-app-surface: #212529, subtle: #606970, surface: #f8f9fa, surface-alt: #ffffff, border: #dee2e6, border-alt: #ced4da, base-subtle: #e9ecef, base-subtle-hover: #dee2e6, base-subtle-active: #ced4da, base: #dee2e6, base-hover: #ced4da, base-active: #bdc4cb, base-emphasis: #adb5bd, base-on-subtle: #212529, on-base: #212529, base-on-surface: #212529, primary-subtle: #cfe2ff, primary-subtle-hover: #b6d4fe, primary-subtle-active: #9ec5fe, primary: #0d6efd, primary-hover: #0b5ed7, primary-active: #0a58ca, primary-emphasis: #6ea8fe, primary-on-subtle: #052c65, on-primary: #ffffff, primary-on-surface: #0d6efd, secondary-subtle: #dee2e6, secondary-subtle-hover: #ced4da, secondary-subtle-active: #bdc4cb, secondary: #6c757d, secondary-hover: #606970, secondary-active: #555c64, secondary-emphasis: #8d959d, secondary-on-subtle: #212529, on-secondary: #ffffff, secondary-on-surface: #212529, tertiary-subtle: #e2d9f3, tertiary-subtle-hover: #d3c5ec, tertiary-subtle-active: #c5b3e6, tertiary: #6f42c1, tertiary-hover: #59359a, tertiary-active: #4e2f89, tertiary-emphasis: #a98eda, tertiary-on-subtle: #21143b, on-tertiary: #ffffff, tertiary-on-surface: #6f42c1, info-subtle: #cff4fc, info-subtle-hover: #aaecfa, info-subtle-active: #86e5f8, info: #0dcaf0, info-hover: #0aa2c0, info-active: #098da8, info-emphasis: #3dd5f3, info-on-subtle: #04414d, on-info: #ffffff, info-on-surface: #0dcaf0, success-subtle: #d1e7dd, success-subtle-hover: #badbcc, success-subtle-active: #8cc3aa, success: #146c43, success-hover: #125f3b, success-active: #0f5132, success-emphasis: #479f76, success-on-subtle: #08291a, on-success: #ffffff, success-on-surface: #0f5132, warning-subtle: #ffecb5, warning-subtle-hover: #ffe69c, warning-subtle-active: #ffe083, warning: #ffc107, warning-hover: #cc9a06, warning-active: #b38705, warning-emphasis: #ffcd39, warning-on-subtle: #523e02, on-warning: #000000, warning-on-surface: #ffc107, error-subtle: #f8d7da, error-subtle-hover: #f5c2c7, error-subtle-active: #f1aeb5, error: #dc3545, error-hover: #b02a37, error-active: #9a2530, error-emphasis: #e35d6a, error-on-subtle: #421015, on-error: #ffffff, error-on-surface: #dc3545, light-subtle: #f8f9fa, light-subtle-hover: #e9ecef, light-subtle-active: #dee2e6, light: #f8f9fa, light-hover: #e9ecef, light-active: #dee2e6, light-emphasis: #bdc4cb, light-on-subtle: #343a40, on-light: #000000, light-on-surface: #ced4da, dark-subtle: #6c757d, dark-subtle-hover: #606970, dark-subtle-active: #555c64, dark: #212529, dark-hover: #2c3035, dark-active: #343a40, dark-emphasis: #343a40, dark-on-subtle: #ffffff, on-dark: #ffffff, dark-on-surface: #121417, inverse-subtle: #6c757d, inverse-subtle-hover: #606970, inverse-subtle-active: #555c64, inverse: #212529, inverse-hover: #2c3035, inverse-active: #343a40, inverse-emphasis: #343a40, inverse-on-subtle: #ffffff, on-inverse: #ffffff, inverse-on-surface: #121417, series-a: #0d6efd, series-a-bold: #0a53be, series-a-bolder: #052c65, series-a-subtle: #86b6fe, series-a-subtler: #4992fd, series-b: #6f42c1, series-b-bold: #4e2f89, series-b-bolder: #36215f, series-b-subtle: #b9a3e1, series-b-subtler: #8c68cd, series-c: #20c997, series-c-bold: #178c69, series-c-bolder: #10654c, series-c-subtle: #a6e9d5, series-c-subtler: #4dd4ac, series-d: #198754, series-d-bold: #125f3b, series-d-bolder: #0d442a, series-d-subtle: #8cc3aa, series-d-subtler: #479f76, series-e: #dc3545, series-e-bold: #9a2530, series-e-bolder: #6e1b23, series-e-subtle: #f1aeb5, series-e-subtler: #e35d6a, series-f: #ffc107, series-f-bold: #b38705, series-f-bolder: #806104, series-f-subtle: #ffe083, series-f-subtler: #ffcd39)$kendo-color-gradient-spacerNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The global default Colors map.
+
Description
The spacer of the ColorGradient.
$kendo-color-primaryColor$primary#0d6efd$kendo-color-gradient-widthNumber328px328px
Description
The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
+
Description
The width of the ColorGradient.
$kendo-color-primary-contrastColork-contrast-color( $kendo-color-primary )white$kendo-color-gradient-border-widthNumber1px1px
Description
The color used along with the primary color denoted by $kendo-color-primary.
Used to provide contrast between the background and foreground colors.
+
$kendo-color-secondaryColor$secondary#6c757d$kendo-color-gradient-border-radiusNumber$kendo-border-radius-md0.375rem
Description
The secondary color of the theme.
+
Description
The border radius of the ColorGradient.
$kendo-color-secondary-contrastColork-contrast-color( $kendo-color-secondary )white$kendo-color-gradient-padding-yNumber$kendo-color-gradient-spacer1rem
Description
The color used along with the secondary color denoted by $kendo-color-secondary.
Used to provide contrast between the background and foreground colors.
+
Description
The vertical padding of the ColorGradient.
$kendo-color-tertiaryColor$purple#6f42c1$kendo-color-gradient-padding-xNumber$kendo-color-gradient-padding-y1rem
Description
The tertiary color of the theme.
+
Description
The horizontal padding of the ColorGradient.
$kendo-color-tertiary-contrastColork-contrast-color( $kendo-color-tertiary )white$kendo-color-gradient-gapNumber$kendo-color-gradient-spacer1rem
Description
The color used along with the tertiary color denoted by $kendo-color-tertiary.
Used to provide contrast between the background and foreground colors.
+
Description
The spacing between the sections of the ColorGradient.
$kendo-color-infoColor$info#0dcaf0$kendo-color-gradient-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The color for informational messages and states.
+
Description
The font family of the ColorGradient.
$kendo-color-successColor$success#198754$kendo-color-gradient-font-sizeNumber$kendo-font-size-md1rem
Description
The color for success messages and states.
+
Description
The font size of the ColorGradient.
$kendo-color-warningColor$warning#ffc107$kendo-color-gradient-line-heightNumber$kendo-line-height-md1.5
Description
The color for warning messages and states.
+
Description
The line height of the ColorGradient.
$kendo-color-error$kendo-color-gradient-text Color$danger#dc3545$kendo-component-text#212529
Description
The color for error messages and states.
+
Description
The text color of the ColorGradient.
$kendo-color-dark$kendo-color-gradient-bg Color$dark#212529$kendo-component-bg#ffffff
Description
The dark color of the theme.
+
Description
The background color of the ColorGradient.
$kendo-color-light$kendo-color-gradient-border Color$light#f8f9fa$kendo-component-border#dee2e6
Description
The light color of the theme.
+
Description
The border color of the ColorGradient.
$kendo-color-inverse$kendo-color-gradient-focus-border Colorif( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )#212529$kendo-hover-border#d6d9dc
Description
Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
+
Description
The border color of the focused ColorGradient.
- -### Coloreditor - - - - - - - - - - - - - - - - - - - - - + + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - - - - - - - - - - - - - - - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - - - - - - -
NameTypeDefault valueComputed value
$kendo-color-editor-spacerNumberk-map-get( $kendo-spacing, 4 )1rem
$kendo-color-gradient-focus-shadowNullnullnull
Description
The spacer of the ColorEditor.
+
Description
The box shadow of the focused ColorGradient.
$kendo-color-editor-min-width$kendo-color-gradient-canvas-border-radius Number328px328px$kendo-border-radius-md0.375rem
Description
The minimum width of the ColorEditor.
+
Description
The border radius of the ColorGradient canvas.
$kendo-color-editor-border-width$kendo-color-gradient-canvas-gap Number1px1pxk-map-get( $kendo-spacing, 3 )0.75rem
Description
The width of the border around the ColorEditor.
+
Description
The spacing between the items of the ColorGradient canvas.
$kendo-color-editor-border-radius$kendo-color-gradient-canvas-rectangle-height Number$kendo-border-radius-md0.375rem180px180px
Description
The border radius of the ColorEditor.
+
Description
The height the ColorGradient canvas hsv rectangle.
$kendo-color-editor-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"$kendo-color-gradient-slider-track-sizeNumber10px10px
Description
The font family of the ColorEditor.
+
Description
The width of the ColorGradient slider.
$kendo-color-editor-font-size$kendo-color-gradient-slider-border-radius Number$kendo-font-size-md1rem10px10px
Description
The font size of the ColorEditor.
+
Description
The border radius of the ColorGradient slider.
$kendo-color-editor-line-height$kendo-color-gradient-slider-draghandle-border-width Number$kendo-line-height-md1.53px3px
Description
The line height of the ColorEditor.
+
Description
The width of the border around the ColorGradient slider drag handle.
$kendo-color-editor-textColor$kendo-component-text#212529$kendo-color-gradient-slider-vertical-sizeNumber180px180px
Description
The text color of the ColorEditor.
+
Description
The height of the ColorGradient vertical slider.
$kendo-color-editor-bgColor$kendo-component-bg#ffffff$kendo-color-gradient-slider-horizontal-sizeNumber100%100%
Description
The background color of the ColorEditor.
+
Description
The width of the ColorGradient horizontal slider.
$kendo-color-editor-borderColor$kendo-component-border#dee2e6$kendo-color-gradient-draghandle-widthNumber14px14px
Description
The border color of the ColorEditor.
+
Description
The width of the ColorGradient canvas drag handle.
$kendo-color-editor-focus-borderColor$kendo-hover-border#d6d9dc$kendo-color-gradient-draghandle-heightNumber14px14px
Description
The border color of the focused ColorEditor.
+
Description
The height of the ColorGradient canvas drag handle.
$kendo-color-editor-focus-shadowNullnullnull$kendo-color-gradient-draghandle-border-widthNumber1px1px
Description
The box shadow of the focused ColorEditor.
+
Description
The width of the border around the ColorGradient canvas drag handle.
$kendo-color-editor-header-padding-y$kendo-color-gradient-draghandle-outline-width Number$kendo-color-editor-spacer1rem
Description
The vertical padding of the ColorEditor header.
-
$kendo-color-editor-header-padding-xNumber$kendo-color-editor-header-padding-y1rem
Description
The horizontal padding of the ColorEditor header.
-
$kendo-color-editor-header-actions-gapNumberk-math-div( $kendo-color-editor-spacer, 2 )0.5rem1px1px
Description
The spacing between the ColorEditor header actions.
+
Description
The width of the outline around the ColorGradient canvas drag handle.
$kendo-color-editor-color-preview-width$kendo-color-gradient-draghandle-border-radius Number32px32px50%50%
Description
The width of the ColorEditor preview.
+
Description
The border radius of the ColorGradient canvas drag handle.
$kendo-color-editor-color-preview-heightNumber12px12px$kendo-color-gradient-draghandle-textNullnullnull
Description
The height of the ColorEditor preview.
+
Description
The text color of the ColorGradient canvas drag handle.
$kendo-color-editor-preview-gapNumberk-map-get( $kendo-spacing, 1 )0.25rem$kendo-color-gradient-draghandle-bgColortransparenttransparent
Description
The spacing between the colors in the ColorEditor preview.
+
Description
The background color of the ColorGradient canvas drag handle.
$kendo-color-editor-views-padding-yNumber$kendo-color-editor-spacer1rem$kendo-color-gradient-draghandle-borderColorrgba( $kendo-color-white, .8)rgba(255, 255, 255, 0.8)
Description
The vertical padding of the ColorEditor views container.
+
Description
The color of the border around the ColorGradient canvas drag handle.
$kendo-color-editor-views-padding-xNumber$kendo-color-editor-views-padding-y1rem$kendo-color-gradient-draghandle-shadowColorrgba( $kendo-color-black, .5)rgba(0, 0, 0, 0.5)
Description
The horizontal padding of the ColorEditor views container.
+
Description
The color of the outline around the ColorGradient canvas drag handle.
$kendo-color-editor-views-gapNumber$kendo-color-editor-spacer1rem$kendo-color-gradient-draghandle-focus-shadowColor$kendo-color-black#000000
Description
The spacing of the ColorEditor views container.
+
Description
The focus color of the outline around the ColorGradient canvas drag handle.
$kendo-color-editor-color-gradient-focus-outline-color$kendo-color-gradient-draghandle-hover-shadow Colorrgba(0, 0, 0, .3)rgba(0, 0, 0, 0.3)$kendo-color-black#000000
Description
The outline color of the focused ColorGradient.
+
Description
The outline color of the outline around the ColorGradient canvas drag handle.
$kendo-color-editor-color-gradient-focus-outlineNumber2px2px$kendo-color-gradient-draghandle-shadowColork-elevation(2)rgba(0, 0, 0, 0.5)
Description
The outline width of the focused ColorGradient.
+
Description
The box shadow of the ColorGradient canvas drag handle.
$kendo-color-editor-color-gradient-focus-outline-offset$kendo-color-gradient-canvas-draghandle-margin-y Number2px2px
Description
The outline offset of the focused ColorGradient.
-
- -### Colorpalette - - - - - - - - - - - - - - - - - - - - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-color-palette-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"- k-math-div( $kendo-color-gradient-draghandle-height, 2 )-7px
Description
The font family of the ColorPalette.
+
Description
The vertical margin of the ColorGradient canvas drag handle.
$kendo-color-palette-font-size$kendo-color-gradient-canvas-draghandle-margin-x Number$kendo-font-size-md1rem- k-math-div( $kendo-color-gradient-draghandle-width, 2 )-7px
Description
The font size of the ColorPalette.
+
Description
The horizontal margin of the ColorGradient canvas drag handle.
$kendo-color-palette-line-height$kendo-color-gradient-input-width Number0056px56px
Description
The line height of the ColorPalette.
+
Description
The width of the ColorGradient input.
$kendo-color-palette-tile-width$kendo-color-gradient-input-gap Numberk-map-get( $kendo-spacing, 6 )1.5remk-math-div( $kendo-color-gradient-spacer, 2 )0.5rem
Description
The width of the ColorPalette tile.
+
Description
The spacing between the ColorGradient inputs.
$kendo-color-palette-tile-height$kendo-color-gradient-input-label-gap Number$kendo-color-palette-tile-width1.5remk-map-get( $kendo-spacing, 1 )0.25rem
Description
The height of the ColorPalette tile.
+
Description
The spacing between the ColorGradient inputs and their labels.
$kendo-color-palette-tile-focus-shadowList0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 )0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.5)$kendo-color-gradient-input-label-textColor$kendo-subtle-text#6c757d
Description
The shadow of the ColorPalette focused tile.
+
Description
The text color of the ColorGradient input labels.
$kendo-color-palette-tile-hover-shadowList0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 )0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.8)$kendo-color-gradient-contrast-ratio-font-weightNumber$kendo-font-weight-bold700
Description
The shadow of the ColorPalette hovered tile.
+
Description
The font weight of the ColorGradient contrast ratio text.
$kendo-color-palette-tile-selected-shadowList0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 )0 1px 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px white$kendo-color-gradient-contrast-spacerNumberk-math-div( $kendo-color-gradient-spacer, 2 )0.5rem
Description
The shadow of the ColorPalette selected tile.
+
Description
The spacing between the items in the ColorGradient contrast tool.
-### Component +### Color System @@ -4994,143 +5064,149 @@ The following table lists the available variables for customizing the Bootstrap - - - - + + + + - - + - - + + - - + - - + + - - -
$kendo-component-bgColor$kendo-body-bg#ffffff$kendo-colorsMap$_default-colors(app-surface: #ffffff, on-app-surface: #212529, subtle: #606970, surface: #f8f9fa, surface-alt: #ffffff, border: #dee2e6, border-alt: #ced4da, base-subtle: #e9ecef, base-subtle-hover: #dee2e6, base-subtle-active: #ced4da, base: #dee2e6, base-hover: #ced4da, base-active: #bdc4cb, base-emphasis: #adb5bd, base-on-subtle: #212529, on-base: #212529, base-on-surface: #212529, primary-subtle: #cfe2ff, primary-subtle-hover: #b6d4fe, primary-subtle-active: #9ec5fe, primary: #0d6efd, primary-hover: #0b5ed7, primary-active: #0a58ca, primary-emphasis: #6ea8fe, primary-on-subtle: #052c65, on-primary: #ffffff, primary-on-surface: #0d6efd, secondary-subtle: #dee2e6, secondary-subtle-hover: #ced4da, secondary-subtle-active: #bdc4cb, secondary: #6c757d, secondary-hover: #606970, secondary-active: #555c64, secondary-emphasis: #8d959d, secondary-on-subtle: #212529, on-secondary: #ffffff, secondary-on-surface: #212529, tertiary-subtle: #e2d9f3, tertiary-subtle-hover: #d3c5ec, tertiary-subtle-active: #c5b3e6, tertiary: #6f42c1, tertiary-hover: #59359a, tertiary-active: #4e2f89, tertiary-emphasis: #a98eda, tertiary-on-subtle: #21143b, on-tertiary: #ffffff, tertiary-on-surface: #6f42c1, info-subtle: #cff4fc, info-subtle-hover: #aaecfa, info-subtle-active: #86e5f8, info: #0dcaf0, info-hover: #0aa2c0, info-active: #098da8, info-emphasis: #3dd5f3, info-on-subtle: #04414d, on-info: #ffffff, info-on-surface: #0dcaf0, success-subtle: #d1e7dd, success-subtle-hover: #badbcc, success-subtle-active: #8cc3aa, success: #146c43, success-hover: #125f3b, success-active: #0f5132, success-emphasis: #479f76, success-on-subtle: #08291a, on-success: #ffffff, success-on-surface: #0f5132, warning-subtle: #ffecb5, warning-subtle-hover: #ffe69c, warning-subtle-active: #ffe083, warning: #ffc107, warning-hover: #cc9a06, warning-active: #b38705, warning-emphasis: #ffcd39, warning-on-subtle: #523e02, on-warning: #000000, warning-on-surface: #ffc107, error-subtle: #f8d7da, error-subtle-hover: #f5c2c7, error-subtle-active: #f1aeb5, error: #dc3545, error-hover: #b02a37, error-active: #9a2530, error-emphasis: #e35d6a, error-on-subtle: #421015, on-error: #ffffff, error-on-surface: #dc3545, light-subtle: #f8f9fa, light-subtle-hover: #e9ecef, light-subtle-active: #dee2e6, light: #f8f9fa, light-hover: #e9ecef, light-active: #dee2e6, light-emphasis: #bdc4cb, light-on-subtle: #343a40, on-light: #000000, light-on-surface: #ced4da, dark-subtle: #6c757d, dark-subtle-hover: #606970, dark-subtle-active: #555c64, dark: #212529, dark-hover: #2c3035, dark-active: #343a40, dark-emphasis: #343a40, dark-on-subtle: #ffffff, on-dark: #ffffff, dark-on-surface: #121417, inverse-subtle: #6c757d, inverse-subtle-hover: #606970, inverse-subtle-active: #555c64, inverse: #212529, inverse-hover: #2c3035, inverse-active: #343a40, inverse-emphasis: #343a40, inverse-on-subtle: #ffffff, on-inverse: #ffffff, inverse-on-surface: #121417, series-a: #0d6efd, series-a-bold: #0a53be, series-a-bolder: #052c65, series-a-subtle: #86b6fe, series-a-subtler: #4992fd, series-b: #6f42c1, series-b-bold: #4e2f89, series-b-bolder: #36215f, series-b-subtle: #b9a3e1, series-b-subtler: #8c68cd, series-c: #20c997, series-c-bold: #178c69, series-c-bolder: #10654c, series-c-subtle: #a6e9d5, series-c-subtler: #4dd4ac, series-d: #198754, series-d-bold: #125f3b, series-d-bolder: #0d442a, series-d-subtle: #8cc3aa, series-d-subtler: #479f76, series-e: #dc3545, series-e-bold: #9a2530, series-e-bolder: #6e1b23, series-e-subtle: #f1aeb5, series-e-subtler: #e35d6a, series-f: #ffc107, series-f-bold: #b38705, series-f-bolder: #806104, series-f-subtle: #ffe083, series-f-subtler: #ffcd39)
Description
Background color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.
+
Description
The global default Colors map.
$kendo-component-text$kendo-color-primary Color$kendo-body-text#212529$primary#0d6efd
Description
Text color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.
+
Description
The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$kendo-component-border$kendo-color-primary-contrast Colorif( k-is-light( $kendo-component-bg ), $gray-300, $gray-700 )#dee2e6k-contrast-color( $kendo-color-primary )white
Description
Border color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.
+
Description
The color used along with the primary color denoted by $kendo-color-primary.
Used to provide contrast between the background and foreground colors.
- -### Dialog - - - - - - - - - - - - - - - - - - - - - - - + + + + + + - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-dialog-titlebar-bgNullnullnull
Description
The background color of the Dialog titlebar.
+ 		$kendo-color-secondaryColor$secondary#6c757d
Description
The secondary color of the theme.
$kendo-dialog-titlebar-textNullnullnull$kendo-color-secondary-contrastColork-contrast-color( $kendo-color-secondary )white
Description
The text color of the Dialog titlebar.
+
Description
The color used along with the secondary color denoted by $kendo-color-secondary.
Used to provide contrast between the background and foreground colors.
$kendo-dialog-titlebar-borderNullnullnull$kendo-color-tertiaryColor$purple#6f42c1
Description
The border color of the Dialog titlebar.
+
Description
The tertiary color of the theme.
$kendo-dialog-buttongroup-padding-xNumber$kendo-actions-padding-x0.5rem$kendo-color-tertiary-contrastColork-contrast-color( $kendo-color-tertiary )white
Description
The horizontal padding of the Dialog action buttons.
+
Description
The color used along with the tertiary color denoted by $kendo-color-tertiary.
Used to provide contrast between the background and foreground colors.
$kendo-dialog-buttongroup-padding-yNumber$kendo-actions-padding-y0.5rem$kendo-color-infoColor$info#0dcaf0
Description
The vertical padding of the Dialog action buttons.
+
Description
The color for informational messages and states.
$kendo-dialog-buttongroup-border-widthNumber1px1px$kendo-color-successColor$success#198754
Description
The width of the top border of the Dialog action buttons.
+
Description
The color for success messages and states.
$kendo-dialog-button-spacingNumber$kendo-actions-button-spacing0.5rem$kendo-color-warningColor$warning#ffc107
Description
The spacing between the Dialog action buttons.
+
Description
The color for warning messages and states.
$kendo-dialog-theme-colorsMap( - "primary": k-map-get($kendo-theme-colors, "primary"), - "light": k-map-get($kendo-theme-colors, "light"), - "dark": k-map-get($kendo-theme-colors, "dark") -)("primary": #0d6efd, "light": #f8f9fa, "dark": #212529)$kendo-color-errorColor$danger#dc3545
Description
The theme colors map for the Dialog.
+
Description
The color for error messages and states.
+
$kendo-color-darkColor$dark#212529
Description
The dark color of the theme.
+
$kendo-color-lightColor$light#f8f9fa
Description
The light color of the theme.
+
$kendo-color-inverseColorif( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )#212529
Description
Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
-### Dock-manager +### Coloreditor @@ -5148,359 +5224,349 @@ The following table lists the available variables for customizing the Bootstrap - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + + + + + + + + + + - + - - + - - + + - - - - - + + + + - - + - - - - - + + + + - - + + + + + + + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - - - - - - - - - - + + - - + - - - - - - - - - - - - - - - - - - - - + + - - + - - - - - - - - - - - - - - - - - - - - + + - - - + +
$kendo-dock-manager-border-width$kendo-color-editor-spacer Number1px1pxk-map-get( $kendo-spacing, 4 )1rem
Description
The width of the border around the DockManager component.
+
Description
The spacer of the ColorEditor.
$kendo-dock-manager-border-styleStringsolidsolid$kendo-color-editor-min-widthNumber328px328px
Description
The style of the border around the DockManager component.
+
Description
The minimum width of the ColorEditor.
$kendo-dock-manager-borderColor$kendo-base-border#e4e5e6$kendo-color-editor-border-widthNumber1px1px
Description
The color of the border around the DockManager component.
+
Description
The width of the border around the ColorEditor.
$kendo-dock-manager-pane-header-padding-y$kendo-color-editor-border-radius Numberk-map-get( $kendo-spacing, 2 )0.5rem$kendo-border-radius-md0.375rem
Description
The vertical padding of the pane header in the DockManager component.
+
Description
The border radius of the ColorEditor.
$kendo-dock-manager-pane-header-padding-x$kendo-color-editor-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the ColorEditor.
+
$kendo-color-editor-font-size Numberk-map-get( $kendo-spacing, 4 )$kendo-font-size-md 1rem
Description
The horizontal padding of the pane header in the DockManager component.
+
Description
The font size of the ColorEditor.
$kendo-dock-manager-pane-header-border-width$kendo-color-editor-line-height Number$kendo-dock-manager-border-width1px$kendo-line-height-md1.5
Description
The width of the border around the pane header in the DockManager component.
+
Description
The line height of the ColorEditor.
$kendo-dock-manager-pane-header-border-styleStringsolidsolid$kendo-color-editor-textColor$kendo-component-text#212529
Description
The style of the border around the pane header in the DockManager component.
+
Description
The text color of the ColorEditor.
$kendo-dock-manager-pane-header-bg$kendo-color-editor-bg Color $kendo-component-bg #ffffff
Description
The background color of the pane header in the DockManager component.
+
Description
The background color of the ColorEditor.
$kendo-dock-manager-pane-title-padding-yNullnullnull$kendo-color-editor-borderColor$kendo-component-border#dee2e6
Description
The vertical padding of the pane title in the DockManager component.
+
Description
The border color of the ColorEditor.
$kendo-dock-manager-pane-title-padding-x$kendo-color-editor-focus-borderColor$kendo-hover-border#d6d9dc
Description
The border color of the focused ColorEditor.
+
$kendo-color-editor-focus-shadow Null null null
Description
The horizontal padding of the pane title in the DockManager component.
+
Description
The box shadow of the focused ColorEditor.
$kendo-dock-manager-pane-title-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"$kendo-color-editor-header-padding-yNumber$kendo-color-editor-spacer1rem
Description
The font family of the pane title in the DockManager component.
+
Description
The vertical padding of the ColorEditor header.
$kendo-dock-manager-pane-title-font-size$kendo-color-editor-header-padding-x Number$kendo-font-size-lg1.25rem$kendo-color-editor-header-padding-y1rem
Description
The font size of the pane title in the DockManager component.
+
Description
The horizontal padding of the ColorEditor header.
$kendo-dock-manager-pane-title-line-height$kendo-color-editor-header-actions-gap Number$kendo-line-height-sm1.25k-math-div( $kendo-color-editor-spacer, 2 )0.5rem
Description
The line height of the pane title in the DockManager component.
+
Description
The spacing between the ColorEditor header actions.
$kendo-dock-manager-pane-title-font-weight$kendo-color-editor-color-preview-width Number$kendo-font-weight-normal40032px32px
Description
The font weight of the pane title in the DockManager component.
+
Description
The width of the ColorEditor preview.
$kendo-dock-manager-pane-content-padding-x$kendo-color-editor-color-preview-height Number$kendo-dock-manager-pane-header-padding-x1rem12px12px
Description
The horizontal padding of the pane content in the DockManager component.
+
Description
The height of the ColorEditor preview.
$kendo-dock-manager-pane-content-padding-y$kendo-color-editor-preview-gap Numberk-map-get( $kendo-spacing, 2 )0.5remk-map-get( $kendo-spacing, 1 )0.25rem
Description
The vertical padding of the pane content in the DockManager component.
+
Description
The spacing between the colors in the ColorEditor preview.
$kendo-dock-manager-tabbed-pane-padding-y$kendo-color-editor-views-padding-y Numberk-map-get( $kendo-spacing, 3.5 )0.875rem$kendo-color-editor-spacer1rem
Description
The horizontal padding of the tabbed pane in the DockManager component.
+
Description
The vertical padding of the ColorEditor views container.
$kendo-dock-manager-tabbed-pane-padding-x$kendo-color-editor-views-padding-x Number$kendo-dock-manager-pane-content-padding-y0.5rem$kendo-color-editor-views-padding-y1rem
Description
The horizontal padding of the tabbed pane in the DockManager component.
+
Description
The horizontal padding of the ColorEditor views container.
$kendo-dock-manager-unpinned-container-width$kendo-color-editor-views-gap Number300px300px$kendo-color-editor-spacer1rem
Description
The width of the unpinned pane container in the DockManager component.
+
Description
The spacing of the ColorEditor views container.
$kendo-dock-manager-unpinned-container-bg$kendo-color-editor-color-gradient-focus-outline-color Color$kendo-component-bg#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)rgba(0, 0, 0, .3)rgba(0, 0, 0, 0.3)
Description
The box shadow of the unpinned pane container in the DockManager component.
+
Description
The outline color of the focused ColorGradient.
$kendo-dock-indicator-padding$kendo-color-editor-color-gradient-focus-outline Numberk-map-get( $kendo-spacing, 1.5 )0.375rem
Description
The padding of the dock indicator in the DockManager component.
-
$kendo-dock-indicator-bgColor$kendo-component-bg#ffffff
Description
The background color of the dock indicator in the DockManager component.
-
$kendo-dock-indicator-textColor$kendo-color-primary#0d6efd2px2px
Description
The text color of the dock indicator in the DockManager component.
+
Description
The outline width of the focused ColorGradient.
$kendo-dock-indicator-outline-width$kendo-color-editor-color-gradient-focus-outline-offset Number1px1px
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#0d6efd2px2px
Description
The outline color of the dock indicator in the DockManager component.
+
Description
The outline offset of the focused ColorGradient.
$kendo-dock-indicator-shadow
+ +### Colorpalette + + + + + + + + + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-color-palette-font-family Listdrop-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))$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The box shadow of the dock indicator in the DockManager component.
+
Description
The font family of the ColorPalette.
$kendo-dock-indicator-hover-bgColor$kendo-color-primary#0d6efd$kendo-color-palette-font-sizeNumber$kendo-font-size-md1rem
Description
The background color of the hovered dock indicator in the DockManager component.
+
Description
The font size of the ColorPalette.
$kendo-dock-indicator-hover-textColor$kendo-color-white#ffffff$kendo-color-palette-line-heightNumber00
Description
The text color of the hovered dock indicator in the DockManager component.
+
Description
The line height of the ColorPalette.
$kendo-dock-manager-dock-preview-border-width$kendo-color-palette-tile-width Number1px1pxk-map-get( $kendo-spacing, 6 )1.5rem
Description
The width of the border around the dropping area in the DockManager component.
+
Description
The width of the ColorPalette tile.
$kendo-dock-manager-dock-preview-border-styleStringdasheddashed$kendo-color-palette-tile-heightNumber$kendo-color-palette-tile-width1.5rem
Description
The style of the border around the dropping area in the DockManager component.
+
Description
The height of the ColorPalette tile.
$kendo-dock-manager-dock-preview-border-radiusNumber$kendo-border-radius-sm0.25rem$kendo-color-palette-tile-focus-shadowList0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 )0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.5)
Description
The border radius of the dropping area in the DockManager component.
+
Description
The shadow of the ColorPalette focused tile.
$kendo-dock-manager-dock-preview-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 ))rgba(13, 110, 253, 0.16)$kendo-color-palette-tile-hover-shadowList0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 )0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.8)
Description
The background color of the dropping area in the DockManager component.
+
Description
The shadow of the ColorPalette hovered tile.
$kendo-dock-manager-dock-preview-borderColor$kendo-color-primary#0d6efd$kendo-color-palette-tile-selected-shadowList0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 )0 1px 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px white
Description
The border color of the dropping area in the DockManager component.
+
Description
The shadow of the ColorPalette selected tile.
-### Dropdowntree +### Component @@ -5518,29 +5584,39 @@ The following table lists the available variables for customizing the Bootstrap - - - - + + + + - - - - - + + + + - + + + + + + + + +
$kendo-dropdowntree-popup-padding-xNumberk-map-get( $kendo-spacing, 2 )0.5rem$kendo-component-bgColor$kendo-body-bg#ffffff
Description
The horizontal padding of the DropdownTree popup
+
Description
Background color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.
$kendo-dropdowntree-popup-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem$kendo-component-textColor$kendo-body-text#212529
Description
The vertical padding of the DropdownTree popup
+
Description
Text color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.
+
$kendo-component-borderColorif( k-is-light( $kendo-component-bg ), $gray-300, $gray-700 )#dee2e6
Description
Border color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.
-### Dropzone +### Dialog @@ -5558,379 +5634,463 @@ The following table lists the available variables for customizing the Bootstrap - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - + + +
$kendo-dropzone-padding-xNumberk-map-get( $kendo-spacing, 2 )0.5rem$kendo-dialog-titlebar-bgNullnullnull
Description
The horizontal padding of the DropZone.
+
Description
The background color of the Dialog titlebar.
$kendo-dropzone-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem$kendo-dialog-titlebar-textNullnullnull
Description
The vertical padding of the DropZone.
+
Description
The text color of the Dialog titlebar.
$kendo-dropzone-border-widthNumber1px1px$kendo-dialog-titlebar-borderNullnullnull
Description
The border width of the DropZone.
+
Description
The border color of the Dialog titlebar.
$kendo-dropzone-min-height$kendo-dialog-buttongroup-padding-x Number220px220px$kendo-actions-padding-x0.5rem
Description
The minimum height of the DropZone.
+
Description
The horizontal padding of the Dialog action buttons.
$kendo-dropzone-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"$kendo-dialog-buttongroup-padding-yNumber$kendo-actions-padding-y0.5rem
Description
The font family of the DropZone.
+
Description
The vertical padding of the Dialog action buttons.
$kendo-dropzone-font-size$kendo-dialog-buttongroup-border-width Number$kendo-font-size-md1rem1px1px
Description
The font size of the DropZone.
+
Description
The width of the top border of the Dialog action buttons.
$kendo-dropzone-line-height$kendo-dialog-button-spacing Number$kendo-line-height-md1.5$kendo-actions-button-spacing0.5rem
Description
The line height of the DropZone.
+
Description
The spacing between the Dialog action buttons.
$kendo-dropzone-bgColorif($kendo-enable-color-system, k-color( surface ), if( k-is-light( $kendo-component-bg ), $gray-100, $gray-900 ))#f8f9fa$kendo-dialog-theme-colorsMap( + "primary": k-map-get($kendo-theme-colors, "primary"), + "light": k-map-get($kendo-theme-colors, "light"), + "dark": k-map-get($kendo-theme-colors, "dark") +)("primary": #0d6efd, "light": #f8f9fa, "dark": #212529)
Description
The background color of the DropZone.
+
Description
The theme colors map for the Dialog.
+
+ +### Dock-manager + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - - - - - - - + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-dock-manager-border-widthNumber1px1px
Description
The width of the border around the DockManager component.
$kendo-dropzone-textColor$kendo-component-text#212529$kendo-dock-manager-border-styleStringsolidsolid
Description
The text color of the DropZone.
+
Description
The style of the border around the DockManager component.
$kendo-dropzone-border$kendo-dock-manager-border Color$kendo-component-border#dee2e6$kendo-base-border#e4e5e6
Description
The border color of the DropZone.
+
Description
The color of the border around the DockManager component.
$kendo-dropzone-icon-spacing$kendo-dock-manager-pane-header-padding-y Numberk-map-get( $kendo-spacing, 6 )1.5remk-map-get( $kendo-spacing, 2 )0.5rem
Description
The spacing below the DropZone icon.
+
Description
The vertical padding of the pane header in the DockManager component.
$kendo-dropzone-icon-textColorif($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 8 ))#afb1b2$kendo-dock-manager-pane-header-padding-xNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The text color of the DropZone icon.
+
Description
The horizontal padding of the pane header in the DockManager component.
$kendo-dropzone-icon-hover-textColor$kendo-color-primary#0d6efd$kendo-dock-manager-pane-header-border-widthNumber$kendo-dock-manager-border-width1px
Description
The text color of the hovered DropZone icon.
+
Description
The width of the border around the pane header in the DockManager component.
$kendo-dropzone-hint-font-sizeNullnullnull$kendo-dock-manager-pane-header-border-styleStringsolidsolid
Description
The font size of the DropZone hint.
+
Description
The style of the border around the pane header in the DockManager component.
$kendo-dropzone-hint-spacingNumberk-map-get( $kendo-spacing, 2 )0.5rem$kendo-dock-manager-pane-header-bgColor$kendo-component-bg#ffffff
Description
The spacing below the DropZone hint.
+
Description
The background color of the pane header in the DockManager component.
$kendo-dropzone-hint-text$kendo-dock-manager-pane-title-padding-y Null null null
Description
The text color of the DropZone hint.
-
$kendo-dropzone-note-font-sizeNumber$kendo-font-size-xs0.75rem
Description
The font size of the DropZone note.
+
Description
The vertical padding of the pane title in the DockManager component.
$kendo-dropzone-note-spacing$kendo-dock-manager-pane-title-padding-x Null null null
Description
The spacing below the DropZone note.
+
Description
The horizontal padding of the pane title in the DockManager component.
$kendo-dropzone-note-textColor$kendo-subtle-text#6c757d$kendo-dock-manager-pane-title-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The text color of the DropZone note.
+
Description
The font family of the pane title in the DockManager component.
- -### Editor - - - - - - - - - - - - - - - - - - + + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + + + + + + + + + + + + + + + + + + + - - + + + + + + + + + + - - + + - - + + + + + + + + + + - + + + + + + + + + + - - + - - + + - - + + + + + + + + + + + + + + + + + + + - - + + - + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-editor-border-width
$kendo-dock-manager-pane-title-font-size Number1px1px$kendo-font-size-lg1.25rem
Description
The width of the border around the Еditor.
+
Description
The font size of the pane title in the DockManager component.
$kendo-editor-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"$kendo-dock-manager-pane-title-line-heightNumber$kendo-line-height-sm1.25
Description
The font family of the Еditor.
+
Description
The line height of the pane title in the DockManager component.
$kendo-editor-font-size$kendo-dock-manager-pane-title-font-weight Number$kendo-font-size-md1rem$kendo-font-weight-normal400
Description
The font size of the Еditor.
+
Description
The font weight of the pane title in the DockManager component.
$kendo-editor-line-height$kendo-dock-manager-pane-content-padding-x Number$kendo-line-height-md1.5$kendo-dock-manager-pane-header-padding-x1rem
Description
The line height of the Еditor.
+
Description
The horizontal padding of the pane content in the DockManager component.
$kendo-editor-placeholder-textColor$kendo-input-placeholder-text#6c757d$kendo-dock-manager-pane-content-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The text color of the Еditor placeholder.
+
Description
The vertical padding of the pane content in the DockManager component.
$kendo-editor-placeholder-opacity$kendo-dock-manager-tabbed-pane-padding-y Number$kendo-input-placeholder-opacity1k-map-get( $kendo-spacing, 3.5 )0.875rem
Description
The opacity of the Editor placeholder.
+
Description
The horizontal padding of the tabbed pane in the DockManager component.
$kendo-editor-selected-textColor$kendo-color-primary-contrastwhite$kendo-dock-manager-tabbed-pane-padding-xNumber$kendo-dock-manager-pane-content-padding-y0.5rem
Description
The selected text color of the Editor.
+
Description
The horizontal padding of the tabbed pane in the DockManager component.
$kendo-editor-selected-bgColor$kendo-color-primary#0d6efd$kendo-dock-manager-unpinned-container-widthNumber300px300px
Description
The selected background color of the Editor.
+
Description
The width of the unpinned pane container in the DockManager component.
$kendo-editor-highlighted-bg$kendo-dock-manager-unpinned-container-bg Colorif($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix( $kendo-color-primary, #ffffff, 20% ))#cfe2ff$kendo-component-bg#ffffff
Description
The highlighted background color of the Editor.
+
Description
The background-color of the unpinned pane container in the DockManager component.
$kendo-editor-export-tool-icon-margin-xNumber.25em0.25em$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 horizontal margin of the Editor's export tool icon.
+
Description
The box shadow of the unpinned pane container in the DockManager component.
$kendo-editor-resize-handle-size$kendo-dock-indicator-padding Number8px8pxk-map-get( $kendo-spacing, 1.5 )0.375rem
Description
The size of the Editor's resize handle.
+
Description
The padding of the dock indicator in the DockManager component.
$kendo-editor-resize-handle-border-width$kendo-dock-indicator-bgColor$kendo-component-bg#ffffff
Description
The background color of the dock indicator in the DockManager component.
+
$kendo-dock-indicator-textColor$kendo-color-primary#0d6efd
Description
The text color of the dock indicator in the DockManager component.
+
$kendo-dock-indicator-outline-width Number 1px 1px
Description
The border width of the Editor's resize handle.
+
Description
The outline width of the dock indicator in the DockManager component.
$kendo-editor-resize-handle-border$kendo-dock-indicator-outline-styleStringsolidsolid
Description
The outline style of the dock indicator in the DockManager component.
+
$kendo-dock-indicator-outline Color#000000#000000$kendo-dock-indicator-text#0d6efd
Description
The border color of the Editor's resize handle.
+
Description
The outline color of the dock indicator in the DockManager component.
$kendo-editor-resize-handle-bg$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-bg Color#ffffff$kendo-color-primary#0d6efd
Description
The background color of the hovered dock indicator in the DockManager component.
+
$kendo-dock-indicator-hover-textColor$kendo-color-white #ffffff
Description
The background color of the Editor's resize handle.
+
Description
The text color of the hovered dock indicator in the DockManager component.
$kendo-editor-selectednode-outline-width$kendo-dock-manager-dock-preview-border-width Number2px2px1px1px
Description
The outline width of the Editor's selected node.
+
Description
The width of the border around the dropping area in the DockManager component.
$kendo-editor-selectednode-outline-color$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-sm0.25rem
Description
The border radius of the dropping area in the DockManager component.
+
$kendo-dock-manager-dock-preview-bg Color#88ccff#88ccffif($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 ))rgba(13, 110, 253, 0.16)
Description
The outline color of the Editor's selected node.
+
Description
The background color of the dropping area in the DockManager component.
+
$kendo-dock-manager-dock-preview-borderColor$kendo-color-primary#0d6efd
Description
The border color of the dropping area in the DockManager component.
-### Elevation +### Dropdowntree @@ -5948,19 +6108,29 @@ The following table lists the available variables for customizing the Bootstrap - - - - + + + + - + + + + + + + + +
$kendo-elevationMap$_default-elevation(1: ((0px 1px 2px rgba(0, 0, 0, 0.038),)), 2: ((0px 2px 7px rgba(0, 0, 0, 0.075),)), 3: ((0px 4px 10px rgba(0, 0, 0, 0.1),)), 4: ((0px 6px 13px rgba(0, 0, 0, 0.125),)), 5: ((0px 8px 16px 0px rgba(0, 0, 0, 0.15),)), 6: ((0px 11px 24px 0px rgba(0, 0, 0, 0.159),)), 7: ((0px 14px 36px 0px rgba(0, 0, 0, 0.168),)), 8: ((0px 16px 48px 0px rgba(0, 0, 0, 0.176),)), 9: ((0px 18px 60px 0px rgba(0, 0, 0, 0.185),)))$kendo-dropdowntree-popup-padding-xNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The global default Elevation map.
+
Description
The horizontal padding of the DropdownTree popup
+
$kendo-dropdowntree-popup-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The vertical padding of the DropdownTree popup
-### Expander +### Dropzone @@ -5978,229 +6148,199 @@ The following table lists the available variables for customizing the Bootstrap - + - - + + - - + + + + + + + + + + - - + + + + + + + + + + - - + - - + - - + - - + + - - + - - + + - - + - - - - - + + + + - - - - - - - - - - - - - - - - - - - - + - - + + - - + - - + + - - + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - -
$kendo-expander-spacing-y$kendo-dropzone-padding-x Numberk-map-get( $kendo-spacing, 3 )0.75remk-map-get( $kendo-spacing, 2 )0.5rem
Description
The vertical spacing of the ExpansionPanel.
+
Description
The horizontal padding of the DropZone.
$kendo-expander-border-width$kendo-dropzone-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The vertical padding of the DropZone.
+
$kendo-dropzone-border-width Number 1px 1px
Description
The width of the border around the ExpansionPanel.
+
Description
The border width of the DropZone.
$kendo-expander-font-family$kendo-dropzone-min-heightNumber220px220px
Description
The minimum height of the DropZone.
+
$kendo-dropzone-font-family List $kendo-font-family system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the ExpansionPanel.
+
Description
The font family of the DropZone.
$kendo-expander-font-size$kendo-dropzone-font-size Number $kendo-font-size-md 1rem
Description
The font size of the ExpansionPanel.
+
Description
The font size of the DropZone.
$kendo-expander-line-height$kendo-dropzone-line-height Number $kendo-line-height-md 1.5
Description
The hine height of the ExpansionPanel.
+
Description
The line height of the DropZone.
$kendo-expander-text$kendo-dropzone-bg Color$kendo-component-text#212529if($kendo-enable-color-system, k-color( surface ), if( k-is-light( $kendo-component-bg ), $gray-100, $gray-900 ))#f8f9fa
Description
The text color of the ExpansionPanel.
+
Description
The background color of the DropZone.
$kendo-expander-bg$kendo-dropzone-text Color$kendo-component-bg#ffffff$kendo-component-text#212529
Description
The background color of the ExpansionPanel.
+
Description
The text color of the DropZone.
$kendo-expander-border$kendo-dropzone-border Color $kendo-component-border #dee2e6
Description
The border color of the ExpansionPanel.
+
Description
The border color of the DropZone.
$kendo-expander-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 3px rgba(33, 37, 41, 0.15)$kendo-dropzone-icon-spacingNumberk-map-get( $kendo-spacing, 6 )1.5rem
Description
The box shadow of the focused ExpansionPanel.
-
$kendo-expander-header-padding-xNumberk-map-get( $kendo-spacing, 6 )1.5rem
Description
The horizontal padding of the ExpansionPanel header.
-
$kendo-expander-header-padding-yNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The vertical padding of the ExpansionPanel header.
+
Description
The spacing below the DropZone icon.
$kendo-expander-header-text$kendo-dropzone-icon-text Color$kendo-expander-text#212529if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 8 ))#afb1b2
Description
The text color of the ExpansionPanel header.
+
Description
The text color of the DropZone icon.
$kendo-expander-header-bg$kendo-dropzone-icon-hover-text Colortransparenttransparent$kendo-color-primary#0d6efd
Description
The background color of the ExpansionPanel header.
+
Description
The text color of the hovered DropZone icon.
$kendo-expander-header-border$kendo-dropzone-hint-font-size Null null null
Description
The border color of the ExpansionPanel header.
+
Description
The font size of the DropZone hint.
$kendo-expander-header-hover-bgColorrgba( black, .04 )rgba(0, 0, 0, 0.04)$kendo-dropzone-hint-spacingNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The background color of the hovered ExpansionPanel header.
+
Description
The spacing below the DropZone hint.
$kendo-expander-header-focus-bg$kendo-dropzone-hint-text Null null null
Description
The background color of the focused ExpansionPanel header.
+
Description
The text color of the DropZone hint.
$kendo-expander-header-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 3px rgba(33, 37, 41, 0.15)$kendo-dropzone-note-font-sizeNumber$kendo-font-size-xs0.75rem
Description
The box shadow of the focused ExpansionPanel header.
+
Description
The font size of the DropZone note.
$kendo-expander-title-textColor$kendo-color-primary#0d6efd$kendo-dropzone-note-spacingNullnullnull
Description
The text color of the ExpansionPanel title.
+
Description
The spacing below the DropZone note.
$kendo-expander-header-sub-title-text$kendo-dropzone-note-text Color $kendo-subtle-text #6c757d
Description
The text color of the ExpansionPanel sub-title.
-
$kendo-expander-indicator-margin-xNumberk-map-get( $kendo-spacing, 3 )0.75rem
Description
The horizontal margin of the ExpansionPanel indicator.
-
$kendo-expander-content-padding-xNumberk-map-get( $kendo-spacing, 6 )1.5rem
Description
The horizontal padding of the ExpansionPanel content.
-
$kendo-expander-content-padding-yNumberk-map-get( $kendo-spacing, 6 )1.5rem
Description
The vertical padding of the ExpansionPanel content.
+
Description
The text color of the DropZone note.
-### Filemanager +### Editor @@ -6218,1182 +6358,1129 @@ The following table lists the available variables for customizing the Bootstrap - - - - - - - - - - + - - + - - + - - + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - - + +
$kendo-file-manager-spacerNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The space between the FileManager items.
-
$kendo-file-manager-border-width$kendo-editor-border-width Number 1px 1px
Description
The border width of the FileManager.
+
Description
The width of the border around the Еditor.
$kendo-file-manager-font-family$kendo-editor-font-family List $kendo-font-family system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the FileManager.
+
Description
The font family of the Еditor.
$kendo-file-manager-font-size$kendo-editor-font-size Number $kendo-font-size-md 1rem
Description
The font size of the FileManager.
+
Description
The font size of the Еditor.
$kendo-file-manager-line-height$kendo-editor-line-height Number $kendo-line-height-md 1.5
Description
The line height of the FileManager.
+
Description
The line height of the Еditor.
$kendo-file-manager-bg$kendo-editor-placeholder-text Color$kendo-component-bg#ffffff$kendo-input-placeholder-text#6c757d
Description
The background color of the FileManager.
+
Description
The text color of the Еditor placeholder.
$kendo-file-manager-textColor$kendo-component-text#212529$kendo-editor-placeholder-opacityNumber$kendo-input-placeholder-opacity1
Description
The text color of the FileManager.
+
Description
The opacity of the Editor placeholder.
$kendo-file-manager-border$kendo-editor-selected-text Color$kendo-component-border#dee2e6$kendo-color-primary-contrastwhite
Description
The border color of the FileManager.
+
Description
The selected text color of the Editor.
$kendo-file-manager-toolbar-border-widthNumber$kendo-file-manager-border-width1px$kendo-editor-selected-bgColor$kendo-color-primary#0d6efd
Description
The border width of the FileManager Toolbar.
+
Description
The selected background color of the Editor.
$kendo-file-manager-toolbar-bgNullnullnull$kendo-editor-highlighted-bgColorif($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix( $kendo-color-primary, #ffffff, 20% ))#cfe2ff
Description
The background color of the FileManager Toolbar.
+
Description
The highlighted background color of the Editor.
$kendo-file-manager-toolbar-textNullnullnull$kendo-editor-export-tool-icon-margin-xNumber.25em0.25em
Description
The text color of the FileManager Toolbar.
+
Description
The horizontal margin of the Editor's export tool icon.
$kendo-file-manager-toolbar-borderNullnullnull$kendo-editor-resize-handle-sizeNumber8px8px
Description
The border color of the FileManager Toolbar.
+
Description
The size of the Editor's resize handle.
$kendo-file-manager-toolbar-gradientNullnullnull$kendo-editor-resize-handle-border-widthNumber1px1px
Description
The gradient of the FileManager Toolbar.
+
Description
The border width of the Editor's resize handle.
$kendo-file-manager-navigation-padding-xNumber$kendo-file-manager-spacer1rem$kendo-editor-resize-handle-borderColor#000000#000000
Description
The horizontal padding of the FileManager Navigation.
+
Description
The border color of the Editor's resize handle.
$kendo-file-manager-navigation-padding-yNumber$kendo-file-manager-spacer1rem$kendo-editor-resize-handle-bgColor#ffffff#ffffff
Description
The vertical padding of the FileManager Navigation.
+
Description
The background color of the Editor's resize handle.
$kendo-file-manager-navigation-width$kendo-editor-selectednode-outline-width Number20%20%2px2px
Description
The width of the FileManager Navigation.
+
Description
The outline width of the Editor's selected node.
$kendo-file-manager-navigation-border-widthNumber$kendo-file-manager-border-width1px$kendo-editor-selectednode-outline-colorColor#88ccff#88ccff
Description
The border width of the FileManager Navigation.
+
Description
The outline color of the Editor's selected node.
$kendo-file-manager-navigation-bgNullnullnull
+ +### Elevation + + + + + + + + + + + + + + + + + + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-elevationMap$_default-elevation(1: ((0px 1px 2px rgba(0, 0, 0, 0.038),)), 2: ((0px 2px 7px rgba(0, 0, 0, 0.075),)), 3: ((0px 4px 10px rgba(0, 0, 0, 0.1),)), 4: ((0px 6px 13px rgba(0, 0, 0, 0.125),)), 5: ((0px 8px 16px 0px rgba(0, 0, 0, 0.15),)), 6: ((0px 11px 24px 0px rgba(0, 0, 0, 0.159),)), 7: ((0px 14px 36px 0px rgba(0, 0, 0, 0.168),)), 8: ((0px 16px 48px 0px rgba(0, 0, 0, 0.176),)), 9: ((0px 18px 60px 0px rgba(0, 0, 0, 0.185),)))
Description
The background color of the FileManager Navigation.
+
Description
The global default Elevation map.
$kendo-file-manager-navigation-textNullnullnull
+ +### Expander + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - - - - - - - - - - - - - - - - - - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-expander-spacing-yNumberk-map-get( $kendo-spacing, 3 )0.75rem
Description
The text color of the FileManager Navigation.
+
Description
The vertical spacing of the ExpansionPanel.
$kendo-file-manager-navigation-borderNullnullnull$kendo-expander-border-widthNumber1px1px
Description
The border color of the FileManager Navigation.
+
Description
The width of the border around the ExpansionPanel.
$kendo-file-manager-breadcrumb-padding-xNumberk-map-get( $kendo-spacing, 2 )0.5rem$kendo-expander-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The horizontal padding of the FileManager Breadcrumb.
+
Description
The font family of the ExpansionPanel.
$kendo-file-manager-breadcrumb-padding-y$kendo-expander-font-size Numberk-map-get( $kendo-spacing, 2 )0.5rem$kendo-font-size-md1rem
Description
The vertical padding of the FileManager Breadcrumb.
+
Description
The font size of the ExpansionPanel.
$kendo-file-manager-breadcrumb-border-width$kendo-expander-line-height Number$kendo-file-manager-border-width1px$kendo-line-height-md1.5
Description
The border width of the FileManager Breadcrumb.
+
Description
The hine height of the ExpansionPanel.
$kendo-file-manager-breadcrumb-bg$kendo-expander-text Color$kendo-toolbar-bg#f8f9fa
Description
The background color of the FileManager Breadcrumb.
-
$kendo-file-manager-breadcrumb-textNullnullnull
Description
The text color of the FileManager Breadcrumb.
-
$kendo-file-manager-breadcrumb-borderNullnullnull$kendo-component-text#212529
Description
The border color of the FileManager Breadcrumb.
+
Description
The text color of the ExpansionPanel.
$kendo-file-manager-listview-bgNullnullnull$kendo-expander-bgColor$kendo-component-bg#ffffff
Description
The background color of the FileManager ListView.
+
Description
The background color of the ExpansionPanel.
$kendo-file-manager-listview-textNullnullnull$kendo-expander-borderColor$kendo-component-border#dee2e6
Description
The text color of the FileManager ListView.
+
Description
The border color of the ExpansionPanel.
$kendo-file-manager-listview-borderNullnullnull$kendo-expander-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 3px rgba(33, 37, 41, 0.15)
Description
The border color of the FileManager ListView.
+
Description
The box shadow of the focused ExpansionPanel.
$kendo-file-manager-listview-item-padding-x$kendo-expander-header-padding-x Numberk-map-get( $kendo-spacing, 4 )1remk-map-get( $kendo-spacing, 6 )1.5rem
Description
The horizontal padding of the FileManager ListView item.
+
Description
The horizontal padding of the ExpansionPanel header.
$kendo-file-manager-listview-item-padding-y$kendo-expander-header-padding-y Number k-map-get( $kendo-spacing, 4 ) 1rem
Description
The vertical padding of the FileManager ListView item.
+
Description
The vertical padding of the ExpansionPanel header.
$kendo-file-manager-listview-item-widthNumber120px120px$kendo-expander-header-textColor$kendo-expander-text#212529
Description
The width of the FileManager ListView item.
+
Description
The text color of the ExpansionPanel header.
$kendo-file-manager-listview-item-heightNumber120px120px$kendo-expander-header-bgColortransparenttransparent
Description
The height of the FileManager ListView item.
+
Description
The background color of the ExpansionPanel header.
$kendo-file-manager-listview-item-bg$kendo-expander-header-border Null null null
Description
The background color of the FileManager ListView item.
+
Description
The border color of the ExpansionPanel header.
$kendo-file-manager-listview-item-textNullnullnull$kendo-expander-header-hover-bgColorrgba( black, .04 )rgba(0, 0, 0, 0.04)
Description
The text color of the FileManager ListView item.
+
Description
The background color of the hovered ExpansionPanel header.
$kendo-file-manager-listview-item-border$kendo-expander-header-focus-bg Null null null
Description
The border color of the FileManager ListView item.
+
Description
The background color of the focused ExpansionPanel header.
$kendo-file-manager-listview-item-icon-bgNullnullnull$kendo-expander-header-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 3px rgba(33, 37, 41, 0.15)
Description
The background color of the FileManager ListView item icon.
+
Description
The box shadow of the focused ExpansionPanel header.
$kendo-file-manager-listview-item-icon-text$kendo-expander-title-text Colorif($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-file-manager-text, 4 ))#686b6d$kendo-color-primary#0d6efd
Description
The text color of the FileManager ListView item icon.
+
Description
The text color of the ExpansionPanel title.
$kendo-file-manager-listview-item-icon-borderNullnullnull$kendo-expander-header-sub-title-textColor$kendo-subtle-text#6c757d
Description
The border color of the FileManager ListView item icon.
+
Description
The text color of the ExpansionPanel sub-title.
$kendo-file-manager-listview-item-icon-selected-bgNullnullnull$kendo-expander-indicator-margin-xNumberk-map-get( $kendo-spacing, 3 )0.75rem
Description
Background color of the FileManager selected ListView item icon.
+
Description
The horizontal margin of the ExpansionPanel indicator.
$kendo-file-manager-listview-item-icon-selected-textStringinheritinherit$kendo-expander-content-padding-xNumberk-map-get( $kendo-spacing, 6 )1.5rem
Description
Text color of the FileManager selected ListView item icon.
+
Description
The horizontal padding of the ExpansionPanel content.
$kendo-file-manager-listview-item-icon-selected-borderNullnullnull$kendo-expander-content-padding-yNumberk-map-get( $kendo-spacing, 6 )1.5rem
Description
Border color of the FileManager selected ListView item icon.
+
Description
The vertical padding of the ExpansionPanel content.
$kendo-file-manager-grid-bgNullnullnull
+ +### Filemanager + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - + - + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + - - + - - + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-file-manager-spacerNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The background color of the FileManager Grid.
+
Description
The space between the FileManager items.
$kendo-file-manager-grid-textNullnullnull$kendo-file-manager-border-widthNumber1px1px
Description
The text color of the FileManager Grid.
+
Description
The border width of the FileManager.
$kendo-file-manager-grid-borderNullnullnull$kendo-file-manager-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The border color of the FileManager Grid.
+
Description
The font family of the FileManager.
$kendo-file-manager-preview-padding-x$kendo-file-manager-font-size Number$kendo-file-manager-spacer$kendo-font-size-md 1rem
Description
The horizontal padding of the FileManager preview.
+
Description
The font size of the FileManager.
$kendo-file-manager-preview-padding-y$kendo-file-manager-line-height Number$kendo-file-manager-spacer1rem$kendo-line-height-md1.5
Description
The vertical padding of the FileManager preview.
+
Description
The line height of the FileManager.
$kendo-file-manager-preview-widthNumber20%20%$kendo-file-manager-bgColor$kendo-component-bg#ffffff
Description
The width of the FileManager preview.
+
Description
The background color of the FileManager.
$kendo-file-manager-preview-border-widthNumber$kendo-file-manager-border-width1px$kendo-file-manager-textColor$kendo-component-text#212529
Description
The border width of the FileManager preview.
+
Description
The text color of the FileManager.
$kendo-file-manager-preview-spacingNumber$kendo-file-manager-spacer1rem$kendo-file-manager-borderColor$kendo-component-border#dee2e6
Description
The spacing of the FileManager preview.
+
Description
The border color of the FileManager.
$kendo-file-manager-preview-column-gap$kendo-file-manager-toolbar-border-width Numberk-map-get( $kendo-spacing, 1 )0.25rem$kendo-file-manager-border-width1px
Description
The gap between the columns in the FileManager preview.
+
Description
The border width of the FileManager Toolbar.
$kendo-file-manager-preview-bg$kendo-file-manager-toolbar-bg Null null null
Description
The background color of the FileManager preview.
+
Description
The background color of the FileManager Toolbar.
$kendo-file-manager-preview-text$kendo-file-manager-toolbar-text Null null null
Description
The text color of the FileManager preview.
+
Description
The text color of the FileManager Toolbar.
$kendo-file-manager-preview-border$kendo-file-manager-toolbar-border Null null null
Description
The border color of the FileManager preview.
+
Description
The border color of the FileManager Toolbar.
$kendo-file-manager-preview-icon-bg$kendo-file-manager-toolbar-gradient Null null null
Description
The background color of the FileManager preview icon.
+
Description
The gradient of the FileManager Toolbar.
$kendo-file-manager-preview-icon-textColorif($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-file-manager-text, 4 ))#686b6d$kendo-file-manager-navigation-padding-xNumber$kendo-file-manager-spacer1rem
Description
The text color of the FileManager preview icon.
+
Description
The horizontal padding of the FileManager Navigation.
$kendo-file-manager-preview-icon-borderNullnullnull$kendo-file-manager-navigation-padding-yNumber$kendo-file-manager-spacer1rem
Description
The border color of the FileManager preview icon.
+
Description
The vertical padding of the FileManager Navigation.
- -### Filter - - - - - - - - - - - - - - - - - - + + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-filter-padding-x
$kendo-file-manager-navigation-width Number$kendo-padding-md-x1rem20%20%
Description
The horizontal padding of the Filter.
+
Description
The width of the FileManager Navigation.
$kendo-filter-padding-y$kendo-file-manager-navigation-border-width Number$kendo-padding-md-y0.5rem$kendo-file-manager-border-width1px
Description
The vertical padding of the Filter.
+
Description
The border width of the FileManager Navigation.
$kendo-filter-bottom-marginNumber2.1em2.1em$kendo-file-manager-navigation-bgNullnullnull
Description
The bottom margin of the Filter.
+
Description
The background color of the FileManager Navigation.
$kendo-filter-line-sizeNumber1px1px$kendo-file-manager-navigation-textNullnullnull
Description
The width of the line that connects the Filter items.
+
Description
The text color of the FileManager Navigation.
$kendo-filter-operator-dropdown-width$kendo-file-manager-navigation-borderNullnullnull
Description
The border color of the FileManager Navigation.
+
$kendo-file-manager-breadcrumb-padding-x Number15em15emk-map-get( $kendo-spacing, 2 )0.5rem
Description
The width of the dropdown elements in the Filter items.
+
Description
The horizontal padding of the FileManager Breadcrumb.
$kendo-filter-preview-field-textColor$kendo-color-primary#0d6efd$kendo-file-manager-breadcrumb-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The text color of the Filter preview field.
+
Description
The vertical padding of the FileManager Breadcrumb.
$kendo-filter-preview-operator-textColor$kendo-subtle-text#6c757d$kendo-file-manager-breadcrumb-border-widthNumber$kendo-file-manager-border-width1px
Description
The text color of the Filter preview operator.
+
Description
The border width of the FileManager Breadcrumb.
$kendo-filter-toolbar-focus-shadowList0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))0 0 0 0.25rem rgba(13, 110, 253, 0.25)$kendo-file-manager-breadcrumb-bgColor$kendo-toolbar-bg#f8f9fa
Description
The box shadow of the focused Filter toolbar.
+
Description
The background color of the FileManager Breadcrumb.
- -### Floating-action-button - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - - - - - - - - + +
NameTypeDefault valueComputed value
$kendo-fab-border-widthNumber1px1px
$kendo-file-manager-breadcrumb-textNullnullnull
Description
The width of the border around the FAB.
+
Description
The text color of the FileManager Breadcrumb.
$kendo-fab-border-radiusNumberk-math-div( $kendo-border-radius, 2 )0.1875rem$kendo-file-manager-breadcrumb-borderNullnullnull
Description
The border radius of the FAB.
+
Description
The border color of the FileManager Breadcrumb.
$kendo-fab-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"$kendo-file-manager-listview-bgNullnullnull
Description
The font family of the FAB.
+
Description
The background color of the FileManager ListView.
$kendo-fab-font-sizeNumber$kendo-font-size-md1rem$kendo-file-manager-listview-textNullnullnull
Description
The font size of the FAB.
+
Description
The text color of the FileManager ListView.
$kendo-fab-line-heightNumber$kendo-line-height-md1.5$kendo-file-manager-listview-borderNullnullnull
Description
The line height of the FAB.
+
Description
The border color of the FileManager ListView.
$kendo-fab-padding-x$kendo-file-manager-listview-item-padding-x Number k-map-get( $kendo-spacing, 4 ) 1rem
Description
The horizontal padding of the FAB.
+
Description
The horizontal padding of the FileManager ListView item.
$kendo-fab-sm-padding-x$kendo-file-manager-listview-item-padding-y Numberk-math-div( $kendo-fab-padding-x, 2 )0.5remk-map-get( $kendo-spacing, 4 )1rem
Description
The horizontal padding of the small FAB.
+
Description
The vertical padding of the FileManager ListView item.
$kendo-fab-md-padding-x$kendo-file-manager-listview-item-width Number$kendo-fab-padding-x1rem120px120px
Description
The horizontal padding of the medium FAB.
+
Description
The width of the FileManager ListView item.
$kendo-fab-lg-padding-x$kendo-file-manager-listview-item-height Number( $kendo-fab-padding-x * 1.5 )1.5rem120px120px
Description
The horizontal padding of the large FAB.
+
Description
The height of the FileManager ListView item.
$kendo-fab-padding-yNumber$kendo-fab-padding-x1rem$kendo-file-manager-listview-item-bgNullnullnull
Description
The vertical padding of the FAB.
+
Description
The background color of the FileManager ListView item.
$kendo-fab-sm-padding-yNumberk-math-div( $kendo-fab-padding-y, 2 )0.5rem$kendo-file-manager-listview-item-textNullnullnull
Description
The vertical padding of the small FAB.
+
Description
The text color of the FileManager ListView item.
$kendo-fab-md-padding-yNumber$kendo-fab-padding-y1rem$kendo-file-manager-listview-item-borderNullnullnull
Description
The vertical padding of the medium FAB.
+
Description
The border color of the FileManager ListView item.
$kendo-fab-lg-padding-yNumber( $kendo-fab-padding-y * 1.5 )1.5rem$kendo-file-manager-listview-item-icon-bgNullnullnull
Description
The vertical padding of the large FAB.
+
Description
The background color of the FileManager ListView item icon.
$kendo-fab-icon-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem$kendo-file-manager-listview-item-icon-textColorif($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-file-manager-text, 4 ))#686b6d
Description
The horizontal padding of the FAB icon.
+
Description
The text color of the FileManager ListView item icon.
$kendo-fab-icon-padding-yNumber$kendo-fab-icon-padding-x0.25rem$kendo-file-manager-listview-item-icon-borderNullnullnull
Description
The vertical padding of the FAB icon.
+
Description
The border color of the FileManager ListView item icon.
$kendo-fab-icon-spacingNumberk-map-get( $kendo-spacing, 0.5 )0.125rem$kendo-file-manager-listview-item-icon-selected-bgNullnullnull
Description
The spacing of the FAB icon.
+
Description
Background color of the FileManager selected ListView item icon.
$kendo-fab-items-padding-xNumber0px0px$kendo-file-manager-listview-item-icon-selected-textStringinheritinherit
Description
The horizontal padding of the FAB items.
+
Description
Text color of the FileManager selected ListView item icon.
$kendo-fab-items-padding-yNumberk-map-get( $kendo-spacing, 4 )1rem$kendo-file-manager-listview-item-icon-selected-borderNullnullnull
Description
The vertical padding of the FAB items.
+
Description
Border color of the FileManager selected ListView item icon.
$kendo-fab-item-text-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem$kendo-file-manager-grid-bgNullnullnull
Description
The horizontal padding of the FAB item text.
+
Description
The background color of the FileManager Grid.
$kendo-fab-item-text-padding-yNumber$kendo-fab-item-text-padding-x0.25rem$kendo-file-manager-grid-textNullnullnull
Description
The vertical padding of the FAB item text.
+
Description
The text color of the FileManager Grid.
$kendo-fab-item-text-border-widthNumber1px1px$kendo-file-manager-grid-borderNullnullnull
Description
The width of the FAB item text border.
+
Description
The border color of the FileManager Grid.
$kendo-fab-item-text-border-radius$kendo-file-manager-preview-padding-x Number4px4px$kendo-file-manager-spacer1rem
Description
The border radius of the FAB item text.
+
Description
The horizontal padding of the FileManager preview.
$kendo-fab-item-text-font-size$kendo-file-manager-preview-padding-y Number$kendo-font-size-xs0.75rem$kendo-file-manager-spacer1rem
Description
The font size of the FAB item text.
+
Description
The vertical padding of the FileManager preview.
$kendo-fab-item-text-line-height$kendo-file-manager-preview-width Number14px14px20%20%
Description
The line height of the FAB item text.
+
Description
The width of the FileManager preview.
$kendo-fab-item-icon-padding-x$kendo-file-manager-preview-border-width Numberk-map-get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x0.75rem$kendo-file-manager-border-width1px
Description
The horizontal padding of the FAB item icon.
+
Description
The border width of the FileManager preview.
$kendo-fab-item-icon-padding-y$kendo-file-manager-preview-spacing Number$kendo-fab-item-icon-padding-x0.75rem$kendo-file-manager-spacer1rem
Description
The vertical padding of the FAB item icon.
+
Description
The spacing of the FileManager preview.
$kendo-fab-item-icon-border-width$kendo-file-manager-preview-column-gap Number00k-map-get( $kendo-spacing, 1 )0.25rem
Description
The width of the FAB item icon border.
+
Description
The gap between the columns in the FileManager preview.
$kendo-fab-item-icon-border-radiusNumber50%50%$kendo-file-manager-preview-bgNullnullnull
Description
The border radius of the FAB item icon.
+
Description
The background color of the FileManager preview.
$kendo-fab-theme-colorsMap$kendo-theme-colors("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529)$kendo-file-manager-preview-textNullnullnull
Description
The theme colors map for the FAB.
+
Description
The text color of the FileManager preview.
$kendo-fab-sizesMap( - sm: ( - padding-x: $kendo-fab-sm-padding-x, - padding-y: $kendo-fab-sm-padding-y - ), - md: ( - padding-x: $kendo-fab-md-padding-x, - padding-y: $kendo-fab-md-padding-y - ), - lg: ( - padding-x: $kendo-fab-lg-padding-x, - padding-y: $kendo-fab-lg-padding-y - ) -)(sm: (padding-x: 0.5rem, padding-y: 0.5rem), md: (padding-x: 1rem, padding-y: 1rem), lg: (padding-x: 1.5rem, padding-y: 1.5rem))$kendo-file-manager-preview-borderNullnullnull
Description
The size map for the FAB.
+
Description
The border color of the FileManager preview.
$kendo-fab-shadowStringk-elevation(5)var(--kendo-elevation-5, 0px 8px 16px 0px rgba(0, 0, 0, 0.15))$kendo-file-manager-preview-icon-bgNullnullnull
Description
The base shadow of the FAB.
+
Description
The background color of the FileManager preview icon.
$kendo-fab-disabled-shadowStringk-elevation(5)var(--kendo-elevation-5, 0px 8px 16px 0px rgba(0, 0, 0, 0.15))$kendo-file-manager-preview-icon-textColorif($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-file-manager-text, 4 ))#686b6d
Description
The shadow of the disabled FAB.
+
Description
The text color of the FileManager preview icon.
$kendo-fab-active-shadow$kendo-file-manager-preview-icon-border Null null null
Description
The shadow of the active FAB.
-
$kendo-fab-outline-styleStringsolidsolid
Description
The outline style of the FAB.
+
Description
The border color of the FileManager preview icon.
$kendo-fab-outline-width
+ +### Filter + + + + + + + + + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-filter-padding-x Number3px3px$kendo-padding-md-x1rem
Description
The outline width of the FAB.
+
Description
The horizontal padding of the Filter.
$kendo-fab-item-textColor$kendo-component-text#212529$kendo-filter-padding-yNumber$kendo-padding-md-y0.5rem
Description
The base text color of the FAB item.
+
Description
The vertical padding of the Filter.
$kendo-fab-item-bgColor$kendo-component-bg#ffffff$kendo-filter-bottom-marginNumber2.1em2.1em
Description
The base background color of the FAB item.
+
Description
The bottom margin of the Filter.
$kendo-fab-item-borderColor$kendo-component-border#dee2e6$kendo-filter-line-sizeNumber1px1px
Description
The base border color of the FAB item.
+
Description
The width of the line that connects the Filter items.
$kendo-fab-item-icon-textColor$kendo-button-text#212529$kendo-filter-operator-dropdown-widthNumber15em15em
Description
The base text color of the FAB item icon.
+
Description
The width of the dropdown elements in the Filter items.
$kendo-fab-item-icon-bg$kendo-filter-preview-field-text Color$kendo-button-bg#e4e7eb$kendo-color-primary#0d6efd
Description
The base background color of the FAB item icon.
+
Description
The text color of the Filter preview field.
$kendo-fab-item-icon-border$kendo-filter-preview-operator-text Color$kendo-button-border#e4e7eb
Description
The base border color of the FAB item icon.
-
$kendo-fab-item-shadowString$kendo-fab-shadowvar(--kendo-elevation-5, 0px 8px 16px 0px rgba(0, 0, 0, 0.15))
Description
The base shadow of the FAB item.
-
$kendo-fab-item-disabled-shadowString$kendo-fab-disabled-shadowvar(--kendo-elevation-5, 0px 8px 16px 0px rgba(0, 0, 0, 0.15))
Description
The shadow of the disabled FAB item.
-
$kendo-fab-item-active-shadowNull$kendo-fab-active-shadownull
Description
The shadow of the active FAB item.
-
$kendo-fab-item-outline-styleStringsolidsolid
Description
The outline style of the FAB item.
-
$kendo-fab-item-outline-widthNumber3px3px$kendo-subtle-text#6c757d
Description
The outline width of the FAB item.
+
Description
The text color of the Filter preview operator.
$kendo-fab-item-outline-colorColor$kendo-button-bg#e4e7eb$kendo-filter-toolbar-focus-shadowList0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))0 0 0 0.25rem rgba(13, 110, 253, 0.25)
Description
The outline color of the FAB item.
+
Description
The box shadow of the focused Filter toolbar.
-### Floating-label +### Floating-action-button @@ -7411,639 +7498,662 @@ The following table lists the available variables for customizing the Bootstrap - + - - + + - - + - - + + - - - - - - - - + + + + + + - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
$kendo-floating-label-scale$kendo-fab-border-width Number111px1px
Description
The transformation scale of the Floating Label.
+
Description
The width of the border around the FAB.
$kendo-floating-label-font-size$kendo-fab-border-radius Number$kendo-input-font-size1remk-math-div( $kendo-border-radius, 2 )0.1875rem
Description
The font size of the Floating Label.
+
Description
The border radius of the FAB.
$kendo-floating-label-max-widthNumber90%90%
Description
The maximum width of the Floating Label.
+ 		$kendo-fab-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the FAB.
$kendo-floating-label-line-height$kendo-fab-font-size Number$kendo-input-line-height1.5$kendo-font-size-md1rem
Description
The line height of the Floating Label.
+
Description
The font size of the FAB.
$kendo-floating-label-heightCalculationcalc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} )calc(1.5 * 1rem)$kendo-fab-line-heightNumber$kendo-line-height-md1.5
Description
The height of the Floating Label.
+
Description
The line height of the FAB.
$kendo-floating-label-offset-xCalculationcalc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} )calc(0.75rem + 1px)$kendo-fab-padding-xNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The horizontal offset of the Floating Label.
+
Description
The horizontal padding of the FAB.
$kendo-floating-label-offset-yCalculationcalc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} )calc(calc(1.5 * 1rem) + 1px + 0.375rem)$kendo-fab-sm-padding-xNumberk-math-div( $kendo-fab-padding-x, 2 )0.5rem
Description
The vertical offset of the Floating Label.
+
Description
The horizontal padding of the small FAB.
$kendo-floating-label-focus-scale$kendo-fab-md-padding-x Number11$kendo-fab-padding-x1rem
Description
The transformation scale of the focused Floating Label.
+
Description
The horizontal padding of the medium FAB.
$kendo-floating-label-focus-offset-x$kendo-fab-lg-padding-x Number00( $kendo-fab-padding-x * 1.5 )1.5rem
Description
The horizontal offset of the focused Floating Label.
+
Description
The horizontal padding of the large FAB.
$kendo-floating-label-focus-offset-y$kendo-fab-padding-y Number00$kendo-fab-padding-x1rem
Description
The vertical offset of the focused Floating Label.
+
Description
The vertical padding of the FAB.
$kendo-floating-label-transitionList.2s ease-out0.2s ease-out$kendo-fab-sm-padding-yNumberk-math-div( $kendo-fab-padding-y, 2 )0.5rem
Description
The transition of the Floating Label.
+
Description
The vertical padding of the small FAB.
$kendo-floating-label-bgNullnullnull$kendo-fab-md-padding-yNumber$kendo-fab-padding-y1rem
Description
The background color of the Floating Label.
+
Description
The vertical padding of the medium FAB.
$kendo-floating-label-textNullnullnull$kendo-fab-lg-padding-yNumber( $kendo-fab-padding-y * 1.5 )1.5rem
Description
The text color of the Floating Label.
+
Description
The vertical padding of the large FAB.
$kendo-floating-label-focus-bgNullnullnull$kendo-fab-icon-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The background color of the focused Floating Label.
+
Description
The horizontal padding of the FAB icon.
$kendo-floating-label-focus-textNullnullnull$kendo-fab-icon-padding-yNumber$kendo-fab-icon-padding-x0.25rem
Description
The text color of the focused Floating Label.
+
Description
The vertical padding of the FAB icon.
- -### Form - - - - - - - - - - - - - - - - - - + + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - - - - - - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - + +
NameTypeDefault valueComputed value
$kendo-form-spacer
$kendo-fab-icon-spacing Number$kendo-padding-md-x * 22remk-map-get( $kendo-spacing, 0.5 )0.125rem
Description
The padding of the inline Form.
+
Description
The spacing of the FAB icon.
$kendo-form-font-size$kendo-fab-items-padding-x Number$kendo-font-size-md1rem0px0px
Description
The font size of the Form.
+
Description
The horizontal padding of the FAB items.
$kendo-form-line-height$kendo-fab-items-padding-y Number$input-btn-line-height1.5k-map-get( $kendo-spacing, 4 )1rem
Description
The line height of the Form.
+
Description
The vertical padding of the FAB items.
$kendo-form-line-height-emCalculationcalc( #{$kendo-form-line-height} * 1em )calc(1.5 * 1em)$kendo-fab-item-text-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The line height of the Form in em units.
+
Description
The horizontal padding of the FAB item text.
$kendo-form-sm-line-height$kendo-fab-item-text-padding-y Number$kendo-line-height-sm1.25$kendo-fab-item-text-padding-x0.25rem
Description
The line height of the small Form.
+
Description
The vertical padding of the FAB item text.
$kendo-form-lg-line-height$kendo-fab-item-text-border-width Number$kendo-line-height-lg21px1px
Description
The line height of the large Form.
+
Description
The width of the FAB item text border.
$kendo-form-fieldset-marginList2rem 0 02rem 0 0$kendo-fab-item-text-border-radiusNumber4px4px
Description
The margin of the Form fieldset.
+
Description
The border radius of the FAB item text.
$kendo-form-fieldset-padding$kendo-fab-item-text-font-size Number0px0px$kendo-font-size-xs0.75rem
Description
The padding of the Form fieldset.
+
Description
The font size of the FAB item text.
$kendo-form-legend-marginList0 0 1rem0 0 1rem$kendo-fab-item-text-line-heightNumber14px14px
Description
The margin of the Form legend.
+
Description
The line height of the FAB item text.
$kendo-form-legend-padding$kendo-fab-item-icon-padding-x Number0px0pxk-map-get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x0.75rem
Description
The padding of the Form legend.
+
Description
The horizontal padding of the FAB item icon.
$kendo-form-legend-border-widthList0 0 2px0 0 2px$kendo-fab-item-icon-padding-yNumber$kendo-fab-item-icon-padding-x0.75rem
Description
The border width of the Form legend.
+
Description
The vertical padding of the FAB item icon.
$kendo-form-legend-border-styleStringsolidsolid$kendo-fab-item-icon-border-widthNumber00
Description
The border style of the Form legend.
+
Description
The width of the FAB item icon border.
$kendo-form-legend-border-colorColor$kendo-component-border#dee2e6$kendo-fab-item-icon-border-radiusNumber50%50%
Description
The border color of the Form legend.
+
Description
The border radius of the FAB item icon.
$kendo-form-legend-widthNumber100%100%$kendo-fab-theme-colorsMap$kendo-theme-colors("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529)
Description
The width of the Form legend.
+
Description
The theme colors map for the FAB.
$kendo-form-legend-font-sizeNumber$kendo-font-size-sm0.875rem$kendo-fab-sizesMap( + sm: ( + padding-x: $kendo-fab-sm-padding-x, + padding-y: $kendo-fab-sm-padding-y + ), + md: ( + padding-x: $kendo-fab-md-padding-x, + padding-y: $kendo-fab-md-padding-y + ), + lg: ( + padding-x: $kendo-fab-lg-padding-x, + padding-y: $kendo-fab-lg-padding-y + ) +)(sm: (padding-x: 0.5rem, padding-y: 0.5rem), md: (padding-x: 1rem, padding-y: 1rem), lg: (padding-x: 1.5rem, padding-y: 1.5rem))
Description
The font size of the Form legend.
+
Description
The size map for the FAB.
$kendo-form-legend-text-transform$kendo-fab-shadow Stringuppercaseuppercase
Description
The text capitalization of the Form legend.
-
$kendo-form-label-margin-bottomNumberk-map-get( $kendo-spacing, 2 )0.5remk-elevation(5)var(--kendo-elevation-5, 0px 8px 16px 0px rgba(0, 0, 0, 0.15))
Description
The bottom margin of the Form label.
+
Description
The base shadow of the FAB.
$kendo-form-button-margin-xNumber8px8px$kendo-fab-disabled-shadowStringk-elevation(5)var(--kendo-elevation-5, 0px 8px 16px 0px rgba(0, 0, 0, 0.15))
Description
The horizontal margin of the Form buttons.
+
Description
The shadow of the disabled FAB.
$kendo-form-hint-font-sizeNumber$kendo-font-size-xs0.75rem$kendo-fab-active-shadowNullnullnull
Description
The font size of the Form hint.
+
Description
The shadow of the active FAB.
$kendo-form-hint-font-style$kendo-fab-outline-style Stringnormalnormalsolidsolid
Description
The font style of the Form hint.
+
Description
The outline style of the FAB.
$kendo-form-hint-margin-top$kendo-fab-outline-width Number4px4px3px3px
Description
The top margin of the Form hint.
+
Description
The outline width of the FAB.
$kendo-form-sm-rows-spacingNumberk-map-get( $kendo-spacing, 4 )1rem$kendo-fab-item-textColor$kendo-component-text#212529
Description
The row spacing of the small Form.
+
Description
The base text color of the FAB item.
$kendo-form-md-rows-spacingNumber$kendo-form-sm-rows-spacing1rem$kendo-fab-item-bgColor$kendo-component-bg#ffffff
Description
The row spacing of the medium Form.
+
Description
The base background color of the FAB item.
$kendo-form-lg-rows-spacingNumber$kendo-form-sm-rows-spacing1rem$kendo-fab-item-borderColor$kendo-component-border#dee2e6
Description
The row spacing of the large Form.
+
Description
The base border color of the FAB item.
$kendo-form-separator-marginList$kendo-form-md-rows-spacing 0 01rem 0 0$kendo-fab-item-icon-textColor$kendo-button-text#212529
Description
The margin of the Form separator.
+
Description
The base text color of the FAB item icon.
$kendo-form-separator-border-color$kendo-fab-item-icon-bg Color$kendo-form-legend-border-color#dee2e6$kendo-button-bg#e4e7eb
Description
The border color of the Form separator.
+
Description
The base background color of the FAB item icon.
$kendo-horizontal-form-label-padding-topNumber5px5px$kendo-fab-item-icon-borderColor$kendo-button-border#e4e7eb
Description
The top padding of the label in the horizontal Form.
+
Description
The base border color of the FAB item icon.
$kendo-horizontal-form-label-margin-xNumber10px10px$kendo-fab-item-shadowString$kendo-fab-shadowvar(--kendo-elevation-5, 0px 8px 16px 0px rgba(0, 0, 0, 0.15))
Description
The horizontal margin of the label in the horizontal Form.
+
Description
The base shadow of the FAB item.
$kendo-horizontal-form-label-widthNumber25%25%$kendo-fab-item-disabled-shadowString$kendo-fab-disabled-shadowvar(--kendo-elevation-5, 0px 8px 16px 0px rgba(0, 0, 0, 0.15))
Description
The width of the label in the horizontal Form.
+
Description
The shadow of the disabled FAB item.
$kendo-horizontal-form-label-alignStringflex-endflex-end$kendo-fab-item-active-shadowNull$kendo-fab-active-shadownull
Description
The horizontal alignment of the label in the horizontal Form.
+
Description
The shadow of the active FAB item.
$kendo-horizontal-form-field-wrap-max-widthCalculationcalc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} )calc(100% - 25% - 10px)$kendo-fab-item-outline-styleStringsolidsolid
Description
The maximum width of the field wrap in the horizontal Form.
+
Description
The outline style of the FAB item.
$kendo-inline-form-element-width$kendo-fab-item-outline-width Number25%25%3px3px
Description
The width of the inline Form element.
+
Description
The outline width of the FAB item.
$kendo-forms-invalid-color$kendo-fab-item-outline-color Color$kendo-color-error#dc3545$kendo-button-bg#e4e7eb
Description
The invalid text color of the Form.
+
Description
The outline color of the FAB item.
$kendo-label-optional-margin-x
+ +### Floating-label + + + + + + + + + + + + + + + + + + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-floating-label-scale Number6px6px11
Description
The horizontal margin of the optional label in the Form.
+
Description
The transformation scale of the Floating Label.
$kendo-label-optional-font-size$kendo-floating-label-font-size Number$kendo-font-size-xs0.75rem$kendo-input-font-size1rem
Description
The font size of the optional label in the Form.
+
Description
The font size of the Floating Label.
$kendo-label-optional-font-styleStringitalicitalic$kendo-floating-label-max-widthNumber90%90%
Description
The font style of the optional label in the Form.
+
Description
The maximum width of the Floating Label.
$kendo-fieldset-margin$kendo-floating-label-line-height Number30px30px$kendo-input-line-height1.5
Description
The margin of the Form fieldset.
+
Description
The line height of the Floating Label.
$kendo-fieldset-font-size$kendo-floating-label-heightCalculationcalc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} )calc(1.5 * 1rem)
Description
The height of the Floating Label.
+
$kendo-floating-label-offset-xCalculationcalc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} )calc(0.75rem + 1px)
Description
The horizontal offset of the Floating Label.
+
$kendo-floating-label-offset-yCalculationcalc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} )calc(calc(1.5 * 1rem) + 1px + 0.375rem)
Description
The vertical offset of the Floating Label.
+
$kendo-floating-label-focus-scale Number$kendo-h4-font-size1.5rem11
Description
The font size of the Form fieldset.
+
Description
The transformation scale of the focused Floating Label.
$kendo-fieldset-bgNullnullnull$kendo-floating-label-focus-offset-xNumber00
Description
The background color of the Form fieldset.
+
Description
The horizontal offset of the focused Floating Label.
$kendo-fieldset-textNullnullnull$kendo-floating-label-focus-offset-yNumber00
Description
The text color of the Form fieldset.
+
Description
The vertical offset of the focused Floating Label.
$kendo-fieldset-borderNullnullnull$kendo-floating-label-transitionList.2s ease-out0.2s ease-out
Description
The border color of the Form fieldset.
+
Description
The transition of the Floating Label.
$kendo-fieldset-legend-bg$kendo-floating-label-bg Null null null
Description
The background color of the Form legend.
+
Description
The background color of the Floating Label.
$kendo-fieldset-legend-text$kendo-floating-label-text Null null null
Description
The text color of the Form legend.
+
Description
The text color of the Floating Label.
$kendo-fieldset-legend-border$kendo-floating-label-focus-bg Null null null
Description
The border color of the Form legend.
+
Description
The background color of the focused Floating Label.
$kendo-form-sizesMap( - sm: ( - form-rows-spacing: $kendo-form-sm-rows-spacing - ), - md: ( - form-rows-spacing: $kendo-form-md-rows-spacing - ), - lg: ( - form-rows-spacing: $kendo-form-lg-rows-spacing - ) -)(sm: (form-rows-spacing: 1rem), md: (form-rows-spacing: 1rem), lg: (form-rows-spacing: 1rem))$kendo-floating-label-focus-textNullnullnull
Description
The sizes map for the Form.
+
Description
The text color of the focused Floating Label.
-### Grid +### Form @@ -8061,1264 +8171,3973 @@ The following table lists the available variables for customizing the Bootstrap - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - -
$kendo-grid-padding-x$kendo-form-spacer Number$kendo-table-md-cell-padding-x0.5rem$kendo-padding-md-x * 22rem
Description
Horizontal padding of the grid.
+
Description
The padding of the inline Form.
$kendo-grid-padding-y$kendo-form-font-size Number$kendo-table-md-cell-padding-y0.5rem$kendo-font-size-md1rem
Description
Vertical padding of the grid.
+
Description
The font size of the Form.
$kendo-grid-header-padding-x$kendo-form-line-height Number$kendo-grid-padding-x0.5rem$input-btn-line-height1.5
Description
Horizontal padding of the grid header.
+
Description
The line height of the Form.
$kendo-grid-header-padding-yNumber$kendo-grid-padding-y0.5rem$kendo-form-line-height-emCalculationcalc( #{$kendo-form-line-height} * 1em )calc(1.5 * 1em)
Description
Vertical padding of the grid header.
+
Description
The line height of the Form in em units.
$kendo-grid-grouping-header-padding-x$kendo-form-sm-line-height Number$kendo-grid-padding-y0.5rem$kendo-line-height-sm1.25
Description
Horizontal padding of the grid grouping header.
+
Description
The line height of the small Form.
$kendo-grid-grouping-header-padding-y$kendo-form-lg-line-height Number$kendo-grid-grouping-header-padding-x0.5rem$kendo-line-height-lg2
Description
Vertical padding of the grid grouping header.
+
Description
The line height of the large Form.
$kendo-grid-cell-padding-xNumber$kendo-grid-padding-x0.5rem$kendo-form-fieldset-marginList2rem 0 02rem 0 0
Description
Horizontal padding of the grid cell.
+
Description
The margin of the Form fieldset.
$kendo-grid-cell-padding-y$kendo-form-fieldset-padding Number$kendo-grid-padding-y0.5rem0px0px
Description
Vertical padding of the grid cell.
+
Description
The padding of the Form fieldset.
$kendo-grid-filter-cell-padding-xNumber$kendo-grid-padding-y0.5rem$kendo-form-legend-marginList0 0 1rem0 0 1rem
Description
Horizontal padding of the grid filter cell.
+
Description
The margin of the Form legend.
$kendo-grid-filter-cell-padding-y$kendo-form-legend-padding Number$kendo-grid-filter-cell-padding-x0.5rem0px0px
Description
Vertical padding of the grid filter cell.
+
Description
The padding of the Form legend.
$kendo-grid-edit-cell-padding-xNumber$kendo-grid-cell-padding-x0.5rem$kendo-form-legend-border-widthList0 0 2px0 0 2px
Description
Horizontal padding of the grid edit cell.
+
Description
The border width of the Form legend.
$kendo-grid-edit-cell-padding-yNumber5px5px$kendo-form-legend-border-styleStringsolidsolid
Description
Vertical padding of the grid edit cell.
+
Description
The border style of the Form legend.
$kendo-grid-bg$kendo-form-legend-border-color Color$kendo-table-bg#ffffff$kendo-component-border#dee2e6
Description
Background color of the grid component
+
Description
The border color of the Form legend.
$kendo-grid-textColor$kendo-table-text#212529$kendo-form-legend-widthNumber100%100%
Description
Text color of the grid component
+
Description
The width of the Form legend.
$kendo-grid-borderColor$kendo-table-border#dee2e6$kendo-form-legend-font-sizeNumber$kendo-font-size-sm0.875rem
Description
Border color of the grid component
+
Description
The font size of the Form legend.
$kendo-grid-header-bgColor$kendo-table-header-bg#f8f9fa$kendo-form-legend-text-transformStringuppercaseuppercase
Description
Background color of grid header
+
Description
The text capitalization of the Form legend.
$kendo-grid-header-textColor$kendo-table-header-text#212529$kendo-form-label-margin-bottomNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
Text color of grid header
+
Description
The bottom margin of the Form label.
$kendo-grid-header-borderColor$kendo-table-header-border#dee2e6$kendo-form-button-margin-xNumber8px8px
Description
Border color of grid header
+
Description
The horizontal margin of the Form buttons.
$kendo-grid-header-gradientNull$kendo-table-header-gradientnull$kendo-form-hint-font-sizeNumber$kendo-font-size-xs0.75rem
Description
Background gradient of grid header
+
Description
The font size of the Form hint.
$kendo-grid-footer-bgColor$kendo-table-footer-bg#f8f9fa$kendo-form-hint-font-styleStringnormalnormal
Description
Background color of grid footer
+
Description
The font style of the Form hint.
$kendo-grid-footer-textColor$kendo-table-footer-text#212529$kendo-form-hint-margin-topNumber4px4px
Description
Text color of grid footer
+
Description
The top margin of the Form hint.
$kendo-grid-footer-borderColor$kendo-table-footer-border#dee2e6$kendo-form-sm-rows-spacingNumberk-map-get( $kendo-spacing, 4 )1rem
Description
Border color of grid footer
+
Description
The row spacing of the small Form.
$kendo-grid-alt-bgColor$kendo-table-alt-row-bgrgba(0, 0, 0, 0.04)$kendo-form-md-rows-spacingNumber$kendo-form-sm-rows-spacing1rem
Description
Background color of alternating rows in grid
+
Description
The row spacing of the medium Form.
$kendo-grid-alt-textNull$kendo-table-alt-row-textnull$kendo-form-lg-rows-spacingNumber$kendo-form-sm-rows-spacing1rem
Description
Text color of alternating rows in grid
+
Description
The row spacing of the large Form.
$kendo-grid-alt-borderNull$kendo-table-alt-row-bordernull$kendo-form-separator-marginList$kendo-form-md-rows-spacing 0 01rem 0 0
Description
Border color of alternating rows in grid
+
Description
The margin of the Form separator.
$kendo-grid-hover-bg$kendo-form-separator-border-color Color$kendo-table-hover-bgrgba(0, 0, 0, 0.08)$kendo-form-legend-border-color#dee2e6
Description
Background color of hovered rows in grid
+
Description
The border color of the Form separator.
$kendo-grid-hover-textNull$kendo-table-hover-textnull$kendo-horizontal-form-label-padding-topNumber5px5px
Description
Text color of hovered rows in grid
+
Description
The top padding of the label in the horizontal Form.
$kendo-grid-hover-borderNull$kendo-table-hover-bordernull$kendo-horizontal-form-label-margin-xNumber10px10px
Description
Border color of hovered rows in grid
+
Description
The horizontal margin of the label in the horizontal Form.
$kendo-grid-selected-bgColor$kendo-table-selected-bgrgba(13, 110, 253, 0.25)$kendo-horizontal-form-label-widthNumber25%25%
Description
Background color of selected rows in grid
+
Description
The width of the label in the horizontal Form.
$kendo-grid-selected-textColor$kendo-table-selected-text#212529$kendo-horizontal-form-label-alignStringflex-endflex-end
Description
Text color of selected rows in grid
+
Description
The horizontal alignment of the label in the horizontal Form.
$kendo-grid-selected-borderNull$kendo-table-selected-bordernull$kendo-horizontal-form-field-wrap-max-widthCalculationcalc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} )calc(100% - 25% - 10px)
Description
Border color of selected rows in grid
+
Description
The maximum width of the field wrap in the horizontal Form.
$kendo-grid-selection-aggregates-bgColor$kendo-grid-header-bg#f8f9fa$kendo-inline-form-element-widthNumber25%25%
Description
Background color of the selection aggregates container
+
Description
The width of the inline Form element.
$kendo-grid-selection-aggregates-text$kendo-forms-invalid-color Color$kendo-grid-text#212529$kendo-color-error#dc3545
Description
Text color of the selection aggregates container
+
Description
The invalid text color of the Form.
$kendo-grid-selection-aggregates-borderColor$kendo-grid-border#dee2e6$kendo-label-optional-margin-xNumber6px6px
Description
Border color of the selection aggregates container
+
Description
The horizontal margin of the optional label in the Form.
$kendo-grid-selection-aggregates-border-width$kendo-label-optional-font-size Number$kendo-grid-border-width1px$kendo-font-size-xs0.75rem
Description
Border width of the selection aggregates container
+
Description
The font size of the optional label in the Form.
$kendo-grid-selection-aggregates-spacingNumberk-map-get( $kendo-spacing, 2 )0.5rem$kendo-label-optional-font-styleStringitalicitalic
Description
Spacing between the selection aggregates items
+
Description
The font style of the optional label in the Form.
$kendo-grid-selection-aggregates-line-height$kendo-fieldset-margin Number$kendo-grid-line-height1.530px30px
Description
Line height of the selection aggregates container
+
Description
The margin of the Form fieldset.
$kendo-grid-selection-aggregates-font-weight$kendo-fieldset-font-size Number$kendo-font-weight-bold700$kendo-h4-font-size1.5rem
Description
Font weight of the selection aggregates container
+
Description
The font size of the Form fieldset.
$kendo-grid-row-resizer-hover-bgColorif($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)$kendo-fieldset-bgNullnullnull
Description
Background color of the grid row resize indicator
+
Description
The background color of the Form fieldset.
$kendo-grid-row-resizer-active-bgColor$kendo-color-primary#0d6efd$kendo-fieldset-textNullnullnull
Description
Active background color of the grid row resize indicator
+
Description
The text color of the Form fieldset.
$kendo-grid-row-resizer-heightNumberk-map-get( $kendo-spacing, .5 )0.125rem$kendo-fieldset-borderNullnullnull
Description
Height of the grid row resize indicator
-
- -### Input - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - + +
NameTypeDefault valueComputed value
$kendo-input-default-widthNumber100%100%
Description
The default width of the Input components.
+
Description
The border color of the Form fieldset.
$kendo-input-border-widthNumber$input-border-width1px$kendo-fieldset-legend-bgNullnullnull
Description
The border width of the Input components.
+
Description
The background color of the Form legend.
$kendo-input-border-radius$kendo-fieldset-legend-text Null null null
Description
The border radius of the Input components.
+
Description
The text color of the Form legend.
$kendo-input-padding-xNumber$input-padding-x0.75rem$kendo-fieldset-legend-borderNullnullnull
Description
The horizontal padding of the Input components.
+
Description
The border color of the Form legend.
$kendo-input-sm-padding-xNumber$input-padding-x-sm0.5rem$kendo-form-sizesMap( + sm: ( + form-rows-spacing: $kendo-form-sm-rows-spacing + ), + md: ( + form-rows-spacing: $kendo-form-md-rows-spacing + ), + lg: ( + form-rows-spacing: $kendo-form-lg-rows-spacing + ) +)(sm: (form-rows-spacing: 1rem), md: (form-rows-spacing: 1rem), lg: (form-rows-spacing: 1rem))
Description
The horizontal padding of the small Input components.
+
Description
The sizes map for the Form.
$kendo-input-md-padding-x
+ +### Grid + + + + + + + + + + + + + + + + + + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - + - - - - - - - - - - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - + - - + - - + + - - + - + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - + - + - - + + + + + + + + + + - + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + - - + + - - + - + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - + +
NameTypeDefault valueComputed value
$kendo-grid-padding-x Number$input-padding-x0.75rem$kendo-table-md-cell-padding-x0.5rem
Description
The horizontal padding of the medium Input components.
+
Description
Horizontal padding of the grid.
$kendo-input-lg-padding-x$kendo-grid-padding-y Number$input-padding-x-lg1rem$kendo-table-md-cell-padding-y0.5rem
Description
The horizontal padding of the large Input components.
+
Description
Vertical padding of the grid.
$kendo-input-padding-y$kendo-grid-header-padding-x Number$input-padding-y0.375rem$kendo-grid-padding-x0.5rem
Description
The vertical padding of input components.
+
Description
Horizontal padding of the grid header.
$kendo-input-sm-padding-y$kendo-grid-header-padding-y Number$input-padding-y-sm0.25rem$kendo-grid-padding-y0.5rem
Description
The vertical padding of the small Input components.
+
Description
Vertical padding of the grid header.
$kendo-input-md-padding-y$kendo-grid-grouping-header-padding-x Number$input-padding-y0.375rem$kendo-grid-padding-y0.5rem
Description
The vertical padding of the medium Input components.
+
Description
Horizontal padding of the grid grouping header.
$kendo-input-lg-padding-y$kendo-grid-grouping-header-padding-y Number$input-padding-y-lg$kendo-grid-grouping-header-padding-x 0.5rem
Description
The vertical padding of the large Input components.
-
$kendo-input-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of input components.
+
Description
Vertical padding of the grid grouping header.
$kendo-input-font-size$kendo-grid-cell-padding-x Number$kendo-font-size-md1rem$kendo-grid-padding-x0.5rem
Description
The font size of input components.
+
Description
Horizontal padding of the grid cell.
$kendo-input-sm-font-size$kendo-grid-cell-padding-y Number$kendo-font-size-sm0.875rem$kendo-grid-padding-y0.5rem
Description
The font size of the small Input components.
+
Description
Vertical padding of the grid cell.
$kendo-input-md-font-size$kendo-grid-filter-cell-padding-x Number$kendo-font-size-md1rem$kendo-grid-padding-y0.5rem
Description
The font size of the medium Input components.
+
Description
Horizontal padding of the grid filter cell.
$kendo-input-lg-font-size$kendo-grid-filter-cell-padding-y Number$kendo-font-size-md1rem$kendo-grid-filter-cell-padding-x0.5rem
Description
The font size of the large Input components.
+
Description
Vertical padding of the grid filter cell.
$kendo-input-line-height$kendo-grid-edit-cell-padding-x Number$input-line-height1.5$kendo-grid-cell-padding-x0.5rem
Description
The line height of input components.
+
Description
Horizontal padding of the grid edit cell.
$kendo-input-sm-line-height$kendo-grid-edit-cell-padding-y Numberk-math-div( 20, 14 )1.42857142865px5px
Description
The line height of the small Input components.
+
Description
Vertical padding of the grid edit cell.
$kendo-input-md-line-heightNumber$kendo-line-height-md1.5$kendo-grid-bgColor$kendo-table-bg#ffffff
Description
The line height of the medium Input components.
+
Description
Background color of the grid component
$kendo-input-lg-line-heightNumber$kendo-line-height-md1.5$kendo-grid-textColor$kendo-table-text#212529
Description
The line height of the large Input components.
+
Description
Text color of the grid component
$kendo-input-sizesMap( - sm: ( - padding-x: $kendo-input-sm-padding-x, - padding-y: $kendo-input-sm-padding-y, - font-size: $kendo-input-sm-font-size, - line-height: $kendo-input-sm-line-height, - button-padding-x: $kendo-input-sm-padding-y, - button-padding-y: $kendo-input-sm-padding-y - ), - md: ( - padding-x: $kendo-input-md-padding-x, - padding-y: $kendo-input-md-padding-y, - font-size: $kendo-input-md-font-size, - line-height: $kendo-input-md-line-height, - button-padding-x: $kendo-input-md-padding-y, - button-padding-y: $kendo-input-md-padding-y - ), - lg: ( - padding-x: $kendo-input-lg-padding-x, - padding-y: $kendo-input-lg-padding-y, - font-size: $kendo-input-lg-font-size, - line-height: $kendo-input-lg-line-height, - button-padding-x: $kendo-input-lg-padding-y, - button-padding-y: $kendo-input-lg-padding-y - ) -)(sm: (padding-x: 0.5rem, padding-y: 0.25rem, font-size: 0.875rem, line-height: 1.4285714286, button-padding-x: 0.25rem, button-padding-y: 0.25rem), md: (padding-x: 0.75rem, padding-y: 0.375rem, font-size: 1rem, line-height: 1.5, button-padding-x: 0.375rem, button-padding-y: 0.375rem), lg: (padding-x: 1rem, padding-y: 0.5rem, font-size: 1rem, line-height: 1.5, button-padding-x: 0.5rem, button-padding-y: 0.5rem))$kendo-grid-borderColor$kendo-table-border#dee2e6
Description
The sizes map for the Input components.
+
Description
Border color of the grid component
$kendo-input-bg$kendo-grid-header-bg Color$input-bg#ffffff$kendo-table-header-bg#f8f9fa
Description
The background color of the Input components.
+
Description
Background color of grid header
$kendo-input-text$kendo-grid-header-text Color$input-color$kendo-table-header-text #212529
Description
The text color of the Input components.
+
Description
Text color of grid header
$kendo-input-border$kendo-grid-header-border Color$input-border-color#ced4da$kendo-table-header-border#dee2e6
Description
The border color of the Input components.
+
Description
Border color of grid header
$kendo-input-shadow$kendo-grid-header-gradient Nullnull$kendo-table-header-gradient null
Description
The shadow of the Input components.
+
Description
Background gradient of grid header
$kendo-input-hover-bg$kendo-grid-footer-bgColor$kendo-table-footer-bg#f8f9fa
Description
Background color of grid footer
+
$kendo-grid-footer-textColor$kendo-table-footer-text#212529
Description
Text color of grid footer
+
$kendo-grid-footer-borderColor$kendo-table-footer-border#dee2e6
Description
Border color of grid footer
+
$kendo-grid-alt-bgColor$kendo-table-alt-row-bgrgba(0, 0, 0, 0.04)
Description
Background color of alternating rows in grid
+
$kendo-grid-alt-text Nullnull$kendo-table-alt-row-text null
Description
The background color of the hovered Input components.
+
Description
Text color of alternating rows in grid
$kendo-input-hover-text$kendo-grid-alt-border Nullnull$kendo-table-alt-row-border null
Description
The text color of the hovered Input components.
+
Description
Border color of alternating rows in grid
$kendo-input-hover-border$kendo-grid-hover-bgColor$kendo-table-hover-bgrgba(0, 0, 0, 0.08)
Description
Background color of hovered rows in grid
+
$kendo-grid-hover-text Nullnull$kendo-table-hover-text null
Description
The border color of the hovered Input components.
+
Description
Text color of hovered rows in grid
$kendo-input-hover-shadow$kendo-grid-hover-border Null$kendo-table-hover-border null
Description
Border color of hovered rows in grid
+
$kendo-grid-selected-bgColor$kendo-table-selected-bgrgba(13, 110, 253, 0.25)
Description
Background color of selected rows in grid
+
$kendo-grid-selected-textColor$kendo-table-selected-text#212529
Description
Text color of selected rows in grid
+
$kendo-grid-selected-borderNull$kendo-table-selected-border null
Description
The shadow of the hovered Input components.
+
Description
Border color of selected rows in grid
$kendo-input-focus-bg$kendo-grid-selection-aggregates-bg Color$input-focus-bg#ffffff$kendo-grid-header-bg#f8f9fa
Description
The background color of the focused Input components.
+
Description
Background color of the selection aggregates container
$kendo-input-focus-text$kendo-grid-selection-aggregates-text Color$input-focus-color$kendo-grid-text #212529
Description
The text color of the focused Input components.
+
Description
Text color of the selection aggregates container
$kendo-input-focus-border$kendo-grid-selection-aggregates-border Color$input-focus-border-color#86b7fe$kendo-grid-border#dee2e6
Description
The border color of the focused Input components.
+
Description
Border color of the selection aggregates container
$kendo-input-focus-shadowList$input-focus-box-shadow0 0 0 0.25rem rgba(13, 110, 253, 0.25)$kendo-grid-selection-aggregates-border-widthNumber$kendo-grid-border-width1px
Description
The shadow of the focused Input components.
+
Description
Border width of the selection aggregates container
$kendo-input-selected-bgNullnullnull$kendo-grid-selection-aggregates-spacingNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The background color of the selected Input components.
+
Description
Spacing between the selection aggregates items
$kendo-input-selected-textNullnullnull$kendo-grid-selection-aggregates-line-heightNumber$kendo-grid-line-height1.5
Description
The text color of the selected Input components.
+
Description
Line height of the selection aggregates container
$kendo-input-disabled-bgNullnullnull$kendo-grid-selection-aggregates-font-weightNumber$kendo-font-weight-bold700
Description
The background color of the disabled Input components.
+
Description
Font weight of the selection aggregates container
$kendo-input-disabled-textNullnullnull$kendo-grid-row-resizer-hover-bgColorif($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)
Description
The text color of the disabled Input components.
+
Description
Background color of the grid row resize indicator
$kendo-input-disabled-borderNullnullnull$kendo-grid-row-resizer-active-bgColor$kendo-color-primary#0d6efd
Description
The border color of the disabled Input components.
+
Description
Active background color of the grid row resize indicator
$kendo-input-disabled-gradientNullnullnull$kendo-grid-row-resizer-heightNumberk-map-get( $kendo-spacing, .5 )0.125rem
Description
The gradient of the disabled Input components.
+
Description
Height of the grid row resize indicator
+ +### Input + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-input-default-widthNumber100%100%
$kendo-input-disabled-shadow
Description
The default width of the Input components.
+
$kendo-input-border-widthNumber$input-border-width1px
Description
The border width of the Input components.
+
$kendo-input-border-radius Null null null
Description
The shadow of the disabled Input components.
+
Description
The border radius of the Input components.
+
$kendo-input-padding-xNumber$input-padding-x0.75rem
Description
The horizontal padding of the Input components.
+
$kendo-input-sm-padding-xNumber$input-padding-x-sm0.5rem
Description
The horizontal padding of the small Input components.
+
$kendo-input-md-padding-xNumber$input-padding-x0.75rem
Description
The horizontal padding of the medium Input components.
+
$kendo-input-lg-padding-xNumber$input-padding-x-lg1rem
Description
The horizontal padding of the large Input components.
+
$kendo-input-padding-yNumber$input-padding-y0.375rem
Description
The vertical padding of input components.
+
$kendo-input-sm-padding-yNumber$input-padding-y-sm0.25rem
Description
The vertical padding of the small Input components.
+
$kendo-input-md-padding-yNumber$input-padding-y0.375rem
Description
The vertical padding of the medium Input components.
+
$kendo-input-lg-padding-yNumber$input-padding-y-lg0.5rem
Description
The vertical padding of the large Input components.
+
$kendo-input-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of input components.
+
$kendo-input-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of input components.
+
$kendo-input-sm-font-sizeNumber$kendo-font-size-sm0.875rem
Description
The font size of the small Input components.
+
$kendo-input-md-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the medium Input components.
+
$kendo-input-lg-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the large Input components.
+
$kendo-input-line-heightNumber$input-line-height1.5
Description
The line height of input components.
+
$kendo-input-sm-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The line height of the small Input components.
+
$kendo-input-md-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the medium Input components.
+
$kendo-input-lg-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the large Input components.
+
$kendo-input-sizesMap( + sm: ( + padding-x: $kendo-input-sm-padding-x, + padding-y: $kendo-input-sm-padding-y, + font-size: $kendo-input-sm-font-size, + line-height: $kendo-input-sm-line-height, + button-padding-x: $kendo-input-sm-padding-y, + button-padding-y: $kendo-input-sm-padding-y + ), + md: ( + padding-x: $kendo-input-md-padding-x, + padding-y: $kendo-input-md-padding-y, + font-size: $kendo-input-md-font-size, + line-height: $kendo-input-md-line-height, + button-padding-x: $kendo-input-md-padding-y, + button-padding-y: $kendo-input-md-padding-y + ), + lg: ( + padding-x: $kendo-input-lg-padding-x, + padding-y: $kendo-input-lg-padding-y, + font-size: $kendo-input-lg-font-size, + line-height: $kendo-input-lg-line-height, + button-padding-x: $kendo-input-lg-padding-y, + button-padding-y: $kendo-input-lg-padding-y + ) +)(sm: (padding-x: 0.5rem, padding-y: 0.25rem, font-size: 0.875rem, line-height: 1.4285714286, button-padding-x: 0.25rem, button-padding-y: 0.25rem), md: (padding-x: 0.75rem, padding-y: 0.375rem, font-size: 1rem, line-height: 1.5, button-padding-x: 0.375rem, button-padding-y: 0.375rem), lg: (padding-x: 1rem, padding-y: 0.5rem, font-size: 1rem, line-height: 1.5, button-padding-x: 0.5rem, button-padding-y: 0.5rem))
Description
The sizes map for the Input components.
+
$kendo-input-bgColor$input-bg#ffffff
Description
The background color of the Input components.
+
$kendo-input-textColor$input-color#212529
Description
The text color of the Input components.
+
$kendo-input-borderColor$input-border-color#ced4da
Description
The border color of the Input components.
+
$kendo-input-shadowNullnullnull
Description
The shadow of the Input components.
+
$kendo-input-hover-bgNullnullnull
Description
The background color of the hovered Input components.
+
$kendo-input-hover-textNullnullnull
Description
The text color of the hovered Input components.
+
$kendo-input-hover-borderNullnullnull
Description
The border color of the hovered Input components.
+
$kendo-input-hover-shadowNullnullnull
Description
The shadow of the hovered Input components.
+
$kendo-input-focus-bgColor$input-focus-bg#ffffff
Description
The background color of the focused Input components.
+
$kendo-input-focus-textColor$input-focus-color#212529
Description
The text color of the focused Input components.
+
$kendo-input-focus-borderColor$input-focus-border-color#86b7fe
Description
The border color of the focused Input components.
+
$kendo-input-focus-shadowList$input-focus-box-shadow0 0 0 0.25rem rgba(13, 110, 253, 0.25)
Description
The shadow of the focused Input components.
+
$kendo-input-selected-bgNullnullnull
Description
The background color of the selected Input components.
+
$kendo-input-selected-textNullnullnull
Description
The text color of the selected Input components.
+
$kendo-input-disabled-bgNullnullnull
Description
The background color of the disabled Input components.
+
$kendo-input-disabled-textNullnullnull
Description
The text color of the disabled Input components.
+
$kendo-input-disabled-borderNullnullnull
Description
The border color of the disabled Input components.
+
$kendo-input-disabled-gradientNullnullnull
Description
The gradient of the disabled Input components.
+
$kendo-input-disabled-shadowNullnullnull
Description
The shadow of the disabled Input components.
+
$kendo-input-outline-bgNullnullnull
Description
The background color of the outline Input components.
+
$kendo-input-outline-textColor$kendo-base-text#212529
Description
The text color of the outline Input components.
+
$kendo-input-outline-borderColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-base-text, .5 ))rgba(33, 37, 41, 0.5)
Description
The border color of the outline Input components.
+
$kendo-input-outline-hover-bgNullnullnull
Description
The background color of the outline hovered Input components.
+
$kendo-input-outline-hover-textNullnullnull
Description
The text color of the outline hovered Input components.
+
$kendo-input-outline-hover-borderNullnullnull
Description
The border color of the outline hovered Input components.
+
$kendo-input-outline-focus-bgNullnullnull
Description
The background color of the outline focused Input components.
+
$kendo-input-outline-focus-textNullnullnull
Description
The text color of the outline focused Input components.
+
$kendo-input-outline-focus-borderColor$kendo-input-focus-border#86b7fe
Description
The border color of the outline focused Input components.
+
$kendo-input-outline-focus-shadowList$kendo-input-focus-shadow0 0 0 0.25rem rgba(13, 110, 253, 0.25)
Description
The shadow of the outline focused Input components.
+
$kendo-input-flat-bgNullnullnull
Description
The background color of the flat Input components.
+
$kendo-input-flat-textColor$kendo-input-text#212529
Description
The text color of the flat Input components.
+
$kendo-input-flat-borderColor$kendo-input-border#ced4da
Description
The border color of the flat Input components.
+
$kendo-input-flat-hover-bgNullnullnull
Description
The background color of the flat hovered Input components.
+
$kendo-input-flat-hover-textNullnullnull
Description
The text color of the flat hovered Input components.
+
$kendo-input-flat-hover-borderNull$kendo-input-hover-bordernull
Description
The border color of the flat hovered Input components.
+
$kendo-input-flat-focus-bgNullnullnull
Description
The background color of the flat focused Input components.
+
$kendo-input-flat-focus-textNullnullnull
Description
The text color of the flat focused Input components.
+
$kendo-input-flat-focus-borderColor$kendo-input-focus-border#86b7fe
Description
The border color of the flat focused Input components.
+
$kendo-input-flat-focus-shadowList$kendo-input-focus-shadow0 0 0 0.25rem rgba(13, 110, 253, 0.25)
Description
The shadow of the flat focused Input components.
+
$kendo-input-placeholder-textColor$input-placeholder-color#6c757d
Description
The text color of the Input placeholder.
+
$kendo-input-placeholder-opacityNumber11
Description
The opacity of the Input placeholder.
+
$kendo-input-clear-value-textNullnullnull
Description
The color of the Input clear value icon.
+
$kendo-input-clear-value-opacityNumber.50.5
Description
The opacity of the Input clear value icon.
+
$kendo-input-clear-value-hover-textNullnullnull
Description
The color of the hovered Input clear value icon.
+
$kendo-input-clear-value-hover-opacityNumber11
Description
The opacity of the hovered Input clear value icon.
+
$kendo-input-values-margin-yNumberk-map-get( $kendo-spacing, 0.5 )0.125rem
Description
The vertical margin of the clear value icon.
+
$kendo-input-values-margin-xNumber$kendo-input-values-margin-y0.125rem
Description
The horizontal margin of the clear value icon.
+
$kendo-input-button-widthNullnullnull
Description
The width of the Input button.
+
$kendo-input-button-border-widthNumber1px1px
Description
The border width of the Input button.
+
$kendo-input-spinner-widthNullnullnull
Description
The width of the Input spinner button.
+
$kendo-input-spinner-icon-offsetNullnullnull
Description
The icon offset of the Input spinner button.
+
$kendo-input-separator-textColor$kendo-component-border#dee2e6
Description
The color of the Input separator.
+
$kendo-input-separator-opacityNumber.50.5
Description
The opacity of the Input separator.
+
$kendo-input-prefix-textColor$kendo-subtle-text#6c757d
Description
The text color of the Input prefix.
+
$kendo-input-suffix-textColor$kendo-subtle-text#6c757d
Description
The text color of the Input suffix.
+
$kendo-input-invalid-borderColor$kendo-invalid-border#dc3545
Description
The border color of the invalid Input components.
+
$kendo-input-invalid-shadowList$kendo-invalid-shadow0 0 0 0.25rem rgba(220, 53, 69, 0.25)
Description
The shadow of the invalid Input components.
+
$kendo-input-valid-borderColor$kendo-valid-border#198754
Description
The border color of the valid Input components.
+
$kendo-input-valid-shadowList$kendo-valid-shadow0 0 0 0.25rem rgba(25, 135, 84, 0.25)
Description
The shadow of the valid Input components.
+
+ +### List + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-list-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the List components.
+
$kendo-list-font-sizeNullnullnull
Description
The font size of the List component, if no size is set.
+
$kendo-list-line-heightNullnullnull
Description
The line height of the List component, if no size is set.
+
$kendo-list-header-padding-xNullnullnull
Description
The horizontal padding of List header, if no size is set.
+
$kendo-list-header-padding-yNullnullnull
Description
The vertical padding of the List header, if no size is set.
+
$kendo-list-header-border-widthList0 0 1px0 0 1px
Description
The border width of the List header.
+
$kendo-list-header-font-sizeNullnullnull
Description
The font size of the List header, if no size is set.
+
$kendo-list-header-line-heightNullnullnull
Description
The line height of the List header, if no size is set.
+
$kendo-list-header-font-weightNumber$kendo-font-weight-bold700
Description
The font weight of the List header.
+
$kendo-list-item-padding-xNullnullnull
Description
The horizontal padding of the List items, when no size is set.
+
$kendo-list-item-padding-yNullnullnull
Description
The vertical padding of the List items, when no size is set.
+
$kendo-list-item-font-sizeNullnullnull
Description
The font size of the List items, if no size is set.
+
$kendo-list-item-line-heightNullnullnull
Description
The line height of the List items, if no size is set.
+
$kendo-list-group-item-padding-xNullnullnull
Description
The horizontal padding of the List group items, when no size is set.
+
$kendo-list-group-item-padding-yNullnullnull
Description
The vertical padding of the List group items, when no size is set.
+
$kendo-list-group-item-border-widthList1px 0 01px 0 0
Description
The border width of the List group items.
+
$kendo-list-group-item-font-sizeNullnullnull
Description
The font size of the List group items, if no size is set.
+
$kendo-list-group-item-line-heightNullnullnull
Description
The line height of the List group items, if no size is set.
+
$kendo-list-group-item-font-weightNumber$kendo-font-weight-bold700
Description
The font weight of a List group item.
+
$kendo-list-sizesMap( + sm: ( + font-size: $kendo-list-sm-font-size, + line-height: $kendo-list-sm-line-height, + header-padding-x: $kendo-list-sm-header-padding-x, + header-padding-y: $kendo-list-sm-header-padding-y, + header-font-size: null, + header-line-height: null, + item-padding-x: $kendo-list-sm-item-padding-x, + item-padding-y: $kendo-list-sm-item-padding-y, + item-font-size: null, + item-line-height: null, + group-item-padding-x: $kendo-list-sm-group-item-padding-x, + group-item-padding-y: $kendo-list-sm-group-item-padding-y, + group-item-font-size: null, + group-item-line-height: null + ), + md: ( + font-size: $kendo-list-md-font-size, + line-height: $kendo-list-md-line-height, + header-padding-x: $kendo-list-md-header-padding-x, + header-padding-y: $kendo-list-md-header-padding-y, + header-font-size: null, + header-line-height: null, + item-padding-x: $kendo-list-md-item-padding-x, + item-padding-y: $kendo-list-md-item-padding-y, + item-font-size: null, + item-line-height: null, + group-item-padding-x: $kendo-list-md-group-item-padding-x, + group-item-padding-y: $kendo-list-md-group-item-padding-y, + group-item-font-size: null, + group-item-line-height: null + ), + lg: ( + font-size: $kendo-list-lg-font-size, + line-height: $kendo-list-lg-line-height, + header-padding-x: $kendo-list-lg-header-padding-x, + header-padding-y: $kendo-list-lg-header-padding-y, + header-font-size: null, + header-line-height: null, + item-padding-x: $kendo-list-lg-item-padding-x, + item-padding-y: $kendo-list-lg-item-padding-y, + item-font-size: null, + item-line-height: null, + group-item-padding-x: $kendo-list-lg-group-item-padding-x, + group-item-padding-y: $kendo-list-lg-group-item-padding-y, + group-item-font-size: null, + group-item-line-height: null + ) +)(sm: (font-size: 0.875rem, line-height: 1.4285714286, header-padding-x: 1rem, header-padding-y: 0.25rem, header-font-size: null, header-line-height: null, item-padding-x: 1rem, item-padding-y: 0.25rem, item-font-size: null, item-line-height: null, group-item-padding-x: 1rem, group-item-padding-y: 0.125rem, group-item-font-size: null, group-item-line-height: null), md: (font-size: 1rem, line-height: 1.5, header-padding-x: 1rem, header-padding-y: 0.25rem, header-font-size: null, header-line-height: null, item-padding-x: 1rem, item-padding-y: 0.25rem, item-font-size: null, item-line-height: null, group-item-padding-x: 1rem, group-item-padding-y: 0.25rem, group-item-font-size: null, group-item-line-height: null), lg: (font-size: 1rem, line-height: 1.5, header-padding-x: 1rem, header-padding-y: 0.5rem, header-font-size: null, header-line-height: null, item-padding-x: 1rem, item-padding-y: 0.5rem, item-font-size: null, item-line-height: null, group-item-padding-x: 1rem, group-item-padding-y: 0.375rem, group-item-font-size: null, group-item-line-height: null))
Description
The map with the sizes of the List.
+
$kendo-list-bgColor$kendo-component-bg#ffffff
Description
The background color of the List component.
+
$kendo-list-textColor$kendo-component-text#212529
Description
The text color of the List component.
+
$kendo-list-borderColor$kendo-component-border#dee2e6
Description
The border color of the List component.
+
$kendo-list-header-bgNullnullnull
Description
The background color of the List header.
+
$kendo-list-header-textNullnullnull
Description
The text color of the List header
+
$kendo-list-header-borderStringinheritinherit
Description
The border color of the List header.
+
$kendo-list-header-shadowNullnullnull
Description
The box shadow of the List header.
+
$kendo-list-item-bgNullnullnull
Description
The background color of the List items.
+
$kendo-list-item-textNullnullnull
Description
The text color of the List items.
+
$kendo-list-item-hover-bgColor$kendo-hover-bg#e9ecef
Description
The background color of the hovered List items.
+
$kendo-list-item-hover-textColor$kendo-hover-text#212529
Description
The text color of the hovered List items.
+
$kendo-list-item-focus-bgNullnullnull
Description
The background color of the focused List items.
+
$kendo-list-item-focus-textNullnullnull
Description
The text color of the focused List items.
+
$kendo-list-item-focus-shadowListinset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-list-text, .15 ))inset 0 0 0 3px rgba(33, 37, 41, 0.15)
Description
The box shadow of the focused List items.
+
$kendo-list-item-selected-bgColor$kendo-selected-bg#0d6efd
Description
The background color of the selected List items.
+
$kendo-list-item-selected-textColor$kendo-selected-textwhite
Description
The text color of the selected List items.
+
$kendo-list-group-item-bgNullnullnull
Description
The background color of the List group items.
+
$kendo-list-group-item-textNullnullnull
Description
The text color of the List group items.
+
$kendo-list-group-item-borderStringinheritinherit
Description
The border color of the List group items..
+
$kendo-list-group-item-shadowNullnullnull
Description
The base shadow of the List group items.
+
$kendo-list-no-data-textColor$kendo-subtle-text#6c757d
Description
The color of the 'No Data' text.
+
$kendo-list-option-label-textColor$kendo-subtle-text#6c757d
Description
The color of the 'Option Label' text.
+
+ +### Listbox + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-listbox-spacingNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The spacing between the ListBox elements.
+
$kendo-listbox-button-spacingNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The spacing between the ListBox buttons.
+
$kendo-listbox-widthNumber10em10em
Description
The width of the ListBox.
+
$kendo-listbox-default-heightNumber200px200px
Description
The height of the ListBox.
+
$kendo-listbox-border-widthNumber1px1px
Description
The width of the border around the ListBox.
+
$kendo-listbox-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the ListBox.
+
$kendo-listbox-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the ListBox.
+
$kendo-listbox-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the ListBoxx.
+
$kendo-listbox-textColor$kendo-component-text#212529
Description
The text color of the ListBox.
+
$kendo-listbox-bgColor$kendo-component-bg#ffffff
Description
The background color of the ListBox.
+
$kendo-listbox-borderColor$kendo-component-border#dee2e6
Description
The border color of the ListBox.
+
$kendo-listbox-item-padding-xNullnullnull
Description
The inline padding of the ListBox item.
+
$kendo-listbox-item-padding-yNullnullnull
Description
The block padding of the ListBox item.
+
$kendo-listbox-drop-hint-widthNumber1px1px
Description
The width of the ListBox drop hint.
+
$kendo-listbox-drop-hint-border-widthNullnullnull
Description
The width of the border around the ListBox drop hint.
+
+ +### Listview + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-listview-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The horizontal padding of the ListView.
+
$kendo-listview-padding-yNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The vertical padding of the ListView.
+
$kendo-listview-border-widthNumber1px1px
Description
The width of the border around bordered ListView.
+
$kendo-listview-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the ListView.
+
$kendo-listview-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the ListView.
+
$kendo-listview-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the ListView.
+
$kendo-listview-textColor$kendo-component-text#212529
Description
The text color of the ListView.
+
$kendo-listview-bgColor$kendo-component-bg#ffffff
Description
The background color of the ListView.
+
$kendo-listview-borderColor$kendo-component-border#dee2e6
Description
The border color of the ListView.
+
$kendo-listview-item-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The horizontal padding of the ListView items.
+
$kendo-listview-item-padding-yNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The vertical padding of the ListView items.
+
$kendo-listview-item-selected-textNullnullnull
Description
The text color of the selected ListView items.
+
$kendo-listview-item-selected-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 ))rgba(13, 110, 253, 0.25)
Description
The background color of the selected ListView items.
+
$kendo-listview-item-selected-borderNullnullnull
Description
The border color of the selected ListView items.
+
$kendo-listview-item-focus-textNullnullnull
Description
The text color of the focused ListView items.
+
$kendo-listview-item-focus-bgNullnullnull
Description
The background color of the focused ListView items.
+
$kendo-listview-item-focus-borderNullnullnull
Description
The border color of the focused ListView items.
+
$kendo-listview-item-focus-shadowListinset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-listview-text, .15 ))inset 0 0 0 3px rgba(33, 37, 41, 0.15)
Description
The box shadow of the focused ListView items.
+
+ +### Loader + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-loader-segment-border-radiusNumber50%50%
Description
The border radius of the Loader segment.
+
$kendo-loader-sm-segment-sizeNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The size of the small Loader segment.
+
$kendo-loader-md-segment-sizeNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The size of the medium Loader segment.
+
$kendo-loader-lg-segment-sizeNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The size of the large Loader segment.
+
$kendo-loader-sm-paddingNumberk-math-div( $kendo-loader-sm-segment-size, 2 )0.125rem
Description
The padding of the small Loader.
+
$kendo-loader-md-paddingNumberk-math-div( $kendo-loader-md-segment-size, 2 )0.25rem
Description
The padding of the medium Loader.
+
$kendo-loader-lg-paddingNumberk-math-div( $kendo-loader-lg-segment-size, 2 )0.5rem
Description
The padding of the large Loader.
+
$kendo-loader-sm-spinner-3-widthNumber( $kendo-loader-sm-segment-size * 4 )1rem
Description
The width of the small spinner-3 Loader.
+
$kendo-loader-md-spinner-3-widthNumber( $kendo-loader-md-segment-size * 4 )2rem
Description
The width of the medium spinner-3 Loader.
+
$kendo-loader-lg-spinner-3-widthNumber( $kendo-loader-lg-segment-size * 4 )4rem
Description
The width of the large spinner-3 Loader.
+
$kendo-loader-sm-spinner-3-heightNumber( $kendo-loader-sm-spinner-3-width * $equilateral-height )0.8660254038rem
Description
The height of the small spinner-3 Loader.
+
$kendo-loader-md-spinner-3-heightNumber( $kendo-loader-md-spinner-3-width * $equilateral-height )1.7320508076rem
Description
The height of the medium spinner-3 Loader.
+
$kendo-loader-lg-spinner-3-heightNumber( $kendo-loader-lg-spinner-3-width * $equilateral-height )3.4641016152rem
Description
The height of the large spinner-3 Loader.
+
$kendo-loader-sm-spinner-4-widthNumber$kendo-loader-sm-segment-size * 41rem
Description
The width of the small spinner-4 Loader.
+
$kendo-loader-md-spinner-4-widthNumber$kendo-loader-md-segment-size * 42rem
Description
The width of the medium spinner-4 Loader.
+
$kendo-loader-lg-spinner-4-widthNumber$kendo-loader-lg-segment-size * 44rem
Description
The width of the large spinner-4 Loader.
+
$kendo-loader-sm-spinner-4-heightNumber$kendo-loader-sm-spinner-4-width1rem
Description
The height of the small spinner-4 Loader.
+
$kendo-loader-md-spinner-4-heightNumber$kendo-loader-md-spinner-4-width2rem
Description
The height of the medium spinner-4 Loader.
+
$kendo-loader-lg-spinner-4-heightNumber$kendo-loader-lg-spinner-4-width4rem
Description
The height of the large spinner-4 Loader.
+
$kendo-loader-secondary-bgColor#212529#212529
Description
The color of the Loader based on the secondary theme color.
+
$kendo-loader-container-panel-border-widthNumber1px1px
Description
The border width of the container panel.
+
$kendo-loader-container-panel-border-styleStringsolidsolid
Description
The border style of the container panel.
+
$kendo-loader-container-panel-border-colorColor$kendo-component-border#dee2e6
Description
The border color of the container panel.
+
$kendo-loader-container-panel-border-radiusNumber$kendo-border-radius-md0.375rem
Description
The border radius of the container panel.
+
$kendo-loader-container-panel-bgColor$kendo-color-white#ffffff
Description
The background color of the container panel.
+
$kendo-loader-sm-container-paddingNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The padding of the small Loader container.
+
$kendo-loader-md-container-paddingNumberk-map-get( $kendo-spacing, 5 )1.25rem
Description
The padding of the medium Loader container.
+
$kendo-loader-lg-container-paddingNumberk-map-get( $kendo-spacing, 6 )1.5rem
Description
The padding of the large Loader container.
+
$kendo-loader-sm-container-gapNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The gap of the small Loader container.
+
$kendo-loader-md-container-gapNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The gap of the medium Loader container.
+
$kendo-loader-lg-container-gapNumberk-map-get( $kendo-spacing, 3 )0.75rem
Description
The gap of the large Loader container.
+
$kendo-loader-sm-container-font-sizeNumber$kendo-font-size-sm0.875rem
Description
The font size of the small Loader container.
+
$kendo-loader-md-container-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the medium Loader container.
+
$kendo-loader-lg-container-font-sizeNumber$kendo-font-size-lg1.25rem
Description
The font size of the large Loader container.
+
+ +### Loading + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-loading-bgColor$kendo-component-bg#ffffff
Description
The background color of the Loading indicator.
+
$kendo-loading-textStringcurrentColorcurrentColor
Description
The text color of the Loading indicator.
+
$kendo-loading-opacityNumber.30.3
Description
The opacity of the Loading indicator.
+
+ +### Menu + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-menu-popup-padding-xNullnullnull
Description
Horizontal padding of the menu popup.
+
$kendo-menu-popup-padding-yNullnullnull
Description
Vertical padding of the menu popup.
+
$kendo-menu-popup-border-widthNumber$kendo-popup-border-width1px
Description
Width of the border around the menu popup.
+
$kendo-menu-popup-font-sizeNumber$kendo-font-size-md1rem
Description
Font sizes of the menu popup.
+
$kendo-menu-popup-line-heightNumber$kendo-line-height-md1.5
Description
Line heights used along with $kendo-font-size.
+
$kendo-menu-popup-bgColor$kendo-popup-bg#ffffff
Description
The background of the menu popup.
+
$kendo-menu-popup-textColor$kendo-popup-text#212529
Description
The text color of the menu popup.
+
$kendo-menu-popup-borderColor$kendo-popup-border#dee2e6
Description
The border color of the menu popup.
+
$kendo-menu-popup-gradientNullnullnull
Description
The background gradient of the menu popup.
+
$kendo-menu-popup-item-padding-xNumberk-map-get( $kendo-spacing, 4 )1rem
Description
Horizontal padding of the menu item in popup.
+
$kendo-menu-popup-item-padding-yNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
Vertical padding of the menu item in popup.
+
$kendo-menu-popup-item-padding-endCalculationcalc( #{$kendo-menu-popup-item-padding-x * 2} + #{$kendo-icon-size} )calc(2rem + 16px)
Description
The end padding of the menu item in popup.
+
$kendo-menu-popup-sm-item-icon-margin-startNumber$kendo-menu-popup-sm-item-padding-x1rem
Description
The start margin of the menu item expand icon.
+
$kendo-menu-popup-sm-item-icon-margin-endCalculationcalc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )calc(-1 * (calc(2rem + 16px) - 0.5rem))
Description
The end margin of the menu item expand icon.
+
$kendo-menu-popup-item-spacingNumber0px0px
Description
The spacing between the menu items in popup.
+
$kendo-menu-popup-item-bgNullnullnull
Description
The background of the menu item in popup.
+
$kendo-menu-popup-item-textNullnullnull
Description
The text color of the menu item in popup.
+
$kendo-menu-popup-item-borderNullnullnull
Description
The border color of the menu item in popup.
+
$kendo-menu-popup-item-gradientNullnullnull
Description
The background gradient of the menu item in popup.
+
$kendo-menu-popup-item-hover-bgColor$kendo-list-item-hover-bg#e9ecef
Description
The background of hovered menu item in popup.
+
$kendo-menu-popup-item-hover-textColor$kendo-list-item-hover-text#212529
Description
The text color of hovered menu item in popup.
+
$kendo-menu-popup-item-hover-borderNullnullnull
Description
The border color of hovered menu item in popup.
+
$kendo-menu-popup-item-hover-gradientNullnullnull
Description
The background gradient of hovered menu item in popup.
+
$kendo-menu-popup-item-expanded-bgColor$kendo-list-item-selected-bg#0d6efd
Description
The background of expanded menu item in popup.
+
$kendo-menu-popup-item-expanded-textColor$kendo-list-item-selected-textwhite
Description
The text color of expanded menu item in popup.
+
$kendo-menu-popup-item-expanded-borderNullnullnull
Description
The border color of expanded menu item in popup.
+
$kendo-menu-popup-item-expanded-gradientNullnullnull
Description
The background gradient of expanded menu item in popup.
+
$kendo-menu-popup-item-focus-shadowList$kendo-menu-item-focus-shadowinset 0 0 0 3px rgba(33, 37, 41, 0.15)
Description
The base shadow of focused menu item in popup.
+
+ +### Menu-button + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-menu-button-arrow-padding-xNumber$kendo-button-padding-y0.375rem
Description
The horizontal padding of the button arrow in the Menu Button.
+
+ +### Notification + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-notification-group-gapNumberk-map-get( $kendo-spacing, 3 )0.75rem
Description
The row-gap between the elements in the Notification group.
+
$kendo-notification-padding-xNumber$alert-padding-x1rem
Description
The horizontal padding of the Notification.
+
$kendo-notification-padding-yNumber$alert-padding-y1rem
Description
The vertical padding of the Notification.
+
$kendo-notification-border-widthNumber$alert-border-width1px
Description
The width of the border around the Notification.
+
$kendo-notification-border-radiusNumber$alert-border-radius0.375rem
Description
The border radius of the Notification.
+
$kendo-notification-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the Notification.
+
$kendo-notification-font-sizeNumber$kendo-font-size-sm0.875rem
Description
The font size of the Notification.
+
$kendo-notification-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Notification.
+
$kendo-notification-bgColor$kendo-component-bg#ffffff
Description
The background color of the Notification.
+
$kendo-notification-textColor$kendo-component-text#212529
Description
The text color of the Notification.
+
$kendo-notification-borderColor$kendo-component-border#dee2e6
Description
The border color of the Notification.
+
$kendo-notification-shadowString$kendo-popup-shadowvar(--kendo-elevation-4, 0px 6px 13px rgba(0, 0, 0, 0.125))
Description
The box shadow of the Notification.
+
$kendo-notification-icon-spacingNumber$kendo-icon-spacing0.5rem
Description
The horizontal spacing of the Notification icon.
+
$kendo-notification-theme-colorsMap$kendo-theme-colors("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529)
Description
The theme colors map for the Notification.
+
$kendo-notification-themeMapnotification-theme( $kendo-notification-theme-colors )("inverse": (color: #111315, background-color: #c1c2c3, border: #d3d3d4), "light": (color: #818182, background-color: #fdfdfe, border: #fefefe), "dark": (color: #111315, background-color: #c1c2c3, border: #d3d3d4), "error": (color: #721c24, background-color: #f5c6cb, border: #f8d7da), "warning": (color: #856404, background-color: #ffeeba, border: #fff3cd), "success": (color: #0d462c, background-color: #bfddcf, border: #d1e7dd), "info": (color: #07697d, background-color: #bbf0fb, border: #cff4fc), "tertiary": (color: #3a2264, background-color: #d7caee, border: #e2d9f3), "secondary": (color: #383d41, background-color: #d6d8db, border: #e2e3e5), "primary": (color: #073984, background-color: #bbd6fe, border: #cfe2ff))
Description
The generated theme colors map for the Notification.
+
+ +### Orgchart + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + - - + - + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - + - - + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + - - + + - - + - - - - - + + + + - - + - - + + - - + - - - - - - - - - - - - - - - - - - - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-orgchart-spacerNumberk-map-get( $kendo-spacing, 6 )1.5rem
Description
The spacing index of the OrgChart.
+
$kendo-orgchart-padding-yNumber$kendo-orgchart-spacer1.5rem
Description
The vertical padding of the OrgChart.
+
$kendo-orgchart-padding-xNumber$kendo-orgchart-padding-y1.5rem
Description
The horizontal padding of the OrgChart.
+
$kendo-orgchart-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the OrgChart.
+
$kendo-orgchart-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the OrgChart.
+
$kendo-orgchart-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the OrgChart.
$kendo-input-outline-bgNullnullnull$kendo-orgchart-bgColor$kendo-component-bg#ffffff
Description
The background color of the outline Input components.
+
Description
The background color of the OrgChart.
$kendo-input-outline-text$kendo-orgchart-text Color$kendo-base-text$kendo-component-text #212529
Description
The text color of the outline Input components.
+
Description
The text color of the OrgChart.
$kendo-input-outline-border$kendo-orgchart-border Colorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-base-text, .5 ))rgba(33, 37, 41, 0.5)$kendo-component-border#dee2e6
Description
The border color of the outline Input components.
+
Description
The border color of the OrgChart.
$kendo-input-outline-hover-bgNullnullnull$kendo-orgchart-node-gapNumber$kendo-orgchart-spacer1.5rem
Description
The background color of the outline hovered Input components.
+
Description
The spacing of the OrgChart node.
$kendo-input-outline-hover-textNullnullnull$kendo-orgchart-group-gapNumber$kendo-orgchart-spacer1.5rem
Description
The text color of the outline hovered Input components.
+
Description
The spacing of the OrgChart group.
$kendo-input-outline-hover-borderNullnullnull$kendo-orgchart-node-container-gapNumber$kendo-orgchart-spacer1.5rem
Description
The border color of the outline hovered Input components.
+
Description
The spacing of the OrgChart node container.
$kendo-input-outline-focus-bgNullnullnull$kendo-orgchart-node-group-padding-yNumber$kendo-orgchart-spacer1.5rem
Description
The background color of the outline focused Input components.
+
Description
The vertical padding of the OrgChart node group.
$kendo-input-outline-focus-textNullnullnull$kendo-orgchart-node-group-padding-xNumber$kendo-orgchart-node-group-padding-y1.5rem
Description
The text color of the outline focused Input components.
+
Description
The horizontal padding of the OrgChart node group.
$kendo-input-outline-focus-borderColor$kendo-input-focus-border#86b7fe$kendo-orgchart-node-group-border-widthNumber1px1px
Description
The border color of the outline focused Input components.
+
Description
The border width of the OrgChart node group.
$kendo-input-outline-focus-shadowList$kendo-input-focus-shadow0 0 0 0.25rem rgba(13, 110, 253, 0.25)$kendo-orgchart-node-group-border-radiusNumber$kendo-border-radius-md0.375rem
Description
The shadow of the outline focused Input components.
+
Description
The border radius of the OrgChart node group.
$kendo-input-flat-bgNullnullnull$kendo-orgchart-node-group-bgColor$kendo-base-bg#f8f9fa
Description
The background color of the flat Input components.
+
Description
The background color of the OrgChart node group.
$kendo-input-flat-text$kendo-orgchart-node-group-text Color$kendo-input-text$kendo-base-text #212529
Description
The text color of the flat Input components.
+
Description
The text color of the OrgChart node group.
$kendo-input-flat-border$kendo-orgchart-node-group-border Color$kendo-input-border#ced4da$kendo-base-border#e4e5e6
Description
The border color of the flat Input components.
+
Description
The border color of the OrgChart node group.
$kendo-input-flat-hover-bg$kendo-orgchart-node-group-focus-border Nullnull$kendo-card-focus-border null
Description
The background color of the flat hovered Input components.
+
Description
The border color of the focused OrgChart node group.
$kendo-input-flat-hover-textNullnullnull$kendo-orgchart-node-group-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The text color of the flat hovered Input components.
+
Description
The shadow of the focused OrgChart node group.
$kendo-input-flat-hover-borderNull$kendo-input-hover-bordernull$kendo-orgchart-node-group-title-font-sizeNumber$kendo-font-size-lg1.25rem
Description
The border color of the flat hovered Input components.
+
Description
The font size of the OrgChart node group title.
$kendo-input-flat-focus-bgNullnullnull$kendo-orgchart-node-group-title-margin-bottomNumberk-math-div( $kendo-orgchart-spacer, 4 )0.375rem
Description
The background color of the flat focused Input components.
+
Description
The bottom margin of the OrgChart node group title.
$kendo-input-flat-focus-textNullnullnull$kendo-orgchart-node-group-title-line-heightNumber$kendo-line-height-sm1.25
Description
The text color of the flat focused Input components.
+
Description
The line height of the OrgChart node group title.
$kendo-input-flat-focus-borderColor$kendo-input-focus-border#86b7fe$kendo-orgchart-node-group-subtitle-margin-bottomNumber$kendo-orgchart-spacer1.5rem
Description
The border color of the flat focused Input components.
+
Description
The bottom margin of the OrgChart node group subtitle.
$kendo-input-flat-focus-shadowList$kendo-input-focus-shadow0 0 0 0.25rem rgba(13, 110, 253, 0.25)$kendo-orgchart-node-group-subtitle-font-sizeNumber$kendo-font-size-md1rem
Description
The shadow of the flat focused Input components.
+
Description
The font size of the OrgChart node group subtitle.
$kendo-input-placeholder-text$kendo-orgchart-node-group-subtitle-text Color$input-placeholder-color$kendo-subtle-text #6c757d
Description
The text color of the Input placeholder.
+
Description
The line height of the OrgChart node group subtitle.
$kendo-input-placeholder-opacity$kendo-orgchart-card-width Number11300px300px
Description
The opacity of the Input placeholder.
+
Description
The width of the OrgChart Card.
$kendo-input-clear-value-textNullnullnull$kendo-orgchart-card-padding-yNumber$kendo-card-padding-y1rem
Description
The color of the Input clear value icon.
+
Description
The vertical padding of the OrgChart Card.
$kendo-input-clear-value-opacity$kendo-orgchart-card-padding-x Number.50.5$kendo-orgchart-card-padding-y1rem
Description
The opacity of the Input clear value icon.
+
Description
The horizontal padding of the OrgChart Card.
$kendo-input-clear-value-hover-textNullnullnull$kendo-orgchart-card-border-widthNumber$kendo-card-border-width1px
Description
The color of the hovered Input clear value icon.
+
Description
The border width of the OrgChart Card.
$kendo-input-clear-value-hover-opacityNumber11$kendo-orgchart-card-shadowNull$kendo-card-shadownull
Description
The opacity of the hovered Input clear value icon.
+
Description
The shadow of the OrgChart Card.
$kendo-input-values-margin-yNumberk-map-get( $kendo-spacing, 0.5 )0.125rem$kendo-orgchart-card-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The vertical margin of the clear value icon.
+
Description
The shadow of the focused OrgChart Card.
$kendo-input-values-margin-x$kendo-orgchart-card-title-margin-bottom Number$kendo-input-values-margin-y0.125rem0px0px
Description
The horizontal margin of the clear value icon.
+
Description
The bottom margin of the OrgChart Card title.
$kendo-input-button-width$kendo-orgchart-card-title-font-size Null null null
Description
The width of the Input button.
+
Description
The font size of the OrgChart Card title.
$kendo-input-button-border-width$kendo-orgchart-card-subtitle-margin-bottom Number1px1px0px0px
Description
The border width of the Input button.
+
Description
The bottom margin of the OrgChart Card subtitle.
$kendo-input-spinner-width$kendo-orgchart-card-subtitle-font-size Null null null
Description
The width of the Input spinner button.
+
Description
The font size of the OrgChart Card subtitle.
$kendo-input-spinner-icon-offsetNullnullnull$kendo-orgchart-card-body-border-widthList2px 0 02px 0 0
Description
The icon offset of the Input spinner button.
+
Description
The border width of the OrgChart Card body.
$kendo-input-separator-text$kendo-orgchart-card-body-border-color Color$kendo-component-border#dee2e6transparenttransparent
Description
The color of the Input separator.
+
Description
The border color of the OrgChart Card body.
$kendo-input-separator-opacity$kendo-orgchart-card-body-vbox-margin-right Number.50.5
Description
The opacity of the Input separator.
-
$kendo-input-prefix-textColor$kendo-subtle-text#6c757d
Description
The text color of the Input prefix.
-
$kendo-input-suffix-textColor$kendo-subtle-text#6c757dk-math-div( $kendo-orgchart-spacer, 2 )0.75rem
Description
The text color of the Input suffix.
+
Description
The right margin of the OrgChart Card body title wrap.
$kendo-input-invalid-borderColor$kendo-invalid-border#dc3545$kendo-orgchart-card-body-vbox-min-heightNumber$kendo-card-avatar-size45px
Description
The border color of the invalid Input components.
+
Description
The min height of the OrgChart Card body title wrap.
$kendo-input-invalid-shadowList$kendo-invalid-shadow0 0 0 0.25rem rgba(220, 53, 69, 0.25)$kendo-orgchart-line-sizeNumber1px1px
Description
The shadow of the invalid Input components.
+
Description
The size of the OrgChart connecting line.
$kendo-input-valid-border$kendo-orgchart-line-fill Color$kendo-valid-border#198754$kendo-base-border#e4e5e6
Description
The border color of the valid Input components.
+
Description
The fill color of the OrgChart connecting line.
$kendo-input-valid-shadowList$kendo-valid-shadow0 0 0 0.25rem rgba(25, 135, 84, 0.25)$kendo-orgchart-line-v-heightNumber25px25px
Description
The shadow of the valid Input components.
+
Description
The height of the OrgChart connecting line.
-### List +### Pager @@ -9336,478 +12155,481 @@ The following table lists the available variables for customizing the Bootstrap - - - - - - - - - - - - - - - - - - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + - - - - - + + - + + + + + + - + - - + + - - + - + - - + - + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + - - + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
$kendo-list-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the List components.
-
$kendo-list-font-sizeNullnullnull
Description
The font size of the List component, if no size is set.
-
$kendo-list-line-heightNullnullnull$kendo-pager-padding-xNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The line height of the List component, if no size is set.
+
Description
The horizontal padding of the Pager.
$kendo-list-header-padding-xNullnullnull$kendo-pager-sm-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The horizontal padding of List header, if no size is set.
+
Description
The horizontal padding of the small Pager.
$kendo-list-header-padding-yNullnullnull$kendo-pager-md-padding-xNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The vertical padding of the List header, if no size is set.
+
Description
The horizontal padding of the medium Pager.
$kendo-list-header-border-widthList0 0 1px0 0 1px$kendo-pager-lg-padding-xNumberk-map-get( $kendo-spacing, 2.5 )0.625rem
Description
The border width of the List header.
+
Description
The horizontal padding of the large Pager.
$kendo-list-header-font-sizeNullnullnull$kendo-pager-padding-yNumber$kendo-pager-padding-x0.5rem
Description
The font size of the List header, if no size is set.
+
Description
The vertical padding of the Pager.
$kendo-list-header-line-heightNullnullnull$kendo-pager-sm-padding-yNumber$kendo-pager-sm-padding-x0.25rem
Description
The line height of the List header, if no size is set.
+
Description
The vertical padding of the small Pager.
$kendo-list-header-font-weight$kendo-pager-md-padding-y Number$kendo-font-weight-bold700$kendo-pager-md-padding-x0.5rem
Description
The font weight of the List header.
+
Description
The vertical padding of the medium Pager.
$kendo-list-item-padding-xNullnullnull$kendo-pager-lg-padding-yNumber$kendo-pager-lg-padding-x0.625rem
Description
The horizontal padding of the List items, when no size is set.
+
Description
The vertical padding of the large Pager.
$kendo-list-item-padding-yNullnullnull$kendo-pager-sm-item-min-widthCalculation$kendo-button-sm-calc-sizecalc(1.4285714286em + 0.5rem + 2px)
Description
The vertical padding of the List items, when no size is set.
+
Description
The minimum width of the items in the small Pager.
$kendo-list-item-font-sizeNullnullnull$kendo-pager-md-item-min-widthCalculation$kendo-button-md-calc-sizecalc(1.5em + 0.75rem + 2px)
Description
The font size of the List items, if no size is set.
+
Description
The minimum width of the items in the medium Pagers.
$kendo-list-item-line-heightNullnullnull$kendo-pager-lg-item-min-widthCalculation$kendo-button-lg-calc-sizecalc(1.5em + 1rem + 2px)
Description
The line height of the List items, if no size is set.
+
Description
The minimum width of the items in the large Pagers.
$kendo-list-group-item-padding-xNullnullnull$kendo-pager-sm-item-group-spacingNumberk-map-get( $kendo-spacing, 3.5 )0.875rem
Description
The horizontal padding of the List group items, when no size is set.
+
Description
The margin between the item groups in the small Pager.
$kendo-list-group-item-padding-yNullnullnull$kendo-pager-md-item-group-spacingNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The vertical padding of the List group items, when no size is set.
+
Description
The margin between the item groups in the medium Pager.
$kendo-list-group-item-border-widthList1px 0 01px 0 0$kendo-pager-lg-item-group-spacingNumberk-map-get( $kendo-spacing, 4.5 )1.125rem
Description
The border width of the List group items.
+
Description
The margin between the item groups in the large Pager.
$kendo-list-group-item-font-sizeNullnullnull$kendo-pager-border-widthNumber1px1px
Description
The font size of the List group items, if no size is set.
+
Description
The border width of the Pager.
$kendo-list-group-item-line-heightNullnullnull$kendo-pager-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The line height of the List group items, if no size is set.
+
Description
The font family of the Pager.
$kendo-list-group-item-font-weight$kendo-pager-font-size Number$kendo-font-weight-bold700
Description
The font weight of a List group item.
- 		$kendo-font-size-md1rem
$kendo-list-sizesMap( - sm: ( - font-size: $kendo-list-sm-font-size, - line-height: $kendo-list-sm-line-height, - header-padding-x: $kendo-list-sm-header-padding-x, - header-padding-y: $kendo-list-sm-header-padding-y, - header-font-size: null, - header-line-height: null, - item-padding-x: $kendo-list-sm-item-padding-x, - item-padding-y: $kendo-list-sm-item-padding-y, - item-font-size: null, - item-line-height: null, - group-item-padding-x: $kendo-list-sm-group-item-padding-x, - group-item-padding-y: $kendo-list-sm-group-item-padding-y, - group-item-font-size: null, - group-item-line-height: null - ), - md: ( - font-size: $kendo-list-md-font-size, - line-height: $kendo-list-md-line-height, - header-padding-x: $kendo-list-md-header-padding-x, - header-padding-y: $kendo-list-md-header-padding-y, - header-font-size: null, - header-line-height: null, - item-padding-x: $kendo-list-md-item-padding-x, - item-padding-y: $kendo-list-md-item-padding-y, - item-font-size: null, - item-line-height: null, - group-item-padding-x: $kendo-list-md-group-item-padding-x, - group-item-padding-y: $kendo-list-md-group-item-padding-y, - group-item-font-size: null, - group-item-line-height: null - ), - lg: ( - font-size: $kendo-list-lg-font-size, - line-height: $kendo-list-lg-line-height, - header-padding-x: $kendo-list-lg-header-padding-x, - header-padding-y: $kendo-list-lg-header-padding-y, - header-font-size: null, - header-line-height: null, - item-padding-x: $kendo-list-lg-item-padding-x, - item-padding-y: $kendo-list-lg-item-padding-y, - item-font-size: null, - item-line-height: null, - group-item-padding-x: $kendo-list-lg-group-item-padding-x, - group-item-padding-y: $kendo-list-lg-group-item-padding-y, - group-item-font-size: null, - group-item-line-height: null - ) -)(sm: (font-size: 0.875rem, line-height: 1.4285714286, header-padding-x: 1rem, header-padding-y: 0.25rem, header-font-size: null, header-line-height: null, item-padding-x: 1rem, item-padding-y: 0.25rem, item-font-size: null, item-line-height: null, group-item-padding-x: 1rem, group-item-padding-y: 0.125rem, group-item-font-size: null, group-item-line-height: null), md: (font-size: 1rem, line-height: 1.5, header-padding-x: 1rem, header-padding-y: 0.25rem, header-font-size: null, header-line-height: null, item-padding-x: 1rem, item-padding-y: 0.25rem, item-font-size: null, item-line-height: null, group-item-padding-x: 1rem, group-item-padding-y: 0.25rem, group-item-font-size: null, group-item-line-height: null), lg: (font-size: 1rem, line-height: 1.5, header-padding-x: 1rem, header-padding-y: 0.5rem, header-font-size: null, header-line-height: null, item-padding-x: 1rem, item-padding-y: 0.5rem, item-font-size: null, item-line-height: null, group-item-padding-x: 1rem, group-item-padding-y: 0.375rem, group-item-font-size: null, group-item-line-height: null))
Description
The font size of the Pager.
+
Description
The map with the sizes of the List.
+ 		$kendo-pager-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Pager.
$kendo-list-bg$kendo-pager-bg Color$kendo-component-bg#ffffff$kendo-component-header-bg#f8f9fa
Description
The background color of the List component.
+
Description
The background color of the Pager.
$kendo-list-text$kendo-pager-text Color$kendo-component-text$kendo-component-header-text #212529
Description
The text color of the List component.
+
Description
The text color of the Pager.
$kendo-list-border$kendo-pager-border Color$kendo-component-border$kendo-component-header-border #dee2e6
Description
The border color of the List component.
+
Description
The border color of the Pager.
$kendo-list-header-bg$kendo-pager-focus-bg Null null null
Description
The background color of the List header.
+
Description
The background color of the focused Pager.
$kendo-list-header-textNullnullnull$kendo-pager-focus-shadowListinset 0 0 0 2px rgba( $kendo-color-black, .08)inset 0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The text color of the List header
+
Description
The box shadow of the focused Pager.
$kendo-list-header-borderStringinheritinherit$kendo-pager-section-spacingNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The border color of the List header.
+
Description
The spacing between the Pager sections.
$kendo-list-header-shadowNullnullnull$kendo-pager-item-border-widthNumber1px1px
Description
The box shadow of the List header.
+
Description
The border width of the Pager items.
$kendo-list-item-bgNullnullnull$kendo-pager-item-border-radiusNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The background color of the List items.
+
Description
The border radius of the Pager items.
$kendo-list-item-textNullnullnull$kendo-pager-item-spacingNumber(-1 * $kendo-pager-item-border-width)-1px
Description
The text color of the List items.
+
Description
The spacing around the Pager items.
$kendo-list-item-hover-bg$kendo-pager-item-bg Color$kendo-hover-bg#e9ecef$kendo-component-bg#ffffff
Description
The background color of the hovered List items.
+
Description
The background color of the Pager items.
$kendo-list-item-hover-text$kendo-pager-item-text Color$kendo-hover-text#212529$kendo-link-text#0d6efd
Description
The text color of the hovered List items.
+
Description
The text color of the Pager items.
$kendo-list-item-focus-bgNullnullnull$kendo-pager-item-borderColor$kendo-component-border#dee2e6
Description
The background color of the focused List items.
+
Description
The border color of the Pager items.
$kendo-list-item-focus-textNullnullnull$kendo-pager-item-hover-bgColor$kendo-hover-bg#e9ecef
Description
The text color of the focused List items.
+
Description
The background color of the hovered Pager items.
$kendo-list-item-focus-shadowListinset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-list-text, .15 ))inset 0 0 0 3px rgba(33, 37, 41, 0.15)$kendo-pager-item-hover-textColor$kendo-link-hover-text#0a58ca
Description
The box shadow of the focused List items.
+
Description
The text color of the hovered Pager items.
$kendo-list-item-selected-bg$kendo-pager-item-hover-borderColor$kendo-hover-border#d6d9dc
Description
The border color of the hovered Pager items.
+
$kendo-pager-item-selected-bg Color $kendo-selected-bg #0d6efd
Description
The background color of the selected List items.
+
Description
The background color of the selected Pager items.
$kendo-list-item-selected-text$kendo-pager-item-selected-text Color $kendo-selected-text white
Description
The text color of the selected List items.
+
Description
The text color of the selected Pager items.
$kendo-list-group-item-bgNullnullnull$kendo-pager-item-selected-borderColor$kendo-pager-item-selected-bg#0d6efd
Description
The background color of the List group items.
+
Description
The border color of the selected Pager items.
$kendo-list-group-item-text$kendo-pager-item-focus-opacity Null null null
Description
The text color of the List group items.
+
Description
The opacity of the focused Pager items.
$kendo-list-group-item-borderStringinheritinherit$kendo-pager-item-focus-bgColor$kendo-pager-item-bg#ffffff
Description
The border color of the List group items..
+
Description
The background color of the focused Pager items.
$kendo-list-group-item-shadowNullnullnull$kendo-pager-item-focus-shadowList0 0 0 3px if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-color-primary, .25))0 0 0 3px rgba(13, 110, 253, 0.25)
Description
The base shadow of the List group items.
+
Description
The box shadow of the focused Pager items.
$kendo-list-no-data-textColor$kendo-subtle-text#6c757d$kendo-pager-number-border-radiusNumber0px0px
Description
The color of the 'No Data' text.
+
Description
The border radius of the Pager numbers.
$kendo-list-option-label-textColor$kendo-subtle-text#6c757d$kendo-pager-input-widthNumber5em5em
Description
The width of the Inputs in the Pager.
+
$kendo-pager-sm-dropdown-widthNumber5em5em
Description
The width of the DropDowns in the small Pager.
+
$kendo-pager-md-dropdown-widthNumber5em5em
Description
The width of the DropDowns in the medium Pager.
+
$kendo-pager-lg-dropdown-widthNumber6em6em
Description
The width of the DropDowns in the large Pager.
+
$kendo-pager-sizesMap( + sm: ( + padding-x: $kendo-pager-sm-padding-x, + padding-y: $kendo-pager-sm-padding-y, + item-group-spacing: $kendo-pager-sm-item-group-spacing, + item-min-width: $kendo-pager-sm-item-min-width, + pager-dropdown-width: $kendo-pager-sm-dropdown-width + ), + md: ( + padding-x: $kendo-pager-md-padding-x, + padding-y: $kendo-pager-md-padding-y, + item-group-spacing: $kendo-pager-md-item-group-spacing, + item-min-width: $kendo-pager-md-item-min-width, + pager-dropdown-width: $kendo-pager-md-dropdown-width + ), + lg: ( + padding-x: $kendo-pager-lg-padding-x, + padding-y: $kendo-pager-lg-padding-y, + item-group-spacing: $kendo-pager-lg-item-group-spacing, + item-min-width: $kendo-pager-lg-item-min-width, + pager-dropdown-width: $kendo-pager-lg-dropdown-width + ) +)(sm: (padding-x: 0.25rem, padding-y: 0.25rem, item-group-spacing: 0.875rem, item-min-width: calc(1.4285714286em + 0.5rem + 2px), pager-dropdown-width: 5em), md: (padding-x: 0.5rem, padding-y: 0.5rem, item-group-spacing: 1rem, item-min-width: calc(1.5em + 0.75rem + 2px), pager-dropdown-width: 5em), lg: (padding-x: 0.625rem, padding-y: 0.625rem, item-group-spacing: 1.125rem, item-min-width: calc(1.5em + 1rem + 2px), pager-dropdown-width: 6em))
Description
The color of the 'Option Label' text.
+
Description
The sizes map of the Pager.
-### Listbox +### Pdf-viewer @@ -9825,359 +12647,339 @@ The following table lists the available variables for customizing the Bootstrap - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - + - - + - - + - - + - - + + - - + - - + + - - + - - + - - + - - - - - + + + + - - + - - - -
$kendo-listbox-spacingNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The spacing between the ListBox elements.
-
$kendo-listbox-button-spacingNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The spacing between the ListBox buttons.
-
$kendo-listbox-widthNumber10em10em
Description
The width of the ListBox.
-
$kendo-listbox-default-heightNumber200px200px
Description
The height of the ListBox.
-
$kendo-listbox-border-width$kendo-pdf-viewer-border-width Number 1px 1px
Description
The width of the border around the ListBox.
+
Description
The border width of the PDFViewer.
$kendo-listbox-font-family$kendo-pdf-viewer-font-family List $kendo-font-family system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the ListBox.
+
Description
The font family of the PDFViewer.
$kendo-listbox-font-size$kendo-pdf-viewer-font-size Number $kendo-font-size-md 1rem
Description
The font size of the ListBox.
+
Description
The font size of the PDFViewer.
$kendo-listbox-line-height$kendo-pdf-viewer-line-height Number $kendo-line-height-md 1.5
Description
The line height of the ListBoxx.
+
Description
The line height of the PDFViewer.
$kendo-listbox-text$kendo-pdf-viewer-bg Color$kendo-component-text#212529$kendo-component-bg#ffffff
Description
The text color of the ListBox.
+
Description
The background color of the PDFViewer.
$kendo-listbox-bg$kendo-pdf-viewer-text Color$kendo-component-bg#ffffff$kendo-component-text#212529
Description
The background color of the ListBox.
+
Description
The text color of the PDFViewer.
$kendo-listbox-border$kendo-pdf-viewer-border Color $kendo-component-border #dee2e6
Description
The border color of the ListBox.
+
Description
The border color of the PDFViewer.
$kendo-listbox-item-padding-x$kendo-pdf-viewer-toolbar-bg Null null null
Description
The inline padding of the ListBox item.
+
Description
The background color of the PDFViewer Toolbar.
$kendo-listbox-item-padding-y$kendo-pdf-viewer-toolbar-text Null null null
Description
The block padding of the ListBox item.
+
Description
The text color of the PDFViewer Toolbar.
$kendo-listbox-drop-hint-widthNumber1px1px$kendo-pdf-viewer-toolbar-borderNullnullnull
Description
The width of the ListBox drop hint.
+
Description
The border color of the PDFViewer Toolbar.
$kendo-listbox-drop-hint-border-width$kendo-pdf-viewer-toolbar-gradient Null null null
Description
The width of the border around the ListBox drop hint.
-
- -### Listview - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + - - + + - - - - - + + + + - - + - - + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + - - - - + + + + - - + - - + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-listview-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The horizontal padding of the ListView.
+
Description
The gradient of the PDFViewer Toolbar.
$kendo-listview-padding-yNumberk-map-get( $kendo-spacing, 1 )0.25rem$kendo-pdf-viewer-canvas-bgColor$kendo-app-bg#fafafa
Description
The vertical padding of the ListView.
+
Description
The background color of the PDFViewer canvas.
$kendo-listview-border-widthNumber1px1px$kendo-pdf-viewer-canvas-textNullnullnull
Description
The width of the border around bordered ListView.
+
Description
The text color of the PDFViewer canvas.
$kendo-listview-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"$kendo-pdf-viewer-canvas-borderNullnullnull
Description
The font family of the ListView.
+
Description
The border color of the PDFViewer canvas.
$kendo-listview-font-size$kendo-pdf-viewer-page-spacing Number$kendo-font-size-md1rem30px30px
Description
The font size of the ListView.
+
Description
The spacing of the PDFViewer page.
$kendo-listview-line-heightNumber$kendo-line-height-md1.5$kendo-pdf-viewer-page-bgColorwhitewhite
Description
The line height of the ListView.
+
Description
The background color of the PDFViewer page.
$kendo-listview-text$kendo-pdf-viewer-page-text Color $kendo-component-text #212529
Description
The text color of the ListView.
+
Description
The text color of the PDFViewer page.
$kendo-listview-bg$kendo-pdf-viewer-page-border Color$kendo-component-bg#ffffff$kendo-component-border#dee2e6
Description
The background color of the ListView.
+
Description
The border color of the PDFViewer page.
$kendo-listview-borderColor$kendo-component-border#dee2e6$kendo-pdf-viewer-page-shadowStringk-elevation(3)var(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The border color of the ListView.
+
Description
The shadow of the PDFViewer page.
$kendo-listview-item-padding-x$kendo-pdf-viewer-search-panel-padding-x Numberk-map-get( $kendo-spacing, 1 )0.25rem$kendo-toolbar-md-padding-x0.5rem
Description
The horizontal padding of the ListView items.
+
Description
The horizontal padding of the PDFViewer search panel.
$kendo-listview-item-padding-y$kendo-pdf-viewer-search-panel-padding-yCalculationcalc( #{$kendo-toolbar-md-padding-x} * 2 )calc(0.5rem * 2)
Description
The vertical padding of the PDFViewer search panel.
+
$kendo-pdf-viewer-search-panel-spacingNumber$kendo-toolbar-md-spacing0.5rem
Description
The spacing of the PDFViewer search panel.
+
$kendo-pdf-viewer-search-panel-border-widthNumber1px1px
Description
The border width of the PDFViewer search panel.
+
$kendo-pdf-viewer-search-panel-border-radius Number k-map-get( $kendo-spacing, 1 ) 0.25rem
Description
The vertical padding of the ListView items.
+
Description
The border radius of the PDFViewer search panel.
+
$kendo-pdf-viewer-search-panel-bgColor$kendo-component-bg#ffffff
Description
The background color of the PDFViewer search panel.
$kendo-listview-item-selected-textNullnullnull$kendo-pdf-viewer-search-panel-textColor$kendo-component-text#212529
Description
The text color of the selected ListView items.
+
Description
The text color of the PDFViewer search panel.
$kendo-listview-item-selected-bg$kendo-pdf-viewer-search-panel-border Colorif($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 ))rgba(13, 110, 253, 0.25)$kendo-component-border#dee2e6
Description
The background color of the selected ListView items.
+
Description
The border color of the PDFViewer search panel.
$kendo-listview-item-selected-border$kendo-pdf-viewer-search-panel-shadow Null null null
Description
The border color of the selected ListView items.
+
Description
The shadow of the PDFViewer search panel.
$kendo-listview-item-focus-textNullnullnull$kendo-pdf-viewer-search-panel-matches-spacingNumber$kendo-padding-sm-x0.5rem
Description
The text color of the focused ListView items.
+
Description
The spacing of the matches container in the PDFViewer search panel.
$kendo-listview-item-focus-bgNullnullnull$kendo-pdf-viewer-selection-line-heightNumber1.21.2
Description
The background color of the focused ListView items.
+
Description
The line height of the PDFViewer selection.
$kendo-listview-item-focus-borderNullnullnull$kendo-pdf-viewer-search-highlight-bgColor$kendo-body-text#212529
Description
The border color of the focused ListView items.
+
Description
The background color of the PDFViewer highlight.
$kendo-listview-item-focus-shadowListinset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-listview-text, .15 ))inset 0 0 0 3px rgba(33, 37, 41, 0.15)$kendo-pdf-viewer-search-highlight-mark-bgColoryellowyellow
Description
The box shadow of the focused ListView items.
+
Description
The background color of the PDFViewer highlight mark.
+
$kendo-pdf-viewer-icon-textColor$kendo-dropzone-icon-text#afb1b2
Description
The text color of the PDFViewer icon.
-### Loader +### Picker @@ -10195,399 +12997,469 @@ The following table lists the available variables for customizing the Bootstrap - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
$kendo-loader-segment-border-radiusNumber50%50%$kendo-picker-bgColor$kendo-button-bg#e4e7eb
Description
The border radius of the Loader segment.
+
Description
The background color of the Picker components.
$kendo-loader-sm-segment-sizeNumberk-map-get( $kendo-spacing, 1 )0.25rem$kendo-picker-textColor$kendo-button-text#212529
Description
The size of the small Loader segment.
+
Description
The text color of the Picker components.
$kendo-loader-md-segment-sizeNumberk-map-get( $kendo-spacing, 2 )0.5rem$kendo-picker-borderColor$kendo-button-border#e4e7eb
Description
The size of the medium Loader segment.
+
Description
The border color of the Picker components.
$kendo-loader-lg-segment-sizeNumberk-map-get( $kendo-spacing, 4 )1rem$kendo-picker-gradientNull$kendo-button-gradientnull
Description
The size of the large Loader segment.
+
Description
The gradient of the Picker components.
$kendo-loader-sm-paddingNumberk-math-div( $kendo-loader-sm-segment-size, 2 )0.125rem$kendo-picker-shadowNull$kendo-button-shadownull
Description
The padding of the small Loader.
+
Description
The shadow of the Picker components.
$kendo-loader-md-paddingNumberk-math-div( $kendo-loader-md-segment-size, 2 )0.25rem$kendo-picker-hover-bgColor$kendo-button-hover-bg#ced3db
Description
The padding of the medium Loader.
+
Description
The background color of the hovered Picker components.
$kendo-loader-lg-paddingNumberk-math-div( $kendo-loader-lg-segment-size, 2 )0.5rem$kendo-picker-hover-textNull$kendo-button-hover-textnull
Description
The padding of the large Loader.
+
Description
The text color of the hovered Picker components.
$kendo-loader-sm-spinner-3-widthNumber( $kendo-loader-sm-segment-size * 4 )1rem$kendo-picker-hover-borderColor$kendo-button-hover-border#c7cdd5
Description
The width of the small spinner-3 Loader.
+
Description
The border color of the hovered Picker components.
$kendo-loader-md-spinner-3-widthNumber( $kendo-loader-md-segment-size * 4 )2rem$kendo-picker-hover-gradientNull$kendo-button-hover-gradientnull
Description
The width of the medium spinner-3 Loader.
+
Description
The gradient of the hovered Picker components.
$kendo-loader-lg-spinner-3-widthNumber( $kendo-loader-lg-segment-size * 4 )4rem$kendo-picker-hover-shadowNull$kendo-button-hover-shadownull
Description
The width of the large spinner-3 Loader.
+
Description
The shadow of the hovered Picker components.
$kendo-loader-sm-spinner-3-heightNumber( $kendo-loader-sm-spinner-3-width * $equilateral-height )0.8660254038rem$kendo-picker-focus-bgColor$kendo-button-active-bg#c7cdd5
Description
The height of the small spinner-3 Loader.
+
Description
The background color of the focused Picker components.
$kendo-loader-md-spinner-3-heightNumber( $kendo-loader-md-spinner-3-width * $equilateral-height )1.7320508076rem$kendo-picker-focus-textNull$kendo-button-focus-textnull
Description
The text color of the focused Picker components.
+
$kendo-picker-focus-borderColor$kendo-button-focus-border#bfc6d0
Description
The border color of the focused Picker components.
+
$kendo-picker-focus-gradientNull$kendo-button-focus-gradientnull
Description
The gradient of the focused Picker components.
+
$kendo-picker-focus-shadowList$kendo-button-focus-shadow0 0 0 0.25rem rgba(228, 231, 235, 0.5)
Description
The shadow of the focused Picker components.
+
$kendo-picker-disabled-bgNullnullnull
Description
The background color of the disabled Picker components.
+
$kendo-picker-disabled-textNullnullnull
Description
The text color of the disabled Picker components.
+
$kendo-picker-disabled-borderNullnullnull
Description
The height of the medium spinner-3 Loader.
+
Description
The border color of the disabled Picker components.
$kendo-loader-lg-spinner-3-heightNumber( $kendo-loader-lg-spinner-3-width * $equilateral-height )3.4641016152rem$kendo-picker-disabled-gradientNullnullnull
Description
The height of the large spinner-3 Loader.
+
Description
The gradient of the disabled Picker components.
$kendo-loader-sm-spinner-4-widthNumber$kendo-loader-sm-segment-size * 41rem$kendo-picker-disabled-shadowNullnullnull
Description
The width of the small spinner-4 Loader.
+
Description
The shadow of the disabled Picker components.
$kendo-loader-md-spinner-4-widthNumber$kendo-loader-md-segment-size * 42rem$kendo-picker-outline-bgNullnullnull
Description
The width of the medium spinner-4 Loader.
+
Description
The background color of the outline Picker components.
$kendo-loader-lg-spinner-4-widthNumber$kendo-loader-lg-segment-size * 44rem$kendo-picker-outline-textColor$kendo-button-text#212529
Description
The width of the large spinner-4 Loader.
+
Description
The text color of the outline Picker components.
$kendo-loader-sm-spinner-4-heightNumber$kendo-loader-sm-spinner-4-width1rem$kendo-picker-outline-borderColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-picker-outline-text, .5 ))rgba(33, 37, 41, 0.5)
Description
The height of the small spinner-4 Loader.
+
Description
The border color of the outline Picker components.
$kendo-loader-md-spinner-4-heightNumber$kendo-loader-md-spinner-4-width2rem$kendo-picker-outline-hover-bgColor$kendo-picker-outline-text#212529
Description
The height of the medium spinner-4 Loader.
+
Description
The background color of the outline hovered Picker components.
$kendo-loader-lg-spinner-4-heightNumber$kendo-loader-lg-spinner-4-width4rem$kendo-picker-outline-hover-textColorif($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-picker-outline-hover-bg ))white
Description
The height of the large spinner-4 Loader.
+
Description
The text color of the outline hovered Picker components.
$kendo-loader-secondary-bg$kendo-picker-outline-hover-border Color#212529$kendo-picker-outline-hover-bg #212529
Description
The color of the Loader based on the secondary theme color.
+
Description
The border color of the outline hovered Picker components.
$kendo-loader-container-panel-border-widthNumber1px1px$kendo-picker-outline-focus-bgNullnullnull
Description
The border width of the container panel.
+
Description
The background color of the outline focused Picker components.
$kendo-loader-container-panel-border-styleStringsolidsolid$kendo-picker-outline-focus-textNullnullnull
Description
The border style of the container panel.
+
Description
The text color of the outline focused Picker components.
$kendo-loader-container-panel-border-colorColor$kendo-component-border#dee2e6$kendo-picker-outline-focus-borderNullnullnull
Description
The border color of the container panel.
+
Description
The border color of the outline focused Picker components.
$kendo-loader-container-panel-border-radiusNumber$kendo-border-radius-md0.375rem$kendo-picker-outline-focus-shadowList$kendo-picker-focus-shadow0 0 0 0.25rem rgba(228, 231, 235, 0.5)
Description
The border radius of the container panel.
+
Description
The shadow of the outline focused Picker components.
$kendo-loader-container-panel-bgColor$kendo-color-white#ffffff$kendo-picker-outline-hover-focus-bgNullnullnull
Description
The background color of the container panel.
+
Description
The background color of the outline hovered and focused Picker components.
$kendo-loader-sm-container-paddingNumberk-map-get( $kendo-spacing, 4 )1rem$kendo-picker-outline-hover-focus-textNullnullnull
Description
The padding of the small Loader container.
+
Description
The text color of the outline hovered and focused Picker components.
$kendo-loader-md-container-paddingNumberk-map-get( $kendo-spacing, 5 )1.25rem$kendo-picker-outline-hover-focus-borderNullnullnull
Description
The padding of the medium Loader container.
+
Description
The border color of the outline hovered and focused Picker components.
$kendo-loader-lg-container-paddingNumberk-map-get( $kendo-spacing, 6 )1.5rem$kendo-picker-flat-bgNullnullnull
Description
The padding of the large Loader container.
+
Description
The background color of the flat Picker components.
$kendo-loader-sm-container-gapNumberk-map-get( $kendo-spacing, 1 )0.25rem$kendo-picker-flat-textColor$kendo-button-text#212529
Description
The gap of the small Loader container.
+
Description
The text color of the flat Picker components.
$kendo-loader-md-container-gapNumberk-map-get( $kendo-spacing, 2 )0.5rem$kendo-picker-flat-borderColor$kendo-button-border#e4e7eb
Description
The gap of the medium Loader container.
+
Description
The border color of the flat Picker components.
$kendo-loader-lg-container-gapNumberk-map-get( $kendo-spacing, 3 )0.75rem$kendo-picker-flat-hover-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( $kendo-button-text, .08 ))rgba(33, 37, 41, 0.08)
Description
The gap of the large Loader container.
+
Description
The background color of the flat hovered Picker components.
$kendo-loader-sm-container-font-sizeNumber$kendo-font-size-sm0.875rem$kendo-picker-flat-hover-textNullnullnull
Description
The font size of the small Loader container.
+
Description
The text color of the flat hovered Picker components.
$kendo-loader-md-container-font-sizeNumber$kendo-font-size-md1rem$kendo-picker-flat-hover-borderNullnullnull
Description
The font size of the medium Loader container.
+
Description
The border color of the flat hovered Picker components.
$kendo-loader-lg-container-font-sizeNumber$kendo-font-size-lg1.25rem$kendo-picker-flat-focus-bgNullnullnull
Description
The font size of the large Loader container.
+
Description
The background color of the flat focused Picker components.
- -### Loading - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-loading-bgColor$kendo-component-bg#ffffff
$kendo-picker-flat-focus-textNullnullnull
Description
The text color of the flat focused Picker components.
+
$kendo-picker-flat-focus-borderNullnullnull
Description
The background color of the Loading indicator.
+
Description
The border color of the flat focused Picker components.
$kendo-loading-textStringcurrentColorcurrentColor$kendo-picker-flat-focus-shadowList$kendo-picker-focus-shadow0 0 0 0.25rem rgba(228, 231, 235, 0.5)
Description
The text color of the Loading indicator.
+
Description
The shadow of the flat focused Picker components.
$kendo-loading-opacityNumber.30.3$kendo-picker-flat-hover-focus-bgNullnullnull
Description
The opacity of the Loading indicator.
+
Description
The background color of the flat hovered and focused Picker components.
+
$kendo-picker-flat-hover-focus-textNullnullnull
Description
The text color of the flat hovered and focused Picker components.
+
$kendo-picker-flat-hover-focus-borderNullnullnull
Description
The border color of the flat hovered and focused Picker components.
-### Menu +### Popover @@ -10605,319 +13477,269 @@ The following table lists the available variables for customizing the Bootstrap - - - - + + + + - - - - - + + + + - - + - - + + - - + + + + + + + + + + - + - - + - + - - + - - + + - - + - - + + - - + - + - - + - + - - + - + - - - - - - - - - - - - - - - - - - - - + - + - - - - - - - - - - - + - - + + - - - - - + + + + - - + - - + - - + - - - - - - - - - - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
$kendo-menu-popup-padding-xNullnullnull$kendo-popover-border-widthNumber$kendo-card-border-width1px
Description
Horizontal padding of the menu popup.
+
Description
The width of the border around the Popover.
$kendo-menu-popup-padding-yNullnullnull$kendo-popover-border-styleStringsolidsolid
Description
Vertical padding of the menu popup.
+
Description
The style of the border around the Popover.
$kendo-menu-popup-border-width$kendo-popover-border-radius Number$kendo-popup-border-width1px$kendo-card-border-radius0.375rem
Description
Width of the border around the menu popup.
+
Description
The radius of the border around the Popover.
$kendo-menu-popup-font-size$kendo-popover-font-familyList$kendo-card-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the Popover.
+
$kendo-popover-font-size Number$kendo-font-size-md$kendo-card-font-size 1rem
Description
Font sizes of the menu popup.
+
Description
The font size of the Popover.
$kendo-menu-popup-line-height$kendo-popover-line-height Number$kendo-line-height-md$kendo-card-line-height 1.5
Description
Line heights used along with $kendo-font-size.
+
Description
The line height of the Popover.
$kendo-menu-popup-bg$kendo-popover-text Color$kendo-popup-bg#ffffff$kendo-card-text#212529
Description
The background of the menu popup.
+
Description
The text color of the Popover.
$kendo-menu-popup-text$kendo-popover-bg Color$kendo-popup-text#212529$kendo-card-bg#ffffff
Description
The text color of the menu popup.
+
Description
The background color of the Popover.
$kendo-menu-popup-border$kendo-popover-border Color$kendo-popup-border$kendo-card-border #dee2e6
Description
The border color of the menu popup.
+
Description
The border color of the Popover.
$kendo-menu-popup-gradient$kendo-popover-shadow Nullnull$kendo-card-shadow null
Description
The background gradient of the menu popup.
+
Description
The box shadow of the Popover.
$kendo-menu-popup-item-padding-x$kendo-popover-header-padding-x Numberk-map-get( $kendo-spacing, 4 )$kendo-card-header-padding-x 1rem
Description
Horizontal padding of the menu item in popup.
-
$kendo-menu-popup-item-padding-yNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
Vertical padding of the menu item in popup.
-
$kendo-menu-popup-item-padding-endCalculationcalc( #{$kendo-menu-popup-item-padding-x * 2} + #{$kendo-icon-size} )calc(2rem + 16px)
Description
The end padding of the menu item in popup.
+
Description
The horizontal padding of the Popover header.
$kendo-menu-popup-sm-item-icon-margin-start$kendo-popover-header-padding-y Number$kendo-menu-popup-sm-item-padding-x$kendo-card-header-padding-y 1rem
Description
The start margin of the menu item expand icon.
-
$kendo-menu-popup-sm-item-icon-margin-endCalculationcalc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )calc(-1 * (calc(2rem + 16px) - 0.5rem))
Description
The end margin of the menu item expand icon.
+
Description
The vertical padding of the Popover header.
$kendo-menu-popup-item-spacing$kendo-popover-header-border-width Number0px0px$kendo-card-header-border-width1px
Description
The spacing between the menu items in popup.
+
Description
The border width of the Popover header.
$kendo-menu-popup-item-bgNullnullnull$kendo-popover-header-border-styleString$kendo-popover-border-stylesolid
Description
The background of the menu item in popup.
+
Description
The border style of the Popover header.
$kendo-menu-popup-item-text$kendo-popover-header-text Null null null
Description
The text color of the menu item in popup.
+
Description
The text color of the Popover header.
$kendo-menu-popup-item-border$kendo-popover-header-bg Null null null
Description
The border color of the menu item in popup.
+
Description
The background color of the Popover header.
$kendo-menu-popup-item-gradient$kendo-popover-header-border Null null null
Description
The background gradient of the menu item in popup.
-
$kendo-menu-popup-item-hover-bgColor$kendo-list-item-hover-bg#e9ecef
Description
The background of hovered menu item in popup.
+
Description
The border color of the Popover header.
$kendo-menu-popup-item-hover-textColor$kendo-list-item-hover-text#212529$kendo-popover-body-padding-xNumber$kendo-card-body-padding-x1rem
Description
The text color of hovered menu item in popup.
+
Description
The horizontal padding of the Popover body.
$kendo-menu-popup-item-hover-borderNullnullnull$kendo-popover-body-padding-yNumber$kendo-card-body-padding-y1rem
Description
The border color of hovered menu item in popup.
+
Description
The vertical padding of the Popover body.
$kendo-menu-popup-item-hover-gradientNullnullnull$kendo-popover-actions-border-widthNumber$kendo-popover-border-width1px
Description
The background gradient of hovered menu item in popup.
+
Description
The border width of the Popover actions.
$kendo-menu-popup-item-expanded-bgColor$kendo-list-item-selected-bg#0d6efd$kendo-popover-callout-widthNumber$kendo-card-callout-width1.3em
Description
The background of expanded menu item in popup.
+
Description
The width of the Popover callout.
$kendo-menu-popup-item-expanded-textColor$kendo-list-item-selected-textwhite$kendo-popover-callout-heightNumber$kendo-card-callout-height1.3em
Description
The text color of expanded menu item in popup.
+
Description
The height of the Popover callout.
$kendo-menu-popup-item-expanded-borderNullnullnull$kendo-popover-callout-border-widthNumber$kendo-popover-border-width1px
Description
The border color of expanded menu item in popup.
+
Description
The border width of the Popover callout.
$kendo-menu-popup-item-expanded-gradientNullnullnull$kendo-popover-callout-border-styleString$kendo-popover-border-stylesolid
Description
The background gradient of expanded menu item in popup.
+
Description
The border style of the Popover callout.
$kendo-menu-popup-item-focus-shadowList$kendo-menu-item-focus-shadowinset 0 0 0 3px rgba(33, 37, 41, 0.15)$kendo-popover-callout-bgColor$kendo-popover-bg#ffffff
Description
The base shadow of focused menu item in popup.
+
Description
The background color of the Popover callout.
- -### Menu-button - - - - - - - - - - - - - - - - - - - - - + + + + + -
NameTypeDefault valueComputed value
$kendo-menu-button-arrow-padding-xNumber$kendo-button-padding-y0.375rem
$kendo-popover-callout-borderColor$kendo-popover-border#dee2e6
Description
The horizontal padding of the button arrow in the Menu Button.
+
Description
The border color of the Popover callout.
-### Notification +### Popup @@ -10935,159 +13757,129 @@ The following table lists the available variables for customizing the Bootstrap - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + - - + - - + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - -
$kendo-notification-group-gapNumberk-map-get( $kendo-spacing, 3 )0.75rem$kendo-popup-padding-xNullnullnull
Description
The row-gap between the elements in the Notification group.
+
Description
Horizontal padding of the popup.
$kendo-notification-padding-xNumber$alert-padding-x1rem$kendo-popup-padding-yNullnullnull
Description
The horizontal padding of the Notification.
+
Description
Vertical padding of the popup.
$kendo-notification-padding-y$kendo-popup-border-width Number$alert-padding-y1rem1px1px
Description
The vertical padding of the Notification.
+
Description
Width of the border around the popup.
$kendo-notification-border-width$kendo-popup-border-radius Number$alert-border-width1px$kendo-border-radius-md0.375rem
Description
The width of the border around the Notification.
+
Description
Border radius of the popup.
$kendo-notification-border-radius$kendo-popup-font-size Number$alert-border-radius0.375rem$kendo-font-size-md1rem
Description
The border radius of the Notification.
+
Description
Font size of the popup.
$kendo-notification-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"$kendo-popup-line-heightNumber$kendo-line-height-md1.5
Description
The font family of the Notification.
+
Description
Line height of the popup.
$kendo-notification-font-size$kendo-popup-content-padding-x Number$kendo-font-size-sm0.875remk-map-get( $kendo-spacing, 2 )0.5rem
Description
The font size of the Notification.
+
Description
Horizontal padding of the popup content.
$kendo-notification-line-height$kendo-popup-content-padding-y Number$kendo-line-height-md1.5k-map-get( $kendo-spacing, 2 )0.5rem
Description
The line height of the Notification.
+
Description
Vertical padding of the popup content.
$kendo-notification-bg$kendo-popup-bg Color $kendo-component-bg #ffffff
Description
The background color of the Notification.
+
Description
Background color of the popup.
$kendo-notification-text$kendo-popup-text Color $kendo-component-text #212529
Description
The text color of the Notification.
+
Description
Text color of the popup.
$kendo-notification-border$kendo-popup-border Color $kendo-component-border #dee2e6
Description
The border color of the Notification.
+
Description
Border color of the popup.
$kendo-notification-shadow$kendo-popup-shadow String$kendo-popup-shadowk-elevation(4) var(--kendo-elevation-4, 0px 6px 13px rgba(0, 0, 0, 0.125))
Description
The box shadow of the Notification.
-
$kendo-notification-icon-spacingNumber$kendo-icon-spacing0.5rem
Description
The horizontal spacing of the Notification icon.
-
$kendo-notification-theme-colorsMap$kendo-theme-colors("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529)
Description
The theme colors map for the Notification.
-
$kendo-notification-themeMapnotification-theme( $kendo-notification-theme-colors )("inverse": (color: #111315, background-color: #c1c2c3, border: #d3d3d4), "light": (color: #818182, background-color: #fdfdfe, border: #fefefe), "dark": (color: #111315, background-color: #c1c2c3, border: #d3d3d4), "error": (color: #721c24, background-color: #f5c6cb, border: #f8d7da), "warning": (color: #856404, background-color: #ffeeba, border: #fff3cd), "success": (color: #0d462c, background-color: #bfddcf, border: #d1e7dd), "info": (color: #07697d, background-color: #bbf0fb, border: #cff4fc), "tertiary": (color: #3a2264, background-color: #d7caee, border: #e2d9f3), "secondary": (color: #383d41, background-color: #d6d8db, border: #e2e3e5), "primary": (color: #073984, background-color: #bbd6fe, border: #cfe2ff))
Description
The generated theme colors map for the Notification.
+
Description
Box shadow of the popup.
-### Pager +### Progressbar @@ -11105,481 +13897,449 @@ The following table lists the available variables for customizing the Bootstrap - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - + +
$kendo-pager-padding-xNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The horizontal padding of the Pager.
-
$kendo-pager-sm-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The horizontal padding of the small Pager.
-
$kendo-pager-md-padding-xNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The horizontal padding of the medium Pager.
-
$kendo-pager-lg-padding-xNumberk-map-get( $kendo-spacing, 2.5 )0.625rem
Description
The horizontal padding of the large Pager.
-
$kendo-pager-padding-y$kendo-progressbar-height Number$kendo-pager-padding-x0.5rem$progress-height1rem
Description
The vertical padding of the Pager.
+
Description
The height of the ProgressBar.
$kendo-pager-sm-padding-y$kendo-progressbar-horizontal-width Number$kendo-pager-sm-padding-x0.25rem100%100%
Description
The vertical padding of the small Pager.
+
Description
The horizontal width of the ProgressBar.
$kendo-pager-md-padding-yNumber$kendo-pager-md-padding-x0.5rem$kendo-progressbar-animation-timingList$progress-bar-animation-timing1s linear infinite
Description
The vertical padding of the medium Pager.
+
Description
The animation timing of the ProgressBar.
$kendo-pager-lg-padding-y$kendo-progressbar-border-width Number$kendo-pager-lg-padding-x0.625rem0px0px
Description
The vertical padding of the large Pager.
+
Description
The width of the border around the ProgressBar.
$kendo-pager-sm-item-min-widthCalculation$kendo-button-sm-calc-sizecalc(1.4285714286em + 0.5rem + 2px)$kendo-progressbar-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The minimum width of the items in the small Pager.
+
Description
The font family of the ProgressBar.
$kendo-pager-md-item-min-widthCalculation$kendo-button-md-calc-sizecalc(1.5em + 0.75rem + 2px)$kendo-progressbar-font-sizeNumber$progress-font-size0.75rem
Description
The minimum width of the items in the medium Pagers.
+
Description
The font size of the ProgressBar.
$kendo-pager-lg-item-min-widthCalculation$kendo-button-lg-calc-sizecalc(1.5em + 1rem + 2px)$kendo-progressbar-line-heightNumber11
Description
The minimum width of the items in the large Pagers.
+
Description
The line height of the ProgressBar.
$kendo-pager-sm-item-group-spacingNumberk-map-get( $kendo-spacing, 3.5 )0.875rem$kendo-progressbar-bgColor$gray-200#e9ecef
Description
The margin between the item groups in the small Pager.
+
Description
The background color of the ProgressBar.
$kendo-pager-md-item-group-spacingNumberk-map-get( $kendo-spacing, 4 )1rem$kendo-progressbar-textColork-contrast-color( $gray-200 )black
Description
The margin between the item groups in the medium Pager.
+
Description
The text color of the ProgressBar.
$kendo-pager-lg-item-group-spacingNumberk-map-get( $kendo-spacing, 4.5 )1.125rem$kendo-progressbar-borderNullnullnull
Description
The margin between the item groups in the large Pager.
+
Description
The border color of the ProgressBar.
$kendo-pager-border-widthNumber1px1px$kendo-progressbar-gradientNullnullnull
Description
The border width of the Pager.
+
Description
The background gradient of the ProgressBar.
$kendo-pager-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"$kendo-progressbar-value-bgColor$kendo-selected-bg#0d6efd
Description
The font family of the Pager.
+
Description
The progress background color of the ProgressBar.
$kendo-pager-font-sizeNumber$kendo-font-size-md1rem$kendo-progressbar-value-textColor$kendo-selected-textwhite
Description
The font size of the Pager.
+
Description
The progress text color of the ProgressBar.
$kendo-pager-line-heightNumber$kendo-line-height-md1.5$kendo-progressbar-value-borderNullnullnull
Description
The line height of the Pager.
+
Description
The progress border color of the ProgressBar.
$kendo-pager-bgColor$kendo-component-header-bg#f8f9fa$kendo-progressbar-value-gradientNullnullnull
Description
The background color of the Pager.
+
Description
The progress background gradient of the ProgressBar.
$kendo-pager-text$kendo-progressbar-indeterminate-bg Color$kendo-component-header-text#212529$kendo-progressbar-bg#e9ecef
Description
The text color of the Pager.
+
Description
The background color of the indeterminate ProgressBar.
$kendo-pager-border$kendo-progressbar-indeterminate-text Color$kendo-component-header-border#dee2e6$kendo-progressbar-textblack
Description
The border color of the Pager.
+
Description
The text color of the indeterminate ProgressBar.
$kendo-pager-focus-bg$kendo-progressbar-indeterminate-border Nullnull$kendo-progressbar-border null
Description
The background color of the focused Pager.
+
Description
The border color of the indeterminate ProgressBar.
$kendo-pager-focus-shadowListinset 0 0 0 2px rgba( $kendo-color-black, .08)inset 0 0 0 2px rgba(0, 0, 0, 0.08)$kendo-progressbar-indeterminate-gradientNullnullnull
Description
The box shadow of the focused Pager.
+
Description
The background gradient of the indeterminate ProgressBar.
$kendo-pager-section-spacingNumberk-map-get( $kendo-spacing, 4 )1rem$kendo-progressbar-chunk-borderColor$kendo-body-bg#ffffff
Description
The spacing between the Pager sections.
+
Description
The border color of the chunk ProgressBar.
$kendo-pager-item-border-widthNumber1px1px$kendo-circular-progressbar-arc-strokeColor$kendo-color-primary#0d6efd
Description
The border width of the Pager items.
+
Description
The arc stroke color of the circular ProgressBar.
$kendo-pager-item-border-radiusNumberk-map-get( $kendo-spacing, 1 )0.25rem$kendo-circular-progressbar-scale-strokeColor$kendo-progressbar-bg#e9ecef
Description
The border radius of the Pager items.
+
Description
The scale stroke background color of the circular ProgressBar.
$kendo-pager-item-spacingNumber(-1 * $kendo-pager-item-border-width)-1px
+ +### Prompt + + + + + + + + + + + + + + + + + + + + + - - + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + + + + + + + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-prompt-textColor$kendo-component-text#212529
Description
The spacing around the Pager items.
+
Description
The text color of the Prompt.
$kendo-pager-item-bg$kendo-prompt-bg Color $kendo-component-bg #ffffff
Description
The background color of the Pager items.
+
Description
The background color of the Prompt.
$kendo-pager-item-text$kendo-prompt-border Color$kendo-link-text#0d6efd$kendo-component-border#dee2e6
Description
The text color of the Pager items.
+
Description
The border color of the Prompt.
$kendo-pager-item-border$kendo-prompt-header-text Color$kendo-component-border#dee2e6$kendo-component-header-text#212529
Description
The border color of the Pager items.
+
Description
The text color of the Prompt header.
$kendo-pager-item-hover-bg$kendo-prompt-header-bg Color$kendo-hover-bg#e9ecef$kendo-component-bg#ffffff
Description
The background color of the hovered Pager items.
+
Description
The background color of the Prompt header.
$kendo-pager-item-hover-text$kendo-prompt-header-border Color$kendo-link-hover-text#0a58ca$kendo-component-header-border#dee2e6
Description
The text color of the hovered Pager items.
+
Description
The border color of the Prompt header.
$kendo-pager-item-hover-borderColor$kendo-hover-border#d6d9dc$kendo-prompt-content-padding-yNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The vertical padding of the Prompt content.
+
$kendo-prompt-content-padding-xNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The border color of the hovered Pager items.
+
Description
The horizontal padding of the Prompt content.
$kendo-pager-item-selected-bgColor$kendo-selected-bg#0d6efd$kendo-prompt-content-spacingNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The background color of the selected Pager items.
+
Description
The spacing between the items of the Prompt content.
$kendo-pager-item-selected-text$kendo-prompt-content-text Color$kendo-selected-textwhite$kendo-component-header-text#212529
Description
The text color of the selected Pager items.
+
Description
The text color of the Prompt content.
$kendo-pager-item-selected-border$kendo-prompt-content-bg Color$kendo-pager-item-selected-bg#0d6efd$kendo-component-header-bg#f8f9fa
Description
The border color of the selected Pager items.
+
Description
The background color of the Prompt content.
$kendo-pager-item-focus-opacityNullnullnull$kendo-prompt-content-borderColor$kendo-component-header-border#dee2e6
Description
The opacity of the focused Pager items.
+
Description
The text border of the Prompt content.
$kendo-pager-item-focus-bgColor$kendo-pager-item-bg#ffffff$kendo-prompt-expander-spacingNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The background color of the focused Pager items.
+
Description
The spacing between the items of the Prompt content expander.
$kendo-pager-item-focus-shadowList0 0 0 3px if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-color-primary, .25))0 0 0 3px rgba(13, 110, 253, 0.25)$kendo-prompt-suggestion-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The box shadow of the focused Pager items.
+
Description
The vertical padding of the Prompt suggestion container.
$kendo-pager-number-border-radius$kendo-prompt-suggestion-padding-x Number0px0pxk-map-get( $kendo-spacing, 2 )0.5rem
Description
The border radius of the Pager numbers.
+
Description
The horizontal padding of the Prompt suggestion container.
$kendo-pager-input-width$kendo-prompt-suggestion-border-radius Number5em5em$kendo-border-radius-md0.375rem
Description
The width of the Inputs in the Pager.
+
Description
The border radius of the Prompt suggestion container.
$kendo-pager-sm-dropdown-widthNumber5em5em$kendo-prompt-suggestion-textColor$kendo-component-text#212529
Description
The width of the DropDowns in the small Pager.
+
Description
The text color of the Prompt suggestion container.
$kendo-pager-md-dropdown-widthNumber5em5em$kendo-prompt-suggestion-bgColor$kendo-body-bg#ffffff
Description
The width of the DropDowns in the medium Pager.
+
Description
The background color of the Prompt suggestion container.
$kendo-pager-lg-dropdown-widthNumber6em6em$kendo-prompt-suggestion-borderColor$kendo-component-border#dee2e6
Description
The width of the DropDowns in the large Pager.
+
Description
The border color of the Prompt suggestion container.
$kendo-pager-sizesMap( - sm: ( - padding-x: $kendo-pager-sm-padding-x, - padding-y: $kendo-pager-sm-padding-y, - item-group-spacing: $kendo-pager-sm-item-group-spacing, - item-min-width: $kendo-pager-sm-item-min-width, - pager-dropdown-width: $kendo-pager-sm-dropdown-width - ), - md: ( - padding-x: $kendo-pager-md-padding-x, - padding-y: $kendo-pager-md-padding-y, - item-group-spacing: $kendo-pager-md-item-group-spacing, - item-min-width: $kendo-pager-md-item-min-width, - pager-dropdown-width: $kendo-pager-md-dropdown-width - ), - lg: ( - padding-x: $kendo-pager-lg-padding-x, - padding-y: $kendo-pager-lg-padding-y, - item-group-spacing: $kendo-pager-lg-item-group-spacing, - item-min-width: $kendo-pager-lg-item-min-width, - pager-dropdown-width: $kendo-pager-lg-dropdown-width - ) -)(sm: (padding-x: 0.25rem, padding-y: 0.25rem, item-group-spacing: 0.875rem, item-min-width: calc(1.4285714286em + 0.5rem + 2px), pager-dropdown-width: 5em), md: (padding-x: 0.5rem, padding-y: 0.5rem, item-group-spacing: 1rem, item-min-width: calc(1.5em + 0.75rem + 2px), pager-dropdown-width: 5em), lg: (padding-x: 0.625rem, padding-y: 0.625rem, item-group-spacing: 1.125rem, item-min-width: calc(1.5em + 1rem + 2px), pager-dropdown-width: 6em))$kendo-prompt-suggestion-shadowStringk-elevation(1)var(--kendo-elevation-1, 0px 1px 2px rgba(0, 0, 0, 0.038))
Description
The sizes map of the Pager.
+
Description
The elevation of the Prompt suggestion container.
-### Pdf-viewer +### Radio @@ -11597,1099 +14357,1135 @@ The following table lists the available variables for customizing the Bootstrap - + - - - - - - - - - - - + + - - + - - + + - - + - - - - - - - - - - - - - - - - - - - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
$kendo-pdf-viewer-border-width$kendo-radio-radius Number1px1px
Description
The border width of the PDFViewer.
-
$kendo-pdf-viewer-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"50%50%
Description
The font family of the PDFViewer.
+
Description
The border radius of the RadioButton.
$kendo-pdf-viewer-font-size$kendo-radio-border-width Number$kendo-font-size-md1rem1px1px
Description
The font size of the PDFViewer.
+
Description
The border width of the RadioButton.
$kendo-pdf-viewer-line-height$kendo-radio-sm-size Number$kendo-line-height-md1.5
Description
The line height of the PDFViewer.
-
$kendo-pdf-viewer-bgColor$kendo-component-bg#ffffff
Description
The background color of the PDFViewer.
-
$kendo-pdf-viewer-textColor$kendo-component-text#212529k-map-get( $kendo-spacing, 3 )0.75rem
Description
The text color of the PDFViewer.
+
Description
The size of a small RadioButton.
$kendo-pdf-viewer-borderColor$kendo-component-border#dee2e6$kendo-radio-md-sizeNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The border color of the PDFViewer.
+
Description
The size of a medium RadioButton.
$kendo-pdf-viewer-toolbar-bgNullnullnull$kendo-radio-lg-sizeNumberk-map-get( $kendo-spacing, 5 )1.25rem
Description
The background color of the PDFViewer Toolbar.
+
Description
The size of a large RadioButton.
$kendo-pdf-viewer-toolbar-textNullnullnull$kendo-radio-sm-glyph-sizeNumberk-map-get( $kendo-spacing, 2.5 )0.625rem
Description
The text color of the PDFViewer Toolbar.
+
Description
The glyph size of a small RadioButton.
$kendo-pdf-viewer-toolbar-borderNullnullnull$kendo-radio-md-glyph-sizeNumberk-map-get( $kendo-spacing, 3.5 )0.875rem
Description
The border color of the PDFViewer Toolbar.
+
Description
The glyph size of a medium RadioButton.
$kendo-pdf-viewer-toolbar-gradientNullnullnull$kendo-radio-lg-glyph-sizeNumberk-map-get( $kendo-spacing, 4.5 )1.125rem
Description
The gradient of the PDFViewer Toolbar.
+
Description
The glyph size of a large RadioButton.
$kendo-pdf-viewer-canvas-bgColor$kendo-app-bg#fafafa$kendo-radio-sm-ripple-sizeNumber300%300%
Description
The background color of the PDFViewer canvas.
+
Description
The ripple size of a small RadioButton.
$kendo-pdf-viewer-canvas-textNullnullnull$kendo-radio-md-ripple-sizeNumber300%300%
Description
The text color of the PDFViewer canvas.
+
Description
The ripple size of a medium RadioButton.
$kendo-pdf-viewer-canvas-borderNullnullnull$kendo-radio-lg-ripple-sizeNumber300%300%
Description
The border color of the PDFViewer canvas.
+
Description
The ripple size of a large RadioButton.
$kendo-pdf-viewer-page-spacingNumber30px30px$kendo-radio-sizesMap( + sm: ( + size: $kendo-radio-sm-size, + glyph-size: $kendo-radio-sm-glyph-size, + ripple-size: $kendo-radio-sm-ripple-size + ), + md: ( + size: $kendo-radio-md-size, + glyph-size: $kendo-radio-md-glyph-size, + ripple-size: $kendo-radio-md-ripple-size + ), + lg: ( + size: $kendo-radio-lg-size, + glyph-size: $kendo-radio-lg-glyph-size, + ripple-size: $kendo-radio-lg-ripple-size + ) +)(sm: (size: 0.75rem, glyph-size: 0.625rem, ripple-size: 300%), md: (size: 1rem, glyph-size: 0.875rem, ripple-size: 300%), lg: (size: 1.25rem, glyph-size: 1.125rem, ripple-size: 300%))
Description
The spacing of the PDFViewer page.
+
Description
The map with the different RadioButton sizes.
$kendo-pdf-viewer-page-bg$kendo-radio-bg Colorwhitewhite$kendo-checkbox-bg#ffffff
Description
The background color of the PDFViewer page.
+
Description
The background color of the RadioButton.
$kendo-pdf-viewer-page-textColor$kendo-component-text#212529$kendo-radio-textNull$kendo-checkbox-textnull
Description
The text color of the PDFViewer page.
+
Description
The text color of radio button.
$kendo-pdf-viewer-page-border$kendo-radio-border Color$kendo-component-border#dee2e6$kendo-checkbox-border#ced4da
Description
The border color of the PDFViewer page.
+
Description
The border color of the RadioButton.
$kendo-pdf-viewer-page-shadowStringk-elevation(3)var(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))$kendo-radio-hover-bgNull$kendo-checkbox-hover-bgnull
Description
The shadow of the PDFViewer page.
+
Description
The background color of the hovered RadioButton.
$kendo-pdf-viewer-search-panel-padding-xNumber$kendo-toolbar-md-padding-x0.5rem$kendo-radio-hover-textNull$kendo-checkbox-hover-textnull
Description
The horizontal padding of the PDFViewer search panel.
+
Description
The text color of the hovered RadioButton.
$kendo-pdf-viewer-search-panel-padding-yCalculationcalc( #{$kendo-toolbar-md-padding-x} * 2 )calc(0.5rem * 2)$kendo-radio-hover-borderNull$kendo-checkbox-hover-bordernull
Description
The vertical padding of the PDFViewer search panel.
+
Description
The border color of the hovered RadioButton.
$kendo-pdf-viewer-search-panel-spacingNumber$kendo-toolbar-md-spacing0.5rem$kendo-radio-checked-bgColor$kendo-checkbox-checked-bg#0d6efd
Description
The spacing of the PDFViewer search panel.
+
Description
The background color of the checked RadioButton.
$kendo-pdf-viewer-search-panel-border-widthNumber1px1px$kendo-radio-checked-textColor$kendo-checkbox-checked-textwhite
Description
The border width of the PDFViewer search panel.
+
Description
The text color of the checked RadioButton.
$kendo-pdf-viewer-search-panel-border-radiusNumberk-map-get( $kendo-spacing, 1 )0.25rem$kendo-radio-checked-borderColor$kendo-checkbox-checked-border#0d6efd
Description
The border radius of the PDFViewer search panel.
+
Description
The border color of the checked RadioButton.
$kendo-pdf-viewer-search-panel-bg$kendo-radio-focus-border Color$kendo-component-bg#ffffff$kendo-checkbox-focus-border#86b7fe
Description
The background color of the PDFViewer search panel.
+
Description
The border color of the focused RadioButton.
$kendo-pdf-viewer-search-panel-textColor$kendo-component-text#212529$kendo-radio-focus-shadowList$kendo-checkbox-focus-shadow0 0 0 0.25rem rgba(13, 110, 253, 0.25)
Description
The text color of the PDFViewer search panel.
+
Description
The box shadow of the focused RadioButton.
$kendo-pdf-viewer-search-panel-border$kendo-radio-focus-checked-border Color$kendo-component-border#dee2e6$kendo-checkbox-focus-checked-border#0d6efd
Description
The border color of the PDFViewer search panel.
+
Description
The border color of the focused and checked RadioButton.
$kendo-pdf-viewer-search-panel-shadowNullnullnull$kendo-radio-focus-checked-shadowList$kendo-checkbox-focus-checked-shadow0 0 0 0.25rem rgba(13, 110, 253, 0.25)
Description
The shadow of the PDFViewer search panel.
+
Description
The box shadow of the focused and checked RadioButton.
$kendo-pdf-viewer-search-panel-matches-spacingNumber$kendo-padding-sm-x0.5rem$kendo-radio-disabled-bgNull$kendo-checkbox-disabled-bgnull
Description
The spacing of the matches container in the PDFViewer search panel.
+
Description
The background color of the disabled RadioButton.
$kendo-pdf-viewer-selection-line-heightNumber1.21.2$kendo-radio-disabled-textNull$kendo-checkbox-disabled-textnull
Description
The line height of the PDFViewer selection.
+
Description
The color of the disabled RadioButton.
$kendo-pdf-viewer-search-highlight-bgColor$kendo-body-text#212529$kendo-radio-disabled-borderNull$kendo-checkbox-disabled-bordernull
Description
The background color of the PDFViewer highlight.
+
Description
The border color of the disabled RadioButton.
$kendo-pdf-viewer-search-highlight-mark-bgColoryellowyellow$kendo-radio-disabled-checked-bgNull$kendo-checkbox-disabled-checked-bgnull
Description
The background color of the PDFViewer highlight mark.
+
Description
The background color of the disabled and checked RadioButton.
$kendo-pdf-viewer-icon-textColor$kendo-dropzone-icon-text#afb1b2$kendo-radio-disabled-checked-textNull$kendo-checkbox-disabled-checked-textnull
Description
The text color of the PDFViewer icon.
+
Description
The color of the disabled and checked RadioButton.
- -### Picker - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-picker-bgColor$kendo-button-bg#e4e7eb
$kendo-radio-disabled-checked-borderNull$kendo-checkbox-disabled-checked-bordernull
Description
The background color of the Picker components.
+
Description
The border color of disabled and checked RadioButton.
$kendo-picker-textColor$kendo-button-text#212529$kendo-radio-invalid-bgNull$kendo-checkbox-invalid-bgnull
Description
The text color of the Picker components.
+
Description
The background color of the invalid RadioButton.
$kendo-picker-border$kendo-radio-invalid-text Color$kendo-button-border#e4e7eb$kendo-checkbox-invalid-text#dc3545
Description
The border color of the Picker components.
+
Description
The text color of the invalid RadioButton.
$kendo-picker-gradientNull$kendo-button-gradientnull$kendo-radio-invalid-borderColor$kendo-checkbox-invalid-border#dc3545
Description
The gradient of the Picker components.
+
Description
The border color of the invalid RadioButton.
$kendo-picker-shadowNull$kendo-button-shadownull$kendo-radio-indicator-typeStringimageimage
Description
The shadow of the Picker components.
+
Description
The type of the RadioButton indicator.
$kendo-picker-hover-bgColor$kendo-button-hover-bg#ced3db$kendo-radio-glyph-font-familyList"WebComponentsIcons", monospace"WebComponentsIcons", monospace
Description
The background color of the hovered Picker components.
+
Description
The font family of the RadioButton indicator glyph.
$kendo-picker-hover-textNull$kendo-button-hover-textnull$kendo-radio-checked-glyphString"\e308""\e308"
Description
The text color of the hovered Picker components.
+
Description
The glyph of the RadioButton indicator.
$kendo-picker-hover-borderColor$kendo-button-hover-border#c7cdd5$kendo-radio-checked-imageStringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='white'/%3e%3c/svg%3e")
Description
The border color of the hovered Picker components.
+
Description
The image of the checked RadioButton indicator.
$kendo-picker-hover-gradient$kendo-radio-disabled-checked-image Null$kendo-button-hover-gradientnull null
Description
The gradient of the hovered Picker components.
+
Description
The image of the disabled and checked RadioButton indicator.
$kendo-picker-hover-shadowNull$kendo-button-hover-shadownull$kendo-radio-label-margin-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The shadow of the hovered Picker components.
+
Description
The horizontal margin of the RadioButton inside of a label.
$kendo-picker-focus-bgColor$kendo-button-active-bg#c7cdd5$kendo-radio-list-spacingNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The background color of the focused Picker components.
+
Description
The horizontal list item margin of the RadioButton.
$kendo-picker-focus-textNull$kendo-button-focus-textnull$kendo-radio-list-item-padding-xNumber0px0px
Description
The text color of the focused Picker components.
+
Description
The horizontal list item padding of the RadioButton.
$kendo-picker-focus-borderColor$kendo-button-focus-border#bfc6d0$kendo-radio-list-item-padding-yNumber$kendo-list-md-item-padding-y0.25rem
Description
The border color of the focused Picker components.
+
Description
The vertical list item padding of the RadioButton.
$kendo-picker-focus-gradientNull$kendo-button-focus-gradientnull$kendo-radio-ripple-bgColor$kendo-radio-checked-bg#0d6efd
Description
The gradient of the focused Picker components.
+
Description
The background color of the RadioButton ripple.
$kendo-picker-focus-shadowList$kendo-button-focus-shadow0 0 0 0.25rem rgba(228, 231, 235, 0.5)$kendo-radio-ripple-opacityNumber.250.25
Description
The shadow of the focused Picker components.
+
Description
The opacity of the RadioButton ripple.
$kendo-picker-disabled-bgNullnullnull
+ +### Rating + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-rating-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The background color of the disabled Picker components.
+
Description
The font family of the Rating.
$kendo-picker-disabled-textNullnullnull$kendo-rating-font-sizeNumber$kendo-font-size-md1rem
Description
The text color of the disabled Picker components.
+
Description
The font size of the Rating.
$kendo-picker-disabled-borderNullnullnull$kendo-rating-line-heightNumber$kendo-line-height-md1.5
Description
The border color of the disabled Picker components.
+
Description
The line height of the Rating.
$kendo-picker-disabled-gradientNullnullnull$kendo-rating-container-margin-xNumber$kendo-padding-sm-x0.5rem
Description
The gradient of the disabled Picker components.
+
Description
The horizontal margin of the Rating container.
$kendo-picker-disabled-shadowNullnullnull$kendo-rating-item-padding-xNumber$kendo-padding-sm-x0.5rem
Description
The shadow of the disabled Picker components.
+
Description
The horizontal padding of the Rating item.
$kendo-picker-outline-bgNullnullnull$kendo-rating-item-padding-yNumber$kendo-padding-md-y0.5rem
Description
The background color of the outline Picker components.
+
Description
The vertical padding of the Rating item.
$kendo-picker-outline-textColor$kendo-button-text#212529$kendo-rating-label-margin-xNumber$kendo-padding-md-x1rem
Description
The text color of the outline Picker components.
+
Description
The horizontal margin of the Rating label.
$kendo-picker-outline-borderColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-picker-outline-text, .5 ))rgba(33, 37, 41, 0.5)$kendo-rating-label-margin-yNumber$kendo-padding-md-y0.5rem
Description
The border color of the outline Picker components.
+
Description
The vertical margin of the Rating label.
$kendo-picker-outline-hover-bgColor$kendo-picker-outline-text#212529$kendo-rating-label-line-heightNumber$kendo-line-height-lg2
Description
The background color of the outline hovered Picker components.
+
Description
The line height of the Rating label.
$kendo-picker-outline-hover-text$kendo-rating-icon-text Colorif($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-picker-outline-hover-bg ))white$kendo-subtle-text#6c757d
Description
The text color of the outline hovered Picker components.
+
Description
The text color of the Rating icon.
$kendo-picker-outline-hover-border$kendo-rating-icon-selected-text Color$kendo-picker-outline-hover-bg#212529$kendo-selected-bg#0d6efd
Description
The border color of the outline hovered Picker components.
+
Description
The text color of the selected Rating icon.
$kendo-picker-outline-focus-bgNullnullnull$kendo-rating-icon-hover-textColor$kendo-selected-bg#0d6efd
Description
The background color of the outline focused Picker components.
+
Description
The text color of the hovered Rating icon.
$kendo-picker-outline-focus-textNullnullnull$kendo-rating-icon-focus-textColor$kendo-selected-bg#0d6efd
Description
The text color of the outline focused Picker components.
+
Description
The text color of the focused Rating icon.
$kendo-picker-outline-focus-borderNullnullnull$kendo-rating-icon-focus-shadowList0 2px 4px rgba( black, .1 )0 2px 4px rgba(0, 0, 0, 0.1)
Description
The border color of the outline focused Picker components.
+
Description
The shadow of the focused Rating icon.
$kendo-picker-outline-focus-shadow$kendo-rating-icon-focus-selected-shadow List$kendo-picker-focus-shadow0 0 0 0.25rem rgba(228, 231, 235, 0.5)0 2px 4px rgba( black, .1)0 2px 4px rgba(0, 0, 0, 0.1)
Description
The shadow of the outline focused Picker components.
+
Description
The shadow of the focused and selected Rating icon.
$kendo-picker-outline-hover-focus-bgNullnullnull
+ +### Scrollview + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-scrollview-border-widthNumber1px1px
Description
The background color of the outline hovered and focused Picker components.
+
Description
The width of the border around the ScrollView.
$kendo-picker-outline-hover-focus-textNullnullnull$kendo-scrollview-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The text color of the outline hovered and focused Picker components.
+
Description
The font family of the ScrollView.
$kendo-picker-outline-hover-focus-borderNullnullnull$kendo-scrollview-font-sizeNumber$kendo-font-size-md1rem
Description
The border color of the outline hovered and focused Picker components.
+
Description
The font size of the ScrollView.
$kendo-picker-flat-bgNullnullnull$kendo-scrollview-line-heightNumber$kendo-line-height-md1.5
Description
The background color of the flat Picker components.
+
Description
The line height of the ScrollView.
$kendo-picker-flat-text$kendo-scrollview-text Color$kendo-button-text$kendo-component-text #212529
Description
The text color of the flat Picker components.
+
Description
The text color of the ScrollView.
$kendo-picker-flat-border$kendo-scrollview-bg Color$kendo-button-border#e4e7eb$kendo-component-bg#ffffff
Description
The border color of the flat Picker components.
+
Description
The background color of the ScrollView.
$kendo-picker-flat-hover-bg$kendo-scrollview-border Colorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( $kendo-button-text, .08 ))rgba(33, 37, 41, 0.08)$kendo-component-border#dee2e6
Description
The background color of the flat hovered Picker components.
+
Description
The border color of the ScrollView.
$kendo-picker-flat-hover-textNullnullnull$kendo-scrollview-pagebutton-sizeNumber10px10px
Description
The text color of the flat hovered Picker components.
+
Description
The size of the ScrollView page button.
$kendo-picker-flat-hover-borderNullnullnull$kendo-scrollview-pagebutton-bgColor$kendo-button-bg#e4e7eb
Description
The border color of the flat hovered Picker components.
+
Description
The background color of the ScrollView page button.
$kendo-picker-flat-focus-bgNullnullnull$kendo-scrollview-pagebutton-borderColor$kendo-button-border#e4e7eb
Description
The background color of the flat focused Picker components.
+
Description
The border color of the ScrollView page button.
$kendo-picker-flat-focus-textNullnullnull$kendo-scrollview-pagebutton-primary-bgColor$kendo-color-primary#0d6efd
Description
The text color of the flat focused Picker components.
+
Description
The primary background color of the ScrollView page button.
$kendo-picker-flat-focus-borderNullnullnull$kendo-scrollview-pagebutton-primary-borderColor$kendo-color-primary#0d6efd
Description
The border color of the flat focused Picker components.
+
Description
The primary border color of the ScrollView page button.
$kendo-picker-flat-focus-shadow$kendo-scrollview-pagebutton-shadow List$kendo-picker-focus-shadow0 0 0 0.25rem rgba(228, 231, 235, 0.5)0 0 0 2px rgba( black, .13 )0 0 0 2px rgba(0, 0, 0, 0.13)
Description
The shadow of the flat focused Picker components.
+
Description
The box shadow of the ScrollView page button.
$kendo-picker-flat-hover-focus-bgNullnullnull$kendo-scrollview-pager-offsetNumber00
Description
The background color of the flat hovered and focused Picker components.
+
Description
The offset of the ScrollView pager.
$kendo-picker-flat-hover-focus-textNullnullnull$kendo-scrollview-pager-item-spacingNumber20px20px
Description
The text color of the flat hovered and focused Picker components.
+
Description
The spacing between the ScrollView pager items.
$kendo-picker-flat-hover-focus-borderNullnullnull$kendo-scrollview-pager-item-border-widthNumber0px0px
Description
The border color of the flat hovered and focused Picker components.
+
Description
The border width of the ScrollView pager items.
- -### Popover - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-popover-border-widthNumber$kendo-card-border-width1px
$kendo-scrollview-pager-heightCalculationcalc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + #{$kendo-scrollview-pager-item-spacing * 2} )calc(10px + 0px + 40px)
Description
The width of the border around the Popover.
+
Description
The height of the ScrollView pager.
$kendo-popover-border-styleStringsolidsolid$kendo-scrollview-arrow-tap-highlight-colorColor$kendo-color-rgba-transparentrgba(0, 0, 0, 0)
Description
The text color of the highlight over the tapped ScrollView navigation arrows.
+
$kendo-scrollview-navigation-colorColorwhitewhite
Description
The style of the border around the Popover.
+
Description
The color of the ScrollView navigation arrows.
$kendo-popover-border-radiusNumber$kendo-card-border-radius0.375rem$kendo-scrollview-navigation-icon-shadowListrgba( black, .3 ) 0 0 15pxrgba(0, 0, 0, 0.3) 0 0 15px
Description
The radius of the border around the Popover.
+
Description
The box shadow of the ScrollView navigation arrows.
$kendo-popover-font-familyList$kendo-card-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"$kendo-scrollview-navigation-bgColorrgba( black, 0 )rgba(0, 0, 0, 0)
Description
The font family of the Popover.
+
Description
The background color of the ScrollView navigation.
$kendo-popover-font-size$kendo-scrollview-navigation-default-opacity Number$kendo-card-font-size1rem.70.7
Description
The font size of the Popover.
+
Description
The opacity of the ScrollView navigation.
$kendo-popover-line-height$kendo-scrollview-navigation-hover-opacity Number$kendo-card-line-height1.511
Description
The line height of the Popover.
+
Description
The hover opacity of the ScrollView navigation.
$kendo-popover-textColor$kendo-card-text#212529$kendo-scrollview-navigation-hover-span-bgNullnullnull
Description
The text color of the Popover.
+
Description
The hover background color of the ScrollView navigation arrows.
$kendo-popover-bg$kendo-scrollview-light-bg Color$kendo-card-bg#ffffffrgba( white, .4 )rgba(255, 255, 255, 0.4)
Description
The background color of the Popover.
+
Description
The background color of the ScrollView pager in light mode.
$kendo-popover-border$kendo-scrollview-dark-bg Color$kendo-card-border#dee2e6rgba( black, .4 )rgba(0, 0, 0, 0.4)
Description
The border color of the Popover.
+
Description
The background color of the ScrollView pager in dark mode.
$kendo-popover-shadowNull$kendo-card-shadownull$kendo-scrollview-transition-durationNumber.3s0.3s
Description
The box shadow of the Popover.
+
Description
The duration of the ScrollView transition.
$kendo-popover-header-padding-xNumber$kendo-card-header-padding-x1rem$kendo-scrollview-transition-timing-functionStringease-in-outease-in-out
Description
The horizontal padding of the Popover header.
+
Description
The timing function of the ScrollView transition.
$kendo-popover-header-padding-yNumber$kendo-card-header-padding-y1rem
+ +### Skeleton + + + + + + + + + + + + + + + + + + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-skeleton-text-transformStringscale( 1, .6 )scale(1, 0.6)
Description
The vertical padding of the Popover header.
+
Description
The transform scale of the Skeleton text.
$kendo-popover-header-border-width$kendo-skeleton-text-border-radius Number$kendo-card-header-border-width1px$kendo-border-radius-md0.375rem
Description
The border width of the Popover header.
+
Description
The border radius of the Skeleton text.
$kendo-popover-header-border-styleString$kendo-popover-border-stylesolid$kendo-skeleton-rect-border-radiusNumber00
Description
The border style of the Popover header.
+
Description
The border radius of the rectangular Skeleton.
$kendo-popover-header-textNullnullnull$kendo-skeleton-circle-border-radiusNumber9999px9999px
Description
The text color of the Popover header.
+
Description
The border radius of the circular Skeleton.
$kendo-popover-header-bgNullnullnull$kendo-skeleton-item-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), rgba( $kendo-color-inverse, .2 ))rgba(33, 37, 41, 0.2)
Description
The background color of the Popover header.
+
Description
The background color of the Skeleton item.
$kendo-popover-header-borderNullnullnull$kendo-skeleton-wave-bgColorrgba( black, .04 )rgba(0, 0, 0, 0.04)
Description
The border color of the Popover header.
+
Description
The background color of the Skeleton wave animation.
$kendo-popover-body-padding-xNumber$kendo-card-body-padding-x1rem
+ +### Split-button + + + + + + + + + + + + + + + + + + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - - + + + + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-split-button-focus-shadowList$kendo-button-focus-shadow0 0 0 0.25rem rgba(228, 231, 235, 0.5)
Description
The horizontal padding of the Popover body.
+
Description
The focus shadow of the SplitButton.
$kendo-popover-body-padding-y$kendo-split-button-arrow-padding-x Number$kendo-card-body-padding-y1rem$kendo-button-padding-y0.375rem
Description
The vertical padding of the Popover body.
+
Description
The horizontal padding of the arrow Button.
$kendo-popover-actions-border-width$kendo-split-button-sm-arrow-padding-x Number$kendo-popover-border-width1px$kendo-button-sm-padding-y0.25rem
Description
The border width of the Popover actions.
+
Description
The horizontal padding of the small arrow Button.
$kendo-popover-callout-width$kendo-split-button-md-arrow-padding-x Number$kendo-card-callout-width1.3em$kendo-button-md-padding-y0.375rem
Description
The width of the Popover callout.
+
Description
The horizontal padding of the medium arrow Button.
$kendo-popover-callout-height$kendo-split-button-lg-arrow-padding-x Number$kendo-card-callout-height1.3em$kendo-button-lg-padding-y0.5rem
Description
The height of the Popover callout.
+
Description
The horizontal padding of the large arrow Button.
$kendo-popover-callout-border-width$kendo-split-button-arrow-padding-y Number$kendo-popover-border-width1px$kendo-button-padding-y0.375rem
Description
The border width of the Popover callout.
+
Description
The vertical padding of the arrow Button.
$kendo-popover-callout-border-styleString$kendo-popover-border-stylesolid$kendo-split-button-sm-arrow-padding-yNumber$kendo-button-sm-padding-y0.25rem
Description
The border style of the Popover callout.
+
Description
The vertical padding of the small arrow Button.
$kendo-popover-callout-bgColor$kendo-popover-bg#ffffff
$kendo-split-button-md-arrow-padding-yNumber$kendo-button-md-padding-y0.375rem
Description
The background color of the Popover callout.
+
Description
The vertical padding of the medium arrow Button.
$kendo-popover-callout-borderColor$kendo-popover-border#dee2e6$kendo-split-button-lg-arrow-padding-yNumber$kendo-button-lg-padding-y0.5rem
Description
The border color of the Popover callout.
+
Description
The vertical padding of the large arrow Button.
-### Popup +### Splitter @@ -12707,1545 +15503,1483 @@ The following table lists the available variables for customizing the Bootstrap - - - - - - - - - - - - - - - - - - - + - - - - - + + + + - - + - - + - - - - - - - - - - - - - - - - - - - - + - - + - - + - - - - - + + + + - - -
$kendo-popup-padding-xNullnullnull
Description
Horizontal padding of the popup.
-
$kendo-popup-padding-yNullnullnull
Description
Vertical padding of the popup.
-
$kendo-popup-border-width$kendo-splitter-border-width Number 1px 1px
Description
Width of the border around the popup.
+
Description
The width of the border around the Splitter.
$kendo-popup-border-radiusNumber$kendo-border-radius-md0.375rem$kendo-splitter-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
Border radius of the popup.
+
Description
The font family of the Splitter.
$kendo-popup-font-size$kendo-splitter-font-size Number $kendo-font-size-md 1rem
Description
Font size of the popup.
+
Description
The font size of the Splitter.
$kendo-popup-line-height$kendo-splitter-line-height Number $kendo-line-height-md 1.5
Description
Line height of the popup.
-
$kendo-popup-content-padding-xNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
Horizontal padding of the popup content.
-
$kendo-popup-content-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
Vertical padding of the popup content.
+
Description
The line height of the Splitter.
$kendo-popup-bg$kendo-splitter-bg Color $kendo-component-bg #ffffff
Description
Background color of the popup.
+
Description
The background color of the Splitter.
$kendo-popup-text$kendo-splitter-text Color $kendo-component-text #212529
Description
Text color of the popup.
+
Description
The text color of the Splitter.
$kendo-popup-border$kendo-splitter-border Color $kendo-component-border #dee2e6
Description
Border color of the popup.
+
Description
The border color of the Splitter.
$kendo-popup-shadowStringk-elevation(4)var(--kendo-elevation-4, 0px 6px 13px rgba(0, 0, 0, 0.125))$kendo-splitter-splitbar-sizeNumberk-map-get( $kendo-spacing, 3 )0.75rem
Description
Box shadow of the popup.
+
Description
The size of the Splitter splitbar.
- -### Progressbar - - - - - - - - - - - - - - - - - - + + - - + + - - + - - + + - - - - - + + + + - - + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-progressbar-height
$kendo-splitter-drag-handle-length Number$progress-height1rem20px20px
Description
The height of the ProgressBar.
+
Description
The length of the Splitter drag handle.
$kendo-progressbar-horizontal-width$kendo-splitter-drag-handle-thickness Number100%100%2px2px
Description
The horizontal width of the ProgressBar.
+
Description
The thickness of the Splitter drag handle.
$kendo-progressbar-animation-timingList$progress-bar-animation-timing1s linear infinite$kendo-splitter-drag-icon-marginNumber7px7px
Description
The animation timing of the ProgressBar.
+
Description
The margin of the Splitter drag handle icon.
$kendo-progressbar-border-width$kendo-splitter-collapse-icon-padding-xNullnullnull
Description
The horizontal padding of the collapse icon in the Splitter.
+
$kendo-splitter-collapse-icon-padding-y Number0px0pxk-map-get( $kendo-spacing, .5 )0.125rem
Description
The width of the border around the ProgressBar.
+
Description
The vertical padding of the collapse icon in the Splitter.
$kendo-progressbar-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"$kendo-splitbar-bgColor$kendo-base-bg#f8f9fa
Description
The font family of the ProgressBar.
+
Description
The background color of the Splitter splitbar.
$kendo-progressbar-font-sizeNumber$progress-font-size0.75rem$kendo-splitbar-textColor$kendo-base-text#212529
Description
The font size of the ProgressBar.
+
Description
The text color of the Splitter splitbar.
$kendo-progressbar-line-heightNumber11$kendo-splitbar-hover-bgColorif($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-splitbar-bg, .5 ))#eeeff0
Description
The line height of the ProgressBar.
+
Description
The hover background color of the Splitter splitbar.
$kendo-progressbar-bg$kendo-splitbar-hover-text Color$gray-200#e9ecef$kendo-splitbar-text#212529
Description
The background color of the ProgressBar.
+
Description
The hover text color of the Splitter splitbar.
$kendo-progressbar-text$kendo-splitbar-selected-bg Colork-contrast-color( $gray-200 )black$kendo-selected-bg#0d6efd
Description
The text color of the ProgressBar.
+
Description
The selected background color of the Splitter splitbar.
$kendo-progressbar-border$kendo-splitbar-selected-textColor$kendo-selected-textwhite
Description
The selected text color of the Splitter splitbar.
+
+ +### Stepper + + + + + + + + + + + + + + + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-stepper-margin-x Null null null
Description
The border color of the ProgressBar.
+
Description
The horizontal margin the Stepper.
$kendo-progressbar-gradient$kendo-stepper-margin-y Null null null
Description
The background gradient of the ProgressBar.
+
Description
The vertical margin the Stepper.
$kendo-progressbar-value-bgColor$kendo-selected-bg#0d6efd$kendo-stepper-padding-xNullnullnull
Description
The progress background color of the ProgressBar.
+
Description
The horizontal padding the Stepper.
$kendo-progressbar-value-textColor$kendo-selected-textwhite$kendo-stepper-padding-yNullnullnull
Description
The progress text color of the ProgressBar.
+
Description
The vertical padding the Stepper.
$kendo-progressbar-value-borderNullnullnull$kendo-stepper-label-margin-xNumber12px12px
Description
The progress border color of the ProgressBar.
+
Description
The horizontal margin the Stepper label.
$kendo-progressbar-value-gradientNullnullnull$kendo-stepper-label-padding-xNumber12px12px
Description
The progress background gradient of the ProgressBar.
+
Description
The horizontal padding the Stepper label.
$kendo-progressbar-indeterminate-bgColor$kendo-progressbar-bg#e9ecef$kendo-stepper-label-padding-yNumber5px5px
Description
The background color of the indeterminate ProgressBar.
+
Description
The vertical padding the Stepper label.
$kendo-progressbar-indeterminate-textColor$kendo-progressbar-textblack$kendo-stepper-border-widthNumber0px0px
Description
The width of the border around the Stepper.
+
$kendo-stepper-inline-content-padding-xNumber20px20px
Description
The text color of the indeterminate ProgressBar.
+
Description
The horizontal padding the Stepper content.
$kendo-progressbar-indeterminate-borderNull$kendo-progressbar-bordernull$kendo-stepper-inline-content-padding-yNumber10px10px
Description
The border color of the indeterminate ProgressBar.
+
Description
The vertical padding the Stepper content.
$kendo-progressbar-indeterminate-gradientNullnullnull$kendo-stepper-font-sizeNumber$kendo-font-size-md1rem
Description
The background gradient of the indeterminate ProgressBar.
+
$kendo-progressbar-chunk-borderColor$kendo-body-bg#ffffff$kendo-stepper-line-heightNumber$kendo-line-height-md1.5
Description
The border color of the chunk ProgressBar.
+
$kendo-circular-progressbar-arc-strokeColor$kendo-color-primary#0d6efd$kendo-stepper-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The arc stroke color of the circular ProgressBar.
+
$kendo-circular-progressbar-scale-strokeColor$kendo-progressbar-bg#e9ecef$kendo-stepper-bgNullnullnull
Description
The scale stroke background color of the circular ProgressBar.
+
Description
The background color of the Stepper.
- -### Prompt - - - - - - - - - - - - - - - - - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + + + + + + + + + + - - + + - - + - - + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-prompt-text
$kendo-stepper-text Color $kendo-component-text #212529
Description
The text color of the Prompt.
+
Description
The text color of the Stepper.
$kendo-prompt-bgColor$kendo-component-bg#ffffff$kendo-stepper-borderNullnullnull
Description
The background color of the Prompt.
+
Description
The border color of the Stepper.
$kendo-prompt-borderColor$kendo-component-border#dee2e6$kendo-stepper-indicator-widthNumber28px28px
Description
The border color of the Prompt.
+
Description
The width of the Stepper indicator.
$kendo-prompt-header-textColor$kendo-component-header-text#212529$kendo-stepper-indicator-heightNumber$kendo-stepper-indicator-width28px
Description
The text color of the Prompt header.
+
Description
The height of the Stepper indicator.
$kendo-prompt-header-bgColor$kendo-component-bg#ffffff$kendo-stepper-indicator-border-radiusNumber50%50%
Description
The background color of the Prompt header.
+
Description
The border radius of the Stepper indicator.
$kendo-prompt-header-borderColor$kendo-component-header-border#dee2e6$kendo-stepper-indicator-border-widthNumber1px1px
Description
The border color of the Prompt header.
+
Description
The border width of the Stepper indicator.
$kendo-prompt-content-padding-y$kendo-stepper-indicator-focus-border-width Numberk-map-get( $kendo-spacing, 4 )1rem1px1px
Description
The vertical padding of the Prompt content.
+
Description
The border width of the focused Stepper indicator.
$kendo-prompt-content-padding-x$kendo-stepper-indicator-focus-size Numberk-map-get( $kendo-spacing, 4 )1rem2px2px
Description
The horizontal padding of the Prompt content.
+
Description
The size of the focused Stepper indicator.
$kendo-prompt-content-spacing$kendo-stepper-indicator-focus-offset Numberk-map-get( $kendo-spacing, 4 )1rem3px3px
Description
The spacing between the items of the Prompt content.
+
Description
The offset of the Stepper focused indicator.
$kendo-prompt-content-text$kendo-stepper-indicator-focus-calc-offsetCalculationcalc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} )calc(1px + 3px)
Description
The calculated offset of the focused Stepper indicator.
+
$kendo-stepper-indicator-bg Color$kendo-component-header-text#212529$kendo-component-bg#ffffff
Description
The text color of the Prompt content.
+
Description
The background color of the Stepper indicator.
$kendo-prompt-content-bg$kendo-stepper-indicator-text Color$kendo-component-header-bg#f8f9fa$kendo-component-text#212529
Description
The background color of the Prompt content.
+
Description
The text color of the Stepper indicator.
$kendo-prompt-content-border$kendo-stepper-indicator-border Color$kendo-component-header-border$kendo-component-border #dee2e6
Description
The text border of the Prompt content.
+
Description
The border color of the Stepper indicator.
$kendo-prompt-expander-spacingNumberk-map-get( $kendo-spacing, 2 )0.5rem$kendo-stepper-indicator-hover-bgColorif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-stepper-indicator-bg ))#ebebeb
Description
The spacing between the items of the Prompt content expander.
+
Description
The background color of the hovered Stepper indicator.
$kendo-prompt-suggestion-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem$kendo-stepper-indicator-hover-textNullnullnull
Description
The vertical padding of the Prompt suggestion container.
+
Description
The text color of the hovered Stepper indicator.
$kendo-prompt-suggestion-padding-xNumberk-map-get( $kendo-spacing, 2 )0.5rem$kendo-stepper-indicator-hover-borderNullnullnull
Description
The horizontal padding of the Prompt suggestion container.
+
Description
The border color of the hovered Stepper indicator.
$kendo-prompt-suggestion-border-radiusNumber$kendo-border-radius-md0.375rem$kendo-stepper-indicator-disabled-bgNullnullnull
Description
The border radius of the Prompt suggestion container.
+
Description
The background color of the disabled Stepper indicator.
$kendo-prompt-suggestion-text$kendo-stepper-indicator-disabled-text Color$kendo-component-text#212529if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .65 ), $kendo-disabled-text)#adb5bd
Description
The text color of the Prompt suggestion container.
+
Description
The text color of the disabled Stepper indicator.
$kendo-prompt-suggestion-bgColor$kendo-body-bg#ffffff$kendo-stepper-indicator-disabled-borderNullnullnull
Description
The background color of the Prompt suggestion container.
+
Description
The border color of the disabled Stepper indicator.
$kendo-prompt-suggestion-border$kendo-stepper-indicator-done-bg Color$kendo-component-border#dee2e6$kendo-color-primary#0d6efd
Description
The border color of the Prompt suggestion container.
+
Description
The background color of the Stepper done indicator.
$kendo-prompt-suggestion-shadowStringk-elevation(1)var(--kendo-elevation-1, 0px 1px 2px rgba(0, 0, 0, 0.038))$kendo-stepper-indicator-done-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg ))white
Description
The elevation of the Prompt suggestion container.
+
Description
The text color of the Stepper done indicator.
- -### Radio - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + + + + - + + + + + + - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - + - + - - + - + - - + - + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-radio-radiusNumber50%50%
$kendo-stepper-indicator-done-borderColor$kendo-stepper-indicator-done-bg#0d6efd
Description
The border radius of the RadioButton.
+
Description
The border color of the Stepper done indicator.
$kendo-radio-border-widthNumber1px1px$kendo-stepper-indicator-done-hover-bgColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg ))#0c65e9
Description
The border width of the RadioButton.
+
Description
The background color of the hovered Stepper done indicator.
$kendo-radio-sm-sizeNumberk-map-get( $kendo-spacing, 3 )0.75rem$kendo-stepper-indicator-done-hover-textNullnullnull
Description
The size of a small RadioButton.
+
Description
The text color of the hovered Stepper done indicator.
$kendo-radio-md-sizeNumberk-map-get( $kendo-spacing, 4 )1rem$kendo-stepper-indicator-done-hover-borderNullnullnull
Description
The border color of the hovered Stepper done indicator.
+
Description
The size of a medium RadioButton.
+ 		$kendo-stepper-indicator-done-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .6 ), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%))#6ea8fe
Description
The background color of the disabled Stepper done indicator.
$kendo-radio-lg-sizeNumberk-map-get( $kendo-spacing, 5 )1.25rem$kendo-stepper-indicator-done-disabled-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg ))white
Description
The size of a large RadioButton.
+
Description
The text color of the disabled Stepper done indicator.
$kendo-radio-sm-glyph-sizeNumberk-map-get( $kendo-spacing, 2.5 )0.625rem$kendo-stepper-indicator-done-disabled-borderColor$kendo-stepper-indicator-done-disabled-bg#6ea8fe
Description
The glyph size of a small RadioButton.
+
Description
The border color of the disabled Stepper done indicator.
$kendo-radio-md-glyph-sizeNumberk-map-get( $kendo-spacing, 3.5 )0.875rem$kendo-stepper-indicator-current-bgColor$kendo-stepper-indicator-done-bg#0d6efd
Description
The glyph size of a medium RadioButton.
+
Description
The background color of the Stepper current indicator.
$kendo-radio-lg-glyph-sizeNumberk-map-get( $kendo-spacing, 4.5 )1.125rem$kendo-stepper-indicator-current-textColor$kendo-stepper-indicator-done-textwhite
Description
The glyph size of a large RadioButton.
+
Description
The text color of the Stepper current indicator.
$kendo-radio-sm-ripple-sizeNumber300%300%$kendo-stepper-indicator-current-borderColor$kendo-stepper-indicator-done-border#0d6efd
Description
The ripple size of a small RadioButton.
+
Description
The border color of the Stepper current indicator.
$kendo-radio-md-ripple-sizeNumber300%300%$kendo-stepper-indicator-current-hover-bgColor$kendo-stepper-indicator-done-hover-bg#0c65e9
Description
The ripple size of a medium RadioButton.
+
Description
The background color of the hovered Stepper current indicator.
$kendo-radio-lg-ripple-sizeNumber300%300%$kendo-stepper-indicator-current-hover-textNull$kendo-stepper-indicator-done-hover-textnull
Description
The ripple size of a large RadioButton.
+
Description
The text color of the hovered Stepper current indicator.
$kendo-radio-sizesMap( - sm: ( - size: $kendo-radio-sm-size, - glyph-size: $kendo-radio-sm-glyph-size, - ripple-size: $kendo-radio-sm-ripple-size - ), - md: ( - size: $kendo-radio-md-size, - glyph-size: $kendo-radio-md-glyph-size, - ripple-size: $kendo-radio-md-ripple-size - ), - lg: ( - size: $kendo-radio-lg-size, - glyph-size: $kendo-radio-lg-glyph-size, - ripple-size: $kendo-radio-lg-ripple-size - ) -)(sm: (size: 0.75rem, glyph-size: 0.625rem, ripple-size: 300%), md: (size: 1rem, glyph-size: 0.875rem, ripple-size: 300%), lg: (size: 1.25rem, glyph-size: 1.125rem, ripple-size: 300%))$kendo-stepper-indicator-current-hover-borderNull$kendo-stepper-indicator-done-hover-bordernull
Description
The map with the different RadioButton sizes.
+
Description
The border color of the hovered Stepper current indicator.
$kendo-radio-bg$kendo-stepper-indicator-current-disabled-bg Color$kendo-checkbox-bg#ffffff$kendo-stepper-indicator-done-disabled-bg#6ea8fe
Description
The background color of the RadioButton.
+
Description
The background color of the disabled Stepper current indicator.
$kendo-radio-textNull$kendo-checkbox-textnull$kendo-stepper-indicator-current-disabled-textColor$kendo-stepper-indicator-done-disabled-textwhite
Description
The text color of radio button.
+
Description
The text color of the disabled Stepper current indicator.
$kendo-radio-border$kendo-stepper-indicator-current-disabled-border Color$kendo-checkbox-border#ced4da$kendo-stepper-indicator-done-disabled-border#6ea8fe
Description
The border color of the RadioButton.
+
Description
The border color of the disabled Stepper current indicator.
$kendo-radio-hover-bg$kendo-stepper-label-text Null$kendo-checkbox-hover-bgnull null
Description
The background color of the hovered RadioButton.
+
Description
The text color of the Stepper label.
$kendo-radio-hover-textNull$kendo-checkbox-hover-textnull$kendo-stepper-label-success-textColor$kendo-color-success#198754
Description
The text color of the hovered RadioButton.
+
Description
The success text color of the Stepper label.
$kendo-radio-hover-borderNull$kendo-checkbox-hover-bordernull$kendo-stepper-label-error-textColor$kendo-color-error#dc3545
Description
The border color of the hovered RadioButton.
+
Description
The error text color of the Stepper label.
$kendo-radio-checked-bgColor$kendo-checkbox-checked-bg#0d6efd$kendo-stepper-label-hover-textNullnullnull
Description
The background color of the checked RadioButton.
+
Description
The text color of the hovered Stepper label.
$kendo-radio-checked-text$kendo-stepper-label-disabled-text Color$kendo-checkbox-checked-textwhiteif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .65 ), $kendo-disabled-text)#adb5bd
Description
The text color of the checked RadioButton.
+
Description
The text color of the disabled Stepper label.
$kendo-radio-checked-border$kendo-stepper-optional-label-text Color$kendo-checkbox-checked-border#0d6efd$kendo-subtle-text#6c757d
Description
The border color of the checked RadioButton.
+
Description
The text color of the Stepper optional label.
$kendo-radio-focus-borderColor$kendo-checkbox-focus-border#86b7fe$kendo-stepper-optional-label-opacityNullnullnull
Description
The border color of the focused RadioButton.
+
Description
The opacity of the Stepper optional label.
$kendo-radio-focus-shadowList$kendo-checkbox-focus-shadow0 0 0 0.25rem rgba(13, 110, 253, 0.25)$kendo-stepper-optional-label-font-sizeNumber$kendo-font-size-sm0.875rem
Description
The box shadow of the focused RadioButton.
+
Description
The font size of the Stepper optional label.
$kendo-radio-focus-checked-borderColor$kendo-checkbox-focus-checked-border#0d6efd$kendo-stepper-optional-label-font-styleNullnullnull
Description
The border color of the focused and checked RadioButton.
+
Description
The font style of the Stepper optional label.
$kendo-radio-focus-checked-shadowList$kendo-checkbox-focus-checked-shadow0 0 0 0.25rem rgba(13, 110, 253, 0.25)$kendo-stepper-progressbar-sizeNumber2px2px
Description
The box shadow of the focused and checked RadioButton.
+
Description
The size of the Stepper ProgressBar.
$kendo-radio-disabled-bg$kendo-stepper-progressbar-bg Null$kendo-checkbox-disabled-bgnull null
Description
The background color of the disabled RadioButton.
+
Description
The background color of the Stepper ProgressBar.
$kendo-radio-disabled-text$kendo-stepper-progressbar-text Null$kendo-checkbox-disabled-textnull null
Description
The color of the disabled RadioButton.
+
Description
The text color of the Stepper ProgressBar.
$kendo-radio-disabled-border$kendo-stepper-progressbar-fill-bg Null$kendo-checkbox-disabled-bordernull null
Description
The border color of the disabled RadioButton.
+
Description
The background color of the selected Stepper ProgressBar.
$kendo-radio-disabled-checked-bg$kendo-stepper-progressbar-fill-text Null$kendo-checkbox-disabled-checked-bgnull null
Description
The background color of the disabled and checked RadioButton.
+
Description
The text color of the selected Stepper ProgressBar.
$kendo-radio-disabled-checked-textNull$kendo-checkbox-disabled-checked-textnull$kendo-stepper-content-transition-propertyStringheightheight
Description
The color of the disabled and checked RadioButton.
+
Description
The property name of the Stepper transition.
$kendo-radio-disabled-checked-borderNull$kendo-checkbox-disabled-checked-bordernull$kendo-stepper-content-transition-durationNumber300ms300ms
Description
The border color of disabled and checked RadioButton.
+
Description
The duration of the Stepper transition.
$kendo-radio-invalid-bg$kendo-stepper-content-transition-timing-functionListcubic-bezier(.4, 0, .2, 1) 0mscubic-bezier(0.4, 0, 0.2, 1) 0ms
Description
The timing function of the Stepper transition.
+
+ +### Switch + + + + + + + + + + + + + + + + + + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - - - - - -
NameTypeDefault valueComputed value
$kendo-switch-font-family Null$kendo-checkbox-invalid-bgnull null
Description
The background color of the invalid RadioButton.
+
Description
The font family of the Switch.
$kendo-radio-invalid-textColor$kendo-checkbox-invalid-text#dc3545$kendo-switch-track-border-widthNumber1px1px
Description
The text color of the invalid RadioButton.
+
Description
The border width of the Switch track.
$kendo-radio-invalid-borderColor$kendo-checkbox-invalid-border#dc3545$kendo-switch-thumb-border-widthNullnullnull
Description
The border color of the invalid RadioButton.
+
Description
The border width of the Switch thumb.
$kendo-radio-indicator-typeStringimageimage$kendo-switch-label-text-transformNullnullnull
Description
The type of the RadioButton indicator.
+
Description
The text transform of the Switch label.
$kendo-radio-glyph-font-familyList"WebComponentsIcons", monospace"WebComponentsIcons", monospace$kendo-switch-label-displayStringnonenone
Description
The font family of the RadioButton indicator glyph.
+
Description
The display of the Switch label.
$kendo-radio-checked-glyphString"\e308""\e308"$kendo-switch-sizesMap( + sm: ( font-size: null, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: null ), + md: ( font-size: null, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: null ), + lg: ( font-size: null, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: null ) +)(sm: (font-size: null, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: null), md: (font-size: null, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: null), lg: (font-size: null, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: null))
Description
The glyph of the RadioButton indicator.
+
Description
The map with the different Switch sizes.
$kendo-radio-checked-imageStringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='white'/%3e%3c/svg%3e")$kendo-switch-off-track-bgColor$kendo-component-bg#ffffff
Description
The image of the checked RadioButton indicator.
+
Description
The background of the track when the Switch is not checked.
$kendo-radio-disabled-checked-image$kendo-switch-off-track-text Null null null
Description
The image of the disabled and checked RadioButton indicator.
+
Description
The text color of the track when the Switch is not checked.
$kendo-radio-label-margin-xNumberk-map-get( $kendo-spacing, 1 )0.25rem$kendo-switch-off-track-borderColor$gray-500#adb5bd
Description
The horizontal margin of the RadioButton inside of a label.
+
Description
The border color of the track when the Switch is not checked.
$kendo-radio-list-spacingNumberk-map-get( $kendo-spacing, 4 )1rem$kendo-switch-off-track-gradientNullnullnull
Description
The horizontal list item margin of the RadioButton.
+
Description
The background gradient of the track when the Switch is not checked.
$kendo-radio-list-item-padding-xNumber0px0px$kendo-switch-off-track-hover-bgNullnullnull
Description
The horizontal list item padding of the RadioButton.
+
Description
The background of the track when the hovered Switch is not checked.
$kendo-radio-list-item-padding-yNumber$kendo-list-md-item-padding-y0.25rem$kendo-switch-off-track-hover-textNullnullnull
Description
The vertical list item padding of the RadioButton.
+
Description
The text color of the track when the hovered Switch is not checked.
$kendo-radio-ripple-bgColor$kendo-radio-checked-bg#0d6efd$kendo-switch-off-track-hover-borderNullnullnull
Description
The background color of the RadioButton ripple.
+
Description
The border color of the track when the hovered Switch is not checked.
$kendo-radio-ripple-opacityNumber.250.25
Description
The opacity of the RadioButton ripple.
-
- -### Rating - - - - - - - - - - - - - - - - - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-rating-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"$kendo-switch-off-track-hover-gradientNullnullnull
Description
The font family of the Rating.
+
Description
The background gradient of the track when the hovered Switch is not checked.
$kendo-rating-font-sizeNumber$kendo-font-size-md1rem$kendo-switch-off-track-focus-bgNullnullnull
Description
The font size of the Rating.
+
Description
The background of the track when the focused Switch is not checked.
$kendo-rating-line-heightNumber$kendo-line-height-md1.5$kendo-switch-off-track-focus-textNullnullnull
Description
The line height of the Rating.
+
Description
The text color of the track when the focused Switch is not checked.
$kendo-rating-container-margin-xNumber$kendo-padding-sm-x0.5rem$kendo-switch-off-track-focus-borderColorif($kendo-enable-color-system, k-color( primary-emphasis ), k-color-mix( $kendo-switch-off-track-bg, $kendo-color-primary ))#86b7fe
Description
The horizontal margin of the Rating container.
+
Description
The border color of the track when the focused Switch is not checked.
$kendo-rating-item-padding-xNumber$kendo-padding-sm-x0.5rem$kendo-switch-off-track-focus-gradientNullnullnull
Description
The horizontal padding of the Rating item.
+
Description
The background gradient of the track when the focused Switch is not checked.
$kendo-rating-item-padding-yNumber$kendo-padding-md-y0.5rem$kendo-switch-off-track-focus-ringList.25rem solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))0.25rem solid rgba(13, 110, 253, 0.25)
Description
The vertical padding of the Rating item.
+
Description
The ring around the track when the focused Switch is not checked.
$kendo-rating-label-margin-xNumber$kendo-padding-md-x1rem$kendo-switch-off-track-disabled-bgColorif($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $gray-800, $gray-200 ))#e9ecef
Description
The horizontal margin of the Rating label.
+
Description
The background of the track when the disabled Switch is not checked.
$kendo-rating-label-margin-yNumber$kendo-padding-md-y0.5rem$kendo-switch-off-track-disabled-textNullnullnull
Description
The vertical margin of the Rating label.
+
Description
The text color of the track when the disabled Switch is not checked.
$kendo-rating-label-line-heightNumber$kendo-line-height-lg2$kendo-switch-off-track-disabled-borderNullnullnull
Description
The line height of the Rating label.
+
Description
The border color of the track when the disabled Switch is not checked.
$kendo-rating-icon-textColor$kendo-subtle-text#6c757d$kendo-switch-off-track-disabled-gradientNullnullnull
Description
The text color of the Rating icon.
+
Description
The background gradient of the track when the disabled Switch is not checked.
$kendo-rating-icon-selected-text$kendo-switch-off-thumb-bg Color$kendo-selected-bg#0d6efd$gray-500#adb5bd
Description
The text color of the selected Rating icon.
+
Description
The background of the thumb when the Switch is not checked.
$kendo-rating-icon-hover-textColor$kendo-selected-bg#0d6efd$kendo-switch-off-thumb-textNullnullnull
Description
The text color of the hovered Rating icon.
+
Description
The text color of the thumb when the Switch is not checked.
$kendo-rating-icon-focus-textColor$kendo-selected-bg#0d6efd$kendo-switch-off-thumb-borderNullnullnull
Description
The text color of the focused Rating icon.
+
Description
The border color of the thumb when the Switch is not checked.
$kendo-rating-icon-focus-shadowList0 2px 4px rgba( black, .1 )0 2px 4px rgba(0, 0, 0, 0.1)$kendo-switch-off-thumb-gradientNullnullnull
Description
The shadow of the focused Rating icon.
+
Description
The background gradient of the thumb when the Switch is not checked.
$kendo-rating-icon-focus-selected-shadowList0 2px 4px rgba( black, .1)0 2px 4px rgba(0, 0, 0, 0.1)$kendo-switch-off-thumb-hover-bgNullnullnull
Description
The shadow of the focused and selected Rating icon.
+
Description
The background of the thumb when the hovered Switch is not checked.
- -### Scrollview - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-scrollview-border-widthNumber1px1px
$kendo-switch-off-thumb-hover-textNullnullnull
Description
The width of the border around the ScrollView.
+
Description
The text color of the thumb when the hovered Switch is not checked.
$kendo-scrollview-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"$kendo-switch-off-thumb-hover-borderNullnullnull
Description
The font family of the ScrollView.
+
Description
The border color of the thumb when the hovered Switch is not checked.
$kendo-scrollview-font-sizeNumber$kendo-font-size-md1rem$kendo-switch-off-thumb-hover-gradientNullnullnull
Description
The font size of the ScrollView.
+
Description
The background gradient of the thumb when the hovered Switch is not checked.
$kendo-scrollview-line-heightNumber$kendo-line-height-md1.5$kendo-switch-on-track-bgColor$kendo-color-primary#0d6efd
Description
The line height of the ScrollView.
+
Description
The background of the track when the Switch is checked.
$kendo-scrollview-textColor$kendo-component-text#212529$kendo-switch-on-track-textNullnullnull
Description
The text color of the ScrollView.
+
Description
The text color of the track when the Switch is checked.
$kendo-scrollview-bg$kendo-switch-on-track-border Color$kendo-component-bg#ffffff$kendo-switch-on-track-bg#0d6efd
Description
The background color of the ScrollView.
+
Description
The border color of the track when the Switch is checked.
$kendo-scrollview-borderColor$kendo-component-border#dee2e6$kendo-switch-on-track-gradientNullnullnull
Description
The border color of the ScrollView.
+
Description
The background gradient of the track when the Switch is checked.
$kendo-scrollview-pagebutton-sizeNumber10px10px$kendo-switch-on-track-hover-bgNullnullnull
Description
The size of the ScrollView page button.
+
Description
The background of the track when the hovered Switch is checked.
$kendo-scrollview-pagebutton-bgColor$kendo-button-bg#e4e7eb$kendo-switch-on-track-hover-textNullnullnull
Description
The background color of the ScrollView page button.
+
Description
The text color of the track when the hovered Switch is checked.
$kendo-scrollview-pagebutton-borderColor$kendo-button-border#e4e7eb$kendo-switch-on-track-hover-borderNullnullnull
Description
The border color of the ScrollView page button.
+
Description
The border color of the track when the hovered Switch is checked.
$kendo-scrollview-pagebutton-primary-bgColor$kendo-color-primary#0d6efd$kendo-switch-on-track-hover-gradientNullnullnull
Description
The primary background color of the ScrollView page button.
+
Description
The background gradient of the track when the hovered Switch is checked.
$kendo-scrollview-pagebutton-primary-borderColor$kendo-color-primary#0d6efd$kendo-switch-on-track-focus-bgNullnullnull
Description
The primary border color of the ScrollView page button.
+
Description
The background of the track when the focused Switch is checked.
$kendo-scrollview-pagebutton-shadowList0 0 0 2px rgba( black, .13 )0 0 0 2px rgba(0, 0, 0, 0.13)$kendo-switch-on-track-focus-textNullnullnull
Description
The box shadow of the ScrollView page button.
+
Description
The text color of the track when the focused Switch is checked.
$kendo-scrollview-pager-offsetNumber00$kendo-switch-on-track-focus-borderNullnullnull
Description
The offset of the ScrollView pager.
+
Description
The border color of the track when the focused Switch is checked.
$kendo-scrollview-pager-item-spacingNumber20px20px$kendo-switch-on-track-focus-gradientNullnullnull
Description
The spacing between the ScrollView pager items.
+
Description
The background gradient of the track when the focused Switch is checked.
$kendo-scrollview-pager-item-border-widthNumber0px0px$kendo-switch-on-track-focus-ringList.25rem solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-switch-on-track-border, .25 ))0.25rem solid rgba(13, 110, 253, 0.25)
Description
The border width of the ScrollView pager items.
+
Description
The ring around the track when the focused Switch is checked.
$kendo-scrollview-pager-heightCalculationcalc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + #{$kendo-scrollview-pager-item-spacing * 2} )calc(10px + 0px + 40px)$kendo-switch-on-track-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( primary ), .5 ), k-try-tint( $kendo-switch-on-track-bg, 50% ))#86b7fe
Description
The height of the ScrollView pager.
+
Description
The background of the track when the disabled Switch is checked.
$kendo-scrollview-arrow-tap-highlight-colorColor$kendo-color-rgba-transparentrgba(0, 0, 0, 0)$kendo-switch-on-track-disabled-textNullnullnull
Description
The text color of the highlight over the tapped ScrollView navigation arrows.
+
Description
The text color of the track when the disabled Switch is checked.
$kendo-scrollview-navigation-colorColorwhitewhite$kendo-switch-on-track-disabled-borderNullnullnull
Description
The color of the ScrollView navigation arrows.
+
Description
The border color of the track when the disabled Switch is checked.
$kendo-scrollview-navigation-icon-shadowListrgba( black, .3 ) 0 0 15pxrgba(0, 0, 0, 0.3) 0 0 15px$kendo-switch-on-track-disabled-gradientNullnullnull
Description
The box shadow of the ScrollView navigation arrows.
+
Description
The background gradient of the track when the disabled Switch is checked.
$kendo-scrollview-navigation-bg$kendo-switch-on-thumb-bg Colorrgba( black, 0 )rgba(0, 0, 0, 0)if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-switch-on-track-bg ))white
Description
The background color of the ScrollView navigation.
+
Description
The background of the thumb when the Switch is checked.
$kendo-scrollview-navigation-default-opacityNumber.70.7$kendo-switch-on-thumb-textNullnullnull
Description
The opacity of the ScrollView navigation.
+
Description
The text color of the thumb when the Switch is checked.
$kendo-scrollview-navigation-hover-opacityNumber11$kendo-switch-on-thumb-borderNullnullnull
Description
The hover opacity of the ScrollView navigation.
+
Description
The border color of the thumb when the Switch is checked.
$kendo-scrollview-navigation-hover-span-bg$kendo-switch-on-thumb-gradient Null null null
Description
The hover background color of the ScrollView navigation arrows.
+
Description
The background gradient of the thumb when the Switch is checked.
$kendo-scrollview-light-bgColorrgba( white, .4 )rgba(255, 255, 255, 0.4)$kendo-switch-on-thumb-hover-bgNullnullnull
Description
The background color of the ScrollView pager in light mode.
+
Description
The background of the thumb when the hovered Switch is checked.
$kendo-scrollview-dark-bgColorrgba( black, .4 )rgba(0, 0, 0, 0.4)$kendo-switch-on-thumb-hover-textNullnullnull
Description
The background color of the ScrollView pager in dark mode.
+
Description
The text color of the thumb when the hovered Switch is checked.
$kendo-scrollview-transition-durationNumber.3s0.3s$kendo-switch-on-thumb-hover-borderNullnullnull
Description
The duration of the ScrollView transition.
+
Description
The border color of the thumb when the hovered Switch is checked.
$kendo-scrollview-transition-timing-functionStringease-in-outease-in-out$kendo-switch-on-thumb-hover-gradientNullnullnull
Description
The timing function of the ScrollView transition.
+
Description
The background gradient of the thumb when the hovered Switch is checked.
-### Skeleton +### Table @@ -14263,1426 +16997,1422 @@ The following table lists the available variables for customizing the Bootstrap - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
$kendo-skeleton-text-transformStringscale( 1, .6 )scale(1, 0.6)$kendo-table-border-widthNumber1px1px
Description
The transform scale of the Skeleton text.
+
Description
The width of the table border.
$kendo-skeleton-text-border-radius$kendo-table-cell-vertical-border-width Number$kendo-border-radius-md0.375rem1px1px
Description
The border radius of the Skeleton text.
+
Description
The width of vertical border of table cells.
$kendo-skeleton-rect-border-radius$kendo-table-cell-horizontal-border-width Number000px0px
Description
The border radius of the rectangular Skeleton.
+
Description
The width of horizontal border of table cells.
$kendo-skeleton-circle-border-radiusNumber9999px9999px$kendo-table-font-sizeNullnullnull
Description
The border radius of the circular Skeleton.
+
Description
The font size of the table if no size is specified.
$kendo-skeleton-item-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), rgba( $kendo-color-inverse, .2 ))rgba(33, 37, 41, 0.2)$kendo-table-line-heightNullnullnull
Description
The background color of the Skeleton item.
+
Description
The line-height of the table if no size is specified.
$kendo-skeleton-wave-bgColorrgba( black, .04 )rgba(0, 0, 0, 0.04)$kendo-table-cell-padding-xNullnullnull
Description
The background color of the Skeleton wave animation.
+
Description
The horizontal padding of the cells in the table if no size is specified.
- -### Split-button - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-split-button-focus-shadowList$kendo-button-focus-shadow0 0 0 0.25rem rgba(228, 231, 235, 0.5)
$kendo-table-cell-padding-yNullnullnull
Description
The focus shadow of the SplitButton.
+
Description
The vertical padding of the cells in the table if no size is specified.
$kendo-split-button-arrow-padding-xNumber$kendo-button-padding-y0.375rem$kendo-table-sizesMap( + sm: ( + font-size: $kendo-font-size-md, + line-height: $kendo-line-height-md, + cell-padding-x: $kendo-table-sm-cell-padding-x, + cell-padding-y: $kendo-table-sm-cell-padding-y + ), + md: ( + font-size: $kendo-font-size-md, + line-height: $kendo-line-height-md, + cell-padding-x: $kendo-table-md-cell-padding-x, + cell-padding-y: $kendo-table-md-cell-padding-y + ), + lg: ( + font-size: $kendo-font-size-md, + line-height: $kendo-line-height-md, + cell-padding-x: $kendo-table-lg-cell-padding-x, + cell-padding-y: $kendo-table-lg-cell-padding-y + ) +)(sm: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.25rem), md: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.5rem), lg: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.625rem))
Description
The horizontal padding of the arrow Button.
+
Description
The sizes of the table.
$kendo-split-button-sm-arrow-padding-xNumber$kendo-button-sm-padding-y0.25rem$kendo-table-bgColor$kendo-component-bg#ffffff
Description
The horizontal padding of the small arrow Button.
+
Description
Background color of tables.
$kendo-split-button-md-arrow-padding-xNumber$kendo-button-md-padding-y0.375rem$kendo-table-textColor$kendo-component-text#212529
Description
The horizontal padding of the medium arrow Button.
+
Description
Text color of tables.
$kendo-split-button-lg-arrow-padding-xNumber$kendo-button-lg-padding-y0.5rem$kendo-table-borderColor$kendo-component-border#dee2e6
Description
The horizontal padding of the large arrow Button.
+
Description
Border color of tables.
$kendo-split-button-arrow-padding-yNumber$kendo-button-padding-y0.375rem$kendo-table-header-bgColor$kendo-component-header-bg#f8f9fa
Description
The vertical padding of the arrow Button.
+
Description
Background color of table headers.
$kendo-split-button-sm-arrow-padding-yNumber$kendo-button-sm-padding-y0.25rem$kendo-table-header-textColor$kendo-component-header-text#212529
Description
The vertical padding of the small arrow Button.
+
Description
Text color of table headers.
$kendo-split-button-md-arrow-padding-yNumber$kendo-button-md-padding-y0.375rem$kendo-table-header-borderColor$kendo-component-header-border#dee2e6
Description
The vertical padding of the medium arrow Button.
+
Description
Border color of table headers.
$kendo-split-button-lg-arrow-padding-yNumber$kendo-button-lg-padding-y0.5rem$kendo-table-header-gradientNull$kendo-component-header-gradientnull
Description
The vertical padding of the large arrow Button.
+
Description
Gradient of table headers.
- -### Switch - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + + + + + + + + + - - + + - - + - - + - - + - - + - - + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - + + +
NameTypeDefault valueComputed value
$kendo-switch-font-familyNullnullnull
$kendo-table-footer-bgColor$kendo-table-header-bg#f8f9fa
Description
The font family of the Switch.
+
Description
Background color of table footers.
$kendo-switch-track-border-widthNumber1px1px$kendo-table-footer-textColor$kendo-table-header-text#212529
Description
The border width of the Switch track.
+
Description
Text color of table footers.
$kendo-switch-thumb-border-widthNullnullnull$kendo-table-footer-borderColor$kendo-table-header-border#dee2e6
Description
The border width of the Switch thumb.
+
Description
Border color of table footers.
$kendo-switch-label-text-transformNullnullnull$kendo-table-group-row-bgColor$kendo-table-header-bg#f8f9fa
Description
The text transform of the Switch label.
+
Description
Background color of group rows in table.
$kendo-switch-label-displayStringnonenone$kendo-table-group-row-textColor$kendo-table-header-text#212529
Description
The display of the Switch label.
+
Description
Text color of group rows in table.
$kendo-switch-sizesMap( - sm: ( font-size: null, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: null ), - md: ( font-size: null, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: null ), - lg: ( font-size: null, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: null ) -)(sm: (font-size: null, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: null), md: (font-size: null, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: null), lg: (font-size: null, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: null))$kendo-table-group-row-borderColor$kendo-table-header-border#dee2e6
Description
The map with the different Switch sizes.
+
Description
Border color of group rows in table.
$kendo-switch-off-track-bg$kendo-table-alt-row-bg Color$kendo-component-bg#ffffffif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-color( $kendo-table-bg ), .04 ))rgba(0, 0, 0, 0.04)
Description
The background of the track when the Switch is not checked.
+
Description
Background color of alternating rows in table.
$kendo-switch-off-track-text$kendo-table-alt-row-text Null null null
Description
The text color of the track when the Switch is not checked.
+
Description
Text color of alternating rows in table.
$kendo-switch-off-track-border$kendo-table-alt-row-borderNullnullnull
Description
Border color of alternating rows in table.
+
$kendo-table-hover-bg Color$gray-500#adb5bdif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .09 ), rgba( k-contrast-color( $kendo-table-bg ), .08 ))rgba(0, 0, 0, 0.08)
Description
The border color of the track when the Switch is not checked.
+
Description
Background color of hovered rows in table.
$kendo-switch-off-track-gradient$kendo-table-hover-text Null null null
Description
The background gradient of the track when the Switch is not checked.
+
Description
Text color of hovered rows in table.
$kendo-switch-off-track-hover-bg$kendo-table-hover-border Null null null
Description
The background of the track when the hovered Switch is not checked.
+
Description
Border color of hovered rows in table.
$kendo-switch-off-track-hover-text$kendo-table-focus-bg Null null null
Description
The text color of the track when the hovered Switch is not checked.
+
Description
Background color of focused rows in table.
$kendo-switch-off-track-hover-border$kendo-table-focus-text Null null null
Description
The border color of the track when the hovered Switch is not checked.
+
Description
Text color of focused rows in table.
$kendo-switch-off-track-hover-gradient$kendo-table-focus-border Null null null
Description
The background gradient of the track when the hovered Switch is not checked.
+
Description
Border color of focused rows in table.
$kendo-switch-off-track-focus-bgNullnullnull$kendo-table-focus-shadowListinset 0 0 0 2px rgba( $kendo-color-black, .08)inset 0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The background of the track when the focused Switch is not checked.
+
Description
Box shadow of focused rows in table.
$kendo-switch-off-track-focus-textNullnullnull$kendo-table-selected-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 ))rgba(13, 110, 253, 0.25)
Description
The text color of the track when the focused Switch is not checked.
+
Description
Background color of selected rows in table.
$kendo-switch-off-track-focus-border$kendo-table-selected-text Colorif($kendo-enable-color-system, k-color( primary-emphasis ), k-color-mix( $kendo-switch-off-track-bg, $kendo-color-primary ))#86b7fe$kendo-table-text#212529
Description
The border color of the track when the focused Switch is not checked.
+
Description
Text color of selected rows in table.
$kendo-switch-off-track-focus-gradient$kendo-table-selected-border Null null null
Description
The background gradient of the track when the focused Switch is not checked.
+
Description
Border color of selected rows in table.
+
+ +### Tabstrip + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + - - + - - + - - - - - + + + + - - + - - + + - - + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-tabstrip-bgNullnullnull
Description
Background color of tabstrip component
$kendo-switch-off-track-focus-ringList.25rem solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))0.25rem solid rgba(13, 110, 253, 0.25)$kendo-tabstrip-textColor$kendo-component-text#212529
Description
The ring around the track when the focused Switch is not checked.
+
Description
Text color of tabstrip component
$kendo-switch-off-track-disabled-bg$kendo-tabstrip-border Colorif($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $gray-800, $gray-200 ))#e9ecef$kendo-component-border#dee2e6
Description
The background of the track when the disabled Switch is not checked.
+
Description
Border color of tabstrip component
$kendo-switch-off-track-disabled-textNullnullnull$kendo-tabstrip-item-padding-xNumber$nav-link-padding-x1rem
Description
The text color of the track when the disabled Switch is not checked.
+
Description
Horizontal padding of tabs
$kendo-switch-off-track-disabled-borderNullnullnull$kendo-tabstrip-item-padding-yNumber$nav-link-padding-y0.5rem
Description
The border color of the track when the disabled Switch is not checked.
+
Description
Vertical padding of tabs
$kendo-switch-off-track-disabled-gradientNullnullnull$kendo-tabstrip-item-border-widthNumber1px1px
Description
The background gradient of the track when the disabled Switch is not checked.
+
Description
Width of border around tabs
$kendo-switch-off-thumb-bgColor$gray-500#adb5bd$kendo-tabstrip-item-border-radiusNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The background of the thumb when the Switch is not checked.
+
Description
Border radius of tabs
$kendo-switch-off-thumb-textNullnullnull$kendo-tabstrip-item-gapNumber00
Description
The text color of the thumb when the Switch is not checked.
+
Description
Spacing between tabs
$kendo-switch-off-thumb-border$kendo-tabstrip-item-bg Null null null
Description
The border color of the thumb when the Switch is not checked.
+
Description
Background color of tabs
$kendo-switch-off-thumb-gradientNullnullnull$kendo-tabstrip-item-textColor$kendo-link-text#0d6efd
Description
The background gradient of the thumb when the Switch is not checked.
+
Description
Text color of tabs
$kendo-switch-off-thumb-hover-bg$kendo-tabstrip-item-border Null null null
Description
The background of the thumb when the hovered Switch is not checked.
+
Description
Border color of tabs
$kendo-switch-off-thumb-hover-text$kendo-tabstrip-item-gradient Null null null
Description
The text color of the thumb when the hovered Switch is not checked.
+
Description
Background gradient of tabs
$kendo-switch-off-thumb-hover-border$kendo-tabstrip-item-hover-bg Null null null
Description
The border color of the thumb when the hovered Switch is not checked.
+
Description
Background color of hovered tabs
$kendo-switch-off-thumb-hover-gradientNullnullnull$kendo-tabstrip-item-hover-textColor$kendo-link-hover-text#0a58ca
Description
The background gradient of the thumb when the hovered Switch is not checked.
+
Description
Text color of hovered tabs
$kendo-switch-on-track-bg$kendo-tabstrip-item-hover-border Color$kendo-color-primary#0d6efd$gray-200#e9ecef
Description
The background of the track when the Switch is checked.
+
Description
Border color of hovered tabs
$kendo-switch-on-track-text$kendo-tabstrip-item-hover-gradient Null null null
Description
The text color of the track when the Switch is checked.
+
Description
Background gradient of hovered tabs
$kendo-switch-on-track-border$kendo-tabstrip-item-selected-bg Color$kendo-switch-on-track-bg#0d6efd$kendo-component-bg#ffffff
Description
The border color of the track when the Switch is checked.
+
Description
Background color of selected tabs
$kendo-switch-on-track-gradientNullnullnull$kendo-tabstrip-item-selected-textColor$kendo-component-text#212529
Description
The background gradient of the track when the Switch is checked.
+
Description
Text color of selected tabs
$kendo-switch-on-track-hover-bgNullnullnull$kendo-tabstrip-item-selected-borderColor$kendo-component-border#dee2e6
Description
The background of the track when the hovered Switch is checked.
+
Description
Border color of selected tabs
$kendo-switch-on-track-hover-text$kendo-tabstrip-item-selected-gradient Null null null
Description
The text color of the track when the hovered Switch is checked.
+
Description
Background gradient of selected tabs
$kendo-switch-on-track-hover-borderNullnullnull$kendo-tabstrip-content-padding-xNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The border color of the track when the hovered Switch is checked.
+
Description
Horizontal padding of tabstrip content
$kendo-switch-on-track-hover-gradientNullnullnull$kendo-tabstrip-content-padding-yNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The background gradient of the track when the hovered Switch is checked.
+
Description
Vertical padding of tabstrip content
$kendo-switch-on-track-focus-bgNullnullnull$kendo-tabstrip-content-border-widthNumber$kendo-tabstrip-border-width1px
Description
The background of the track when the focused Switch is checked.
+
Description
Width of border around tabstrip content
$kendo-switch-on-track-focus-textNullnullnull$kendo-tabstrip-content-bgColor$kendo-component-bg#ffffff
Description
The text color of the track when the focused Switch is checked.
+
Description
Background color of tabstrip content
$kendo-switch-on-track-focus-borderNullnullnull$kendo-tabstrip-content-textColor$kendo-component-text#212529
Description
The border color of the track when the focused Switch is checked.
+
Description
Text color of tabstrip content
$kendo-switch-on-track-focus-gradientNullnullnull$kendo-tabstrip-content-borderColor$kendo-component-border#dee2e6
Description
The background gradient of the track when the focused Switch is checked.
+
Description
Border color of tabstrip content
$kendo-switch-on-track-focus-ringList.25rem solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-switch-on-track-border, .25 ))0.25rem solid rgba(13, 110, 253, 0.25)$kendo-tabstrip-content-focus-borderColor$kendo-component-text#212529
Description
The ring around the track when the focused Switch is checked.
+
Description
Border color of tabstrip focused content
$kendo-switch-on-track-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( primary ), .5 ), k-try-tint( $kendo-switch-on-track-bg, 50% ))#86b7fe
+ +### Taskboard + + + + + + + + + + + + + + + + + + + + + - - + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - + - - + + + + + + + + + + + + + + + + + + + - - + - - + - - -
NameTypeDefault valueComputed value
$kendo-taskboard-spacerNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The background of the track when the disabled Switch is checked.
+
Description
The spacing index of the TaskBoard.
$kendo-switch-on-track-disabled-text$kendo-taskboard-padding-y Null null null
Description
The text color of the track when the disabled Switch is checked.
+
Description
The vertical padding of the TaskBoard.
$kendo-switch-on-track-disabled-border$kendo-taskboard-padding-x Null null null
Description
The border color of the track when the disabled Switch is checked.
+
Description
The horizontal of the TaskBoard.
$kendo-switch-on-track-disabled-gradientNullnullnull$kendo-taskboard-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The background gradient of the track when the disabled Switch is checked.
+
Description
The font family of the TaskBoard.
$kendo-switch-on-thumb-bgColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-switch-on-track-bg ))white$kendo-taskboard-font-sizeNumber$kendo-font-size-md1rem
Description
The background of the thumb when the Switch is checked.
+
Description
The font size of the TaskBoard.
$kendo-switch-on-thumb-textNullnullnull$kendo-taskboard-line-heightNumber$kendo-line-height-md1.5
Description
The text color of the thumb when the Switch is checked.
+
Description
The line height of the TaskBoard.
$kendo-switch-on-thumb-border$kendo-taskboard-bg Null null null
Description
The border color of the thumb when the Switch is checked.
+
Description
The background color of the TaskBoard.
$kendo-switch-on-thumb-gradient$kendo-taskboard-text Null null null
Description
The background gradient of the thumb when the Switch is checked.
+
Description
The text color of the TaskBoard.
$kendo-switch-on-thumb-hover-bg$kendo-taskboard-border Null null null
Description
The background of the thumb when the hovered Switch is checked.
+
Description
The border color of the TaskBoard.
$kendo-switch-on-thumb-hover-text$kendo-taskboard-toolbar-padding-yNumber$kendo-taskboard-spacer1rem
Description
The vertical padding of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-padding-xNumber$kendo-taskboard-toolbar-padding-y1rem
Description
The horizontal padding of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-bg Null null null
Description
The text color of the thumb when the hovered Switch is checked.
+
Description
The background color of the TaskBoard Toolbar.
$kendo-switch-on-thumb-hover-border$kendo-taskboard-toolbar-text Null null null
Description
The border color of the thumb when the hovered Switch is checked.
+
Description
The text color of the TaskBoard Toolbar.
$kendo-switch-on-thumb-hover-gradient$kendo-taskboard-toolbar-border Null null null
Description
The background gradient of the thumb when the hovered Switch is checked.
+
Description
The border color of the TaskBoard Toolbar.
- -### Table - - - - - - - - - - - - - - - - - - - - - + + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-table-border-widthNumber1px1px
$kendo-taskboard-toolbar-gradientNullnullnull
Description
The width of the table border.
+
Description
The gradient of the TaskBoard Toolbar.
$kendo-table-cell-vertical-border-width$kendo-taskboard-content-padding-y Number1px1px$kendo-taskboard-spacer1rem
Description
The width of vertical border of table cells.
+
Description
The vertical padding of the TaskBoard content.
$kendo-table-cell-horizontal-border-widthNumber0px0px$kendo-taskboard-content-padding-xNumber$kendo-taskboard-content-padding-y1rem
Description
The width of horizontal border of table cells.
+
Description
The horizontal padding of the TaskBoard content.
$kendo-table-font-sizeNullnullnull$kendo-taskboard-column-container-spacing-yNumber$kendo-taskboard-spacer * .750.75rem
Description
The font size of the table if no size is specified.
+
Description
The vertical spacing of the TaskBoard column container.
$kendo-table-line-heightNullnullnull$kendo-taskboard-column-container-padding-yNumber0px0px
Description
The line-height of the table if no size is specified.
+
Description
The vertical padding of the TaskBoard column container.
$kendo-table-cell-padding-xNullnullnull$kendo-taskboard-column-container-padding-xNumber$kendo-taskboard-spacer * .750.75rem
Description
The horizontal padding of the cells in the table if no size is specified.
+
Description
The horizontal padding of the TaskBoard column container.
$kendo-table-cell-padding-yNullnullnull$kendo-taskboard-columns-container-gapNumber$kendo-taskboard-spacer1rem
Description
The vertical padding of the cells in the table if no size is specified.
+
Description
The spacing of the TaskBoard columns container.
$kendo-table-sizesMap( - sm: ( - font-size: $kendo-font-size-md, - line-height: $kendo-line-height-md, - cell-padding-x: $kendo-table-sm-cell-padding-x, - cell-padding-y: $kendo-table-sm-cell-padding-y - ), - md: ( - font-size: $kendo-font-size-md, - line-height: $kendo-line-height-md, - cell-padding-x: $kendo-table-md-cell-padding-x, - cell-padding-y: $kendo-table-md-cell-padding-y - ), - lg: ( - font-size: $kendo-font-size-md, - line-height: $kendo-line-height-md, - cell-padding-x: $kendo-table-lg-cell-padding-x, - cell-padding-y: $kendo-table-lg-cell-padding-y - ) -)(sm: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.25rem), md: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.5rem), lg: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.625rem))$kendo-taskboard-column-widthNumber320px320px
Description
The sizes of the table.
+
Description
The default width of the TaskBoard column.
$kendo-table-bgColor$kendo-component-bg#ffffff$kendo-taskboard-column-border-widthNumber1px1px
Description
Background color of tables.
+
Description
The border width of the TaskBoard column.
$kendo-table-textColor$kendo-component-text#212529$kendo-taskboard-column-border-radiusNumber$kendo-border-radius-sm0.25rem
Description
Text color of tables.
+
Description
The border radius of the TaskBoard column.
$kendo-table-border$kendo-taskboard-column-bg Color$kendo-component-border#dee2e6if($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $gray-900, $gray-100 ))#f8f9fa
Description
Border color of tables.
+
Description
The background color of the TaskBoard column.
$kendo-table-header-bgColor$kendo-component-header-bg#f8f9fa$kendo-taskboard-column-textNullnullnull
Description
Background color of table headers.
+
Description
The text color of the TaskBoard column.
$kendo-table-header-text$kendo-taskboard-column-border Color$kendo-component-header-text#212529transparenttransparent
Description
Text color of table headers.
+
Description
The border color of the TaskBoard column.
$kendo-table-header-borderColor$kendo-component-header-border#dee2e6$kendo-taskboard-column-focus-bgNullnullnull
Description
Border color of table headers.
+
Description
The background color of the focused TaskBoard column.
$kendo-table-header-gradient$kendo-taskboard-column-focus-text Null$kendo-component-header-gradientnull null
Description
Gradient of table headers.
+
Description
The text color of the focused TaskBoard column.
$kendo-table-footer-bg$kendo-taskboard-column-focus-border Color$kendo-table-header-bg#f8f9faif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 ))#b6b7b8
Description
Background color of table footers.
+
Description
The border color of the focused TaskBoard column.
$kendo-table-footer-textColor$kendo-table-header-text#212529$kendo-taskboard-column-header-padding-yNumber$kendo-taskboard-spacer * .750.75rem
Description
Text color of table footers.
+
Description
The vertical padding of the TaskBoard column header.
$kendo-table-footer-borderColor$kendo-table-header-border#dee2e6$kendo-taskboard-column-header-padding-xNumber$kendo-taskboard-column-header-padding-y0.75rem
Description
Border color of table footers.
+
Description
The horizontal padding of the TaskBoard column header.
$kendo-table-group-row-bgColor$kendo-table-header-bg#f8f9fa$kendo-taskboard-column-header-gapNumberk-math-div( $kendo-taskboard-spacer, 4 )0.25rem
Description
Background color of group rows in table.
+
Description
The spacing of the TaskBoard column header.
$kendo-table-group-row-textColor$kendo-table-header-text#212529$kendo-taskboard-column-header-actions-gapNumberk-math-div( $kendo-taskboard-spacer, 2 )0.5rem
Description
Text color of group rows in table.
+
Description
The spacing of the TaskBoard column header actions.
$kendo-table-group-row-borderColor$kendo-table-header-border#dee2e6$kendo-taskboard-column-header-font-weightNumber500500
Description
Border color of group rows in table.
+
Description
The font weight of the TaskBoard column header.
$kendo-table-alt-row-bg$kendo-taskboard-column-header-text Colorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-color( $kendo-table-bg ), .04 ))rgba(0, 0, 0, 0.04)$kendo-component-header-text#212529
Description
Background color of alternating rows in table.
+
Description
The text color of the TaskBoard column header.
$kendo-table-alt-row-textNullnullnull$kendo-taskboard-column-cards-padding-yNumber$kendo-taskboard-spacer * .250.25rem
Description
Text color of alternating rows in table.
+
Description
The vertical padding of the TaskBoard column Card wrapper.
$kendo-table-alt-row-borderNullnullnull$kendo-taskboard-column-cards-padding-xNumber0px0px
Description
Border color of alternating rows in table.
+
Description
The horizontal padding of the TaskBoard column Card wrapper.
$kendo-table-hover-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .09 ), rgba( k-contrast-color( $kendo-table-bg ), .08 ))rgba(0, 0, 0, 0.08)$kendo-taskboard-column-cards-gapNumber$kendo-taskboard-spacer * .750.75rem
Description
Background color of hovered rows in table.
+
Description
The spacing of the TaskBoard column Card wrapper.
$kendo-table-hover-textNullnullnull$kendo-taskboard-pane-widthNumber$kendo-taskboard-column-width320px
Description
Text color of hovered rows in table.
+
Description
The default width of the TaskBoard pane.
$kendo-table-hover-border$kendo-taskboard-pane-padding-y Null null null
Description
Border color of hovered rows in table.
+
Description
The vertical padding of the TaskBoard pane.
$kendo-table-focus-bg$kendo-taskboard-pane-padding-x Null null null
Description
Background color of focused rows in table.
+
Description
The horizontal padding of the TaskBoard pane.
$kendo-table-focus-textNullnullnull$kendo-taskboard-pane-border-widthNumber1px1px
Description
Text color of focused rows in table.
+
Description
The border width of the TaskBoard pane.
$kendo-table-focus-borderNullnullnull$kendo-taskboard-pane-bgColor$kendo-component-bg#ffffff
Description
Border color of focused rows in table.
+
Description
The background color of the TaskBoard pane.
$kendo-table-focus-shadowListinset 0 0 0 2px rgba( $kendo-color-black, .08)inset 0 0 0 2px rgba(0, 0, 0, 0.08)$kendo-taskboard-pane-textColor$kendo-component-text#212529
Description
Box shadow of focused rows in table.
+
Description
The text color of the TaskBoard pane.
$kendo-table-selected-bg$kendo-taskboard-pane-border Colorif($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 ))rgba(13, 110, 253, 0.25)$kendo-component-border#dee2e6
Description
Background color of selected rows in table.
+
Description
The border color of the TaskBoard pane.
$kendo-table-selected-textColor$kendo-table-text#212529$kendo-taskboard-pane-header-padding-yNumber( $kendo-taskboard-spacer * .75 )0.75rem
Description
Text color of selected rows in table.
+
Description
The vertical padding of the TaskBoard pane header.
$kendo-table-selected-borderNullnullnull$kendo-taskboard-pane-header-padding-xNumber$kendo-taskboard-spacer1rem
Description
Border color of selected rows in table.
+
Description
The horizontal padding of the TaskBoard pane header.
- -### Tabstrip - - - - - - - - - - - - - - - - - - - - - + + + + + - - + - + - - - - - + + + + - - + - + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - - + - - + + - - + - - - - - - - - - - @@ -17537,6 +20267,126 @@ The following table lists the available variables for customizing the Bootstrap
NameTypeDefault valueComputed value
$kendo-tabstrip-bgNullnullnull
$kendo-taskboard-pane-header-font-weightNumber500500
Description
Background color of tabstrip component
+
Description
The font weight of the TaskBoard pane header.
$kendo-tabstrip-text$kendo-taskboard-pane-header-text Color$kendo-component-text$kendo-component-header-text #212529
Description
Text color of tabstrip component
+
Description
The text color of the TaskBoard pane header.
$kendo-tabstrip-borderColor$kendo-component-border#dee2e6$kendo-taskboard-pane-content-padding-yNumber0px0px
Description
Border color of tabstrip component
+
Description
The vertical padding of the TaskBoard pane content.
$kendo-tabstrip-item-padding-x$kendo-taskboard-pane-content-padding-x Number$nav-link-padding-x$kendo-taskboard-spacer 1rem
Description
Horizontal padding of tabs
+
Description
The horizontal padding of the TaskBoard pane content.
$kendo-tabstrip-item-padding-y$kendo-taskboard-pane-actions-padding-y Number$nav-link-padding-y0.5rem( $kendo-taskboard-spacer * .75 )0.75rem
Description
Vertical padding of tabs
+
Description
The vertical padding of the TaskBoard pane actions.
$kendo-tabstrip-item-border-width$kendo-taskboard-pane-actions-padding-x Number1px1px$kendo-taskboard-spacer1rem
Description
Width of border around tabs
+
Description
The horizontal padding of the TaskBoard pane actions.
$kendo-tabstrip-item-border-radius$kendo-taskboard-card-padding-y Numberk-map-get( $kendo-spacing, 1 )0.25rem$kendo-taskboard-spacer1rem
Description
Border radius of tabs
+
Description
The vertical padding of the TaskBoard Card.
$kendo-tabstrip-item-gap$kendo-taskboard-card-padding-x Number00$kendo-taskboard-card-padding-y1rem
Description
Spacing between tabs
+
Description
The horizontal padding of the TaskBoard Card.
$kendo-tabstrip-item-bgNullnullnull$kendo-taskboard-card-border-widthNumber$kendo-card-border-width1px
Description
Background color of tabs
+
Description
The border width of the TaskBoard Card.
$kendo-tabstrip-item-text$kendo-taskboard-card-border-radiusNumber$kendo-card-border-radius0.375rem
Description
The border radius of the TaskBoard Card.
+
$kendo-taskboard-card-bg Color$kendo-link-text#0d6efd$kendo-card-bg#ffffff
Description
Text color of tabs
+
Description
The background color of the TaskBoard Card.
$kendo-tabstrip-item-borderNullnullnull$kendo-taskboard-card-textColor$kendo-card-text#212529
Description
Border color of tabs
+
Description
The text color of the TaskBoard Card.
$kendo-tabstrip-item-gradientNullnullnull$kendo-taskboard-card-borderColor$kendo-card-border#dee2e6
Description
Background gradient of tabs
+
Description
The border color of the TaskBoard Card.
$kendo-tabstrip-item-hover-bg$kendo-taskboard-card-shadow Nullnull$kendo-card-shadow null
Description
Background color of hovered tabs
+
Description
The shadow of the TaskBoard Card.
$kendo-tabstrip-item-hover-textColor$kendo-link-hover-text#0a58ca$kendo-taskboard-card-category-border-widthNumber4px4px
Description
Text color of hovered tabs
+
Description
The border width of the TaskBoard Card category.
$kendo-tabstrip-item-hover-border$kendo-taskboard-card-hover-border Color$gray-200#e9ecefif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% ))#c8cbcf
Description
Border color of hovered tabs
+
Description
The border color of the hovered TaskBoard Card.
$kendo-tabstrip-item-hover-gradientNullnullnull$kendo-taskboard-card-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% ))#b6b9bd
Description
Background gradient of hovered tabs
+
Description
The border color of the focused TaskBoard Card.
$kendo-tabstrip-item-selected-bgColor$kendo-component-bg#ffffff$kendo-taskboard-card-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
Background color of selected tabs
+
Description
The shadow of the focused TaskBoard Card.
$kendo-tabstrip-item-selected-text$kendo-taskboard-card-selected-border Color$kendo-component-text#212529if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary-lighter, 8 ))#b6d3fe
Description
Text color of selected tabs
+
Description
The border of the selected TaskBoard Card.
$kendo-tabstrip-item-selected-borderColor$kendo-component-border#dee2e6$kendo-taskboard-card-selected-shadowStringnonenone
Description
Border color of selected tabs
+
Description
The shadow of the selected TaskBoard Card.
$kendo-tabstrip-item-selected-gradientNullnullnull$kendo-taskboard-card-header-textColor$kendo-color-primary#0d6efd
Description
Background gradient of selected tabs
+
Description
The text color of the TaskBoard Card header text.
$kendo-tabstrip-content-padding-xNumberk-map-get( $kendo-spacing, 4 )1rem$kendo-taskboard-card-header-focus-textColor$kendo-color-primary-darker#0b5cd5
Description
Horizontal padding of tabstrip content
+
Description
The text color of the hovered TaskBoard Card header text.
$kendo-tabstrip-content-padding-yNumberk-map-get( $kendo-spacing, 4 )1rem$kendo-taskboard-card-header-hover-textColor$kendo-color-primary-darker#0b5cd5
Description
Vertical padding of tabstrip content
+
Description
The text color of the focused TaskBoard Card header text.
$kendo-tabstrip-content-border-width$kendo-taskboard-drag-placeholder-border-width Number$kendo-tabstrip-border-width1px 1px
Description
Width of border around tabstrip content
+
Description
The border width of the TaskBoard Card placeholder.
$kendo-tabstrip-content-bgColor$kendo-component-bg#ffffff$kendo-taskboard-drag-placeholder-border-radiusNumber$kendo-taskboard-card-border-radius0.375rem
Description
Background color of tabstrip content
+
Description
The border radius of the TaskBoard Card placeholder.
$kendo-tabstrip-content-text$kendo-taskboard-drag-placeholder-bg Color$kendo-component-text#212529rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .1 )rgba(0, 0, 0, 0.1)
Description
Text color of tabstrip content
+
Description
The background color of the TaskBoard Card placeholder.
$kendo-tabstrip-content-border$kendo-taskboard-drag-placeholder-border Color $kendo-component-border #dee2e6
Description
Border color of tabstrip content
-
$kendo-tabstrip-content-focus-borderColor$kendo-component-text#212529
Description
Border color of tabstrip focused content
+
Description
The border color of the TaskBoard Card placeholder.
+### Wizard + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-wizard-padding-xNumber$kendo-padding-md-x * 1.251.25rem
Description
The horizontal padding of the Wizard.
+
$kendo-wizard-padding-yNumber$kendo-wizard-padding-x1.25rem
Description
The vertical padding of the Wizard.
+
$kendo-wizard-content-padding-xNumber$kendo-padding-md-x * 22rem
Description
The horizontal padding of the Wizard content.
+
$kendo-wizard-content-padding-yNumber$kendo-padding-md-y * 42rem
Description
The vertical padding of the Wizard content.
+
$kendo-wizard-buttons-margin-xNumber10px10px
Description
The horizontal margin of the Wizard Button container.
+
$kendo-wizard-border-widthNumber0px0px
Description
The border width of the Wizard.
+
$kendo-wizard-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Wizard.
+
$kendo-wizard-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Wizard.
+
$kendo-wizard-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the Wizard.
+
$kendo-wizard-step-focus-borderColor#656565#656565
Description
The outline of the focused Wizard step.
+
+ diff --git a/packages/classic/docs/customization-chat.md b/packages/classic/docs/customization-chat.md new file mode 100644 index 00000000000..d72e93ef4aa --- /dev/null +++ b/packages/classic/docs/customization-chat.md @@ -0,0 +1,608 @@ +--- +title: Customizing Chat +description: "Refer to the list of the Kendo UI Classic theme variables available for customization." +slug: variables_kendothemeclassic_chat +position: 9 +--- + +# Customizing Chat + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-chat-padding-xNumber16px16px
Description
The horizontal padding of the Chat.
+
$kendo-chat-padding-yNumber16px16px
Description
The vertical padding of the Chat.
+
$kendo-chat-widthNumber500px500px
Description
The width of the Chat.
+
$kendo-chat-heightNumber600px600px
Description
The height of the Chat.
+
$kendo-chat-border-widthNumber1px1px
Description
The border width of the Chat.
+
$kendo-chat-font-familyString$kendo-font-familyinherit
Description
The font family of the Chat.
+
$kendo-chat-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Chat.
+
$kendo-chat-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the Chat.
+
$kendo-chat-item-spacing-xNumber8px8px
Description
The horizontal spacing between items of the Chat.
+
$kendo-chat-item-spacing-yNumber16px16px
Description
The vertical spacing between items of the Chat.
+
$kendo-chat-message-list-padding-xNumber$kendo-chat-padding-x16px
Description
The horizontal padding of the Chat message list.
+
$kendo-chat-message-list-padding-yNumber$kendo-chat-padding-y16px
Description
The vertical padding of the Chat message list.
+
$kendo-chat-message-list-spacingNumber$kendo-chat-item-spacing-y16px
Description
The spacing of the Chat message list.
+
$kendo-chat-timestamp-font-sizeStringsmallersmaller
Description
The font size of the Chat timestamp.
+
$kendo-chat-timestamp-line-heightNullnullnull
Description
The line height of the Chat timestamp.
+
$kendo-chat-timestamp-transformStringuppercaseuppercase
Description
The text transform of the Chat timestamp.
+
$kendo-chat-timestamp-textColor$kendo-subtle-text#646464
Description
The text color of the Chat timestamp.
+
$kendo-chat-timestamp-bgNullnullnull
Description
The background color of the Chat timestamp.
+
$kendo-chat-bubble-padding-xNumber12px12px
Description
The horizontal padding of the Chat bubble message.
+
$kendo-chat-bubble-padding-yNumber8px8px
Description
The vertical padding of the Chat bubble message.
+
$kendo-chat-bubble-spacingNumber2px2px
Description
The spacing of the Chat bubble message.
+
$kendo-chat-bubble-line-heightNumber18px18px
Description
The line height of the Chat bubble message.
+
$kendo-chat-bubble-border-radiusNumber12px12px
Description
The border radius of the Chat bubble message.
+
$kendo-chat-bubble-border-radius-smNumber2px2px
Description
The border radius of the Chat small bubble message
+
$kendo-chat-avatar-sizeNumber32px32px
Description
The size of the Chat Avatar.
+
$kendo-chat-avatar-spacingNumber$kendo-chat-item-spacing-x8px
Description
The spacing of the Chat Avatar.
+
$kendo-chat-toolbar-padding-xNumber$kendo-toolbar-md-padding-x8px
Description
The horizontal padding of the Chat Toolbar.
+
$kendo-chat-toolbar-padding-yNumber$kendo-toolbar-md-padding-y8px
Description
The vertical padding of the Chat Toolbar.
+
$kendo-chat-toolbar-spacingNumber$kendo-toolbar-md-spacing8px
Description
The spacing of the Chat Toolbar.
+
$kendo-chat-toolbar-bgColor$kendo-toolbar-bg#f0f0f0
Description
The background color of the Chat Toolbar.
+
$kendo-chat-toolbar-textColor$kendo-toolbar-text#272727
Description
The text color of the Chat Toolbar.
+
$kendo-chat-toolbar-borderStringinheritinherit
Description
The border color of the Chat Toolbar.
+
$kendo-chat-quick-reply-padding-xNumber12px12px
Description
The horizontal padding of the Chat quick reply.
+
$kendo-chat-quick-reply-padding-yNumber8px8px
Description
The vertical padding of the Chat quick reply.
+
$kendo-chat-quick-reply-spacingNumber8px8px
Description
The spacing of the Chat quick reply.
+
$kendo-chat-quick-reply-line-heightNumber$kendo-chat-bubble-line-height18px
Description
The line height of the Chat quick reply.
+
$kendo-chat-bgColor$kendo-app-bg#ffffff
Description
The background color of the Chat.
+
$kendo-chat-textColor$kendo-app-text#272727
Description
The text color of the Chat.
+
$kendo-chat-borderColor$kendo-app-border#d6d6d6
Description
The border color of the Chat.
+
$kendo-chat-bubble-bgColor$kendo-component-bg#ffffff
Description
The background color of the Chat bubble.
+
$kendo-chat-bubble-textColor$kendo-component-text#272727
Description
The text color of the Chat bubble.
+
$kendo-chat-bubble-borderColor$kendo-chat-bubble-bg#ffffff
Description
The border color of the Chat bubble.
+
$kendo-chat-bubble-shadowStringk-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The box shadow of the Chat bubble.
+
$kendo-chat-bubble-hover-shadowStringk-elevation(2)var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the hovered Chat bubble.
+
$kendo-chat-bubble-selected-shadowStringk-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the selected Chat bubble.
+
$kendo-chat-alt-bubble-bgColor$kendo-color-primary#f35800
Description
The background color of the Chat alt bubble.
+
$kendo-chat-alt-bubble-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-chat-alt-bubble-bg ))white
Description
The text color of the Chat alt bubble.
+
$kendo-chat-alt-bubble-borderColor$kendo-chat-alt-bubble-bg#f35800
Description
The border color of the Chat alt bubble.
+
$kendo-chat-alt-bubble-shadowStringk-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the Chat alt bubble.
+
$kendo-chat-alt-bubble-hover-shadowStringk-elevation(2)var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the hovered Chat alt bubble.
+
$kendo-chat-alt-bubble-selected-shadowStringk-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the selected Chat alt bubble.
+
$kendo-chat-quick-reply-bgColortransparenttransparent
Description
The background color of Chat quick reply.
+
$kendo-chat-quick-reply-textColor$kendo-color-primary#f35800
Description
The text color of Chat quick reply.
+
$kendo-chat-quick-reply-borderColor$kendo-color-primary#f35800
Description
The border color of Chat quick reply.
+
$kendo-chat-quick-reply-hover-bgColor$kendo-color-primary#f35800
Description
The background color of the hovered Chat quick reply.
+
$kendo-chat-quick-reply-hover-textColor$kendo-color-primary-contrastwhite
Description
The text color of the Chat quick reply.
+
$kendo-chat-quick-reply-hover-borderColor$kendo-color-primary#f35800
Description
The border color of the hovered Chat quick reply.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/classic/docs/customization-orgchart.md b/packages/classic/docs/customization-orgchart.md new file mode 100644 index 00000000000..5f5aec87ec4 --- /dev/null +++ b/packages/classic/docs/customization-orgchart.md @@ -0,0 +1,478 @@ +--- +title: Customizing Orgchart +description: "Refer to the list of the Kendo UI Classic theme variables available for customization." +slug: variables_kendothemeclassic_orgchart +position: 9 +--- + +# Customizing Orgchart + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-orgchart-spacerNumberk-map-get( $kendo-spacing, 6 )24px
Description
The spacing index of the OrgChart.
+
$kendo-orgchart-padding-yNumber$kendo-orgchart-spacer24px
Description
The vertical padding of the OrgChart.
+
$kendo-orgchart-padding-xNumber$kendo-orgchart-padding-y24px
Description
The horizontal padding of the OrgChart.
+
$kendo-orgchart-font-familyString$kendo-font-familyinherit
Description
The font family of the OrgChart.
+
$kendo-orgchart-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the OrgChart.
+
$kendo-orgchart-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the OrgChart.
+
$kendo-orgchart-bgColor$kendo-component-bg#ffffff
Description
The background color of the OrgChart.
+
$kendo-orgchart-textColor$kendo-component-text#272727
Description
The text color of the OrgChart.
+
$kendo-orgchart-borderColor$kendo-component-border#cacaca
Description
The border color of the OrgChart.
+
$kendo-orgchart-node-gapNumber$kendo-orgchart-spacer24px
Description
The spacing of the OrgChart node.
+
$kendo-orgchart-group-gapNumber$kendo-orgchart-spacer24px
Description
The spacing of the OrgChart group.
+
$kendo-orgchart-node-container-gapNumber$kendo-orgchart-spacer24px
Description
The spacing of the OrgChart node container.
+
$kendo-orgchart-node-group-padding-yNumber$kendo-orgchart-spacer24px
Description
The vertical padding of the OrgChart node group.
+
$kendo-orgchart-node-group-padding-xNumber$kendo-orgchart-node-group-padding-y24px
Description
The horizontal padding of the OrgChart node group.
+
$kendo-orgchart-node-group-border-widthNumber1px1px
Description
The border width of the OrgChart node group.
+
$kendo-orgchart-node-group-border-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the OrgChart node group.
+
$kendo-orgchart-node-group-bgColor$kendo-base-bg#f0f0f0
Description
The background color of the OrgChart node group.
+
$kendo-orgchart-node-group-textColor$kendo-base-text#272727
Description
The text color of the OrgChart node group.
+
$kendo-orgchart-node-group-borderColor$kendo-base-border#cacaca
Description
The border color of the OrgChart node group.
+
$kendo-orgchart-node-group-focus-borderColor$kendo-card-focus-borderrgba(0, 0, 0, 0.15)
Description
The border color of the focused OrgChart node group.
+
$kendo-orgchart-node-group-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the focused OrgChart node group.
+
$kendo-orgchart-node-group-title-font-sizeNumber$kendo-font-size-xl20px
Description
The font size of the OrgChart node group title.
+
$kendo-orgchart-node-group-title-margin-bottomNumberk-math-div( $kendo-orgchart-spacer, 4 )6px
Description
The bottom margin of the OrgChart node group title.
+
$kendo-orgchart-node-group-title-line-heightNumber$kendo-line-height-sm1.25
Description
The line height of the OrgChart node group title.
+
$kendo-orgchart-node-group-subtitle-margin-bottomNumber$kendo-orgchart-spacer24px
Description
The bottom margin of the OrgChart node group subtitle.
+
$kendo-orgchart-node-group-subtitle-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the OrgChart node group subtitle.
+
$kendo-orgchart-node-group-subtitle-textColor$kendo-subtle-text#646464
Description
The line height of the OrgChart node group subtitle.
+
$kendo-orgchart-card-widthNumber300px300px
Description
The width of the OrgChart Card.
+
$kendo-orgchart-card-padding-yNumber$kendo-card-padding-y12px
Description
The vertical padding of the OrgChart Card.
+
$kendo-orgchart-card-padding-xNumber$kendo-orgchart-card-padding-y12px
Description
The horizontal padding of the OrgChart Card.
+
$kendo-orgchart-card-border-widthNumber$kendo-card-border-width1px
Description
The border width of the OrgChart Card.
+
$kendo-orgchart-card-shadowString$kendo-card-shadowvar(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the OrgChart Card.
+
$kendo-orgchart-card-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the focused OrgChart Card.
+
$kendo-orgchart-card-title-margin-bottomNumber0px0px
Description
The bottom margin of the OrgChart Card title.
+
$kendo-orgchart-card-title-font-sizeNullnullnull
Description
The font size of the OrgChart Card title.
+
$kendo-orgchart-card-subtitle-margin-bottomNumber0px0px
Description
The bottom margin of the OrgChart Card subtitle.
+
$kendo-orgchart-card-subtitle-font-sizeNullnullnull
Description
The font size of the OrgChart Card subtitle.
+
$kendo-orgchart-card-body-border-widthList2px 0 02px 0 0
Description
The border width of the OrgChart Card body.
+
$kendo-orgchart-card-body-border-colorColortransparenttransparent
Description
The border color of the OrgChart Card body.
+
$kendo-orgchart-card-body-vbox-margin-rightNumberk-math-div( $kendo-orgchart-spacer, 2 )12px
Description
The right margin of the OrgChart Card body title wrap.
+
$kendo-orgchart-card-body-vbox-min-heightNumber$kendo-card-avatar-size45px
Description
The min height of the OrgChart Card body title wrap.
+
$kendo-orgchart-line-sizeNumber1px1px
Description
The size of the OrgChart connecting line.
+
$kendo-orgchart-line-fillColor$kendo-base-border#cacaca
Description
The fill color of the OrgChart connecting line.
+
$kendo-orgchart-line-v-heightNumber25px25px
Description
The height of the OrgChart connecting line.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/classic/docs/customization-splitter.md b/packages/classic/docs/customization-splitter.md new file mode 100644 index 00000000000..2ef1a167d6f --- /dev/null +++ b/packages/classic/docs/customization-splitter.md @@ -0,0 +1,228 @@ +--- +title: Customizing Splitter +description: "Refer to the list of the Kendo UI Classic theme variables available for customization." +slug: variables_kendothemeclassic_splitter +position: 9 +--- + +# Customizing Splitter + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-splitter-border-widthNumber1px1px
Description
The width of the border around the Splitter.
+
$kendo-splitter-font-familyString$kendo-font-familyinherit
Description
The font family of the Splitter.
+
$kendo-splitter-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Splitter.
+
$kendo-splitter-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the Splitter.
+
$kendo-splitter-bgColor$kendo-component-bg#ffffff
Description
The background color of the Splitter.
+
$kendo-splitter-textColor$kendo-component-text#272727
Description
The text color of the Splitter.
+
$kendo-splitter-borderColor$kendo-component-border#cacaca
Description
The border color of the Splitter.
+
$kendo-splitter-splitbar-sizeNumberk-map-get( $kendo-spacing, 3 )12px
Description
The size of the Splitter splitbar.
+
$kendo-splitter-drag-handle-lengthNumber20px20px
Description
The length of the Splitter drag handle.
+
$kendo-splitter-drag-handle-thicknessNumber2px2px
Description
The thickness of the Splitter drag handle.
+
$kendo-splitter-drag-icon-marginNumber7px7px
Description
The margin of the Splitter drag handle icon.
+
$kendo-splitter-collapse-icon-padding-xNullnullnull
Description
The horizontal padding of the collapse icon in the Splitter.
+
$kendo-splitter-collapse-icon-padding-yNumberk-map-get( $kendo-spacing, .5 )2px
Description
The vertical padding of the collapse icon in the Splitter.
+
$kendo-splitbar-bgColor$kendo-base-bg#f0f0f0
Description
The background color of the Splitter splitbar.
+
$kendo-splitbar-textColor$kendo-base-text#272727
Description
The text color of the Splitter splitbar.
+
$kendo-splitbar-hover-bgColorif($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-splitbar-bg, .5 ))#e6e6e6
Description
The hover background color of the Splitter splitbar.
+
$kendo-splitbar-hover-textColor$kendo-splitbar-text#272727
Description
The hover text color of the Splitter splitbar.
+
$kendo-splitbar-selected-bgColor$kendo-selected-bg#f35800
Description
The selected background color of the Splitter splitbar.
+
$kendo-splitbar-selected-textColor$kendo-selected-textwhite
Description
The selected text color of the Splitter splitbar.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/classic/docs/customization-stepper.md b/packages/classic/docs/customization-stepper.md new file mode 100644 index 00000000000..66122a657e0 --- /dev/null +++ b/packages/classic/docs/customization-stepper.md @@ -0,0 +1,718 @@ +--- +title: Customizing Stepper +description: "Refer to the list of the Kendo UI Classic theme variables available for customization." +slug: variables_kendothemeclassic_stepper +position: 9 +--- + +# Customizing Stepper + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-stepper-margin-xNullnullnull
Description
The horizontal margin the Stepper.
+
$kendo-stepper-margin-yNullnullnull
Description
The vertical margin the Stepper.
+
$kendo-stepper-padding-xNullnullnull
Description
The horizontal padding the Stepper.
+
$kendo-stepper-padding-yNullnullnull
Description
The vertical padding the Stepper.
+
$kendo-stepper-label-margin-xNumber12px12px
Description
The horizontal margin the Stepper label.
+
$kendo-stepper-label-padding-xNumber12px12px
Description
The horizontal padding the Stepper label.
+
$kendo-stepper-label-padding-yNumber5px5px
Description
The vertical padding the Stepper label.
+
$kendo-stepper-border-widthNumber0px0px
Description
The width of the border around the Stepper.
+
$kendo-stepper-inline-content-padding-xNumber20px20px
Description
The horizontal padding the Stepper content.
+
$kendo-stepper-inline-content-padding-yNumber10px10px
Description
The vertical padding the Stepper content.
+
$kendo-stepper-font-sizeNumber$kendo-font-size-md14px
+
$kendo-stepper-line-heightNumber$kendo-line-height-md1.4285714286
+
$kendo-stepper-font-familyString$kendo-font-familyinherit
+
$kendo-stepper-bgNullnullnull
Description
The background color of the Stepper.
+
$kendo-stepper-textColor$kendo-component-text#272727
Description
The text color of the Stepper.
+
$kendo-stepper-borderNullnullnull
Description
The border color of the Stepper.
+
$kendo-stepper-indicator-widthNumber28px28px
Description
The width of the Stepper indicator.
+
$kendo-stepper-indicator-heightNumber$kendo-stepper-indicator-width28px
Description
The height of the Stepper indicator.
+
$kendo-stepper-indicator-border-widthNumber1px1px
Description
The border width of the Stepper indicator.
+
$kendo-stepper-indicator-border-radiusNumber50%50%
Description
The border radius of the Stepper indicator.
+
$kendo-stepper-indicator-focus-border-widthNumber1px1px
Description
The border width of the focused Stepper indicator.
+
$kendo-stepper-indicator-focus-sizeNumber2px2px
Description
The size of the focused Stepper indicator.
+
$kendo-stepper-indicator-focus-offsetNumber3px3px
Description
The offset of the Stepper focused indicator.
+
$kendo-stepper-indicator-focus-calc-offsetCalculationcalc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} )calc(1px + 3px)
Description
The calculated offset of the focused Stepper indicator.
+
$kendo-stepper-indicator-bgColor$kendo-component-bg#ffffff
Description
The background color of the Stepper indicator.
+
$kendo-stepper-indicator-textColor$kendo-component-text#272727
Description
The text color of the Stepper indicator.
+
$kendo-stepper-indicator-borderColor$kendo-component-border#cacaca
Description
The border color of the Stepper indicator.
+
$kendo-stepper-indicator-hover-bgColorif($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-stepper-indicator-bg ))#ebebeb
Description
The background color of the hovered Stepper indicator.
+
$kendo-stepper-indicator-hover-textNullnullnull
Description
The text color of the hovered Stepper indicator.
+
$kendo-stepper-indicator-hover-borderNullnullnull
Description
The border color of the hovered Stepper indicator.
+
$kendo-stepper-indicator-disabled-bgNullnullnull
Description
The background color of the disabled Stepper indicator.
+
$kendo-stepper-indicator-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text)#8d8d8d
Description
The text color of the disabled Stepper indicator.
+
$kendo-stepper-indicator-disabled-borderNullnullnull
Description
The border color of the disabled Stepper indicator.
+
$kendo-stepper-indicator-done-bgColor$kendo-color-primary#f35800
Description
The background color of the Stepper done indicator.
+
$kendo-stepper-indicator-done-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg ))white
Description
The text color of the Stepper done indicator.
+
$kendo-stepper-indicator-done-borderColor$kendo-stepper-indicator-done-bg#f35800
Description
The border color of the Stepper done indicator.
+
$kendo-stepper-indicator-done-hover-bgColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg ))#e05100
Description
The background color of the hovered Stepper done indicator.
+
$kendo-stepper-indicator-done-hover-textNullnullnull
Description
The text color of the hovered Stepper done indicator.
+
$kendo-stepper-indicator-done-hover-borderNullnullnull
Description
The border color of the hovered Stepper done indicator.
+
$kendo-stepper-indicator-done-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .6 ), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60% ))#f89b66
Description
The background color of the disabled Stepper done indicator.
+
$kendo-stepper-indicator-done-disabled-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg ))white
Description
The text color of the disabled Stepper done indicator.
+
$kendo-stepper-indicator-done-disabled-borderColor$kendo-stepper-indicator-done-disabled-bg#f89b66
Description
The border color of the disabled Stepper done indicator.
+
$kendo-stepper-indicator-current-bgColor$kendo-stepper-indicator-done-bg#f35800
Description
The background color of the Stepper current indicator.
+
$kendo-stepper-indicator-current-textColor$kendo-stepper-indicator-done-textwhite
Description
The text color of the Stepper current indicator.
+
$kendo-stepper-indicator-current-borderColor$kendo-stepper-indicator-done-border#f35800
Description
The border color of the Stepper current indicator.
+
$kendo-stepper-indicator-current-hover-bgColor$kendo-stepper-indicator-done-hover-bg#e05100
Description
The background color of the hovered Stepper current indicator.
+
$kendo-stepper-indicator-current-hover-textNull$kendo-stepper-indicator-done-hover-textnull
Description
The text color of the hovered Stepper current indicator.
+
$kendo-stepper-indicator-current-hover-borderNull$kendo-stepper-indicator-done-hover-bordernull
Description
The border color of the hovered Stepper current indicator.
+
$kendo-stepper-indicator-current-disabled-bgColor$kendo-stepper-indicator-done-disabled-bg#f89b66
Description
The background color of the disabled Stepper current indicator.
+
$kendo-stepper-indicator-current-disabled-textColor$kendo-stepper-indicator-done-disabled-textwhite
Description
The text color of the disabled Stepper current indicator.
+
$kendo-stepper-indicator-current-disabled-borderColor$kendo-stepper-indicator-done-disabled-border#f89b66
Description
The border color of the disabled Stepper current indicator.
+
$kendo-stepper-label-textNullnullnull
Description
The text color of the Stepper label.
+
$kendo-stepper-label-success-textColor$kendo-color-success#3ea44e
Description
The success text color of the Stepper label.
+
$kendo-stepper-label-error-textColor$kendo-color-error#d92800
Description
The error text color of the Stepper label.
+
$kendo-stepper-label-hover-textNullnullnull
Description
The text color of the hovered Stepper label.
+
$kendo-stepper-label-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text)#8d8d8d
Description
The text color of the disabled Stepper label.
+
$kendo-stepper-optional-label-textColor$kendo-subtle-text#646464
Description
The text color of the Stepper optional label.
+
$kendo-stepper-optional-label-opacityNullnullnull
Description
The opacity of the Stepper optional label.
+
$kendo-stepper-optional-label-font-sizeNumber$kendo-font-size-sm12px
Description
The font size of the Stepper optional label.
+
$kendo-stepper-optional-label-font-styleNullnullnull
Description
The font style of the Stepper optional label.
+
$kendo-stepper-progressbar-sizeNumber2px2px
Description
The size of the Stepper ProgressBar.
+
$kendo-stepper-progressbar-bgNullnullnull
Description
The background color of the Stepper ProgressBar.
+
$kendo-stepper-progressbar-textNullnullnull
Description
The text color of the Stepper ProgressBar.
+
$kendo-stepper-progressbar-fill-bgNullnullnull
Description
The background color of the selected Stepper ProgressBar.
+
$kendo-stepper-progressbar-fill-textNullnullnull
Description
The text color of the selected Stepper ProgressBar.
+
$kendo-stepper-content-transition-propertyStringheightheight
Description
The property name of the Stepper transition.
+
$kendo-stepper-content-transition-durationNumber300ms300ms
Description
The duration of the Stepper transition.
+
$kendo-stepper-content-transition-timing-functionListcubic-bezier(.4, 0, .2, 1) 0mscubic-bezier(0.4, 0, 0.2, 1) 0ms
Description
The timing function of the Stepper transition.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/classic/docs/customization-taskboard.md b/packages/classic/docs/customization-taskboard.md new file mode 100644 index 00000000000..c7640e1a5dd --- /dev/null +++ b/packages/classic/docs/customization-taskboard.md @@ -0,0 +1,788 @@ +--- +title: Customizing Taskboard +description: "Refer to the list of the Kendo UI Classic theme variables available for customization." +slug: variables_kendothemeclassic_taskboard +position: 9 +--- + +# Customizing Taskboard + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-taskboard-spacerNumberk-map-get( $kendo-spacing, 4 )16px
Description
The spacing index of the TaskBoard.
+
$kendo-taskboard-padding-yNullnullnull
Description
The vertical padding of the TaskBoard.
+
$kendo-taskboard-padding-xNullnullnull
Description
The horizontal of the TaskBoard.
+
$kendo-taskboard-font-familyString$kendo-font-familyinherit
Description
The font family of the TaskBoard.
+
$kendo-taskboard-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the TaskBoard.
+
$kendo-taskboard-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the TaskBoard.
+
$kendo-taskboard-bgNullnullnull
Description
The background color of the TaskBoard.
+
$kendo-taskboard-textNullnullnull
Description
The text color of the TaskBoard.
+
$kendo-taskboard-borderNullnullnull
Description
The border color of the TaskBoard.
+
$kendo-taskboard-toolbar-padding-yNumber$kendo-taskboard-spacer16px
Description
The vertical padding of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-padding-xNumber$kendo-taskboard-toolbar-padding-y16px
Description
The horizontal padding of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-bgNullnullnull
Description
The background color of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-textNullnullnull
Description
The text color of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-borderNullnullnull
Description
The border color of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-gradientNullnullnull
Description
The gradient of the TaskBoard Toolbar.
+
$kendo-taskboard-content-padding-yNumber$kendo-taskboard-spacer16px
Description
The vertical padding of the TaskBoard content.
+
$kendo-taskboard-content-padding-xNumber$kendo-taskboard-content-padding-y16px
Description
The horizontal padding of the TaskBoard content.
+
$kendo-taskboard-column-container-spacing-yNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The vertical spacing of the TaskBoard column container.
+
$kendo-taskboard-column-container-padding-yNumber0px0px
Description
The vertical padding of the TaskBoard column container.
+
$kendo-taskboard-column-container-padding-xNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The horizontal padding of the TaskBoard column container.
+
$kendo-taskboard-columns-container-gapNumber$kendo-taskboard-spacer16px
Description
The spacing of the TaskBoard columns container.
+
$kendo-taskboard-column-widthNumber320px320px
Description
The default width of the TaskBoard column.
+
$kendo-taskboard-column-border-widthNumber1px1px
Description
The border width of the TaskBoard column.
+
$kendo-taskboard-column-border-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the TaskBoard column.
+
$kendo-taskboard-column-bgColor$kendo-base-bg#f0f0f0
Description
The background color of the TaskBoard column.
+
$kendo-taskboard-column-textNullnullnull
Description
The text color of the TaskBoard column.
+
$kendo-taskboard-column-borderColortransparenttransparent
Description
The border color of the TaskBoard column.
+
$kendo-taskboard-column-focus-bgNullnullnull
Description
The background color of the focused TaskBoard column.
+
$kendo-taskboard-column-focus-textNullnullnull
Description
The text color of the focused TaskBoard column.
+
$kendo-taskboard-column-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 ))#a2a2a2
Description
The border color of the focused TaskBoard column.
+
$kendo-taskboard-column-header-padding-yNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The vertical padding of the TaskBoard column header.
+
$kendo-taskboard-column-header-padding-xNumber$kendo-taskboard-column-header-padding-y8px
Description
The horizontal padding of the TaskBoard column header.
+
$kendo-taskboard-column-header-gapNumberk-math-div( $kendo-taskboard-spacer, 4 )4px
Description
The spacing of the TaskBoard column header.
+
$kendo-taskboard-column-header-actions-gapNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The spacing of the TaskBoard column header actions.
+
$kendo-taskboard-column-header-font-weightNumber500500
Description
The font weight of the TaskBoard column header.
+
$kendo-taskboard-column-header-textColor$kendo-component-header-text#272727
Description
The text color of the TaskBoard column header.
+
$kendo-taskboard-column-cards-padding-yNullnullnull
Description
The vertical padding of the TaskBoard column Card wrapper.
+
$kendo-taskboard-column-cards-padding-xNullnullnull
Description
The horizontal padding of the TaskBoard column Card wrapper.
+
$kendo-taskboard-column-cards-gapNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The spacing of the TaskBoard column Card wrapper.
+
$kendo-taskboard-pane-widthNumber$kendo-taskboard-column-width320px
Description
The default width of the TaskBoard pane.
+
$kendo-taskboard-pane-padding-yNullnullnull
Description
The vertical padding of the TaskBoard pane.
+
$kendo-taskboard-pane-padding-xNullnullnull
Description
The horizontal padding of the TaskBoard pane.
+
$kendo-taskboard-pane-border-widthNumber1px1px
Description
The border width of the TaskBoard pane.
+
$kendo-taskboard-pane-bgColor$kendo-component-bg#ffffff
Description
The background color of the TaskBoard pane.
+
$kendo-taskboard-pane-textColor$kendo-component-text#272727
Description
The text color of the TaskBoard pane.
+
$kendo-taskboard-pane-borderColor$kendo-component-border#cacaca
Description
The border color of the TaskBoard pane.
+
$kendo-taskboard-pane-header-padding-yNumber( $kendo-taskboard-spacer * .75 )12px
Description
The vertical padding of the TaskBoard pane header.
+
$kendo-taskboard-pane-header-padding-xNumber$kendo-taskboard-spacer16px
Description
The horizontal padding of the TaskBoard pane header.
+
$kendo-taskboard-pane-header-font-weightNumber500500
Description
The font weight of the TaskBoard pane header.
+
$kendo-taskboard-pane-header-textColor$kendo-component-header-text#272727
Description
The text color of the TaskBoard pane header.
+
$kendo-taskboard-pane-content-padding-yNumber0px0px
Description
The vertical padding of the TaskBoard pane content.
+
$kendo-taskboard-pane-content-padding-xNumber$kendo-taskboard-spacer16px
Description
The horizontal padding of the TaskBoard pane content.
+
$kendo-taskboard-pane-actions-padding-yNumber( $kendo-taskboard-spacer * .75 )12px
Description
The vertical padding of the TaskBoard pane actions.
+
$kendo-taskboard-pane-actions-padding-xNumber$kendo-taskboard-spacer16px
Description
The horizontal padding of the TaskBoard pane actions.
+
$kendo-taskboard-card-padding-yNumber$kendo-taskboard-spacer16px
Description
The vertical padding of the TaskBoard Card.
+
$kendo-taskboard-card-padding-xNumber$kendo-taskboard-card-padding-y16px
Description
The horizontal padding of the TaskBoard Card.
+
$kendo-taskboard-card-border-widthNumber$kendo-card-border-width1px
Description
The border width of the TaskBoard Card.
+
$kendo-taskboard-card-border-radiusNumber$kendo-card-border-radius8px
Description
The border radius of the TaskBoard Card.
+
$kendo-taskboard-card-bgColor$kendo-card-bg#ffffff
Description
The background color of the TaskBoard Card.
+
$kendo-taskboard-card-textColor$kendo-card-text#272727
Description
The text color of the TaskBoard Card.
+
$kendo-taskboard-card-borderColor$kendo-card-border#cacaca
Description
The border color of the TaskBoard Card.
+
$kendo-taskboard-card-shadowString$kendo-card-shadowvar(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the TaskBoard Card.
+
$kendo-taskboard-card-category-border-widthNumber4px4px
Description
The border width of the TaskBoard Card category.
+
$kendo-taskboard-card-hover-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% ))#b6b6b6
Description
The border color of the hovered TaskBoard Card.
+
$kendo-taskboard-card-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% ))#a6a6a6
Description
The border color of the focused TaskBoard Card.
+
$kendo-taskboard-card-focus-shadowStringnonenone
Description
The shadow of the focused TaskBoard Card.
+
$kendo-taskboard-card-selected-borderColork-color-tint( $kendo-color-primary-lighter, 5 )#f9ab7f
Description
The border of the selected TaskBoard Card.
+
$kendo-taskboard-card-selected-shadowStringnonenone
Description
The shadow of the selected TaskBoard Card.
+
$kendo-taskboard-card-header-textColor$kendo-color-primary#f35800
Description
The text color of the TaskBoard Card header text.
+
$kendo-taskboard-card-header-focus-textColor$kendo-color-primary-darker#cc4a00
Description
The text color of the hovered TaskBoard Card header text.
+
$kendo-taskboard-card-header-hover-textColor$kendo-color-primary-darker#cc4a00
Description
The text color of the focused TaskBoard Card header text.
+
$kendo-taskboard-drag-placeholder-border-widthNumber1px1px
Description
The border width of the TaskBoard Card placeholder.
+
$kendo-taskboard-drag-placeholder-border-radiusNumber$kendo-taskboard-card-border-radius8px
Description
The border radius of the TaskBoard Card placeholder.
+
$kendo-taskboard-drag-placeholder-bgColorrgba( white, .2 )rgba(255, 255, 255, 0.2)
Description
The background color of the TaskBoard Card placeholder.
+
$kendo-taskboard-drag-placeholder-borderColor$kendo-component-border#cacaca
Description
The border color of the TaskBoard Card placeholder.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/classic/docs/customization-wizard.md b/packages/classic/docs/customization-wizard.md new file mode 100644 index 00000000000..007c7dbf30c --- /dev/null +++ b/packages/classic/docs/customization-wizard.md @@ -0,0 +1,138 @@ +--- +title: Customizing Wizard +description: "Refer to the list of the Kendo UI Classic theme variables available for customization." +slug: variables_kendothemeclassic_wizard +position: 9 +--- + +# Customizing Wizard + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-wizard-padding-xNumber$kendo-padding-md-x * 2.520px
Description
The horizontal padding of the Wizard.
+
$kendo-wizard-padding-yNumber$kendo-wizard-padding-x20px
Description
The vertical padding of the Wizard.
+
$kendo-wizard-content-padding-xNumber$kendo-padding-md-x * 432px
Description
The horizontal padding of the Wizard content.
+
$kendo-wizard-content-padding-yNumber$kendo-padding-md-y * 832px
Description
The vertical padding of the Wizard content.
+
$kendo-wizard-buttons-margin-xNumber10px10px
Description
The horizontal margin of the Wizard Button container.
+
$kendo-wizard-border-widthNumber0px0px
Description
The border width of the Wizard.
+
$kendo-wizard-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Wizard.
+
$kendo-wizard-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the Wizard.
+
$kendo-wizard-font-familyString$kendo-font-familyinherit
Description
The font family of the Wizard.
+
$kendo-wizard-step-focus-borderColor#656565#656565
Description
The outline of the focused Wizard step.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/classic/docs/customization.md b/packages/classic/docs/customization.md index d4117370066..dff56b2a885 100644 --- a/packages/classic/docs/customization.md +++ b/packages/classic/docs/customization.md @@ -3137,7 +3137,7 @@ The following table lists the available variables for customizing the Classic th -### Checkbox +### Chat @@ -3155,479 +3155,579 @@ The following table lists the available variables for customizing the Classic th - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + + + + + + + + + + - + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - + - - + + - - + - - + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - + + + + + + + + + + + + + + + + + +
$kendo-checkbox-border-width$kendo-chat-padding-x Number1px1px16px16px
Description
The border width of the CheckBox.
+
Description
The horizontal padding of the Chat.
$kendo-checkbox-sm-size$kendo-chat-padding-y Numberk-map-get( $kendo-spacing, 3 )12px16px16px
Description
The size of a small CheckBox.
+
Description
The vertical padding of the Chat.
$kendo-checkbox-md-size$kendo-chat-width Numberk-map-get( $kendo-spacing, 4 )16px500px500px
Description
The size of a medium CheckBox.
+
Description
The width of the Chat.
$kendo-checkbox-lg-size$kendo-chat-height Numberk-map-get( $kendo-spacing, 5 )20px600px600px
Description
The size of a large CheckBox.
+
Description
The height of the Chat.
$kendo-checkbox-sm-glyph-size$kendo-chat-border-width Numberk-map-get( $kendo-spacing, 2.5 )10px1px1px
Description
The glyph size of a small CheckBox.
+
Description
The border width of the Chat.
$kendo-checkbox-md-glyph-size$kendo-chat-font-familyString$kendo-font-familyinherit
Description
The font family of the Chat.
+
$kendo-chat-font-size Numberk-map-get( $kendo-spacing, 3.5 )$kendo-font-size-md 14px
Description
The glyph size of a medium CheckBox.
+
Description
The font size of the Chat.
$kendo-checkbox-lg-glyph-size$kendo-chat-line-height Numberk-map-get( $kendo-spacing, 4.5 )18px$kendo-line-height-md1.4285714286
Description
The glyph size of a large CheckBox.
+
Description
The line height of the Chat.
$kendo-checkbox-sm-ripple-size$kendo-chat-item-spacing-x Number300%300%8px8px
Description
The ripple size of a small CheckBox.
+
Description
The horizontal spacing between items of the Chat.
$kendo-checkbox-md-ripple-size$kendo-chat-item-spacing-y Number300%300%16px16px
Description
The ripple size of a medium CheckBox.
+
Description
The vertical spacing between items of the Chat.
$kendo-checkbox-lg-ripple-size$kendo-chat-message-list-padding-x Number300%300%$kendo-chat-padding-x16px
Description
The ripple size of a large CheckBox.
+
Description
The horizontal padding of the Chat message list.
$kendo-checkbox-bgColor$kendo-component-bg#ffffff$kendo-chat-message-list-padding-yNumber$kendo-chat-padding-y16px
Description
The background color of the CheckBox.
+
Description
The vertical padding of the Chat message list.
$kendo-checkbox-textNullnullnull$kendo-chat-message-list-spacingNumber$kendo-chat-item-spacing-y16px
Description
The text color of the CheckBox.
+
Description
The spacing of the Chat message list.
$kendo-checkbox-borderColor$kendo-component-border#cacaca$kendo-chat-timestamp-font-sizeStringsmallersmaller
Description
The border color of the CheckBox.
+
Description
The font size of the Chat timestamp.
$kendo-checkbox-hover-bg$kendo-chat-timestamp-line-height Null null null
Description
The background color of the hovered CheckBox.
+
Description
The line height of the Chat timestamp.
$kendo-checkbox-hover-textNullnullnull$kendo-chat-timestamp-transformStringuppercaseuppercase
Description
The text color of the hovered CheckBox.
+
Description
The text transform of the Chat timestamp.
$kendo-checkbox-hover-border$kendo-chat-timestamp-textColor$kendo-subtle-text#646464
Description
The text color of the Chat timestamp.
+
$kendo-chat-timestamp-bg Null null null
Description
The border color of the hovered CheckBox.
+
Description
The background color of the Chat timestamp.
$kendo-checkbox-checked-bgColor$kendo-color-primary#f35800$kendo-chat-bubble-padding-xNumber12px12px
Description
The background color of the checked CheckBox.
+
Description
The horizontal padding of the Chat bubble message.
$kendo-checkbox-checked-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg ))white$kendo-chat-bubble-padding-yNumber8px8px
Description
The text color of the checked CheckBox.
+
Description
The vertical padding of the Chat bubble message.
$kendo-checkbox-checked-borderColor$kendo-checkbox-checked-bg#f35800$kendo-chat-bubble-spacingNumber2px2px
Description
The border color of the checked CheckBox.
+
Description
The spacing of the Chat bubble message.
$kendo-checkbox-indeterminate-bgColor$kendo-checkbox-bg#ffffff$kendo-chat-bubble-line-heightNumber18px18px
Description
The background color of the indeterminate CheckBox.
+
Description
The line height of the Chat bubble message.
$kendo-checkbox-indeterminate-textColor$kendo-checkbox-checked-bg#f35800$kendo-chat-bubble-border-radiusNumber12px12px
Description
The text color of the indeterminate CheckBox.
+
Description
The border radius of the Chat bubble message.
$kendo-checkbox-indeterminate-borderColor$kendo-checkbox-border#cacaca$kendo-chat-bubble-border-radius-smNumber2px2px
Description
The border color of the indeterminate CheckBox.
+
Description
The border radius of the Chat small bubble message
$kendo-checkbox-focus-borderNullnullnull$kendo-chat-avatar-sizeNumber32px32px
Description
The border color of the focused CheckBox.
+
Description
The size of the Chat Avatar.
$kendo-checkbox-focus-shadowList0 0 0 2px rgba( black, .06 )0 0 0 2px rgba(0, 0, 0, 0.06)$kendo-chat-avatar-spacingNumber$kendo-chat-item-spacing-x8px
Description
The box shadow of the focused CheckBox.
+
Description
The spacing of the Chat Avatar.
$kendo-checkbox-focus-checked-borderNullnullnull$kendo-chat-toolbar-padding-xNumber$kendo-toolbar-md-padding-x8px
Description
The border color of the focused and checked CheckBox.
+
Description
The horizontal padding of the Chat Toolbar.
$kendo-checkbox-focus-checked-shadowList0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary, .3 ))0 0 0 2px rgba(243, 88, 0, 0.3)$kendo-chat-toolbar-padding-yNumber$kendo-toolbar-md-padding-y8px
Description
The box shadow of the focused and checked CheckBox.
+
Description
The vertical padding of the Chat Toolbar.
$kendo-checkbox-disabled-bgNullnullnull$kendo-chat-toolbar-spacingNumber$kendo-toolbar-md-spacing8px
Description
The background color of the disabled CheckBox.
+
Description
The spacing of the Chat Toolbar.
$kendo-checkbox-disabled-textNullnullnull$kendo-chat-toolbar-bgColor$kendo-toolbar-bg#f0f0f0
Description
The text color of the disabled CheckBox.
+
Description
The background color of the Chat Toolbar.
$kendo-checkbox-disabled-borderNullnullnull$kendo-chat-toolbar-textColor$kendo-toolbar-text#272727
Description
The border color of the disabled CheckBox.
+
Description
The text color of the Chat Toolbar.
$kendo-checkbox-disabled-checked-bgNullnullnull$kendo-chat-toolbar-borderStringinheritinherit
Description
The background color of the disabled and checked CheckBox.
+
Description
The border color of the Chat Toolbar.
$kendo-checkbox-disabled-checked-textNullnullnull$kendo-chat-quick-reply-padding-xNumber12px12px
Description
The text color of the disabled and checked CheckBox.
+
Description
The horizontal padding of the Chat quick reply.
$kendo-checkbox-disabled-checked-borderNullnullnull$kendo-chat-quick-reply-padding-yNumber8px8px
Description
The border color of the disabled and checked CheckBox.
+
Description
The vertical padding of the Chat quick reply.
$kendo-checkbox-invalid-bgNullnullnull$kendo-chat-quick-reply-spacingNumber8px8px
Description
The background color of an invalid CheckBox.
+
Description
The spacing of the Chat quick reply.
$kendo-checkbox-invalid-textColor$kendo-invalid-text#d92800$kendo-chat-quick-reply-line-heightNumber$kendo-chat-bubble-line-height18px
Description
The text color of an invalid CheckBox.
+
Description
The line height of the Chat quick reply.
$kendo-checkbox-invalid-border$kendo-chat-bg Color$kendo-invalid-border#d92800$kendo-app-bg#ffffff
Description
The border color of an invalid CheckBox.
+
Description
The background color of the Chat.
$kendo-checkbox-indicator-typeStringimageimage$kendo-chat-textColor$kendo-app-text#272727
Description
The type of the CheckBox indicator.
+
Description
The text color of the Chat.
$kendo-checkbox-glyph-font-familyList"WebComponentsIcons", monospace"WebComponentsIcons", monospace$kendo-chat-borderColor$kendo-app-border#d6d6d6
Description
The font family of the CheckBox indicator glyph.
+
Description
The border color of the Chat.
$kendo-checkbox-checked-glyph$kendo-chat-bubble-bgColor$kendo-component-bg#ffffff
Description
The background color of the Chat bubble.
+
$kendo-chat-bubble-textColor$kendo-component-text#272727
Description
The text color of the Chat bubble.
+
$kendo-chat-bubble-borderColor$kendo-chat-bubble-bg#ffffff
Description
The border color of the Chat bubble.
+
$kendo-chat-bubble-shadow String"\e118""\e118"k-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The glyph of the CheckBox indicator.
+
Description
The box shadow of the Chat bubble.
$kendo-checkbox-indeterminate-glyph$kendo-chat-bubble-hover-shadow String"\e121""\e121"k-elevation(2)var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The glyph of the indeterminate CheckBox indicator.
+
Description
The shadow of the hovered Chat bubble.
$kendo-checkbox-checked-image$kendo-chat-bubble-selected-shadow Stringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e")k-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The image for a checked CheckBox indicator.
+
Description
The shadow of the selected Chat bubble.
$kendo-checkbox-indeterminate-image$kendo-chat-alt-bubble-bgColor$kendo-color-primary#f35800
Description
The background color of the Chat alt bubble.
+
$kendo-chat-alt-bubble-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-chat-alt-bubble-bg ))white
Description
The text color of the Chat alt bubble.
+
$kendo-chat-alt-bubble-borderColor$kendo-chat-alt-bubble-bg#f35800
Description
The border color of the Chat alt bubble.
+
$kendo-chat-alt-bubble-shadow Stringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f35800' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/%3e%3c/svg%3e")k-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The image for a indeterminate CheckBox indicator.
+
Description
The shadow of the Chat alt bubble.
$kendo-checkbox-label-margin-xNumberk-map-get( $kendo-spacing, 1 )4px$kendo-chat-alt-bubble-hover-shadowStringk-elevation(2)var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The horizontal margin of the CheckBox inside a label.
+
Description
The shadow of the hovered Chat alt bubble.
$kendo-checkbox-list-spacingNumberk-map-get( $kendo-spacing, 4 )16px$kendo-chat-alt-bubble-selected-shadowStringk-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The spacing between the items in a horizontal CheckBox list.
+
Description
The shadow of the selected Chat alt bubble.
$kendo-checkbox-list-item-padding-xNumber0px0px$kendo-chat-quick-reply-bgColortransparenttransparent
Description
The horizontal padding of the CheckBox list items.
+
Description
The background color of Chat quick reply.
$kendo-checkbox-list-item-padding-yNumber$kendo-list-md-item-padding-y4px$kendo-chat-quick-reply-textColor$kendo-color-primary#f35800
Description
The vertical padding of the CheckBox list items.
+
Description
The text color of Chat quick reply.
$kendo-checkbox-ripple-bg$kendo-chat-quick-reply-border Color$kendo-checkbox-checked-bg$kendo-color-primary #f35800
Description
The background color of the CheckBox' ripple.
+
Description
The border color of Chat quick reply.
$kendo-checkbox-ripple-opacityNumber.250.25$kendo-chat-quick-reply-hover-bgColor$kendo-color-primary#f35800
Description
The opacity of the CheckBox' ripple.
+
Description
The background color of the hovered Chat quick reply.
+
$kendo-chat-quick-reply-hover-textColor$kendo-color-primary-contrastwhite
Description
The text color of the Chat quick reply.
+
$kendo-chat-quick-reply-hover-borderColor$kendo-color-primary#f35800
Description
The border color of the hovered Chat quick reply.
-### Chip +### Checkbox @@ -3645,458 +3745,479 @@ The following table lists the available variables for customizing the Classic th - + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + - - - - - + + + + - - + - - - - - + + + + - - + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
$kendo-chip-border-width$kendo-checkbox-border-width Number 1px 1px
Description
The width of the border around the Chip.
+
Description
The border width of the CheckBox.
$kendo-chip-spacing$kendo-checkbox-sm-size Numberk-map-get( $kendo-spacing, 1 )4pxk-map-get( $kendo-spacing, 3 )12px
Description
The spacing between the text and the icons of the Chip.
+
Description
The size of a small CheckBox.
$kendo-chip-padding-x$kendo-checkbox-md-size Numberk-map-get( $kendo-spacing, 1 )4pxk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the Chip.
+
Description
The size of a medium CheckBox.
$kendo-chip-sm-padding-x$kendo-checkbox-lg-size Numberk-map-get( $kendo-spacing, 1 )4pxk-map-get( $kendo-spacing, 5 )20px
Description
The horizontal padding of the small Chip.
+
Description
The size of a large CheckBox.
$kendo-chip-md-padding-x$kendo-checkbox-sm-glyph-size Numberk-map-get( $kendo-spacing, 1 )4pxk-map-get( $kendo-spacing, 2.5 )10px
Description
The horizontal padding of the medium Chip.
+
Description
The glyph size of a small CheckBox.
$kendo-chip-lg-padding-x$kendo-checkbox-md-glyph-size Numberk-map-get( $kendo-spacing, 1 )4pxk-map-get( $kendo-spacing, 3.5 )14px
Description
The horizontal padding of the large Chip.
+
Description
The glyph size of a medium CheckBox.
$kendo-chip-padding-y$kendo-checkbox-lg-glyph-size Numberk-map-get( $kendo-spacing, 1 )4pxk-map-get( $kendo-spacing, 4.5 )18px
Description
The vertical padding of the Chip.
+
Description
The glyph size of a large CheckBox.
$kendo-chip-sm-padding-y$kendo-checkbox-sm-ripple-size Numberk-map-get( $kendo-spacing, 0.5 )2px300%300%
Description
The vertical padding of the small Chip.
+
Description
The ripple size of a small CheckBox.
$kendo-chip-md-padding-y$kendo-checkbox-md-ripple-size Numberk-map-get( $kendo-spacing, 1 )4px300%300%
Description
The vertical padding of the medium Chip.
+
Description
The ripple size of a medium CheckBox.
$kendo-chip-lg-padding-y$kendo-checkbox-lg-ripple-size Numberk-map-get( $kendo-spacing, 1.5 )6px300%300%
Description
The vertical padding of the large Chip.
+
Description
The ripple size of a large CheckBox.
$kendo-chip-font-sizeNumber$kendo-font-size-md14px$kendo-checkbox-bgColor$kendo-component-bg#ffffff
Description
The font size of the Chip.
+
Description
The background color of the CheckBox.
$kendo-chip-sm-font-sizeNumber$kendo-font-size-md14px$kendo-checkbox-textNullnullnull
Description
The font size of the small Chip.
+
Description
The text color of the CheckBox.
$kendo-chip-md-font-sizeNumber$kendo-font-size-md14px$kendo-checkbox-borderColor$kendo-component-border#cacaca
Description
The font size of the medium Chip.
+
Description
The border color of the CheckBox.
$kendo-chip-lg-font-sizeNumber$kendo-font-size-md14px$kendo-checkbox-hover-bgNullnullnull
Description
The font size of the large Chip.
+
Description
The background color of the hovered CheckBox.
$kendo-chip-line-heightNumber11$kendo-checkbox-hover-textNullnullnull
Description
The Chip's line height that is related to the $kendo-font-size.
+
Description
The text color of the hovered CheckBox.
$kendo-chip-sm-line-heightNumber$kendo-chip-line-height1$kendo-checkbox-hover-borderNullnullnull
Description
The small Chip's line height that is related to the $kendo-font-size.
+
Description
The border color of the hovered CheckBox.
$kendo-chip-md-line-heightNumber$kendo-chip-line-height1$kendo-checkbox-checked-bgColor$kendo-color-primary#f35800
Description
The medium Chip's line height that is related to the $kendo-font-size.
+
Description
The background color of the checked CheckBox.
$kendo-chip-lg-line-heightNumber$kendo-chip-line-height1$kendo-checkbox-checked-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg ))white
Description
The large Chip's line height that is related to the $kendo-font-size.
+
Description
The text color of the checked CheckBox.
$kendo-chip-calc-sizeCalculationcalc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} )calc(1em + 8px + 2px)$kendo-checkbox-checked-borderColor$kendo-checkbox-checked-bg#f35800
Description
The calculated height of the Chip.
+
Description
The border color of the checked CheckBox.
$kendo-chip-sizesMap( - sm: ( - padding-x: $kendo-chip-sm-padding-x, - padding-y: $kendo-chip-sm-padding-y, - font-size: $kendo-chip-sm-font-size, - line-height: $kendo-chip-sm-line-height - ), - md: ( - padding-x: $kendo-chip-md-padding-x, - padding-y: $kendo-chip-md-padding-y, - font-size: $kendo-chip-md-font-size, - line-height: $kendo-chip-md-line-height - ), - lg: ( - padding-x: $kendo-chip-lg-padding-x, - padding-y: $kendo-chip-lg-padding-y, - font-size: $kendo-chip-lg-font-size, - line-height: $kendo-chip-lg-line-height - ) -)(sm: (padding-x: 4px, padding-y: 2px, font-size: 14px, line-height: 1), md: (padding-x: 4px, padding-y: 4px, font-size: 14px, line-height: 1), lg: (padding-x: 4px, padding-y: 6px, font-size: 14px, line-height: 1))$kendo-checkbox-indeterminate-bgColor$kendo-checkbox-bg#ffffff
Description
The map with the sizes of the Chip.
+
Description
The background color of the indeterminate CheckBox.
$kendo-chip-base-bg$kendo-checkbox-indeterminate-text Color$kendo-button-bg#f0f0f0$kendo-checkbox-checked-bg#f35800
Description
The base background of the Chip.
+
Description
The text color of the indeterminate CheckBox.
$kendo-chip-theme-colorsMap( - "base": $kendo-chip-base-bg, - "error": k-map-get( $kendo-theme-colors, "error" ), - "info": k-map-get( $kendo-theme-colors, "info" ), - "warning": k-map-get( $kendo-theme-colors, "warning" ), - "success": k-map-get( $kendo-theme-colors, "success" ) -)("base": #f0f0f0, "error": #d92800, "info": #2498bc, "warning": #ff9800, "success": #3ea44e)$kendo-checkbox-indeterminate-borderColor$kendo-checkbox-border#cacaca
Description
The theme colors map for the Chip.
+
Description
The border color of the indeterminate CheckBox.
$kendo-chip-solid-bgColor$kendo-chip-base-bg#f0f0f0$kendo-checkbox-focus-borderNullnullnull
Description
The base background color of the solid Chip.
+
Description
The border color of the focused CheckBox.
$kendo-chip-solid-textColor$kendo-button-text#272727$kendo-checkbox-focus-shadowList0 0 0 2px rgba( black, .06 )0 0 0 2px rgba(0, 0, 0, 0.06)
Description
The base text color of the solid Chip.
+
Description
The box shadow of the focused CheckBox.
$kendo-chip-solid-borderColor$kendo-button-border#cacaca$kendo-checkbox-focus-checked-borderNullnullnull
Description
The base border color of the solid Chip.
+
Description
The border color of the focused and checked CheckBox.
$kendo-chip-solid-shadow$kendo-checkbox-focus-checked-shadow List0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .16 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) ))0 0 0 2px rgba(0, 0, 0, 0.16)0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary, .3 ))0 0 0 2px rgba(243, 88, 0, 0.3)
Description
The base shadow of the solid Chip.
+
Description
The box shadow of the focused and checked CheckBox.
$kendo-chip-solid-gradientList$kendo-button-gradientrgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)$kendo-checkbox-disabled-bgNullnullnull
Description
The base gradient of the solid Chip.
+
Description
The background color of the disabled CheckBox.
$kendo-chip-solid-focus-bg$kendo-checkbox-disabled-text Null null null
Description
The base background color of the focused solid Chip.
+
Description
The text color of the disabled CheckBox.
$kendo-chip-solid-focus-text$kendo-checkbox-disabled-border Null null null
Description
The base text color of the focused solid Chip.
+
Description
The border color of the disabled CheckBox.
$kendo-chip-solid-hover-bgColor$kendo-button-hover-bg#dddddd$kendo-checkbox-disabled-checked-bgNullnullnull
Description
The base background color of the hovered solid Chip.
+
Description
The background color of the disabled and checked CheckBox.
$kendo-chip-solid-hover-text$kendo-checkbox-disabled-checked-text Null null null
Description
The base text color of the hovered solid Chip.
+
Description
The text color of the disabled and checked CheckBox.
$kendo-chip-solid-selected-bgColor$kendo-button-active-bg#cacaca$kendo-checkbox-disabled-checked-borderNullnullnull
Description
The base background color of the selected solid Chip
+
Description
The border color of the disabled and checked CheckBox.
$kendo-chip-solid-selected-text$kendo-checkbox-invalid-bg Null null null
Description
The base text color of the selected solid Chip.
+
Description
The background color of an invalid CheckBox.
$kendo-chip-outline-bg$kendo-checkbox-invalid-text Color$kendo-component-bg#ffffff$kendo-invalid-text#d92800
Description
The base background color of the outline Chip.
+
Description
The text color of an invalid CheckBox.
$kendo-chip-outline-text$kendo-checkbox-invalid-border Color$kendo-chip-solid-text#272727$kendo-invalid-border#d92800
Description
The base text color of the outline Chip.
+
Description
The border color of an invalid CheckBox.
$kendo-chip-outline-borderColor$kendo-chip-outline-text#272727$kendo-checkbox-indicator-typeStringimageimage
Description
The base border color of the outline Chip.
+
Description
The type of the CheckBox indicator.
$kendo-chip-outline-shadow$kendo-checkbox-glyph-font-family List0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .16 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) ))0 0 0 2px rgba(0, 0, 0, 0.16)"WebComponentsIcons", monospace"WebComponentsIcons", monospace
Description
The base shadow of the outline Chip.
+
Description
The font family of the CheckBox indicator glyph.
$kendo-chip-outline-hover-bgColor$kendo-chip-outline-text#272727$kendo-checkbox-checked-glyphString"\e118""\e118"
Description
The base background color of the hovered outline Chip.
+
Description
The glyph of the CheckBox indicator.
$kendo-chip-outline-hover-textColorif($kendo-enable-color-system, k-color( base-subtle ), k-contrast-legacy( $kendo-chip-outline-hover-bg ))white$kendo-checkbox-indeterminate-glyphString"\e121""\e121"
Description
The base text color of the hovered outline Chip.
+
Description
The glyph of the indeterminate CheckBox indicator.
$kendo-chip-outline-selected-bgColor$kendo-chip-outline-hover-bg#272727$kendo-checkbox-checked-imageStringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e")
Description
The base background color of the selected outline Chip.
+
Description
The image for a checked CheckBox indicator.
$kendo-chip-outline-selected-textColor$kendo-chip-outline-hover-textwhite$kendo-checkbox-indeterminate-imageStringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f35800' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/%3e%3c/svg%3e")
Description
The base text color of the selected outline Chip.
+
Description
The image for a indeterminate CheckBox indicator.
$kendo-chip-list-sizesMap( - sm: k-map-get( $kendo-spacing, 1 ), - md: k-map-get( $kendo-spacing, 1 ), - lg: k-map-get( $kendo-spacing, 1 ) -)(sm: 4px, md: 4px, lg: 4px)$kendo-checkbox-label-margin-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The sizes of the Chip list.
+
Description
The horizontal margin of the CheckBox inside a label.
+
$kendo-checkbox-list-spacingNumberk-map-get( $kendo-spacing, 4 )16px
Description
The spacing between the items in a horizontal CheckBox list.
+
$kendo-checkbox-list-item-padding-xNumber0px0px
Description
The horizontal padding of the CheckBox list items.
+
$kendo-checkbox-list-item-padding-yNumber$kendo-list-md-item-padding-y4px
Description
The vertical padding of the CheckBox list items.
+
$kendo-checkbox-ripple-bgColor$kendo-checkbox-checked-bg#f35800
Description
The background color of the CheckBox' ripple.
+
$kendo-checkbox-ripple-opacityNumber.250.25
Description
The opacity of the CheckBox' ripple.
-### Cologradient +### Chip @@ -4114,439 +4235,458 @@ The following table lists the available variables for customizing the Classic th - - - - - - - - - - - - - - - - - - - + - - + - + - - + - - + + - - + - - + + - - + - - - - - - - - - - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + -
$kendo-color-gradient-spacerNumberk-map-get( $kendo-spacing, 3 )12px
Description
The spacer of the ColorGradient.
-
$kendo-color-gradient-widthNumber272px272px
Description
The width of the ColorGradient.
-
$kendo-color-gradient-border-width$kendo-chip-border-width Number 1px 1px
Description
The width of the border around the ColorGradient.
+
Description
The width of the border around the Chip.
$kendo-color-gradient-border-radius$kendo-chip-spacing Number$kendo-border-radius-mdk-map-get( $kendo-spacing, 1 ) 4px
Description
The border radius of the ColorGradient.
+
Description
The spacing between the text and the icons of the Chip.
$kendo-color-gradient-padding-y$kendo-chip-padding-x Number$kendo-color-gradient-spacer12pxk-map-get( $kendo-spacing, 1 )4px
Description
The vertical padding of the ColorGradient.
+
Description
The horizontal padding of the Chip.
$kendo-color-gradient-padding-x$kendo-chip-sm-padding-x Number$kendo-color-gradient-padding-y12pxk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the ColorGradient.
+
Description
The horizontal padding of the small Chip.
$kendo-color-gradient-gap$kendo-chip-md-padding-x Number$kendo-color-gradient-spacer12px
Description
The spacing between the sections of the ColorGradient.
-
$kendo-color-gradient-font-familyString$kendo-font-familyinheritk-map-get( $kendo-spacing, 1 )4px
Description
The font family of the ColorGradient.
+
Description
The horizontal padding of the medium Chip.
$kendo-color-gradient-font-size$kendo-chip-lg-padding-x Number$kendo-font-size-md14pxk-map-get( $kendo-spacing, 1 )4px
Description
The font size of the ColorGradient.
+
Description
The horizontal padding of the large Chip.
$kendo-color-gradient-line-height$kendo-chip-padding-y Number$kendo-line-height-md1.4285714286k-map-get( $kendo-spacing, 1 )4px
Description
The line height of the ColorGradient.
+
Description
The vertical padding of the Chip.
$kendo-color-gradient-textColor$kendo-component-text#272727$kendo-chip-sm-padding-yNumberk-map-get( $kendo-spacing, 0.5 )2px
Description
The text color of the ColorGradient.
+
Description
The vertical padding of the small Chip.
$kendo-color-gradient-bgColor$kendo-component-bg#ffffff$kendo-chip-md-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
The background color of the ColorGradient.
+
Description
The vertical padding of the medium Chip.
$kendo-color-gradient-borderColor$kendo-component-border#cacaca$kendo-chip-lg-padding-yNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
The border color of the ColorGradient.
+
Description
The vertical padding of the large Chip.
$kendo-color-gradient-focus-borderNullnullnull$kendo-chip-font-sizeNumber$kendo-font-size-md14px
Description
The border color of the focused ColorGradient.
+
Description
The font size of the Chip.
$kendo-color-gradient-focus-shadowStringk-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-chip-sm-font-sizeNumber$kendo-font-size-md14px
Description
The box shadow of the focused ColorGradient.
+
Description
The font size of the small Chip.
$kendo-color-gradient-canvas-border-radius$kendo-chip-md-font-size Number$kendo-border-radius-md4px$kendo-font-size-md14px
Description
The border radius of the ColorGradient canvas.
+
Description
The font size of the medium Chip.
$kendo-color-gradient-canvas-gap$kendo-chip-lg-font-size Number$kendo-color-gradient-spacer12px$kendo-font-size-md14px
Description
The spacing between the items of the ColorGradient canvas.
+
Description
The font size of the large Chip.
$kendo-color-gradient-canvas-rectangle-height$kendo-chip-line-height Number180px180px11
Description
The height the ColorGradient canvas hsv rectangle.
+
Description
The Chip's line height that is related to the $kendo-font-size.
$kendo-color-gradient-slider-track-size$kendo-chip-sm-line-height Number10px10px$kendo-chip-line-height1
Description
The width of the ColorGradient slider.
+
Description
The small Chip's line height that is related to the $kendo-font-size.
$kendo-color-gradient-slider-border-radius$kendo-chip-md-line-height Number10px10px$kendo-chip-line-height1
Description
The border radius of the ColorGradient slider.
+
Description
The medium Chip's line height that is related to the $kendo-font-size.
$kendo-color-gradient-slider-draghandle-border-width$kendo-chip-lg-line-height Number3px3px$kendo-chip-line-height1
Description
The width of the border around the ColorGradient slider drag handle.
+
Description
The large Chip's line height that is related to the $kendo-font-size.
$kendo-color-gradient-slider-vertical-sizeNumber180px180px$kendo-chip-calc-sizeCalculationcalc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} )calc(1em + 8px + 2px)
Description
The height of the ColorGradient vertical slider.
+
Description
The calculated height of the Chip.
$kendo-color-gradient-slider-horizontal-sizeNumber100%100%$kendo-chip-sizesMap( + sm: ( + padding-x: $kendo-chip-sm-padding-x, + padding-y: $kendo-chip-sm-padding-y, + font-size: $kendo-chip-sm-font-size, + line-height: $kendo-chip-sm-line-height + ), + md: ( + padding-x: $kendo-chip-md-padding-x, + padding-y: $kendo-chip-md-padding-y, + font-size: $kendo-chip-md-font-size, + line-height: $kendo-chip-md-line-height + ), + lg: ( + padding-x: $kendo-chip-lg-padding-x, + padding-y: $kendo-chip-lg-padding-y, + font-size: $kendo-chip-lg-font-size, + line-height: $kendo-chip-lg-line-height + ) +)(sm: (padding-x: 4px, padding-y: 2px, font-size: 14px, line-height: 1), md: (padding-x: 4px, padding-y: 4px, font-size: 14px, line-height: 1), lg: (padding-x: 4px, padding-y: 6px, font-size: 14px, line-height: 1))
Description
The width of the ColorGradient horizontal slider.
+
Description
The map with the sizes of the Chip.
$kendo-color-gradient-draghandle-widthNumber14px14px$kendo-chip-base-bgColor$kendo-button-bg#f0f0f0
Description
The width of the ColorGradient canvas drag handle.
+
Description
The base background of the Chip.
$kendo-color-gradient-draghandle-heightNumber14px14px$kendo-chip-theme-colorsMap( + "base": $kendo-chip-base-bg, + "error": k-map-get( $kendo-theme-colors, "error" ), + "info": k-map-get( $kendo-theme-colors, "info" ), + "warning": k-map-get( $kendo-theme-colors, "warning" ), + "success": k-map-get( $kendo-theme-colors, "success" ) +)("base": #f0f0f0, "error": #d92800, "info": #2498bc, "warning": #ff9800, "success": #3ea44e)
Description
The height of the ColorGradient canvas drag handle.
+
Description
The theme colors map for the Chip.
$kendo-color-gradient-draghandle-border-widthNumber1px1px$kendo-chip-solid-bgColor$kendo-chip-base-bg#f0f0f0
Description
The width of the border around the ColorGradient canvas drag handle.
+
Description
The base background color of the solid Chip.
$kendo-color-gradient-draghandle-outline-widthNumber1px1px$kendo-chip-solid-textColor$kendo-button-text#272727
Description
The width of the outline around the ColorGradient canvas drag handle.
+
Description
The base text color of the solid Chip.
$kendo-color-gradient-draghandle-border-radiusNumber50%50%$kendo-chip-solid-borderColor$kendo-button-border#cacaca
Description
The border radius of the ColorGradient canvas drag handle.
+
Description
The base border color of the solid Chip.
$kendo-color-gradient-draghandle-text$kendo-chip-solid-shadowList0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .16 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) ))0 0 0 2px rgba(0, 0, 0, 0.16)
Description
The base shadow of the solid Chip.
+
$kendo-chip-solid-gradientList$kendo-button-gradientrgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)
Description
The base gradient of the solid Chip.
+
$kendo-chip-solid-focus-bg Null null null
Description
The text color of the ColorGradient canvas drag handle.
+
Description
The base background color of the focused solid Chip.
$kendo-color-gradient-draghandle-bgColortransparenttransparent$kendo-chip-solid-focus-textNullnullnull
Description
The background color of the ColorGradient canvas drag handle.
+
Description
The base text color of the focused solid Chip.
$kendo-color-gradient-draghandle-border$kendo-chip-solid-hover-bg Colorrgba( white, .8)rgba(255, 255, 255, 0.8)$kendo-button-hover-bg#dddddd
Description
The color of the border around the ColorGradient canvas drag handle.
+
Description
The base background color of the hovered solid Chip.
$kendo-color-gradient-draghandle-shadowColorrgba( $kendo-color-black, .5)rgba(0, 0, 0, 0.5)$kendo-chip-solid-hover-textNullnullnull
Description
The color of the outline around the ColorGradient canvas drag handle.
+
Description
The base text color of the hovered solid Chip.
$kendo-color-gradient-draghandle-focus-shadow$kendo-chip-solid-selected-bg Color$kendo-color-black#000000$kendo-button-active-bg#cacaca
Description
The focus color of the outline around the ColorGradient canvas drag handle.
+
Description
The base background color of the selected solid Chip
$kendo-color-gradient-draghandle-hover-shadowColor$kendo-color-black#000000$kendo-chip-solid-selected-textNullnullnull
Description
The outline color of the outline around the ColorGradient canvas drag handle.
+
Description
The base text color of the selected solid Chip.
$kendo-color-gradient-draghandle-shadow$kendo-chip-outline-bg Colork-elevation(2)rgba(0, 0, 0, 0.5)$kendo-component-bg#ffffff
Description
The box shadow of the ColorGradient canvas drag handle.
+
Description
The base background color of the outline Chip.
$kendo-color-gradient-canvas-draghandle-margin-yNumber- k-math-div( $kendo-color-gradient-draghandle-height, 2 )-7px$kendo-chip-outline-textColor$kendo-chip-solid-text#272727
Description
The vertical margin of the ColorGradient canvas drag handle.
+
Description
The base text color of the outline Chip.
$kendo-color-gradient-canvas-draghandle-margin-xNumber- k-math-div( $kendo-color-gradient-draghandle-width, 2 )-7px$kendo-chip-outline-borderColor$kendo-chip-outline-text#272727
Description
The horizontal margin of the ColorGradient canvas drag handle.
+
Description
The base border color of the outline Chip.
$kendo-color-gradient-input-widthNumber46px46px$kendo-chip-outline-shadowList0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .16 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) ))0 0 0 2px rgba(0, 0, 0, 0.16)
Description
The width of the ColorGradient input.
+
Description
The base shadow of the outline Chip.
$kendo-color-gradient-input-gapNumberk-math-div( $kendo-color-gradient-spacer, 1.5 )8px$kendo-chip-outline-hover-bgColor$kendo-chip-outline-text#272727
Description
The spacing between the ColorGradient inputs.
+
Description
The base background color of the hovered outline Chip.
$kendo-color-gradient-input-label-gapNumberk-math-div( $kendo-color-gradient-spacer, 3 )4px$kendo-chip-outline-hover-textColorif($kendo-enable-color-system, k-color( base-subtle ), k-contrast-legacy( $kendo-chip-outline-hover-bg ))white
Description
The spacing between the ColorGradient inputs and their labels.
+
Description
The base text color of the hovered outline Chip.
$kendo-color-gradient-input-label-text$kendo-chip-outline-selected-bg Color$kendo-subtle-text#646464$kendo-chip-outline-hover-bg#272727
Description
The text color of the ColorGradient input labels.
+
Description
The base background color of the selected outline Chip.
$kendo-color-gradient-contrast-ratio-font-weightNumber$kendo-font-weight-bold700$kendo-chip-outline-selected-textColor$kendo-chip-outline-hover-textwhite
Description
The font weight of the ColorGradient contrast ratio text.
+
Description
The base text color of the selected outline Chip.
$kendo-color-gradient-contrast-spacerNumberk-math-div( $kendo-color-gradient-spacer, 1.5 )8px$kendo-chip-list-sizesMap( + sm: k-map-get( $kendo-spacing, 1 ), + md: k-map-get( $kendo-spacing, 1 ), + lg: k-map-get( $kendo-spacing, 1 ) +)(sm: 4px, md: 4px, lg: 4px)
Description
The spacing between the items in the ColorGradient contrast tool.
+
Description
The sizes of the Chip list.
-### Color System +### Cologradient @@ -4564,509 +4704,439 @@ The following table lists the available variables for customizing the Classic th - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - -
$kendo-colorsMap$_default-colors(app-surface: #ffffff, on-app-surface: #272727, subtle: #666666, surface: #f0f0f0, surface-alt: #ffffff, border: #cacaca, border-alt: #b6b6b6, base-subtle: #f0f0f0, base-subtle-hover: #ebebeb, base-subtle-active: #dddddd, base: #ebebeb, base-hover: #dddddd, base-active: #d6d6d6, base-emphasis: #cacaca, base-on-subtle: #272727, on-base: #272727, base-on-surface: #272727, primary-subtle: #fff2eb, primary-subtle-hover: #ffe5d6, primary-subtle-active: #ffd8c2, primary: #f35800, primary-hover: #e05100, primary-active: #cc4a00, primary-emphasis: #ff8b47, primary-on-subtle: #3d1600, on-primary: #ffffff, primary-on-surface: #f35800, secondary-subtle: #cacaca, secondary-subtle-hover: #b6b6b6, secondary-subtle-active: #a3a3a3, secondary: #b6b6b6, secondary-hover: #a3a3a3, secondary-active: #8f8f8f, secondary-emphasis: #7a7a7a, secondary-on-subtle: #272727, on-secondary: #000000, secondary-on-surface: #8f8f8f, tertiary-subtle: #9cdffe, tertiary-subtle-hover: #72d1fe, tertiary-subtle-active: #49c4fd, tertiary: #03a9f4, tertiary-hover: #039be0, tertiary-active: #038ecd, tertiary-emphasis: #2cbbfd, tertiary-on-subtle: #01364e, on-tertiary: #ffffff, tertiary-on-surface: #0273a6, info-subtle: #cce5f3, info-subtle-hover: #a6d1ea, info-subtle-active: #6ab2dc, info: #007bc3, info-hover: #0071b3, info-active: #0067a4, info-emphasis: #409cd2, info-on-subtle: #002b44, on-info: #ffffff, info-on-surface: #005485, success-subtle: #bbdfc1, success-subtle-hover: #9ed1a6, success-subtle-active: #82c48c, success: #3ea44e, success-hover: #399748, success-active: #348a42, success-emphasis: #6ebb7a, success-on-subtle: #16391b, on-success: #ffffff, success-on-surface: #2a7035, warning-subtle: #ffdead, warning-subtle-hover: #ffd699, warning-subtle-active: #ffc670, warning: #ffa41f, warning-hover: #ff9800, warning-active: #eb8c00, warning-emphasis: #ffb240, warning-on-subtle: #593500, on-warning: #000000, warning-on-surface: #ffa41f, error-subtle: #f4c3b8, error-subtle-hover: #f2b4a6, error-subtle-active: #ec8e79, error: #d92800, error-hover: #c82500, error-active: #b62200, error-emphasis: #e35e40, error-on-subtle: #4c0e00, on-error: #ffffff, error-on-surface: #941b00, light-subtle: #f0f0f0, light-subtle-hover: #ebebeb, light-subtle-active: #dddddd, light: #ebebeb, light-hover: #dddddd, light-active: #d6d6d6, light-emphasis: #cacaca, light-on-subtle: #272727, on-light: #000000, light-on-surface: #ebebeb, dark-subtle: #cacaca, dark-subtle-hover: #b6b6b6, dark-subtle-active: #a3a3a3, dark: #404040, dark-hover: #333333, dark-active: #272727, dark-emphasis: #7a7a7a, dark-on-subtle: #000000, on-dark: #ffffff, dark-on-surface: #333333, inverse-subtle: #cacaca, inverse-subtle-hover: #b6b6b6, inverse-subtle-active: #a3a3a3, inverse: #404040, inverse-hover: #333333, inverse-active: #272727, inverse-emphasis: #7a7a7a, inverse-on-subtle: #000000, on-inverse: #ffffff, inverse-on-surface: #333333, series-a: #ff6358, series-a-bold: #bf4a42, series-a-bolder: #80322c, series-a-subtle: #ffb1ac, series-a-subtler: #ff8a82, series-b: #ffd246, series-b-bold: #bf9d35, series-b-bolder: #806923, series-b-subtle: #ffe9a2, series-b-subtler: #ffdd74, series-c: #78d237, series-c-bold: #5a9d29, series-c-bolder: #3c691c, series-c-subtle: #bbe99b, series-c-subtler: #9add69, series-d: #28b4c8, series-d-bold: #1e8796, series-d-bolder: #145a64, series-d-subtle: #93d9e3, series-d-subtler: #5ec7d6, series-e: #2d73f5, series-e-bold: #2256b8, series-e-bolder: #173a7b, series-e-subtle: #96b9fa, series-e-subtler: #6296f7, series-f: #9d40b0, series-f-bold: #80358e, series-f-bolder: #55235f, series-f-subtle: #d5a2df, series-f-subtler: #bf74ce)$kendo-color-gradient-spacerNumberk-map-get( $kendo-spacing, 3 )12px
Description
The global default Colors map.
+
Description
The spacer of the ColorGradient.
$kendo-color-primaryColor#f35800#f35800$kendo-color-gradient-widthNumber272px272px
Description
The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
+
Description
The width of the ColorGradient.
$kendo-color-primary-contrastColork-contrast-legacy( $kendo-color-primary )white$kendo-color-gradient-border-widthNumber1px1px
Description
The color used along with the primary color denoted by $kendo-color-primary.
Used to provide contrast between the background and foreground colors.
+
Description
The width of the border around the ColorGradient.
$kendo-color-secondaryColor#e9e9e9#e9e9e9$kendo-color-gradient-border-radiusNumber$kendo-border-radius-md4px
Description
The secondary color of the theme.
+
Description
The border radius of the ColorGradient.
$kendo-color-secondary-contrastColork-contrast-color( $kendo-color-secondary )black$kendo-color-gradient-padding-yNumber$kendo-color-gradient-spacer12px
Description
The color used along with the secondary color denoted by $kendo-color-secondary.
Used to provide contrast between the background and foreground colors.
+
Description
The vertical padding of the ColorGradient.
$kendo-color-tertiaryColor#03a9f4#03a9f4$kendo-color-gradient-padding-xNumber$kendo-color-gradient-padding-y12px
Description
The tertiary color of the theme.
+
Description
The horizontal padding of the ColorGradient.
$kendo-color-tertiary-contrastColork-contrast-color( $kendo-color-tertiary )black$kendo-color-gradient-gapNumber$kendo-color-gradient-spacer12px
Description
The color used along with the tertiary color denoted by $kendo-color-tertiary.
Used to provide contrast between the background and foreground colors.
+
Description
The spacing between the sections of the ColorGradient.
$kendo-color-infoColor#2498bc#2498bc$kendo-color-gradient-font-familyString$kendo-font-familyinherit
Description
The color for informational messages and states.
+
Description
The font family of the ColorGradient.
$kendo-color-successColor#3ea44e#3ea44e$kendo-color-gradient-font-sizeNumber$kendo-font-size-md14px
Description
The color for success messages and states.
+
Description
The font size of the ColorGradient.
$kendo-color-warningColor#ff9800#ff9800$kendo-color-gradient-line-heightNumber$kendo-line-height-md1.4285714286
Description
The color for warning messages and states.
+
Description
The line height of the ColorGradient.
$kendo-color-error$kendo-color-gradient-text Color#d92800#d92800$kendo-component-text#272727
Description
The color for error messages and states.
+
Description
The text color of the ColorGradient.
$kendo-color-dark$kendo-color-gradient-bg Color#404040#404040$kendo-component-bg#ffffff
Description
The dark color of the theme.
+
Description
The background color of the ColorGradient.
$kendo-color-light$kendo-color-gradient-border Color#ebebeb#ebebeb$kendo-component-border#cacaca
Description
The light color of the theme.
+
Description
The border color of the ColorGradient.
$kendo-color-inverseColorif( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )#404040$kendo-color-gradient-focus-borderNullnullnull
Description
Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
+
Description
The border color of the focused ColorGradient.
- -### Coloreditor - - - - - - - - - - - - - - - - - - - - - + + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - - - - - - - - - - - - - - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - - - - - - -
NameTypeDefault valueComputed value
$kendo-color-editor-spacerNumberk-map-get( $kendo-spacing, 3 )12px
$kendo-color-gradient-focus-shadowStringk-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The spacer of the ColorEditor.
+
Description
The box shadow of the focused ColorGradient.
$kendo-color-editor-min-width$kendo-color-gradient-canvas-border-radius Number272px272px$kendo-border-radius-md4px
Description
The minimum width of the ColorEditor.
+
Description
The border radius of the ColorGradient canvas.
$kendo-color-editor-border-width$kendo-color-gradient-canvas-gap Number1px1px$kendo-color-gradient-spacer12px
Description
The width of the border around the ColorEditor.
+
Description
The spacing between the items of the ColorGradient canvas.
$kendo-color-editor-border-radius$kendo-color-gradient-canvas-rectangle-height Number$kendo-border-radius-md4px180px180px
Description
The border radius of the ColorEditor.
+
Description
The height the ColorGradient canvas hsv rectangle.
$kendo-color-editor-font-familyString$kendo-font-familyinherit$kendo-color-gradient-slider-track-sizeNumber10px10px
Description
The font family of the ColorEditor.
+
Description
The width of the ColorGradient slider.
$kendo-color-editor-font-size$kendo-color-gradient-slider-border-radius Number$kendo-font-size-md14px10px10px
Description
The font size of the ColorEditor.
+
Description
The border radius of the ColorGradient slider.
$kendo-color-editor-line-height$kendo-color-gradient-slider-draghandle-border-width Number$kendo-line-height-md1.42857142863px3px
Description
The line height of the ColorEditor.
+
Description
The width of the border around the ColorGradient slider drag handle.
$kendo-color-editor-textColor$kendo-component-text#272727$kendo-color-gradient-slider-vertical-sizeNumber180px180px
Description
The text color of the ColorEditor.
+
Description
The height of the ColorGradient vertical slider.
$kendo-color-editor-bgColor$kendo-component-bg#ffffff$kendo-color-gradient-slider-horizontal-sizeNumber100%100%
Description
The background color of the ColorEditor.
+
Description
The width of the ColorGradient horizontal slider.
$kendo-color-editor-borderColor$kendo-component-border#cacaca$kendo-color-gradient-draghandle-widthNumber14px14px
Description
The border color of the ColorEditor.
+
Description
The width of the ColorGradient canvas drag handle.
$kendo-color-editor-focus-borderNullnullnull$kendo-color-gradient-draghandle-heightNumber14px14px
Description
The border color of the focused ColorEditor.
+
Description
The height of the ColorGradient canvas drag handle.
$kendo-color-editor-focus-shadowStringk-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-color-gradient-draghandle-border-widthNumber1px1px
Description
The box shadow of the focused ColorEditor.
+
Description
The width of the border around the ColorGradient canvas drag handle.
$kendo-color-editor-header-padding-yNumber$kendo-color-editor-spacer12px
Description
The vertical padding of the ColorEditor header.
-
$kendo-color-editor-header-padding-xNumber$kendo-color-editor-header-padding-y12px
Description
The horizontal padding of the ColorEditor header.
-
$kendo-color-editor-header-actions-gap$kendo-color-gradient-draghandle-outline-width Numberk-math-div( $kendo-color-editor-spacer, 1.5 )8px1px1px
Description
The spacing between the ColorEditor header actions.
+
Description
The width of the outline around the ColorGradient canvas drag handle.
$kendo-color-editor-color-preview-width$kendo-color-gradient-draghandle-border-radius Number32px32px50%50%
Description
The width of the ColorEditor preview.
+
Description
The border radius of the ColorGradient canvas drag handle.
$kendo-color-editor-color-preview-heightNumber12px12px$kendo-color-gradient-draghandle-textNullnullnull
Description
The height of the ColorEditor preview.
+
Description
The text color of the ColorGradient canvas drag handle.
$kendo-color-editor-preview-gapNumberk-map-get( $kendo-spacing, 1 )4px$kendo-color-gradient-draghandle-bgColortransparenttransparent
Description
The spacing between the colors in the ColorEditor preview.
+
Description
The background color of the ColorGradient canvas drag handle.
$kendo-color-editor-views-padding-yNumber$kendo-color-editor-spacer12px$kendo-color-gradient-draghandle-borderColorrgba( white, .8)rgba(255, 255, 255, 0.8)
Description
The vertical padding of the ColorEditor views container.
+
Description
The color of the border around the ColorGradient canvas drag handle.
$kendo-color-editor-views-padding-xNumber$kendo-color-editor-views-padding-y12px$kendo-color-gradient-draghandle-shadowColorrgba( $kendo-color-black, .5)rgba(0, 0, 0, 0.5)
Description
The horizontal padding of the ColorEditor views container.
+
Description
The color of the outline around the ColorGradient canvas drag handle.
$kendo-color-editor-views-gapNumber$kendo-color-editor-spacer12px$kendo-color-gradient-draghandle-focus-shadowColor$kendo-color-black#000000
Description
The spacing of the ColorEditor views container.
+
Description
The focus color of the outline around the ColorGradient canvas drag handle.
$kendo-color-editor-color-gradient-focus-outline-color$kendo-color-gradient-draghandle-hover-shadow Colorrgba(0, 0, 0, .3)rgba(0, 0, 0, 0.3)$kendo-color-black#000000
Description
The outline color of the focused ColorGradient.
+
Description
The outline color of the outline around the ColorGradient canvas drag handle.
$kendo-color-editor-color-gradient-focus-outlineNumber2px2px$kendo-color-gradient-draghandle-shadowColork-elevation(2)rgba(0, 0, 0, 0.5)
Description
The outline width of the focused ColorGradient.
+
Description
The box shadow of the ColorGradient canvas drag handle.
$kendo-color-editor-color-gradient-focus-outline-offset$kendo-color-gradient-canvas-draghandle-margin-y Number4px4px
Description
The outline offset of the focused ColorGradient.
-
- -### Colorpalette - - - - - - - - - - - - - - - - - - - - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-color-palette-font-familyString$kendo-font-familyinherit- k-math-div( $kendo-color-gradient-draghandle-height, 2 )-7px
Description
The font family of the ColorPalette.
+
Description
The vertical margin of the ColorGradient canvas drag handle.
$kendo-color-palette-font-size$kendo-color-gradient-canvas-draghandle-margin-x Number$kendo-font-size-md14px- k-math-div( $kendo-color-gradient-draghandle-width, 2 )-7px
Description
The font size of the ColorPalette.
+
Description
The horizontal margin of the ColorGradient canvas drag handle.
$kendo-color-palette-line-height$kendo-color-gradient-input-width Number0046px46px
Description
The line height of the ColorPalette.
+
Description
The width of the ColorGradient input.
$kendo-color-palette-tile-width$kendo-color-gradient-input-gap Numberk-map-get( $kendo-spacing, 6 )24pxk-math-div( $kendo-color-gradient-spacer, 1.5 )8px
Description
The width of the ColorPalette tile.
+
Description
The spacing between the ColorGradient inputs.
$kendo-color-palette-tile-height$kendo-color-gradient-input-label-gap Number$kendo-color-palette-tile-width24pxk-math-div( $kendo-color-gradient-spacer, 3 )4px
Description
The height of the ColorPalette tile.
+
Description
The spacing between the ColorGradient inputs and their labels.
$kendo-color-palette-tile-focus-shadowList0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 )0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.5)$kendo-color-gradient-input-label-textColor$kendo-subtle-text#646464
Description
The shadow of the ColorPalette focused tile.
+
Description
The text color of the ColorGradient input labels.
$kendo-color-palette-tile-hover-shadowList0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 )0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.8)$kendo-color-gradient-contrast-ratio-font-weightNumber$kendo-font-weight-bold700
Description
The shadow of the ColorPalette hovered tile.
+
Description
The font weight of the ColorGradient contrast ratio text.
$kendo-color-palette-tile-selected-shadowList0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 )0 1px 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px white$kendo-color-gradient-contrast-spacerNumberk-math-div( $kendo-color-gradient-spacer, 1.5 )8px
Description
The shadow of the ColorPalette selected tile.
+
Description
The spacing between the items in the ColorGradient contrast tool.
-### Component +### Color System @@ -5084,159 +5154,149 @@ The following table lists the available variables for customizing the Classic th - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - - - - - - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + -
$kendo-component-bgColor$kendo-body-bg#ffffff$kendo-colorsMap$_default-colors(app-surface: #ffffff, on-app-surface: #272727, subtle: #666666, surface: #f0f0f0, surface-alt: #ffffff, border: #cacaca, border-alt: #b6b6b6, base-subtle: #f0f0f0, base-subtle-hover: #ebebeb, base-subtle-active: #dddddd, base: #ebebeb, base-hover: #dddddd, base-active: #d6d6d6, base-emphasis: #cacaca, base-on-subtle: #272727, on-base: #272727, base-on-surface: #272727, primary-subtle: #fff2eb, primary-subtle-hover: #ffe5d6, primary-subtle-active: #ffd8c2, primary: #f35800, primary-hover: #e05100, primary-active: #cc4a00, primary-emphasis: #ff8b47, primary-on-subtle: #3d1600, on-primary: #ffffff, primary-on-surface: #f35800, secondary-subtle: #cacaca, secondary-subtle-hover: #b6b6b6, secondary-subtle-active: #a3a3a3, secondary: #b6b6b6, secondary-hover: #a3a3a3, secondary-active: #8f8f8f, secondary-emphasis: #7a7a7a, secondary-on-subtle: #272727, on-secondary: #000000, secondary-on-surface: #8f8f8f, tertiary-subtle: #9cdffe, tertiary-subtle-hover: #72d1fe, tertiary-subtle-active: #49c4fd, tertiary: #03a9f4, tertiary-hover: #039be0, tertiary-active: #038ecd, tertiary-emphasis: #2cbbfd, tertiary-on-subtle: #01364e, on-tertiary: #ffffff, tertiary-on-surface: #0273a6, info-subtle: #cce5f3, info-subtle-hover: #a6d1ea, info-subtle-active: #6ab2dc, info: #007bc3, info-hover: #0071b3, info-active: #0067a4, info-emphasis: #409cd2, info-on-subtle: #002b44, on-info: #ffffff, info-on-surface: #005485, success-subtle: #bbdfc1, success-subtle-hover: #9ed1a6, success-subtle-active: #82c48c, success: #3ea44e, success-hover: #399748, success-active: #348a42, success-emphasis: #6ebb7a, success-on-subtle: #16391b, on-success: #ffffff, success-on-surface: #2a7035, warning-subtle: #ffdead, warning-subtle-hover: #ffd699, warning-subtle-active: #ffc670, warning: #ffa41f, warning-hover: #ff9800, warning-active: #eb8c00, warning-emphasis: #ffb240, warning-on-subtle: #593500, on-warning: #000000, warning-on-surface: #ffa41f, error-subtle: #f4c3b8, error-subtle-hover: #f2b4a6, error-subtle-active: #ec8e79, error: #d92800, error-hover: #c82500, error-active: #b62200, error-emphasis: #e35e40, error-on-subtle: #4c0e00, on-error: #ffffff, error-on-surface: #941b00, light-subtle: #f0f0f0, light-subtle-hover: #ebebeb, light-subtle-active: #dddddd, light: #ebebeb, light-hover: #dddddd, light-active: #d6d6d6, light-emphasis: #cacaca, light-on-subtle: #272727, on-light: #000000, light-on-surface: #ebebeb, dark-subtle: #cacaca, dark-subtle-hover: #b6b6b6, dark-subtle-active: #a3a3a3, dark: #404040, dark-hover: #333333, dark-active: #272727, dark-emphasis: #7a7a7a, dark-on-subtle: #000000, on-dark: #ffffff, dark-on-surface: #333333, inverse-subtle: #cacaca, inverse-subtle-hover: #b6b6b6, inverse-subtle-active: #a3a3a3, inverse: #404040, inverse-hover: #333333, inverse-active: #272727, inverse-emphasis: #7a7a7a, inverse-on-subtle: #000000, on-inverse: #ffffff, inverse-on-surface: #333333, series-a: #ff6358, series-a-bold: #bf4a42, series-a-bolder: #80322c, series-a-subtle: #ffb1ac, series-a-subtler: #ff8a82, series-b: #ffd246, series-b-bold: #bf9d35, series-b-bolder: #806923, series-b-subtle: #ffe9a2, series-b-subtler: #ffdd74, series-c: #78d237, series-c-bold: #5a9d29, series-c-bolder: #3c691c, series-c-subtle: #bbe99b, series-c-subtler: #9add69, series-d: #28b4c8, series-d-bold: #1e8796, series-d-bolder: #145a64, series-d-subtle: #93d9e3, series-d-subtler: #5ec7d6, series-e: #2d73f5, series-e-bold: #2256b8, series-e-bolder: #173a7b, series-e-subtle: #96b9fa, series-e-subtler: #6296f7, series-f: #9d40b0, series-f-bold: #80358e, series-f-bolder: #55235f, series-f-subtle: #d5a2df, series-f-subtler: #bf74ce)
Description
Background color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.
+
Description
The global default Colors map.
$kendo-component-text$kendo-color-primary Color$kendo-body-text#272727#f35800#f35800
Description
Text color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.
+
Description
The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$kendo-component-border$kendo-color-primary-contrast Color$kendo-base-border#cacacak-contrast-legacy( $kendo-color-primary )white
Description
Border color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.
+
Description
The color used along with the primary color denoted by $kendo-color-primary.
Used to provide contrast between the background and foreground colors.
$kendo-component-header-bg$kendo-color-secondary Color$kendo-base-bg#f0f0f0#e9e9e9#e9e9e9
Description
Background color of the component header.
+
Description
The secondary color of the theme.
$kendo-component-header-text$kendo-color-secondary-contrast Color$kendo-base-text#272727k-contrast-color( $kendo-color-secondary )black
Description
Text color of the component header.
+
Description
The color used along with the secondary color denoted by $kendo-color-secondary.
Used to provide contrast between the background and foreground colors.
$kendo-component-header-border$kendo-color-tertiary Color$kendo-base-border#cacaca#03a9f4#03a9f4
Description
Border color of the component header.
+
Description
The tertiary color of the theme.
$kendo-component-header-gradientList$kendo-base-gradientrgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)
Description
Gradient of the component header.
-
$kendo-invalid-bgNullnullnull$kendo-color-tertiary-contrastColork-contrast-color( $kendo-color-tertiary )black
Description
Background color of the invalid items.
+
Description
The color used along with the tertiary color denoted by $kendo-color-tertiary.
Used to provide contrast between the background and foreground colors.
$kendo-invalid-text$kendo-color-info Color$kendo-color-error#d92800#2498bc#2498bc
Description
Text color of the invalid items.
+
Description
The color for informational messages and states.
$kendo-invalid-border$kendo-color-success Color$kendo-color-error#d92800#3ea44e#3ea44e
Description
Border color of the invalid items.
+
Description
The color for success messages and states.
$kendo-invalid-shadowNullnullnull$kendo-color-warningColor#ff9800#ff9800
Description
Shadow of the invalid items.
+
Description
The color for warning messages and states.
$kendo-valid-bgNullnullnull$kendo-color-errorColor#d92800#d92800
Description
Background color of the valid items.
+
Description
The color for error messages and states.
$kendo-valid-text$kendo-color-dark Color$kendo-color-success#3ea44e#404040#404040
Description
Text color of the valid items.
+
Description
The dark color of the theme.
$kendo-valid-border$kendo-color-light Color$kendo-color-success#3ea44e#ebebeb#ebebeb
Description
Border color of the valid items.
+
Description
The light color of the theme.
$kendo-valid-shadowNullnullnull$kendo-color-inverseColorif( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )#404040
Description
Shadow of the valid items.
+
Description
Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
-### Dialog +### Coloreditor @@ -5254,463 +5314,519 @@ The following table lists the available variables for customizing the Classic th - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - - - - - - -
$kendo-dialog-titlebar-bgNullnullnull$kendo-color-editor-spacerNumberk-map-get( $kendo-spacing, 3 )12px
Description
The background color of the Dialog titlebar.
+
Description
The spacer of the ColorEditor.
$kendo-dialog-titlebar-textNullnullnull$kendo-color-editor-min-widthNumber272px272px
Description
The text color of the Dialog titlebar.
+
Description
The minimum width of the ColorEditor.
$kendo-dialog-titlebar-borderNullnullnull$kendo-color-editor-border-widthNumber1px1px
Description
The border color of the Dialog titlebar.
+
Description
The width of the border around the ColorEditor.
$kendo-dialog-buttongroup-padding-x$kendo-color-editor-border-radius Number$kendo-actions-padding-x8px$kendo-border-radius-md4px
Description
The horizontal padding of the Dialog action buttons.
+
Description
The border radius of the ColorEditor.
$kendo-dialog-buttongroup-padding-yNumber$kendo-actions-padding-y8px$kendo-color-editor-font-familyString$kendo-font-familyinherit
Description
The vertical padding of the Dialog action buttons.
+
Description
The font family of the ColorEditor.
$kendo-dialog-buttongroup-border-width$kendo-color-editor-font-size Number1px1px$kendo-font-size-md14px
Description
The width of the top border of the Dialog action buttons.
+
Description
The font size of the ColorEditor.
$kendo-dialog-button-spacing$kendo-color-editor-line-height Number$kendo-actions-button-spacing8px$kendo-line-height-md1.4285714286
Description
The spacing between the Dialog action buttons.
+
Description
The line height of the ColorEditor.
$kendo-dialog-theme-colorsMap( - "primary": k-map-get($kendo-theme-colors, "primary"), - "light": k-map-get($kendo-theme-colors, "light"), - "dark": k-map-get($kendo-theme-colors, "dark") -)("primary": #f35800, "light": #ebebeb, "dark": #404040)
Description
The theme colors map for the Dialog.
-
- -### Dock-manager - - - - - - - - - - - - - - - - - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-dock-manager-border-widthNumber1px1px$kendo-color-editor-textColor$kendo-component-text#272727
Description
The width of the border around the DockManager component.
+
Description
The text color of the ColorEditor.
$kendo-dock-manager-border-styleStringsolidsolid$kendo-color-editor-bgColor$kendo-component-bg#ffffff
Description
The style of the border around the DockManager component.
+
Description
The background color of the ColorEditor.
$kendo-dock-manager-border$kendo-color-editor-border Color$kendo-base-border$kendo-component-border #cacaca
Description
The color of the border around the DockManager component.
+
Description
The border color of the ColorEditor.
$kendo-dock-manager-pane-header-padding-yNumberk-map-get( $kendo-spacing, 2 )8px$kendo-color-editor-focus-borderNullnullnull
Description
The vertical padding of the pane header in the DockManager component.
+
Description
The border color of the focused ColorEditor.
$kendo-dock-manager-pane-header-padding-xNumberk-map-get( $kendo-spacing, 4 )16px$kendo-color-editor-focus-shadowStringk-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The horizontal padding of the pane header in the DockManager component.
+
Description
The box shadow of the focused ColorEditor.
$kendo-dock-manager-pane-header-border-width$kendo-color-editor-header-padding-y Number$kendo-dock-manager-border-width1px$kendo-color-editor-spacer12px
Description
The width of the border around the pane header in the DockManager component.
+
Description
The vertical padding of the ColorEditor header.
$kendo-dock-manager-pane-header-border-styleStringsolidsolid$kendo-color-editor-header-padding-xNumber$kendo-color-editor-header-padding-y12px
Description
The style of the border around the pane header in the DockManager component.
+
Description
The horizontal padding of the ColorEditor header.
$kendo-dock-manager-pane-header-bgColor$kendo-component-header-bg#f0f0f0$kendo-color-editor-header-actions-gapNumberk-math-div( $kendo-color-editor-spacer, 1.5 )8px
Description
The background color of the pane header in the DockManager component.
+
Description
The spacing between the ColorEditor header actions.
$kendo-dock-manager-pane-title-padding-yNullnullnull$kendo-color-editor-color-preview-widthNumber32px32px
Description
The vertical padding of the pane title in the DockManager component.
+
Description
The width of the ColorEditor preview.
$kendo-dock-manager-pane-title-padding-xNullnullnull$kendo-color-editor-color-preview-heightNumber12px12px
Description
The horizontal padding of the pane title in the DockManager component.
+
Description
The height of the ColorEditor preview.
$kendo-dock-manager-pane-title-font-familyString$kendo-font-familyinherit$kendo-color-editor-preview-gapNumberk-map-get( $kendo-spacing, 1 )4px
Description
The font family of the pane title in the DockManager component.
+
Description
The spacing between the colors in the ColorEditor preview.
$kendo-dock-manager-pane-title-font-size$kendo-color-editor-views-padding-y Number$kendo-font-size-lg16px$kendo-color-editor-spacer12px
Description
The font size of the pane title in the DockManager component.
+
Description
The vertical padding of the ColorEditor views container.
$kendo-dock-manager-pane-title-line-height$kendo-color-editor-views-padding-x Number$kendo-line-height-sm1.25$kendo-color-editor-views-padding-y12px
Description
The line height of the pane title in the DockManager component.
+
Description
The horizontal padding of the ColorEditor views container.
$kendo-dock-manager-pane-title-font-weight$kendo-color-editor-views-gap Number$kendo-font-weight-normal400$kendo-color-editor-spacer12px
Description
The font weight of the pane title in the DockManager component.
+
Description
The spacing of the ColorEditor views container.
$kendo-dock-manager-pane-content-padding-xNumber$kendo-dock-manager-pane-header-padding-x16px$kendo-color-editor-color-gradient-focus-outline-colorColorrgba(0, 0, 0, .3)rgba(0, 0, 0, 0.3)
Description
The horizontal padding of the pane content in the DockManager component.
+
Description
The outline color of the focused ColorGradient.
$kendo-dock-manager-pane-content-padding-y$kendo-color-editor-color-gradient-focus-outline Number$kendo-dock-manager-pane-header-padding-x16px2px2px
Description
The vertical padding of the pane content in the DockManager component.
+
Description
The outline width of the focused ColorGradient.
$kendo-dock-manager-tabbed-pane-padding-y$kendo-color-editor-color-gradient-focus-outline-offset Numberk-map-get( $kendo-spacing, 4 )16px4px4px
Description
The horizontal padding of the tabbed pane in the DockManager component.
+
Description
The outline offset of the focused ColorGradient.
$kendo-dock-manager-tabbed-pane-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
+ +### Colorpalette + + + + + + + + + + + + + + + + + + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-color-palette-font-familyString$kendo-font-familyinherit
Description
The horizontal padding of the tabbed pane in the DockManager component.
+
Description
The font family of the ColorPalette.
$kendo-dock-manager-unpinned-container-width$kendo-color-palette-font-size Number300px300px$kendo-font-size-md14px
Description
The width of the unpinned pane container in the DockManager component.
+
Description
The font size of the ColorPalette.
$kendo-dock-manager-unpinned-container-bgColor$kendo-color-white#ffffff$kendo-color-palette-line-heightNumber00
Description
The background-color of the unpinned pane container in the DockManager component.
+
Description
The line height of the ColorPalette.
$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)$kendo-color-palette-tile-widthNumberk-map-get( $kendo-spacing, 6 )24px
Description
The box shadow of the unpinned pane container in the DockManager component.
+
Description
The width of the ColorPalette tile.
$kendo-dock-indicator-padding$kendo-color-palette-tile-height Numberk-map-get( $kendo-spacing, 1.5 )6px$kendo-color-palette-tile-width24px
Description
The padding of the dock indicator in the DockManager component.
+
Description
The height of the ColorPalette tile.
$kendo-dock-indicator-bgColor#f5f5f5#f5f5f5$kendo-color-palette-tile-focus-shadowList0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 )0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.5)
Description
The background color of the dock indicator in the DockManager component.
+
Description
The shadow of the ColorPalette focused tile.
$kendo-dock-indicator-textColor$kendo-color-primary#f35800$kendo-color-palette-tile-hover-shadowList0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 )0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.8)
Description
The text color of the dock indicator in the DockManager component.
+
Description
The shadow of the ColorPalette hovered tile.
$kendo-dock-indicator-outline-widthNumber1px1px$kendo-color-palette-tile-selected-shadowList0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 )0 1px 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px white
Description
The outline width of the dock indicator in the DockManager component.
+
Description
The shadow of the ColorPalette selected tile.
$kendo-dock-indicator-outline-styleStringsolidsolid
+ +### Component + + + + + + + + + + + + + + + + + + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-component-bgColor$kendo-body-bg#ffffff
Description
The outline style of the dock indicator in the DockManager component.
+
Description
Background color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.
$kendo-dock-indicator-outline$kendo-component-text Color$kendo-dock-indicator-text#f35800$kendo-body-text#272727
Description
The outline color of the dock indicator in the DockManager component.
+
Description
Text color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.
$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))$kendo-component-borderColor$kendo-base-border#cacaca
Description
The box shadow of the dock indicator in the DockManager component.
+
Description
Border color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.
$kendo-dock-indicator-hover-bg$kendo-component-header-bg Color$kendo-color-primary#f35800$kendo-base-bg#f0f0f0
Description
The background color of the hovered dock indicator in the DockManager component.
+
Description
Background color of the component header.
$kendo-dock-indicator-hover-text$kendo-component-header-text Color$kendo-color-white#ffffff$kendo-base-text#272727
Description
The text color of the hovered dock indicator in the DockManager component.
+
Description
Text color of the component header.
$kendo-dock-manager-dock-preview-border-widthNumber1px1px$kendo-component-header-borderColor$kendo-base-border#cacaca
Description
The width of the border around the dropping area in the DockManager component.
+
Description
Border color of the component header.
$kendo-dock-manager-dock-preview-border-styleStringdasheddashed$kendo-component-header-gradientList$kendo-base-gradientrgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)
Description
The style of the border around the dropping area in the DockManager component.
+
Description
Gradient of the component header.
$kendo-dock-manager-dock-preview-border-radiusNumber$kendo-border-radius-sm2px$kendo-invalid-bgNullnullnull
Description
The border radius of the dropping area in the DockManager component.
+
Description
Background color of the invalid items.
$kendo-dock-manager-dock-preview-bg$kendo-invalid-text Colorif($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 ))rgba(243, 88, 0, 0.16)$kendo-color-error#d92800
Description
The background color of the dropping area in the DockManager component.
+
Description
Text color of the invalid items.
$kendo-dock-manager-dock-preview-border$kendo-invalid-border Color$kendo-color-primary#f35800$kendo-color-error#d92800
Description
The border color of the dropping area in the DockManager component.
+
Description
Border color of the invalid items.
+
$kendo-invalid-shadowNullnullnull
Description
Shadow of the invalid items.
+
$kendo-valid-bgNullnullnull
Description
Background color of the valid items.
+
$kendo-valid-textColor$kendo-color-success#3ea44e
Description
Text color of the valid items.
+
$kendo-valid-borderColor$kendo-color-success#3ea44e
Description
Border color of the valid items.
+
$kendo-valid-shadowNullnullnull
Description
Shadow of the valid items.
-### Dropdowntree +### Dialog @@ -5728,29 +5844,93 @@ The following table lists the available variables for customizing the Classic th - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - + - + - + + + + + + + + + + + + + + + + + + + + + + + + + + +
$kendo-dropdowntree-popup-padding-x$kendo-dialog-titlebar-bgNullnullnull
Description
The background color of the Dialog titlebar.
+
$kendo-dialog-titlebar-textNullnullnull
Description
The text color of the Dialog titlebar.
+
$kendo-dialog-titlebar-borderNullnullnull
Description
The border color of the Dialog titlebar.
+
$kendo-dialog-buttongroup-padding-x Numberk-map-get( $kendo-spacing, 2 )$kendo-actions-padding-x 8px
Description
The horizontal padding of the DropdownTree popup
+
Description
The horizontal padding of the Dialog action buttons.
$kendo-dropdowntree-popup-padding-y$kendo-dialog-buttongroup-padding-y Numberk-map-get( $kendo-spacing, 2 )$kendo-actions-padding-y 8px
Description
The vertical padding of the DropdownTree popup
+
Description
The vertical padding of the Dialog action buttons.
+
$kendo-dialog-buttongroup-border-widthNumber1px1px
Description
The width of the top border of the Dialog action buttons.
+
$kendo-dialog-button-spacingNumber$kendo-actions-button-spacing8px
Description
The spacing between the Dialog action buttons.
+
$kendo-dialog-theme-colorsMap( + "primary": k-map-get($kendo-theme-colors, "primary"), + "light": k-map-get($kendo-theme-colors, "light"), + "dark": k-map-get($kendo-theme-colors, "dark") +)("primary": #f35800, "light": #ebebeb, "dark": #404040)
Description
The theme colors map for the Dialog.
-### Dropzone +### Dock-manager @@ -5768,379 +5948,359 @@ The following table lists the available variables for customizing the Classic th - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - -
$kendo-dropzone-padding-x$kendo-dock-manager-border-width Numberk-map-get( $kendo-spacing, 2 )8px1px1px
Description
The horizontal padding of the DropZone.
+
Description
The width of the border around the DockManager component.
$kendo-dropzone-padding-yNumberk-map-get( $kendo-spacing, 2 )8px$kendo-dock-manager-border-styleStringsolidsolid
Description
The vertical padding of the DropZone.
+
Description
The style of the border around the DockManager component.
$kendo-dropzone-border-widthNumber1px1px$kendo-dock-manager-borderColor$kendo-base-border#cacaca
Description
The border width of the DropZone.
+
Description
The color of the border around the DockManager component.
$kendo-dropzone-min-height$kendo-dock-manager-pane-header-padding-y Number220px220pxk-map-get( $kendo-spacing, 2 )8px
Description
The minimum height of the DropZone.
+
Description
The vertical padding of the pane header in the DockManager component.
$kendo-dropzone-font-familyString$kendo-font-familyinherit$kendo-dock-manager-pane-header-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The font family of the DropZone.
+
Description
The horizontal padding of the pane header in the DockManager component.
$kendo-dropzone-font-size$kendo-dock-manager-pane-header-border-width Number$kendo-font-size-md14px$kendo-dock-manager-border-width1px
Description
The font size of the DropZone.
+
Description
The width of the border around the pane header in the DockManager component.
$kendo-dropzone-line-heightNumber$kendo-line-height-md1.4285714286$kendo-dock-manager-pane-header-border-styleStringsolidsolid
Description
The line height of the DropZone.
+
Description
The style of the border around the pane header in the DockManager component.
$kendo-dropzone-bg$kendo-dock-manager-pane-header-bg Color$kendo-base-bg$kendo-component-header-bg #f0f0f0
Description
The background color of the DropZone.
+
Description
The background color of the pane header in the DockManager component.
$kendo-dropzone-textColor$kendo-base-text#272727$kendo-dock-manager-pane-title-padding-yNullnullnull
Description
The text color of the DropZone.
+
Description
The vertical padding of the pane title in the DockManager component.
$kendo-dropzone-borderColor$kendo-base-border#cacaca$kendo-dock-manager-pane-title-padding-xNullnullnull
Description
The border color of the DropZone.
+
Description
The horizontal padding of the pane title in the DockManager component.
$kendo-dropzone-icon-spacingNumberk-map-get( $kendo-spacing, 6 )24px$kendo-dock-manager-pane-title-font-familyString$kendo-font-familyinherit
Description
The spacing below the DropZone icon.
+
Description
The font family of the pane title in the DockManager component.
$kendo-dropzone-icon-textColorif($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 ))#6c6c6c$kendo-dock-manager-pane-title-font-sizeNumber$kendo-font-size-lg16px
Description
The text color of the DropZone icon.
+
Description
The font size of the pane title in the DockManager component.
$kendo-dropzone-icon-hover-textColor$kendo-color-primary#f35800$kendo-dock-manager-pane-title-line-heightNumber$kendo-line-height-sm1.25
Description
The text color of the hovered DropZone icon.
+
Description
The line height of the pane title in the DockManager component.
$kendo-dropzone-hint-font-sizeNullnullnull$kendo-dock-manager-pane-title-font-weightNumber$kendo-font-weight-normal400
Description
The font size of the DropZone hint.
+
Description
The font weight of the pane title in the DockManager component.
$kendo-dropzone-hint-spacing$kendo-dock-manager-pane-content-padding-x Numberk-map-get( $kendo-spacing, 2 )8px$kendo-dock-manager-pane-header-padding-x16px
Description
The spacing below the DropZone hint.
+
Description
The horizontal padding of the pane content in the DockManager component.
$kendo-dropzone-hint-textNullnullnull$kendo-dock-manager-pane-content-padding-yNumber$kendo-dock-manager-pane-header-padding-x16px
Description
The text color of the DropZone hint.
+
Description
The vertical padding of the pane content in the DockManager component.
$kendo-dropzone-note-font-size$kendo-dock-manager-tabbed-pane-padding-y Number$kendo-font-size-sm12pxk-map-get( $kendo-spacing, 4 )16px
Description
The font size of the DropZone note.
+
Description
The horizontal padding of the tabbed pane in the DockManager component.
$kendo-dropzone-note-spacingNullnullnull$kendo-dock-manager-tabbed-pane-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The spacing below the DropZone note.
+
Description
The horizontal padding of the tabbed pane in the DockManager component.
$kendo-dropzone-note-textColor$kendo-subtle-text#646464$kendo-dock-manager-unpinned-container-widthNumber300px300px
Description
The text color of the DropZone note.
+
Description
The width of the unpinned pane container in the DockManager component.
- -### Editor - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + -
NameTypeDefault valueComputed value
$kendo-editor-border-widthNumber1px1px
$kendo-dock-manager-unpinned-container-bgColor$kendo-color-white#ffffff
Description
The width of the border around the Еditor.
+
Description
The background-color of the unpinned pane container in the DockManager component.
$kendo-editor-font-familyString$kendo-font-familyinherit$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 font family of the Еditor.
+
Description
The box shadow of the unpinned pane container in the DockManager component.
$kendo-editor-font-size$kendo-dock-indicator-padding Number$kendo-font-size-md14pxk-map-get( $kendo-spacing, 1.5 )6px
Description
The font size of the Еditor.
+
Description
The padding of the dock indicator in the DockManager component.
$kendo-editor-line-heightNumber$kendo-line-height-md1.4285714286$kendo-dock-indicator-bgColor#f5f5f5#f5f5f5
Description
The line height of the Еditor.
+
Description
The background color of the dock indicator in the DockManager component.
$kendo-editor-placeholder-text$kendo-dock-indicator-text Color$kendo-input-placeholder-text#646464$kendo-color-primary#f35800
Description
The text color of the Еditor placeholder.
+
Description
The text color of the dock indicator in the DockManager component.
$kendo-editor-placeholder-opacity$kendo-dock-indicator-outline-width Number$kendo-input-placeholder-opacity11px1px
Description
The opacity of the Editor placeholder.
+
Description
The outline width of the dock indicator in the DockManager component.
$kendo-editor-selected-textColor$kendo-color-primary-contrastwhite$kendo-dock-indicator-outline-styleStringsolidsolid
Description
The selected text color of the Editor.
+
Description
The outline style of the dock indicator in the DockManager component.
$kendo-editor-selected-bg$kendo-dock-indicator-outline Color$kendo-color-primary$kendo-dock-indicator-text #f35800
Description
The selected background color of the Editor.
+
Description
The outline color of the dock indicator in the DockManager component.
$kendo-editor-highlighted-bgColorif($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix( $kendo-color-primary, #ffffff, 20% ))#fddecc$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 highlighted background color of the Editor.
+
Description
The box shadow of the dock indicator in the DockManager component.
$kendo-editor-export-tool-icon-margin-xNumber.25em0.25em$kendo-dock-indicator-hover-bgColor$kendo-color-primary#f35800
Description
The horizontal margin of the Editor's export tool icon.
+
Description
The background color of the hovered dock indicator in the DockManager component.
$kendo-editor-resize-handle-sizeNumber8px8px$kendo-dock-indicator-hover-textColor$kendo-color-white#ffffff
Description
The size of the Editor's resize handle.
+
Description
The text color of the hovered dock indicator in the DockManager component.
$kendo-editor-resize-handle-border-width$kendo-dock-manager-dock-preview-border-width Number 1px 1px
Description
The border width of the Editor's resize handle.
+
Description
The width of the border around the dropping area in the DockManager component.
$kendo-editor-resize-handle-borderColor#000000#000000$kendo-dock-manager-dock-preview-border-styleStringdasheddashed
Description
The border color of the Editor's resize handle.
+
Description
The style of the border around the dropping area in the DockManager component.
$kendo-editor-resize-handle-bgColor#ffffff#ffffff$kendo-dock-manager-dock-preview-border-radiusNumber$kendo-border-radius-sm2px
Description
The background color of the Editor's resize handle.
+
Description
The border radius of the dropping area in the DockManager component.
$kendo-editor-selectednode-outline-widthNumber2px2px$kendo-dock-manager-dock-preview-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 ))rgba(243, 88, 0, 0.16)
Description
The outline width of the Editor's selected node.
+
Description
The background color of the dropping area in the DockManager component.
$kendo-editor-selectednode-outline-color$kendo-dock-manager-dock-preview-border Color#88ccff#88ccff$kendo-color-primary#f35800
Description
The outline color of the Editor's selected node.
+
Description
The border color of the dropping area in the DockManager component.
-### Expander +### Dropdowntree @@ -6158,229 +6318,239 @@ The following table lists the available variables for customizing the Classic th - + - - + - - - - - - - - - - - + + - - - + +
$kendo-expander-spacing-y$kendo-dropdowntree-popup-padding-x Number k-map-get( $kendo-spacing, 2 ) 8px
Description
The vertical spacing of the ExpansionPanel.
+
Description
The horizontal padding of the DropdownTree popup
$kendo-expander-border-width$kendo-dropdowntree-popup-padding-y Number1px1px
Description
The width of the border around the ExpansionPanel.
-
$kendo-expander-font-familyString$kendo-font-familyinheritk-map-get( $kendo-spacing, 2 )8px
Description
The font family of the ExpansionPanel.
+
Description
The vertical padding of the DropdownTree popup
$kendo-expander-font-size
+ +### Dropzone + + + + + + + + + + + + + + + + + + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-dropzone-padding-x Number$kendo-font-size-md14pxk-map-get( $kendo-spacing, 2 )8px
Description
The font size of the ExpansionPanel.
+
Description
The horizontal padding of the DropZone.
$kendo-expander-line-height$kendo-dropzone-padding-y Number$kendo-line-height-md1.4285714286k-map-get( $kendo-spacing, 2 )8px
Description
The hine height of the ExpansionPanel.
+
Description
The vertical padding of the DropZone.
$kendo-expander-textColor$kendo-component-text#272727$kendo-dropzone-border-widthNumber1px1px
Description
The text color of the ExpansionPanel.
+
Description
The border width of the DropZone.
$kendo-expander-bgColor$kendo-component-bg#ffffff$kendo-dropzone-min-heightNumber220px220px
Description
The background color of the ExpansionPanel.
+
Description
The minimum height of the DropZone.
$kendo-expander-borderColor$kendo-component-border#cacaca$kendo-dropzone-font-familyString$kendo-font-familyinherit
Description
The border color of the ExpansionPanel.
+
Description
The font family of the DropZone.
$kendo-expander-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)$kendo-dropzone-font-sizeNumber$kendo-font-size-md14px
Description
The box shadow of the focused ExpansionPanel.
+
Description
The font size of the DropZone.
$kendo-expander-header-padding-x$kendo-dropzone-line-height Numberk-map-get( $kendo-spacing, 4 )16px$kendo-line-height-md1.4285714286
Description
The horizontal padding of the ExpansionPanel header.
+
Description
The line height of the DropZone.
$kendo-expander-header-padding-yNumberk-map-get( $kendo-spacing, 1.5 )6px$kendo-dropzone-bgColor$kendo-base-bg#f0f0f0
Description
The vertical padding of the ExpansionPanel header.
+
Description
The background color of the DropZone.
$kendo-expander-header-text$kendo-dropzone-text Color$kendo-expander-text$kendo-base-text #272727
Description
The text color of the ExpansionPanel header.
+
Description
The text color of the DropZone.
$kendo-expander-header-bg$kendo-dropzone-border Colortransparenttransparent$kendo-base-border#cacaca
Description
The background color of the ExpansionPanel header.
+
Description
The border color of the DropZone.
$kendo-expander-header-borderNullnullnull$kendo-dropzone-icon-spacingNumberk-map-get( $kendo-spacing, 6 )24px
Description
The border color of the ExpansionPanel header.
+
Description
The spacing below the DropZone icon.
$kendo-expander-header-hover-bg$kendo-dropzone-icon-text Colorif($kendo-enable-color-system, k-color( base-subtle-hover ), k-color-shade( $kendo-expander-bg, 1 ))#ebebebif($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 ))#6c6c6c
Description
The background color of the hovered ExpansionPanel header.
+
Description
The text color of the DropZone icon.
$kendo-expander-header-focus-bgNullnullnull$kendo-dropzone-icon-hover-textColor$kendo-color-primary#f35800
Description
The background color of the focused ExpansionPanel header.
+
Description
The text color of the hovered DropZone icon.
$kendo-expander-header-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)$kendo-dropzone-hint-font-sizeNullnullnull
Description
The box shadow of the focused ExpansionPanel header.
+
Description
The font size of the DropZone hint.
$kendo-expander-title-textColor$kendo-color-primary#f35800$kendo-dropzone-hint-spacingNumberk-map-get( $kendo-spacing, 2 )8px
Description
The text color of the ExpansionPanel title.
+
Description
The spacing below the DropZone hint.
$kendo-expander-header-sub-title-textColor$kendo-subtle-text#646464$kendo-dropzone-hint-textNullnullnull
Description
The text color of the ExpansionPanel sub-title.
+
Description
The text color of the DropZone hint.
$kendo-expander-indicator-margin-x$kendo-dropzone-note-font-size Numberk-map-get( $kendo-spacing, 3 )$kendo-font-size-sm 12px
Description
The horizontal margin of the ExpansionPanel indicator.
+
Description
The font size of the DropZone note.
$kendo-expander-content-padding-xNumberk-map-get( $kendo-spacing, 4 )16px$kendo-dropzone-note-spacingNullnullnull
Description
The horizontal padding of the ExpansionPanel content.
+
Description
The spacing below the DropZone note.
$kendo-expander-content-padding-yNumberk-map-get( $kendo-spacing, 4 )16px$kendo-dropzone-note-textColor$kendo-subtle-text#646464
Description
The vertical padding of the ExpansionPanel content.
+
Description
The text color of the DropZone note.
-### Filemanager +### Editor @@ -6398,1822 +6568,1772 @@ The following table lists the available variables for customizing the Classic th - - - - - - - - - - + - - + - - + - - + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - - + +
$kendo-file-manager-spacerNumberk-map-get( $kendo-spacing, 4 )16px
Description
The space between the FileManager items.
-
$kendo-file-manager-border-width$kendo-editor-border-width Number 1px 1px
Description
The border width of the FileManager.
+
Description
The width of the border around the Еditor.
$kendo-file-manager-font-family$kendo-editor-font-family String $kendo-font-family inherit
Description
The font family of the FileManager.
+
Description
The font family of the Еditor.
$kendo-file-manager-font-size$kendo-editor-font-size Number $kendo-font-size-md 14px
Description
The font size of the FileManager.
+
Description
The font size of the Еditor.
$kendo-file-manager-line-height$kendo-editor-line-height Number $kendo-line-height-md 1.4285714286
Description
The line height of the FileManager.
+
Description
The line height of the Еditor.
$kendo-file-manager-bg$kendo-editor-placeholder-text Color$kendo-component-bg#ffffff$kendo-input-placeholder-text#646464
Description
The background color of the FileManager.
+
Description
The text color of the Еditor placeholder.
$kendo-file-manager-textColor$kendo-component-text#272727$kendo-editor-placeholder-opacityNumber$kendo-input-placeholder-opacity1
Description
The text color of the FileManager.
+
Description
The opacity of the Editor placeholder.
$kendo-file-manager-border$kendo-editor-selected-text Color$kendo-component-border#cacaca$kendo-color-primary-contrastwhite
Description
The border color of the FileManager.
+
Description
The selected text color of the Editor.
$kendo-file-manager-toolbar-border-widthNumber$kendo-file-manager-border-width1px$kendo-editor-selected-bgColor$kendo-color-primary#f35800
Description
The border width of the FileManager Toolbar.
+
Description
The selected background color of the Editor.
$kendo-file-manager-toolbar-bgNullnullnull$kendo-editor-highlighted-bgColorif($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix( $kendo-color-primary, #ffffff, 20% ))#fddecc
Description
The background color of the FileManager Toolbar.
+
Description
The highlighted background color of the Editor.
$kendo-file-manager-toolbar-textNullnullnull$kendo-editor-export-tool-icon-margin-xNumber.25em0.25em
Description
The text color of the FileManager Toolbar.
+
Description
The horizontal margin of the Editor's export tool icon.
$kendo-file-manager-toolbar-borderNullnullnull$kendo-editor-resize-handle-sizeNumber8px8px
Description
The border color of the FileManager Toolbar.
+
Description
The size of the Editor's resize handle.
$kendo-file-manager-toolbar-gradientNullnullnull$kendo-editor-resize-handle-border-widthNumber1px1px
Description
The gradient of the FileManager Toolbar.
+
Description
The border width of the Editor's resize handle.
$kendo-file-manager-navigation-padding-xNumber$kendo-file-manager-spacer16px$kendo-editor-resize-handle-borderColor#000000#000000
Description
The horizontal padding of the FileManager Navigation.
+
Description
The border color of the Editor's resize handle.
$kendo-file-manager-navigation-padding-yNumber$kendo-file-manager-spacer16px$kendo-editor-resize-handle-bgColor#ffffff#ffffff
Description
The vertical padding of the FileManager Navigation.
+
Description
The background color of the Editor's resize handle.
$kendo-file-manager-navigation-width$kendo-editor-selectednode-outline-width Number20%20%2px2px
Description
The width of the FileManager Navigation.
+
Description
The outline width of the Editor's selected node.
$kendo-file-manager-navigation-border-widthNumber$kendo-file-manager-border-width1px$kendo-editor-selectednode-outline-colorColor#88ccff#88ccff
Description
The border width of the FileManager Navigation.
+
Description
The outline color of the Editor's selected node.
$kendo-file-manager-navigation-bgNullnullnull
+ +### Expander + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - + + +
NameTypeDefault valueComputed value
$kendo-expander-spacing-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The background color of the FileManager Navigation.
+
Description
The vertical spacing of the ExpansionPanel.
$kendo-file-manager-navigation-textNullnullnull$kendo-expander-border-widthNumber1px1px
Description
The text color of the FileManager Navigation.
+
Description
The width of the border around the ExpansionPanel.
$kendo-file-manager-navigation-borderNullnullnull$kendo-expander-font-familyString$kendo-font-familyinherit
Description
The border color of the FileManager Navigation.
+
Description
The font family of the ExpansionPanel.
$kendo-file-manager-breadcrumb-padding-x$kendo-expander-font-size Numberk-map-get( $kendo-spacing, 2 )8px$kendo-font-size-md14px
Description
The horizontal padding of the FileManager Breadcrumb.
+
Description
The font size of the ExpansionPanel.
$kendo-file-manager-breadcrumb-padding-y$kendo-expander-line-height Numberk-map-get( $kendo-spacing, 2 )8px$kendo-line-height-md1.4285714286
Description
The vertical padding of the FileManager Breadcrumb.
+
Description
The hine height of the ExpansionPanel.
$kendo-file-manager-breadcrumb-border-widthNumber$kendo-file-manager-border-width1px$kendo-expander-textColor$kendo-component-text#272727
Description
The border width of the FileManager Breadcrumb.
+
Description
The text color of the ExpansionPanel.
$kendo-file-manager-breadcrumb-bg$kendo-expander-bg Color$kendo-toolbar-bg#f0f0f0$kendo-component-bg#ffffff
Description
The background color of the FileManager Breadcrumb.
+
Description
The background color of the ExpansionPanel.
$kendo-file-manager-breadcrumb-textNullnullnull$kendo-expander-borderColor$kendo-component-border#cacaca
Description
The text color of the FileManager Breadcrumb.
+
Description
The border color of the ExpansionPanel.
$kendo-file-manager-breadcrumb-borderNullnullnull$kendo-expander-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The border color of the FileManager Breadcrumb.
+
Description
The box shadow of the focused ExpansionPanel.
$kendo-file-manager-listview-bgNullnullnull$kendo-expander-header-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The background color of the FileManager ListView.
+
Description
The horizontal padding of the ExpansionPanel header.
$kendo-file-manager-listview-textNullnullnull$kendo-expander-header-padding-yNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
The text color of the FileManager ListView.
+
Description
The vertical padding of the ExpansionPanel header.
$kendo-file-manager-listview-borderNullnullnull$kendo-expander-header-textColor$kendo-expander-text#272727
Description
The border color of the FileManager ListView.
+
Description
The text color of the ExpansionPanel header.
$kendo-file-manager-listview-item-padding-xNumberk-map-get( $kendo-spacing, 4 )16px$kendo-expander-header-bgColortransparenttransparent
Description
The horizontal padding of the FileManager ListView item.
+
Description
The background color of the ExpansionPanel header.
$kendo-file-manager-listview-item-padding-yNumberk-map-get( $kendo-spacing, 4 )16px$kendo-expander-header-borderNullnullnull
Description
The vertical padding of the FileManager ListView item.
+
Description
The border color of the ExpansionPanel header.
$kendo-file-manager-listview-item-widthNumber120px120px$kendo-expander-header-hover-bgColorif($kendo-enable-color-system, k-color( base-subtle-hover ), k-color-shade( $kendo-expander-bg, 1 ))#ebebeb
Description
The width of the FileManager ListView item.
+
Description
The background color of the hovered ExpansionPanel header.
$kendo-file-manager-listview-item-heightNumber120px120px$kendo-expander-header-focus-bgNullnullnull
Description
The height of the FileManager ListView item.
+
Description
The background color of the focused ExpansionPanel header.
$kendo-file-manager-listview-item-bgNullnullnull$kendo-expander-header-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The background color of the FileManager ListView item.
+
Description
The box shadow of the focused ExpansionPanel header.
$kendo-file-manager-listview-item-textNullnullnull$kendo-expander-title-textColor$kendo-color-primary#f35800
Description
The text color of the FileManager ListView item.
+
Description
The text color of the ExpansionPanel title.
$kendo-file-manager-listview-item-borderNullnullnull$kendo-expander-header-sub-title-textColor$kendo-subtle-text#646464
Description
The border color of the FileManager ListView item.
+
Description
The text color of the ExpansionPanel sub-title.
$kendo-file-manager-listview-item-icon-bgNullnullnull$kendo-expander-indicator-margin-xNumberk-map-get( $kendo-spacing, 3 )12px
Description
The background color of the FileManager ListView item icon.
+
Description
The horizontal margin of the ExpansionPanel indicator.
$kendo-file-manager-listview-item-icon-textColorif($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))#6c6c6c$kendo-expander-content-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The text color of the FileManager ListView item icon.
+
Description
The horizontal padding of the ExpansionPanel content.
$kendo-file-manager-listview-item-icon-borderNullnullnull$kendo-expander-content-padding-yNumberk-map-get( $kendo-spacing, 4 )16px
Description
The border color of the FileManager ListView item icon.
+
Description
The vertical padding of the ExpansionPanel content.
+
+ +### Filemanager + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + - - + - + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + - - + - - + - - + - - + - - + - - + - - - - - - - - - - - - - - - - - - - - + - - + - - + - - - - - + + + + - - - - - + + + + - - - - - - - - - - -
NameTypeDefault valueComputed value
$kendo-file-manager-spacerNumberk-map-get( $kendo-spacing, 4 )16px
Description
The space between the FileManager items.
$kendo-file-manager-listview-item-icon-selected-bgNullnullnull$kendo-file-manager-border-widthNumber1px1px
Description
Background color of the FileManager selected ListView item icon.
+
Description
The border width of the FileManager.
$kendo-file-manager-listview-item-icon-selected-text$kendo-file-manager-font-family Stringinherit$kendo-font-family inherit
Description
Text color of the FileManager selected ListView item icon.
+
Description
The font family of the FileManager.
$kendo-file-manager-listview-item-icon-selected-border$kendo-file-manager-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the FileManager.
+
$kendo-file-manager-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the FileManager.
+
$kendo-file-manager-bgColor$kendo-component-bg#ffffff
Description
The background color of the FileManager.
+
$kendo-file-manager-textColor$kendo-component-text#272727
Description
The text color of the FileManager.
+
$kendo-file-manager-borderColor$kendo-component-border#cacaca
Description
The border color of the FileManager.
+
$kendo-file-manager-toolbar-border-widthNumber$kendo-file-manager-border-width1px
Description
The border width of the FileManager Toolbar.
+
$kendo-file-manager-toolbar-bg Null null null
Description
Border color of the FileManager selected ListView item icon.
+
Description
The background color of the FileManager Toolbar.
$kendo-file-manager-grid-bg$kendo-file-manager-toolbar-text Null null null
Description
The background color of the FileManager Grid.
+
Description
The text color of the FileManager Toolbar.
$kendo-file-manager-grid-text$kendo-file-manager-toolbar-border Null null null
Description
The text color of the FileManager Grid.
+
Description
The border color of the FileManager Toolbar.
$kendo-file-manager-grid-border$kendo-file-manager-toolbar-gradient Null null null
Description
The border color of the FileManager Grid.
+
Description
The gradient of the FileManager Toolbar.
$kendo-file-manager-preview-padding-x$kendo-file-manager-navigation-padding-x Number $kendo-file-manager-spacer 16px
Description
The horizontal padding of the FileManager preview.
+
Description
The horizontal padding of the FileManager Navigation.
$kendo-file-manager-preview-padding-y$kendo-file-manager-navigation-padding-y Number $kendo-file-manager-spacer 16px
Description
The vertical padding of the FileManager preview.
+
Description
The vertical padding of the FileManager Navigation.
$kendo-file-manager-preview-width$kendo-file-manager-navigation-width Number 20% 20%
Description
The width of the FileManager preview.
+
Description
The width of the FileManager Navigation.
$kendo-file-manager-preview-border-width$kendo-file-manager-navigation-border-width Number $kendo-file-manager-border-width 1px
Description
The border width of the FileManager preview.
-
$kendo-file-manager-preview-spacingNumber$kendo-file-manager-spacer16px
Description
The spacing of the FileManager preview.
-
$kendo-file-manager-preview-column-gapNumberk-map-get( $kendo-spacing, 1 )4px
Description
The gap between the columns in the FileManager preview.
+
Description
The border width of the FileManager Navigation.
$kendo-file-manager-preview-bg$kendo-file-manager-navigation-bg Null null null
Description
The background color of the FileManager preview.
+
Description
The background color of the FileManager Navigation.
$kendo-file-manager-preview-text$kendo-file-manager-navigation-text Null null null
Description
The text color of the FileManager preview.
+
Description
The text color of the FileManager Navigation.
$kendo-file-manager-preview-border$kendo-file-manager-navigation-border Null null null
Description
The border color of the FileManager preview.
+
Description
The border color of the FileManager Navigation.
$kendo-file-manager-preview-icon-bgNullnullnull$kendo-file-manager-breadcrumb-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The background color of the FileManager preview icon.
+
Description
The horizontal padding of the FileManager Breadcrumb.
$kendo-file-manager-preview-icon-textColorif($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))#6c6c6c$kendo-file-manager-breadcrumb-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The text color of the FileManager preview icon.
+
Description
The vertical padding of the FileManager Breadcrumb.
$kendo-file-manager-preview-icon-borderNullnullnull
Description
The border color of the FileManager preview icon.
-
- -### Filter - - - - - - - - - - - - - - - - - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-filter-padding-x$kendo-file-manager-breadcrumb-border-width Number$kendo-padding-md-x8px$kendo-file-manager-border-width1px
Description
The horizontal padding of the Filter.
+
Description
The border width of the FileManager Breadcrumb.
$kendo-filter-padding-yNumber$kendo-padding-md-y4px$kendo-file-manager-breadcrumb-bgColor$kendo-toolbar-bg#f0f0f0
Description
The vertical padding of the Filter.
+
Description
The background color of the FileManager Breadcrumb.
$kendo-filter-bottom-marginNumber30px30px$kendo-file-manager-breadcrumb-textNullnullnull
Description
The bottom margin of the Filter.
+
Description
The text color of the FileManager Breadcrumb.
$kendo-filter-line-sizeNumber1px1px$kendo-file-manager-breadcrumb-borderNullnullnull
Description
The width of the line that connects the Filter items.
+
Description
The border color of the FileManager Breadcrumb.
$kendo-filter-operator-dropdown-widthNumber15em15em$kendo-file-manager-listview-bgNullnullnull
Description
The width of the dropdown elements in the Filter items.
+
Description
The background color of the FileManager ListView.
$kendo-filter-preview-field-textColor$kendo-color-primary#f35800$kendo-file-manager-listview-textNullnullnull
Description
The text color of the Filter preview field.
+
Description
The text color of the FileManager ListView.
$kendo-filter-preview-operator-textColor$kendo-subtle-text#646464$kendo-file-manager-listview-borderNullnullnull
Description
The text color of the Filter preview operator.
+
Description
The border color of the FileManager ListView.
$kendo-filter-toolbar-focus-shadowList0 0 0 2px rgba(0, 0, 0, .08)0 0 0 2px rgba(0, 0, 0, 0.08)$kendo-file-manager-listview-item-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The box shadow of the focused Filter toolbar.
+
Description
The horizontal padding of the FileManager ListView item.
- -### Floating-action-button - - - - - - - - - - - - - - - - - - + + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - + +
NameTypeDefault valueComputed value
$kendo-fab-border-width
$kendo-file-manager-listview-item-padding-y Number1px1pxk-map-get( $kendo-spacing, 4 )16px
Description
The width of the border around the FAB.
+
Description
The vertical padding of the FileManager ListView item.
$kendo-fab-border-radius$kendo-file-manager-listview-item-width Number$kendo-border-radius-md4px120px120px
Description
The border radius of the FAB.
+
Description
The width of the FileManager ListView item.
$kendo-fab-font-familyString$kendo-font-familyinherit$kendo-file-manager-listview-item-heightNumber120px120px
Description
The font family of the FAB.
+
Description
The height of the FileManager ListView item.
$kendo-fab-font-sizeNumber$kendo-font-size-md14px$kendo-file-manager-listview-item-bgNullnullnull
Description
The font size of the FAB.
+
Description
The background color of the FileManager ListView item.
$kendo-fab-line-heightNumber$kendo-line-height-md1.4285714286$kendo-file-manager-listview-item-textNullnullnull
Description
The line height of the FAB.
+
Description
The text color of the FileManager ListView item.
$kendo-fab-padding-xNumberk-map-get( $kendo-spacing, 4 )16px$kendo-file-manager-listview-item-borderNullnullnull
Description
The horizontal padding of the FAB.
+
Description
The border color of the FileManager ListView item.
$kendo-fab-sm-padding-xNumberk-math-div( $kendo-fab-padding-x, 2 )8px$kendo-file-manager-listview-item-icon-bgNullnullnull
Description
The horizontal padding of the small FAB.
+
Description
The background color of the FileManager ListView item icon.
$kendo-fab-md-padding-xNumber$kendo-fab-padding-x16px$kendo-file-manager-listview-item-icon-textColorif($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))#6c6c6c
Description
The horizontal padding of the medium FAB.
+
Description
The text color of the FileManager ListView item icon.
$kendo-fab-lg-padding-xNumber( $kendo-fab-padding-x * 1.5 )24px$kendo-file-manager-listview-item-icon-borderNullnullnull
Description
The horizontal padding of the large FAB.
+
Description
The border color of the FileManager ListView item icon.
$kendo-fab-padding-yNumber$kendo-fab-padding-x16px$kendo-file-manager-listview-item-icon-selected-bgNullnullnull
Description
The vertical padding of the FAB.
+
Description
Background color of the FileManager selected ListView item icon.
$kendo-fab-sm-padding-yNumberk-math-div( $kendo-fab-padding-y, 2 )8px$kendo-file-manager-listview-item-icon-selected-textStringinheritinherit
Description
The vertical padding of the small FAB.
+
Description
Text color of the FileManager selected ListView item icon.
$kendo-fab-md-padding-yNumber$kendo-fab-padding-y16px$kendo-file-manager-listview-item-icon-selected-borderNullnullnull
Description
The vertical padding of the medium FAB.
+
Description
Border color of the FileManager selected ListView item icon.
$kendo-fab-lg-padding-yNumber( $kendo-fab-padding-y * 1.5 )24px$kendo-file-manager-grid-bgNullnullnull
Description
The vertical padding of the large FAB.
+
Description
The background color of the FileManager Grid.
$kendo-fab-icon-padding-xNumberk-map-get( $kendo-spacing, 0.5 )2px$kendo-file-manager-grid-textNullnullnull
Description
The horizontal padding of the FAB icon.
+
Description
The text color of the FileManager Grid.
$kendo-fab-icon-padding-yNumber$kendo-fab-icon-padding-x2px$kendo-file-manager-grid-borderNullnullnull
Description
The vertical padding of the FAB icon.
+
Description
The border color of the FileManager Grid.
$kendo-fab-icon-spacing$kendo-file-manager-preview-padding-x Numberk-map-get( $kendo-spacing, 0.5 )2px$kendo-file-manager-spacer16px
Description
The spacing of the FAB icon.
+
Description
The horizontal padding of the FileManager preview.
$kendo-fab-items-padding-x$kendo-file-manager-preview-padding-y Number0px0px$kendo-file-manager-spacer16px
Description
The horizontal padding of the FAB items.
+
Description
The vertical padding of the FileManager preview.
$kendo-fab-items-padding-y$kendo-file-manager-preview-width Numberk-map-get( $kendo-spacing, 4 )16px20%20%
Description
The vertical padding of the FAB items.
+
Description
The width of the FileManager preview.
$kendo-fab-item-text-padding-x$kendo-file-manager-preview-border-width Numberk-map-get( $kendo-spacing, 1 )4px$kendo-file-manager-border-width1px
Description
The horizontal padding of the FAB item text.
+
Description
The border width of the FileManager preview.
$kendo-fab-item-text-padding-y$kendo-file-manager-preview-spacing Number$kendo-fab-item-text-padding-x4px$kendo-file-manager-spacer16px
Description
The vertical padding of the FAB item text.
+
Description
The spacing of the FileManager preview.
$kendo-fab-item-text-border-width$kendo-file-manager-preview-column-gap Number1px1pxk-map-get( $kendo-spacing, 1 )4px
Description
The width of the FAB item text border.
+
Description
The gap between the columns in the FileManager preview.
$kendo-fab-item-text-border-radiusNumber2px2px$kendo-file-manager-preview-bgNullnullnull
Description
The border radius of the FAB item text.
+
Description
The background color of the FileManager preview.
$kendo-fab-item-text-font-sizeNumber$kendo-font-size-xs10px$kendo-file-manager-preview-textNullnullnull
Description
The font size of the FAB item text.
+
Description
The text color of the FileManager preview.
$kendo-fab-item-text-line-heightNumber1.21.2$kendo-file-manager-preview-borderNullnullnull
Description
The line height of the FAB item text.
+
Description
The border color of the FileManager preview.
$kendo-fab-item-icon-padding-xNumberk-map-get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x10px$kendo-file-manager-preview-icon-bgNullnullnull
Description
The horizontal padding of the FAB item icon.
+
Description
The background color of the FileManager preview icon.
$kendo-fab-item-icon-padding-yNumber$kendo-fab-item-icon-padding-x10px$kendo-file-manager-preview-icon-textColorif($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))#6c6c6c
Description
The vertical padding of the FAB item icon.
+
Description
The text color of the FileManager preview icon.
$kendo-fab-item-icon-border-widthNumber00$kendo-file-manager-preview-icon-borderNullnullnull
Description
The width of the FAB item icon border.
+
Description
The border color of the FileManager preview icon.
$kendo-fab-item-icon-border-radius
+ +### Filter + + + + + + + + + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-filter-padding-x Number50%50%$kendo-padding-md-x8px
Description
The border radius of the FAB item icon.
+
Description
The horizontal padding of the Filter.
$kendo-fab-theme-colorsMap$kendo-theme-colors("primary": #f35800, "secondary": #e9e9e9, "tertiary": #03a9f4, "info": #2498bc, "success": #3ea44e, "warning": #ff9800, "error": #d92800, "dark": #404040, "light": #ebebeb, "inverse": #404040)$kendo-filter-padding-yNumber$kendo-padding-md-y4px
Description
The theme colors map for the FAB.
+
Description
The vertical padding of the Filter.
$kendo-fab-sizesMap( - sm: ( - padding-x: $kendo-fab-sm-padding-x, - padding-y: $kendo-fab-sm-padding-y - ), - md: ( - padding-x: $kendo-fab-md-padding-x, - padding-y: $kendo-fab-md-padding-y - ), - lg: ( - padding-x: $kendo-fab-lg-padding-x, - padding-y: $kendo-fab-lg-padding-y - ) -)(sm: (padding-x: 8px, padding-y: 8px), md: (padding-x: 16px, padding-y: 16px), lg: (padding-x: 24px, padding-y: 24px))$kendo-filter-bottom-marginNumber30px30px
Description
The size map for the FAB.
+
Description
The bottom margin of the Filter.
$kendo-fab-shadowStringk-elevation(5)var(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-filter-line-sizeNumber1px1px
Description
The base shadow of the FAB.
+
Description
The width of the line that connects the Filter items.
$kendo-fab-disabled-shadowStringk-elevation(5)var(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-filter-operator-dropdown-widthNumber15em15em
Description
The shadow of the disabled FAB.
+
Description
The width of the dropdown elements in the Filter items.
$kendo-fab-active-shadowNullnullnull$kendo-filter-preview-field-textColor$kendo-color-primary#f35800
Description
The shadow of the active FAB.
+
Description
The text color of the Filter preview field.
$kendo-fab-outline-styleStringsolidsolid$kendo-filter-preview-operator-textColor$kendo-subtle-text#646464
Description
The outline style of the FAB.
+
Description
The text color of the Filter preview operator.
$kendo-fab-outline-widthNumberk-map-get( $kendo-spacing, 0.5 )2px$kendo-filter-toolbar-focus-shadowList0 0 0 2px rgba(0, 0, 0, .08)0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The outline width of the FAB.
+
Description
The box shadow of the focused Filter toolbar.
$kendo-fab-item-textColor$kendo-component-text#272727
+ +### Floating-action-button + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-fab-border-widthNumber1px1px
Description
The base text color of the FAB item.
+
Description
The width of the border around the FAB.
$kendo-fab-item-bgColor$kendo-component-bg#ffffff$kendo-fab-border-radiusNumber$kendo-border-radius-md4px
Description
The base background color of the FAB item.
+
Description
The border radius of the FAB.
$kendo-fab-item-borderColor$kendo-component-border#cacaca$kendo-fab-font-familyString$kendo-font-familyinherit
Description
The base border color of the FAB item.
+
Description
The font family of the FAB.
$kendo-fab-item-icon-textColor$kendo-button-text#272727$kendo-fab-font-sizeNumber$kendo-font-size-md14px
Description
The base text color of the FAB item icon.
+
Description
The font size of the FAB.
$kendo-fab-item-icon-bgColor$kendo-button-bg#f0f0f0$kendo-fab-line-heightNumber$kendo-line-height-md1.4285714286
Description
The base background color of the FAB item icon.
+
Description
The line height of the FAB.
$kendo-fab-item-icon-borderColor$kendo-button-border#cacaca$kendo-fab-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The base border color of the FAB item icon.
+
Description
The horizontal padding of the FAB.
$kendo-fab-item-shadowString$kendo-fab-shadowvar(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-fab-sm-padding-xNumberk-math-div( $kendo-fab-padding-x, 2 )8px
Description
The base shadow of the FAB item.
+
Description
The horizontal padding of the small FAB.
$kendo-fab-item-disabled-shadowString$kendo-fab-disabled-shadowvar(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-fab-md-padding-xNumber$kendo-fab-padding-x16px
Description
The shadow of the disabled FAB item.
+
Description
The horizontal padding of the medium FAB.
$kendo-fab-item-active-shadowNull$kendo-fab-active-shadownull$kendo-fab-lg-padding-xNumber( $kendo-fab-padding-x * 1.5 )24px
Description
The shadow of the active FAB item.
+
Description
The horizontal padding of the large FAB.
$kendo-fab-item-outline-styleStringsolidsolid$kendo-fab-padding-yNumber$kendo-fab-padding-x16px
Description
The outline style of the FAB item.
+
Description
The vertical padding of the FAB.
$kendo-fab-item-outline-width$kendo-fab-sm-padding-y Numberk-map-get( $kendo-spacing, 0.5 )2pxk-math-div( $kendo-fab-padding-y, 2 )8px
Description
The outline width of the FAB item.
+
Description
The vertical padding of the small FAB.
$kendo-fab-item-outline-colorColorrgba(0, 0, 0, .08)rgba(0, 0, 0, 0.08)$kendo-fab-md-padding-yNumber$kendo-fab-padding-y16px
Description
The outline color of the FAB item.
+
Description
The vertical padding of the medium FAB.
- -### Floating-label - - - - - - - - - - - - - - - - - - + + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - - - - - - - - - - + + + + - - - - - + + + + - - - - - - - - - - -
NameTypeDefault valueComputed value
$kendo-floating-label-scale
$kendo-fab-lg-padding-y Number11( $kendo-fab-padding-y * 1.5 )24px
Description
The transformation scale of the Floating Label.
+
Description
The vertical padding of the large FAB.
$kendo-floating-label-font-size$kendo-fab-icon-padding-x Number$kendo-input-font-size14pxk-map-get( $kendo-spacing, 0.5 )2px
Description
The font size of the Floating Label.
+
Description
The horizontal padding of the FAB icon.
$kendo-floating-label-max-width$kendo-fab-icon-padding-y Number90%90%$kendo-fab-icon-padding-x2px
Description
The maximum width of the Floating Label.
+
Description
The vertical padding of the FAB icon.
$kendo-floating-label-line-height$kendo-fab-icon-spacing Number$kendo-input-line-height1.4285714286k-map-get( $kendo-spacing, 0.5 )2px
Description
The line height of the Floating Label.
+
Description
The spacing of the FAB icon.
$kendo-floating-label-heightCalculationcalc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} )calc(1.4285714286 * 14px)$kendo-fab-items-padding-xNumber0px0px
Description
The height of the Floating Label.
+
Description
The horizontal padding of the FAB items.
$kendo-floating-label-offset-xCalculationcalc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} )calc(8px + 1px)$kendo-fab-items-padding-yNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal offset of the Floating Label.
+
Description
The vertical padding of the FAB items.
$kendo-floating-label-offset-yCalculationcalc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} )calc(calc(1.4285714286 * 14px) + 1px + 4px)$kendo-fab-item-text-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The vertical offset of the Floating Label.
+
Description
The horizontal padding of the FAB item text.
$kendo-floating-label-focus-scale$kendo-fab-item-text-padding-y Number11$kendo-fab-item-text-padding-x4px
Description
The transformation scale of the focused Floating Label.
+
Description
The vertical padding of the FAB item text.
$kendo-floating-label-focus-offset-x$kendo-fab-item-text-border-width Number001px1px
Description
The horizontal offset of the focused Floating Label.
+
Description
The width of the FAB item text border.
$kendo-floating-label-focus-offset-y$kendo-fab-item-text-border-radius Number002px2px
Description
The vertical offset of the focused Floating Label.
+
Description
The border radius of the FAB item text.
$kendo-floating-label-transitionList.2s ease-out0.2s ease-out$kendo-fab-item-text-font-sizeNumber$kendo-font-size-xs10px
Description
The transition of the Floating Label.
+
Description
The font size of the FAB item text.
$kendo-floating-label-bgNullnullnull
Description
The background color of the Floating Label.
-
$kendo-floating-label-textNullnullnull$kendo-fab-item-text-line-heightNumber1.21.2
Description
The text color of the Floating Label.
+
Description
The line height of the FAB item text.
$kendo-floating-label-focus-bgNullnullnull$kendo-fab-item-icon-padding-xNumberk-map-get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x10px
Description
The background color of the focused Floating Label.
+
Description
The horizontal padding of the FAB item icon.
$kendo-floating-label-focus-textNullnullnull
Description
The text color of the focused Floating Label.
-
- -### Form - - - - - - - - - - - - - - - - - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - - + - - + + - - - + +
NameTypeDefault valueComputed value
$kendo-form-spacer$kendo-fab-item-icon-padding-y Number$kendo-padding-md-x * 216px$kendo-fab-item-icon-padding-x10px
Description
The padding of the inline Form.
+
Description
The vertical padding of the FAB item icon.
$kendo-form-font-size$kendo-fab-item-icon-border-width Number$kendo-font-size-md14px00
Description
The font size of the Form.
+
Description
The width of the FAB item icon border.
$kendo-form-line-height$kendo-fab-item-icon-border-radius Number$kendo-line-height-md1.428571428650%50%
Description
The line height of the Form.
+
Description
The border radius of the FAB item icon.
$kendo-form-line-height-emCalculationcalc( #{$kendo-form-line-height} * 1em )calc(1.4285714286 * 1em)$kendo-fab-theme-colorsMap$kendo-theme-colors("primary": #f35800, "secondary": #e9e9e9, "tertiary": #03a9f4, "info": #2498bc, "success": #3ea44e, "warning": #ff9800, "error": #d92800, "dark": #404040, "light": #ebebeb, "inverse": #404040)
Description
The line height of the Form in em units.
+
Description
The theme colors map for the FAB.
$kendo-form-sm-line-heightNumber$kendo-line-height-sm1.25$kendo-fab-sizesMap( + sm: ( + padding-x: $kendo-fab-sm-padding-x, + padding-y: $kendo-fab-sm-padding-y + ), + md: ( + padding-x: $kendo-fab-md-padding-x, + padding-y: $kendo-fab-md-padding-y + ), + lg: ( + padding-x: $kendo-fab-lg-padding-x, + padding-y: $kendo-fab-lg-padding-y + ) +)(sm: (padding-x: 8px, padding-y: 8px), md: (padding-x: 16px, padding-y: 16px), lg: (padding-x: 24px, padding-y: 24px))
Description
The line height of the small Form.
+
Description
The size map for the FAB.
$kendo-form-lg-line-heightNumber$kendo-line-height-lg1.5$kendo-fab-shadowStringk-elevation(5)var(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The line height of the large Form.
+
Description
The base shadow of the FAB.
$kendo-form-fieldset-marginList2em 0 02em 0 0$kendo-fab-disabled-shadowStringk-elevation(5)var(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The margin of the Form fieldset.
+
Description
The shadow of the disabled FAB.
$kendo-form-fieldset-paddingNumber0px0px$kendo-fab-active-shadowNullnullnull
Description
The padding of the Form fieldset.
+
Description
The shadow of the active FAB.
$kendo-form-legend-marginList0 0 1em0 0 1em$kendo-fab-outline-styleStringsolidsolid
Description
The margin of the Form legend.
+
Description
The outline style of the FAB.
$kendo-form-legend-padding$kendo-fab-outline-width Number0px0pxk-map-get( $kendo-spacing, 0.5 )2px
Description
The padding of the Form legend.
+
Description
The outline width of the FAB.
$kendo-form-legend-border-widthList0 0 2px0 0 2px$kendo-fab-item-textColor$kendo-component-text#272727
Description
The border width of the Form legend.
+
Description
The base text color of the FAB item.
$kendo-form-legend-border-styleStringsolidsolid$kendo-fab-item-bgColor$kendo-component-bg#ffffff
Description
The border style of the Form legend.
+
Description
The base background color of the FAB item.
$kendo-form-legend-border-color$kendo-fab-item-border Color $kendo-component-border #cacaca
Description
The border color of the Form legend.
+
Description
The base border color of the FAB item.
$kendo-form-legend-widthNumber100%100%$kendo-fab-item-icon-textColor$kendo-button-text#272727
Description
The width of the Form legend.
+
Description
The base text color of the FAB item icon.
$kendo-form-legend-font-sizeNumber14px14px$kendo-fab-item-icon-bgColor$kendo-button-bg#f0f0f0
Description
The font size of the Form legend.
+
Description
The base background color of the FAB item icon.
$kendo-form-legend-text-transformStringuppercaseuppercase$kendo-fab-item-icon-borderColor$kendo-button-border#cacaca
Description
The text capitalization of the Form legend.
+
Description
The base border color of the FAB item icon.
$kendo-form-label-margin-bottomNumber0px0px$kendo-fab-item-shadowString$kendo-fab-shadowvar(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The bottom margin of the Form label.
+
Description
The base shadow of the FAB item.
$kendo-form-button-margin-xNumber8px8px$kendo-fab-item-disabled-shadowString$kendo-fab-disabled-shadowvar(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The horizontal margin of the Form buttons.
+
Description
The shadow of the disabled FAB item.
$kendo-form-hint-font-sizeNumber12px12px$kendo-fab-item-active-shadowNull$kendo-fab-active-shadownull
Description
The font size of the Form hint.
+
Description
The shadow of the active FAB item.
$kendo-form-hint-font-style$kendo-fab-item-outline-style Stringitalicitalicsolidsolid
Description
The font style of the Form hint.
+
Description
The outline style of the FAB item.
$kendo-form-hint-margin-top$kendo-fab-item-outline-width Number4px4px
Description
The top margin of the Form hint.
-
$kendo-form-sm-rows-spacingNumber1em1em
Description
The row spacing of the small Form.
-
$kendo-form-md-rows-spacingNumber$kendo-form-sm-rows-spacing1em
Description
The row spacing of the medium Form.
-
$kendo-form-lg-rows-spacingNumber$kendo-form-sm-rows-spacing1em
Description
The row spacing of the large Form.
-
$kendo-form-separator-marginList$kendo-form-md-rows-spacing 0 01em 0 0k-map-get( $kendo-spacing, 0.5 )2px
Description
The margin of the Form separator.
+
Description
The outline width of the FAB item.
$kendo-form-separator-border-color$kendo-fab-item-outline-color Color$kendo-form-legend-border-color#cacacargba(0, 0, 0, .08)rgba(0, 0, 0, 0.08)
Description
The border color of the Form separator.
+
Description
The outline color of the FAB item.
$kendo-horizontal-form-label-padding-top
+ +### Floating-label + + + + + + + + + + + + + + + + + + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - - - - - - - - - - + + - - + - - + + - - - - - + + + + - - + - - + - - + - - - - - - - - - - - + - - - - - - - - - -
NameTypeDefault valueComputed value
$kendo-floating-label-scale Number5px5px11
Description
The top padding of the label in the horizontal Form.
+
Description
The transformation scale of the Floating Label.
$kendo-horizontal-form-label-margin-x$kendo-floating-label-font-size Number10px10px$kendo-input-font-size14px
Description
The horizontal margin of the label in the horizontal Form.
+
Description
The font size of the Floating Label.
$kendo-horizontal-form-label-width$kendo-floating-label-max-width Number25%25%90%90%
Description
The width of the label in the horizontal Form.
+
Description
The maximum width of the Floating Label.
$kendo-horizontal-form-label-alignStringflex-endflex-end$kendo-floating-label-line-heightNumber$kendo-input-line-height1.4285714286
Description
The horizontal alignment of the label in the horizontal Form.
+
Description
The line height of the Floating Label.
$kendo-horizontal-form-field-wrap-max-width$kendo-floating-label-height Calculationcalc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} )calc(100% - 25% - 10px)calc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} )calc(1.4285714286 * 14px)
Description
The maximum width of the field wrap in the horizontal Form.
+
Description
The height of the Floating Label.
$kendo-inline-form-element-widthNumber25%25%$kendo-floating-label-offset-xCalculationcalc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} )calc(8px + 1px)
Description
The width of the inline Form element.
+
Description
The horizontal offset of the Floating Label.
$kendo-forms-invalid-colorColor$kendo-color-error#d92800$kendo-floating-label-offset-yCalculationcalc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} )calc(calc(1.4285714286 * 14px) + 1px + 4px)
Description
The invalid text color of the Form.
+
Description
The vertical offset of the Floating Label.
$kendo-label-optional-margin-x$kendo-floating-label-focus-scale Number6px6px11
Description
The horizontal margin of the optional label in the Form.
+
Description
The transformation scale of the focused Floating Label.
$kendo-label-optional-font-size$kendo-floating-label-focus-offset-x Number12px12px
Description
The font size of the optional label in the Form.
-
$kendo-label-optional-font-styleStringitalicitalic00
Description
The font style of the optional label in the Form.
+
Description
The horizontal offset of the focused Floating Label.
$kendo-fieldset-margin$kendo-floating-label-focus-offset-y Number30px30px00
Description
The margin of the Form fieldset.
+
Description
The vertical offset of the focused Floating Label.
$kendo-fieldset-font-sizeNumber$kendo-h4-font-size22px$kendo-floating-label-transitionList.2s ease-out0.2s ease-out
Description
The font size of the Form fieldset.
+
Description
The transition of the Floating Label.
$kendo-fieldset-bg$kendo-floating-label-bg Null null null
Description
The background color of the Form fieldset.
+
Description
The background color of the Floating Label.
$kendo-fieldset-border$kendo-floating-label-text Null null null
Description
The border color of the Form fieldset.
+
Description
The text color of the Floating Label.
$kendo-fieldset-legend-bg$kendo-floating-label-focus-bg Null null null
Description
The background color of the Form legend.
-
$kendo-fieldset-legend-textColorif($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 ))#212121
Description
The text color of the Form legend.
+
Description
The background color of the focused Floating Label.
$kendo-fieldset-legend-border$kendo-floating-label-focus-text Null null null
Description
The border color of the Form legend.
-
$kendo-form-sizesMap( - sm: ( - form-rows-spacing: $kendo-form-sm-rows-spacing - ), - md: ( - form-rows-spacing: $kendo-form-md-rows-spacing - ), - lg: ( - form-rows-spacing: $kendo-form-lg-rows-spacing - ) -)(sm: (form-rows-spacing: 1em), md: (form-rows-spacing: 1em), lg: (form-rows-spacing: 1em))
Description
The sizes map for the Form.
+
Description
The text color of the focused Floating Label.
-### Grid +### Form @@ -8231,439 +8351,459 @@ The following table lists the available variables for customizing the Classic th - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - + + + + + + + + +
$kendo-grid-padding-x$kendo-form-spacer Number$kendo-table-md-cell-padding-x8px$kendo-padding-md-x * 216px
Description
Horizontal padding of the grid.
+
Description
The padding of the inline Form.
$kendo-grid-padding-y$kendo-form-font-size Number$kendo-table-md-cell-padding-y8px$kendo-font-size-md14px
Description
Vertical padding of the grid.
+
Description
The font size of the Form.
$kendo-grid-header-padding-x$kendo-form-line-height Number$kendo-grid-padding-x8px$kendo-line-height-md1.4285714286
Description
Horizontal padding of the grid header.
+
Description
The line height of the Form.
$kendo-grid-header-padding-yNumber$kendo-grid-padding-y8px$kendo-form-line-height-emCalculationcalc( #{$kendo-form-line-height} * 1em )calc(1.4285714286 * 1em)
Description
Vertical padding of the grid header.
+
Description
The line height of the Form in em units.
$kendo-grid-footer-padding-x$kendo-form-sm-line-height Number$kendo-grid-header-padding-x8px$kendo-line-height-sm1.25
Description
Horizontal padding of the grid footer.
+
Description
The line height of the small Form.
$kendo-grid-footer-padding-y$kendo-form-lg-line-height Number$kendo-grid-header-padding-y8px$kendo-line-height-lg1.5
Description
Vertical padding of the grid footer.
+
Description
The line height of the large Form.
$kendo-grid-grouping-header-padding-xNumber$kendo-grid-padding-y8px$kendo-form-fieldset-marginList2em 0 02em 0 0
Description
Horizontal padding of the grid grouping header.
+
Description
The margin of the Form fieldset.
$kendo-grid-grouping-header-padding-y$kendo-form-fieldset-padding Number$kendo-grid-grouping-header-padding-x8px0px0px
Description
Vertical padding of the grid grouping header.
+
Description
The padding of the Form fieldset.
$kendo-grid-cell-padding-xNumber$kendo-grid-padding-x8px$kendo-form-legend-marginList0 0 1em0 0 1em
Description
Horizontal padding of the grid cell.
+
Description
The margin of the Form legend.
$kendo-grid-cell-padding-y$kendo-form-legend-padding Number$kendo-grid-padding-y8px0px0px
Description
Vertical padding of the grid cell.
+
Description
The padding of the Form legend.
$kendo-grid-filter-cell-padding-xNumber$kendo-grid-padding-y8px$kendo-form-legend-border-widthList0 0 2px0 0 2px
Description
Horizontal padding of the grid filter cell.
+
Description
The border width of the Form legend.
$kendo-grid-filter-cell-padding-yNumber$kendo-grid-filter-cell-padding-x8px$kendo-form-legend-border-styleStringsolidsolid
Description
Vertical padding of the grid filter cell.
+
Description
The border style of the Form legend.
$kendo-grid-edit-cell-padding-xNumber$kendo-grid-cell-padding-x8px$kendo-form-legend-border-colorColor$kendo-component-border#cacaca
Description
Horizontal padding of the grid edit cell.
+
Description
The border color of the Form legend.
$kendo-grid-edit-cell-padding-y$kendo-form-legend-width Number3px3px100%100%
Description
Vertical padding of the grid edit cell.
+
Description
The width of the Form legend.
$kendo-grid-bgColor$kendo-table-bg#ffffff$kendo-form-legend-font-sizeNumber14px14px
Description
Background color of the grid component
+
Description
The font size of the Form legend.
$kendo-grid-textColor$kendo-table-text#272727$kendo-form-legend-text-transformStringuppercaseuppercase
Description
Text color of the grid component
+
Description
The text capitalization of the Form legend.
$kendo-grid-borderColor$kendo-table-border#cacaca$kendo-form-label-margin-bottomNumber0px0px
Description
Border color of the grid component
+
Description
The bottom margin of the Form label.
$kendo-grid-header-bgColor$kendo-table-header-bg#f0f0f0$kendo-form-button-margin-xNumber8px8px
Description
Background color of grid header
+
Description
The horizontal margin of the Form buttons.
$kendo-grid-header-textColor$kendo-table-header-text#272727$kendo-form-hint-font-sizeNumber12px12px
Description
Text color of grid header
+
Description
The font size of the Form hint.
$kendo-grid-header-borderColor$kendo-table-header-border#cacaca$kendo-form-hint-font-styleStringitalicitalic
Description
Border color of grid header
+
Description
The font style of the Form hint.
$kendo-grid-header-gradientList$kendo-table-header-gradientrgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)$kendo-form-hint-margin-topNumber4px4px
Description
Background gradient of grid header
+
Description
The top margin of the Form hint.
$kendo-grid-footer-bgColor$kendo-table-footer-bg#f0f0f0$kendo-form-sm-rows-spacingNumber1em1em
Description
Background color of grid footer
+
Description
The row spacing of the small Form.
$kendo-grid-footer-textColor$kendo-table-footer-text#272727$kendo-form-md-rows-spacingNumber$kendo-form-sm-rows-spacing1em
Description
Text color of grid footer
+
Description
The row spacing of the medium Form.
$kendo-grid-footer-borderColor$kendo-table-footer-border#cacaca$kendo-form-lg-rows-spacingNumber$kendo-form-sm-rows-spacing1em
Description
Border color of grid footer
+
Description
The row spacing of the large Form.
$kendo-grid-alt-bgColor$kendo-table-alt-row-bgwhitesmoke$kendo-form-separator-marginList$kendo-form-md-rows-spacing 0 01em 0 0
Description
Background color of alternating rows in grid
+
Description
The margin of the Form separator.
$kendo-grid-alt-textNull$kendo-table-alt-row-textnull$kendo-form-separator-border-colorColor$kendo-form-legend-border-color#cacaca
Description
Text color of alternating rows in grid
+
Description
The border color of the Form separator.
$kendo-grid-alt-borderNull$kendo-table-alt-row-bordernull$kendo-horizontal-form-label-padding-topNumber5px5px
Description
Border color of alternating rows in grid
+
Description
The top padding of the label in the horizontal Form.
$kendo-grid-hover-bgColor$kendo-table-hover-bg#ebebeb$kendo-horizontal-form-label-margin-xNumber10px10px
Description
Background color of hovered rows in grid
+
Description
The horizontal margin of the label in the horizontal Form.
$kendo-grid-hover-textNull$kendo-table-hover-textnull$kendo-horizontal-form-label-widthNumber25%25%
Description
Text color of hovered rows in grid
+
Description
The width of the label in the horizontal Form.
$kendo-grid-hover-borderNull$kendo-table-hover-bordernull$kendo-horizontal-form-label-alignStringflex-endflex-end
Description
Border color of hovered rows in grid
+
Description
The horizontal alignment of the label in the horizontal Form.
$kendo-grid-selected-bgColor$kendo-table-selected-bgrgba(243, 88, 0, 0.25)$kendo-horizontal-form-field-wrap-max-widthCalculationcalc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} )calc(100% - 25% - 10px)
Description
Background color of selected rows in grid
+
Description
The maximum width of the field wrap in the horizontal Form.
$kendo-grid-selected-textNull$kendo-table-selected-textnull$kendo-inline-form-element-widthNumber25%25%
Description
Text color of selected rows in grid
+
Description
The width of the inline Form element.
$kendo-grid-selected-borderNull$kendo-table-selected-bordernull$kendo-forms-invalid-colorColor$kendo-color-error#d92800
Description
Border color of selected rows in grid
+
Description
The invalid text color of the Form.
$kendo-grid-selection-aggregates-bgColor$kendo-grid-header-bg#f0f0f0$kendo-label-optional-margin-xNumber6px6px
Description
Background color of the selection aggregates container
+
Description
The horizontal margin of the optional label in the Form.
$kendo-grid-selection-aggregates-textColor$kendo-grid-text#272727$kendo-label-optional-font-sizeNumber12px12px
Description
Text color of the selection aggregates container
+
Description
The font size of the optional label in the Form.
$kendo-grid-selection-aggregates-borderColor$kendo-grid-border#cacaca$kendo-label-optional-font-styleStringitalicitalic
Description
Border color of the selection aggregates container
+
Description
The font style of the optional label in the Form.
$kendo-grid-selection-aggregates-border-width$kendo-fieldset-margin Number$kendo-grid-border-width1px30px30px
Description
Border width of the selection aggregates container
+
Description
The margin of the Form fieldset.
$kendo-grid-selection-aggregates-spacing$kendo-fieldset-font-size Numberk-map-get( $kendo-spacing, 2 )8px$kendo-h4-font-size22px
Description
Spacing between the selection aggregates items
+
Description
The font size of the Form fieldset.
$kendo-grid-selection-aggregates-line-heightNumber$kendo-grid-line-height1.4285714286$kendo-fieldset-bgNullnullnull
Description
Line height of the selection aggregates container
+
Description
The background color of the Form fieldset.
$kendo-grid-selection-aggregates-font-weightNumber$kendo-font-weight-bold700$kendo-fieldset-borderNullnullnull
Description
Font weight of the selection aggregates container
+
Description
The border color of the Form fieldset.
$kendo-grid-row-resizer-hover-bgColorif($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)$kendo-fieldset-legend-bgNullnullnull
Description
Background color of the grid row resize indicator
+
Description
The background color of the Form legend.
$kendo-grid-row-resizer-active-bg$kendo-fieldset-legend-text Color$kendo-color-primary#f35800if($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 ))#212121
Description
Active background color of the grid row resize indicator
+
Description
The text color of the Form legend.
$kendo-grid-row-resizer-heightNumberk-map-get( $kendo-spacing, .5 )2px$kendo-fieldset-legend-borderNullnullnull
Description
Height of the grid row resize indicator
+
Description
The border color of the Form legend.
+
$kendo-form-sizesMap( + sm: ( + form-rows-spacing: $kendo-form-sm-rows-spacing + ), + md: ( + form-rows-spacing: $kendo-form-md-rows-spacing + ), + lg: ( + form-rows-spacing: $kendo-form-lg-rows-spacing + ) +)(sm: (form-rows-spacing: 1em), md: (form-rows-spacing: 1em), lg: (form-rows-spacing: 1em))
Description
The sizes map for the Form.
-### Input +### Grid @@ -8681,1323 +8821,1284 @@ The following table lists the available variables for customizing the Classic th - + - - + + - - + - - + + - - - - - + + + + - - + - + - - + - + - - + - + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - + - - + - + - - - - - + + + + - - + - + - - + - + - - + - - - - - - - - - - - + + - - + - + - - + - + - - + - - + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - - - - - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - - + +
$kendo-input-default-width$kendo-grid-padding-x Number100%100%$kendo-table-md-cell-padding-x8px
Description
The default width of the Input components.
+
Description
Horizontal padding of the grid.
$kendo-input-border-width$kendo-grid-padding-y Number1px1px$kendo-table-md-cell-padding-y8px
Description
The border width of the Input components.
+
Description
Vertical padding of the grid.
$kendo-input-border-radiusNullnullnull$kendo-grid-header-padding-xNumber$kendo-grid-padding-x8px
Description
The border radius of the Input components.
+
Description
Horizontal padding of the grid header.
$kendo-input-padding-x$kendo-grid-header-padding-y Numberk-map-get( $kendo-spacing, 2 )$kendo-grid-padding-y 8px
Description
The horizontal padding of the Input components.
+
Description
Vertical padding of the grid header.
$kendo-input-sm-padding-x$kendo-grid-footer-padding-x Numberk-map-get( $kendo-spacing, 2 )$kendo-grid-header-padding-x 8px
Description
The horizontal padding of the small Input components.
+
Description
Horizontal padding of the grid footer.
$kendo-input-md-padding-x$kendo-grid-footer-padding-y Numberk-map-get( $kendo-spacing, 2 )$kendo-grid-header-padding-y 8px
Description
The horizontal padding of the medium Input components.
+
Description
Vertical padding of the grid footer.
$kendo-input-lg-padding-x$kendo-grid-grouping-header-padding-x Numberk-map-get( $kendo-spacing, 3 )12px$kendo-grid-padding-y8px
Description
The horizontal padding of the large Input components.
+
Description
Horizontal padding of the grid grouping header.
$kendo-input-padding-y$kendo-grid-grouping-header-padding-y Numberk-map-get( $kendo-spacing, 1 )4px$kendo-grid-grouping-header-padding-x8px
Description
The vertical padding of the Input components.
+
Description
Vertical padding of the grid grouping header.
$kendo-input-sm-padding-y$kendo-grid-cell-padding-x Numberk-map-get( $kendo-spacing, 0.5 )2px$kendo-grid-padding-x8px
Description
The vertical padding of the small Input components.
+
Description
Horizontal padding of the grid cell.
$kendo-input-md-padding-y$kendo-grid-cell-padding-y Numberk-map-get( $kendo-spacing, 1 )4px$kendo-grid-padding-y8px
Description
The vertical padding of the medium Input components.
+
Description
Vertical padding of the grid cell.
$kendo-input-lg-padding-y$kendo-grid-filter-cell-padding-x Numberk-map-get( $kendo-spacing, 2 )$kendo-grid-padding-y 8px
Description
The vertical padding of the large Input components.
+
Description
Horizontal padding of the grid filter cell.
$kendo-input-font-familyString$kendo-font-familyinherit$kendo-grid-filter-cell-padding-yNumber$kendo-grid-filter-cell-padding-x8px
Description
Font family of input components.
+
Description
Vertical padding of the grid filter cell.
$kendo-input-font-size$kendo-grid-edit-cell-padding-x Number$kendo-font-size-md14px$kendo-grid-cell-padding-x8px
Description
Font size of input components.
+
Description
Horizontal padding of the grid edit cell.
$kendo-input-sm-font-size$kendo-grid-edit-cell-padding-y Number$kendo-font-size-md14px3px3px
Description
The font size of the small Input components.
+
Description
Vertical padding of the grid edit cell.
$kendo-input-md-font-sizeNumber$kendo-font-size-md14px$kendo-grid-bgColor$kendo-table-bg#ffffff
Description
The font size of the medium Input components.
+
Description
Background color of the grid component
$kendo-input-lg-font-sizeNumber$kendo-font-size-lg16px$kendo-grid-textColor$kendo-table-text#272727
Description
The font size of the large Input components.
+
Description
Text color of the grid component
$kendo-input-line-heightNumber$kendo-line-height-md1.4285714286$kendo-grid-borderColor$kendo-table-border#cacaca
Description
Line height of input components.
+
Description
Border color of the grid component
$kendo-input-sm-line-heightNumber$kendo-line-height-md1.4285714286$kendo-grid-header-bgColor$kendo-table-header-bg#f0f0f0
Description
The line height of the small Input components.
+
Description
Background color of grid header
$kendo-input-md-line-heightNumber$kendo-line-height-md1.4285714286$kendo-grid-header-textColor$kendo-table-header-text#272727
Description
The line height of the medium Input components.
+
Description
Text color of grid header
$kendo-input-lg-line-heightNumber$kendo-line-height-lg1.5$kendo-grid-header-borderColor$kendo-table-header-border#cacaca
Description
The line height of the large Input components.
+
Description
Border color of grid header
$kendo-input-sizesMap( - sm: ( - padding-x: $kendo-input-sm-padding-x, - padding-y: $kendo-input-sm-padding-y, - font-size: $kendo-input-sm-font-size, - line-height: $kendo-input-sm-line-height, - button-padding-x: $kendo-input-sm-padding-y, - button-padding-y: $kendo-input-sm-padding-y - ), - md: ( - padding-x: $kendo-input-md-padding-x, - padding-y: $kendo-input-md-padding-y, - font-size: $kendo-input-md-font-size, - line-height: $kendo-input-md-line-height, - button-padding-x: $kendo-input-md-padding-y, - button-padding-y: $kendo-input-md-padding-y - ), - lg: ( - padding-x: $kendo-input-lg-padding-x, - padding-y: $kendo-input-lg-padding-y, - font-size: $kendo-input-lg-font-size, - line-height: $kendo-input-lg-line-height, - button-padding-x: $kendo-input-lg-padding-y, - button-padding-y: $kendo-input-lg-padding-y - ) -)(sm: (padding-x: 8px, padding-y: 2px, font-size: 14px, line-height: 1.4285714286, button-padding-x: 2px, button-padding-y: 2px), md: (padding-x: 8px, padding-y: 4px, font-size: 14px, line-height: 1.4285714286, button-padding-x: 4px, button-padding-y: 4px), lg: (padding-x: 12px, padding-y: 8px, font-size: 16px, line-height: 1.5, button-padding-x: 8px, button-padding-y: 8px))$kendo-grid-header-gradientList$kendo-table-header-gradientrgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)
Description
The sizes map for the Input components.
+
Description
Background gradient of grid header
$kendo-input-bg$kendo-grid-footer-bg Color$kendo-component-bg#ffffff$kendo-table-footer-bg#f0f0f0
Description
The background color of the Input components.
+
Description
Background color of grid footer
$kendo-input-text$kendo-grid-footer-text Color$kendo-component-text$kendo-table-footer-text #272727
Description
The text color of the Input components.
+
Description
Text color of grid footer
$kendo-input-border$kendo-grid-footer-border Color$kendo-button-border$kendo-table-footer-border #cacaca
Description
The border color of the Input components.
+
Description
Border color of grid footer
$kendo-input-shadowNullnullnull$kendo-grid-alt-bgColor$kendo-table-alt-row-bgwhitesmoke
Description
The shadow of the Input components.
+
Description
Background color of alternating rows in grid
$kendo-input-hover-bg$kendo-grid-alt-text Nullnull$kendo-table-alt-row-text null
Description
The background color of the hovered Input components.
+
Description
Text color of alternating rows in grid
$kendo-input-hover-text$kendo-grid-alt-border Nullnull$kendo-table-alt-row-border null
Description
The text color of the hovered Input components.
+
Description
Border color of alternating rows in grid
$kendo-input-hover-border$kendo-grid-hover-bg Color$kendo-button-hover-border#b6b6b6
Description
The border color of the hovered Input components.
-
$kendo-input-hover-shadowNullnullnull$kendo-table-hover-bg#ebebeb
Description
The shadow of the hovered Input components.
+
Description
Background color of hovered rows in grid
$kendo-input-focus-bg$kendo-grid-hover-text Nullnull$kendo-table-hover-text null
Description
The background color of the focused Input components.
+
Description
Text color of hovered rows in grid
$kendo-input-focus-text$kendo-grid-hover-border Nullnull$kendo-table-hover-border null
Description
The text color of the focused Input components.
+
Description
Border color of hovered rows in grid
$kendo-input-focus-border$kendo-grid-selected-bg Colorrgba( black, .1 )rgba(0, 0, 0, 0.1)$kendo-table-selected-bgrgba(243, 88, 0, 0.25)
Description
The border color of the focused Input components.
+
Description
Background color of selected rows in grid
$kendo-input-focus-shadowList0 2px 4px 0 rgba( black, .03 ), 0 4px 5px 0 rgba( black, .04 )0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04)$kendo-grid-selected-textNull$kendo-table-selected-textnull
Description
The shadow of the focused Input components.
+
Description
Text color of selected rows in grid
$kendo-input-selected-bg$kendo-grid-selected-border Nullnull$kendo-table-selected-border null
Description
The background color of the selected Input components.
+
Description
Border color of selected rows in grid
$kendo-input-selected-textNullnullnull$kendo-grid-selection-aggregates-bgColor$kendo-grid-header-bg#f0f0f0
Description
The text color of the selected Input components.
+
Description
Background color of the selection aggregates container
$kendo-input-disabled-bgNullnullnull$kendo-grid-selection-aggregates-textColor$kendo-grid-text#272727
Description
The background color of the disabled Input components.
+
Description
Text color of the selection aggregates container
$kendo-input-disabled-textNullnullnull$kendo-grid-selection-aggregates-borderColor$kendo-grid-border#cacaca
Description
The text color of the disabled Input components.
+
Description
Border color of the selection aggregates container
$kendo-input-disabled-borderNullnullnull$kendo-grid-selection-aggregates-border-widthNumber$kendo-grid-border-width1px
Description
The border color of the disabled Input components.
+
Description
Border width of the selection aggregates container
$kendo-input-disabled-gradientNullnullnull$kendo-grid-selection-aggregates-spacingNumberk-map-get( $kendo-spacing, 2 )8px
Description
The gradient of the disabled Input components.
+
Description
Spacing between the selection aggregates items
$kendo-input-disabled-shadowNullnullnull$kendo-grid-selection-aggregates-line-heightNumber$kendo-grid-line-height1.4285714286
Description
The shadow of the disabled Input components.
+
Description
Line height of the selection aggregates container
$kendo-input-outline-bgNullnullnull
Description
The background color of the outline Input components.
-
$kendo-input-outline-textNullnullnull$kendo-grid-selection-aggregates-font-weightNumber$kendo-font-weight-bold700
Description
The text color of the outline Input components.
+
Description
Font weight of the selection aggregates container
$kendo-input-outline-border$kendo-grid-row-resizer-hover-bg Colorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-button-text, .5))rgba(39, 39, 39, 0.5)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)
Description
The border color of the outline Input components.
+
Description
Background color of the grid row resize indicator
$kendo-input-outline-hover-bgNullnullnull$kendo-grid-row-resizer-active-bgColor$kendo-color-primary#f35800
Description
The background color of the outline hovered Input components.
+
Description
Active background color of the grid row resize indicator
$kendo-input-outline-hover-textNullnullnull$kendo-grid-row-resizer-heightNumberk-map-get( $kendo-spacing, .5 )2px
Description
The text color of the outline hovered Input components.
+
Description
Height of the grid row resize indicator
$kendo-input-outline-hover-borderColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .8 ), rgba( $kendo-button-text, .8))rgba(39, 39, 39, 0.8)
+ +### Input + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - + - - - -
NameTypeDefault valueComputed value
$kendo-input-default-widthNumber100%100%
Description
The border color of the outline hovered Input components.
+
Description
The default width of the Input components.
$kendo-input-outline-focus-bgNullnullnull$kendo-input-border-widthNumber1px1px
Description
The background color of the outline focused Input components.
+
Description
The border width of the Input components.
$kendo-input-outline-focus-text$kendo-input-border-radius Null null null
Description
The text color of the outline focused Input components.
+
Description
The border radius of the Input components.
$kendo-input-outline-focus-borderNullnullnull$kendo-input-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The border color of the outline focused Input components.
+
Description
The horizontal padding of the Input components.
$kendo-input-outline-focus-shadowList$kendo-input-focus-shadow0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04)$kendo-input-sm-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The shadow of the outline focused Input components.
+
Description
The horizontal padding of the small Input components.
$kendo-input-flat-bgNullnullnull$kendo-input-md-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The background color of the flat Input components.
+
Description
The horizontal padding of the medium Input components.
$kendo-input-flat-textColor$kendo-input-text#272727$kendo-input-lg-padding-xNumberk-map-get( $kendo-spacing, 3 )12px
Description
The text color of the flat Input components.
+
Description
The horizontal padding of the large Input components.
$kendo-input-flat-borderColor$kendo-input-border#cacaca$kendo-input-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
The border color of the flat Input components.
+
Description
The vertical padding of the Input components.
$kendo-input-flat-hover-bgNullnullnull$kendo-input-sm-padding-yNumberk-map-get( $kendo-spacing, 0.5 )2px
Description
The background color of the flat hovered Input components.
+
Description
The vertical padding of the small Input components.
$kendo-input-flat-hover-textNullnullnull$kendo-input-md-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
The text color of the flat hovered Input components.
+
Description
The vertical padding of the medium Input components.
$kendo-input-flat-hover-borderColor$kendo-input-hover-border#b6b6b6$kendo-input-lg-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The border color of the flat hovered Input components.
+
Description
The vertical padding of the large Input components.
$kendo-input-flat-focus-bgNullnullnull$kendo-input-font-familyString$kendo-font-familyinherit
Description
The background color of the flat focused Input components.
+
Description
Font family of input components.
$kendo-input-flat-focus-textNullnullnull$kendo-input-font-sizeNumber$kendo-font-size-md14px
Description
The text color of the flat focused Input components.
+
Description
Font size of input components.
$kendo-input-flat-focus-borderNullnullnull$kendo-input-sm-font-sizeNumber$kendo-font-size-md14px
Description
The border color of the flat focused Input components.
+
Description
The font size of the small Input components.
$kendo-input-flat-focus-shadowList$kendo-input-focus-shadow0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04)$kendo-input-md-font-sizeNumber$kendo-font-size-md14px
Description
The shadow of the flat focused Input components.
+
Description
The font size of the medium Input components.
$kendo-input-placeholder-textColor$kendo-subtle-text#646464$kendo-input-lg-font-sizeNumber$kendo-font-size-lg16px
Description
The text color of the Input placeholder.
+
Description
The font size of the large Input components.
$kendo-input-placeholder-opacity$kendo-input-line-height Number11$kendo-line-height-md1.4285714286
Description
The opacity of the Input placeholder.
+
Description
Line height of input components.
$kendo-input-clear-value-textNullnullnull$kendo-input-sm-line-heightNumber$kendo-line-height-md1.4285714286
Description
The color of the Input clear value icon.
+
Description
The line height of the small Input components.
$kendo-input-clear-value-opacity$kendo-input-md-line-height Number.50.5$kendo-line-height-md1.4285714286
Description
The opacity of the Input clear value icon.
+
Description
The line height of the medium Input components.
$kendo-input-clear-value-hover-textNullnullnull$kendo-input-lg-line-heightNumber$kendo-line-height-lg1.5
Description
The color of the hovered Input clear value icon.
+
Description
The line height of the large Input components.
$kendo-input-clear-value-hover-opacityNumber11$kendo-input-sizesMap( + sm: ( + padding-x: $kendo-input-sm-padding-x, + padding-y: $kendo-input-sm-padding-y, + font-size: $kendo-input-sm-font-size, + line-height: $kendo-input-sm-line-height, + button-padding-x: $kendo-input-sm-padding-y, + button-padding-y: $kendo-input-sm-padding-y + ), + md: ( + padding-x: $kendo-input-md-padding-x, + padding-y: $kendo-input-md-padding-y, + font-size: $kendo-input-md-font-size, + line-height: $kendo-input-md-line-height, + button-padding-x: $kendo-input-md-padding-y, + button-padding-y: $kendo-input-md-padding-y + ), + lg: ( + padding-x: $kendo-input-lg-padding-x, + padding-y: $kendo-input-lg-padding-y, + font-size: $kendo-input-lg-font-size, + line-height: $kendo-input-lg-line-height, + button-padding-x: $kendo-input-lg-padding-y, + button-padding-y: $kendo-input-lg-padding-y + ) +)(sm: (padding-x: 8px, padding-y: 2px, font-size: 14px, line-height: 1.4285714286, button-padding-x: 2px, button-padding-y: 2px), md: (padding-x: 8px, padding-y: 4px, font-size: 14px, line-height: 1.4285714286, button-padding-x: 4px, button-padding-y: 4px), lg: (padding-x: 12px, padding-y: 8px, font-size: 16px, line-height: 1.5, button-padding-x: 8px, button-padding-y: 8px))
Description
The opacity of the hovered Input clear value icon.
+
Description
The sizes map for the Input components.
$kendo-input-values-margin-yNumberk-map-get( $kendo-spacing, 0.5 )2px$kendo-input-bgColor$kendo-component-bg#ffffff
Description
The vertical margin of the clear value icon.
+
Description
The background color of the Input components.
$kendo-input-values-margin-xNumber$kendo-input-values-margin-y2px$kendo-input-textColor$kendo-component-text#272727
Description
The horizontal margin of the clear value icon.
+
Description
The text color of the Input components.
$kendo-input-button-widthNullnullnull$kendo-input-borderColor$kendo-button-border#cacaca
Description
The width of the Input button.
+
Description
The border color of the Input components.
$kendo-input-button-border-widthNumber1px1px$kendo-input-shadowNullnullnull
Description
The border width of the Input button.
+
Description
The shadow of the Input components.
$kendo-input-spinner-width$kendo-input-hover-bg Null null null
Description
The width of the Input spinner button.
+
Description
The background color of the hovered Input components.
$kendo-input-spinner-icon-offset$kendo-input-hover-text Null null null
Description
The icon offset of the Input spinner button.
+
Description
The text color of the hovered Input components.
$kendo-input-separator-text$kendo-input-hover-border Color$kendo-input-border#cacaca$kendo-button-hover-border#b6b6b6
Description
The color of the Input separator.
+
Description
The border color of the hovered Input components.
$kendo-input-separator-opacityNumber.50.5$kendo-input-hover-shadowNullnullnull
Description
The opacity of the Input separator.
+
Description
The shadow of the hovered Input components.
$kendo-input-prefix-textColor$kendo-subtle-text#646464$kendo-input-focus-bgNullnullnull
Description
The text color of the Input prefix.
+
Description
The background color of the focused Input components.
$kendo-input-suffix-textColor$kendo-subtle-text#646464$kendo-input-focus-textNullnullnull
Description
The text color of the Input suffix.
+
Description
The text color of the focused Input components.
$kendo-input-invalid-border$kendo-input-focus-border Color$kendo-invalid-border#d92800rgba( black, .1 )rgba(0, 0, 0, 0.1)
Description
The border color of the invalid Input components.
+
Description
The border color of the focused Input components.
$kendo-input-invalid-shadowNull$kendo-invalid-shadownull$kendo-input-focus-shadowList0 2px 4px 0 rgba( black, .03 ), 0 4px 5px 0 rgba( black, .04 )0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04)
Description
The shadow of the invalid Input components.
+
Description
The shadow of the focused Input components.
$kendo-input-valid-borderColor$kendo-valid-border#3ea44e$kendo-input-selected-bgNullnullnull
Description
The border color of the valid Input components.
+
Description
The background color of the selected Input components.
$kendo-input-valid-shadow$kendo-input-selected-text Null$kendo-valid-shadownull null
Description
The shadow of the valid Input components.
-
- -### List - - - - - - - - - - - - - - - - - - - - - - - - - + - - + - - + - - + - - - - - + + + + - - + - - + - - - - - + + + + - - + - - + - - - - - + + + + - - + - - + - - + - - + - - - - - - - - - - - + + - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - + - - + - + - - + - - + - - - - - + + + + - - + - - + - - + - - - - - + + + + - - + - - + + - - + + + + + + + + + + - - + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - + - - + - - + + - - + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-list-font-familyString$kendo-font-familyinherit
Description
The font family of the List components.
+
Description
The text color of the selected Input components.
$kendo-list-font-size$kendo-input-disabled-bg Null null null
Description
The font size of the List component, if no size is set.
+
Description
The background color of the disabled Input components.
$kendo-list-line-height$kendo-input-disabled-text Null null null
Description
The line height of the List component, if no size is set.
+
Description
The text color of the disabled Input components.
$kendo-list-header-padding-x$kendo-input-disabled-border Null null null
Description
The horizontal padding of the List header, if no size is set.
+
Description
The border color of the disabled Input components.
$kendo-list-header-padding-y$kendo-input-disabled-gradient Null null null
Description
The vertical padding of the List header, if no size is set.
+
Description
The gradient of the disabled Input components.
$kendo-list-header-border-widthList0 0 1px0 0 1px$kendo-input-disabled-shadowNullnullnull
Description
The border width of the List header.
+
Description
The shadow of the disabled Input components.
$kendo-list-header-font-size$kendo-input-outline-bg Null null null
Description
The font size of the List header, if no size is set.
+
Description
The background color of the outline Input components.
$kendo-list-header-line-height$kendo-input-outline-text Null null null
Description
The line height of the List header, if no size is set.
+
Description
The text color of the outline Input components.
$kendo-list-header-font-weightNumber$kendo-font-weight-bold700$kendo-input-outline-borderColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-button-text, .5))rgba(39, 39, 39, 0.5)
Description
The font weight of the List header.
+
Description
The border color of the outline Input components.
$kendo-list-item-padding-x$kendo-input-outline-hover-bg Null null null
Description
The horizontal padding of the List items, when no size is set.
+
Description
The background color of the outline hovered Input components.
$kendo-list-item-padding-y$kendo-input-outline-hover-text Null null null
Description
The vertical padding of the List items, when no size is set.
+
Description
The text color of the outline hovered Input components.
$kendo-list-item-font-sizeNullnullnull$kendo-input-outline-hover-borderColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .8 ), rgba( $kendo-button-text, .8))rgba(39, 39, 39, 0.8)
Description
The font size of the List items, if no size is set.
+
Description
The border color of the outline hovered Input components.
$kendo-list-item-line-height$kendo-input-outline-focus-bg Null null null
Description
The line height of the List items, if no size is set.
+
Description
The background color of the outline focused Input components.
$kendo-list-group-item-padding-x$kendo-input-outline-focus-text Null null null
Description
The horizontal padding of the List group items, when no size is set.
+
Description
The text color of the outline focused Input components.
$kendo-list-group-item-padding-y$kendo-input-outline-focus-border Null null null
Description
The vertical padding of the List group items, when no size is set.
+
Description
The border color of the outline focused Input components.
$kendo-list-group-item-border-width$kendo-input-outline-focus-shadow List1px 0 01px 0 0
Description
The border width of the List group items.
-
$kendo-list-group-item-font-sizeNullnullnull$kendo-input-focus-shadow0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04)
Description
The font size of the List group items, if no size is set.
+
Description
The shadow of the outline focused Input components.
$kendo-list-group-item-line-height$kendo-input-flat-bg Null null null
Description
The line height of the List group items, if no size is set.
-
$kendo-list-group-item-font-weightNumber$kendo-font-weight-bold700
Description
The font weight of a List group item.
-
$kendo-list-sizesMap( - sm: ( - font-size: $kendo-list-sm-font-size, - line-height: $kendo-list-sm-line-height, - header-padding-x: $kendo-list-sm-header-padding-x, - header-padding-y: $kendo-list-sm-header-padding-y, - header-font-size: null, - header-line-height: null, - item-padding-x: $kendo-list-sm-item-padding-x, - item-padding-y: $kendo-list-sm-item-padding-y, - item-font-size: null, - item-line-height: null, - group-item-padding-x: $kendo-list-sm-group-item-padding-x, - group-item-padding-y: $kendo-list-sm-group-item-padding-y, - group-item-font-size: null, - group-item-line-height: null - ), - md: ( - font-size: $kendo-list-md-font-size, - line-height: $kendo-list-md-line-height, - header-padding-x: $kendo-list-md-header-padding-x, - header-padding-y: $kendo-list-md-header-padding-y, - header-font-size: null, - header-line-height: null, - item-padding-x: $kendo-list-md-item-padding-x, - item-padding-y: $kendo-list-md-item-padding-y, - item-font-size: null, - item-line-height: null, - group-item-padding-x: $kendo-list-md-group-item-padding-x, - group-item-padding-y: $kendo-list-md-group-item-padding-y, - group-item-font-size: null, - group-item-line-height: null - ), - lg: ( - font-size: $kendo-list-lg-font-size, - line-height: $kendo-list-lg-line-height, - header-padding-x: $kendo-list-lg-header-padding-x, - header-padding-y: $kendo-list-lg-header-padding-y, - header-font-size: null, - header-line-height: null, - item-padding-x: $kendo-list-lg-item-padding-x, - item-padding-y: $kendo-list-lg-item-padding-y, - item-font-size: null, - item-line-height: null, - group-item-padding-x: $kendo-list-lg-group-item-padding-x, - group-item-padding-y: $kendo-list-lg-group-item-padding-y, - group-item-font-size: null, - group-item-line-height: null - ) -)(sm: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 8px, header-padding-y: 2px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 2px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 2px, group-item-font-size: null, group-item-line-height: null), md: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 8px, header-padding-y: 4px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 4px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 4px, group-item-font-size: null, group-item-line-height: null), lg: (font-size: 16px, line-height: 1.5, header-padding-x: 8px, header-padding-y: 6px, header-font-size: null, header-line-height: null, item-padding-x: 12px, item-padding-y: 8px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 6px, group-item-font-size: null, group-item-line-height: null))
Description
The map with the sizes of the List.
-
$kendo-list-bgColor$kendo-component-bg#ffffff
Description
The background color of the List component.
+
Description
The background color of the flat Input components.
$kendo-list-text$kendo-input-flat-text Color$kendo-component-text$kendo-input-text #272727
Description
The text color of the List component.
+
Description
The text color of the flat Input components.
$kendo-list-border$kendo-input-flat-border Color$kendo-component-border$kendo-input-border #cacaca
Description
The border color of the List component.
+
Description
The border color of the flat Input components.
$kendo-list-header-bg$kendo-input-flat-hover-bg Null null null
Description
The background color of the List header.
+
Description
The background color of the flat hovered Input components.
$kendo-list-header-text$kendo-input-flat-hover-text Null null null
Description
The text color of the List header.
+
Description
The text color of the flat hovered Input components.
$kendo-list-header-borderStringinheritinherit$kendo-input-flat-hover-borderColor$kendo-input-hover-border#b6b6b6
Description
The border color of the List header.
+
Description
The border color of the flat hovered Input components.
$kendo-list-header-shadow$kendo-input-flat-focus-bg Null null null
Description
The box shadow of the List header.
+
Description
The background color of the flat focused Input components.
$kendo-list-item-bg$kendo-input-flat-focus-text Null null null
Description
The background color of the List items.
+
Description
The text color of the flat focused Input components.
$kendo-list-item-text$kendo-input-flat-focus-border Null null null
Description
The text color of the List items.
+
Description
The border color of the flat focused Input components.
$kendo-list-item-hover-bgColor$kendo-hover-bg#dddddd$kendo-input-flat-focus-shadowList$kendo-input-focus-shadow0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04)
Description
The background color of the hovered List items.
+
Description
The shadow of the flat focused Input components.
$kendo-list-item-hover-text$kendo-input-placeholder-text Color$kendo-hover-text#272727$kendo-subtle-text#646464
Description
The text color of the hovered List items.
+
Description
The text color of the Input placeholder.
$kendo-list-item-focus-bg$kendo-input-placeholder-opacityNumber11
Description
The opacity of the Input placeholder.
+
$kendo-input-clear-value-text Null null null
Description
The background color of the focused List items.
+
Description
The color of the Input clear value icon.
$kendo-list-item-focus-text$kendo-input-clear-value-opacityNumber.50.5
Description
The opacity of the Input clear value icon.
+
$kendo-input-clear-value-hover-text Null null null
Description
The text color of the focused List items.
+
Description
The color of the hovered Input clear value icon.
$kendo-list-item-focus-shadowListinset 0 0 0 2px rgba( black, .12 )inset 0 0 0 2px rgba(0, 0, 0, 0.12)$kendo-input-clear-value-hover-opacityNumber11
Description
The box shadow of the focused List items.
+
Description
The opacity of the hovered Input clear value icon.
$kendo-list-item-selected-bgColor$kendo-selected-bg#f35800$kendo-input-values-margin-yNumberk-map-get( $kendo-spacing, 0.5 )2px
Description
The background color of the selected List items.
+
Description
The vertical margin of the clear value icon.
$kendo-list-item-selected-textColor$kendo-selected-textwhite$kendo-input-values-margin-xNumber$kendo-input-values-margin-y2px
Description
The text color of the selected List items.
+
Description
The horizontal margin of the clear value icon.
$kendo-list-group-item-bg$kendo-input-button-width Null null null
Description
The background color of the List group items.
+
Description
The width of the Input button.
$kendo-list-group-item-textNullnullnull$kendo-input-button-border-widthNumber1px1px
Description
The text color of the List group items.
+
Description
The border width of the Input button.
$kendo-list-group-item-borderStringinheritinherit$kendo-input-spinner-widthNullnullnull
Description
The border color of the List group items.
+
Description
The width of the Input spinner button.
$kendo-list-group-item-shadow$kendo-input-spinner-icon-offset Null null null
Description
The base shadow of the List group items.
+
Description
The icon offset of the Input spinner button.
$kendo-list-no-data-text$kendo-input-separator-text Color$kendo-subtle-text#646464$kendo-input-border#cacaca
Description
The color of the 'No Data' text.
+
Description
The color of the Input separator.
$kendo-list-option-label-text$kendo-input-separator-opacityNumber.50.5
Description
The opacity of the Input separator.
+
$kendo-input-prefix-text Color $kendo-subtle-text #646464
Description
The color of the 'Option Label' text.
+
Description
The text color of the Input prefix.
+
$kendo-input-suffix-textColor$kendo-subtle-text#646464
Description
The text color of the Input suffix.
+
$kendo-input-invalid-borderColor$kendo-invalid-border#d92800
Description
The border color of the invalid Input components.
+
$kendo-input-invalid-shadowNull$kendo-invalid-shadownull
Description
The shadow of the invalid Input components.
+
$kendo-input-valid-borderColor$kendo-valid-border#3ea44e
Description
The border color of the valid Input components.
+
$kendo-input-valid-shadowNull$kendo-valid-shadownull
Description
The shadow of the valid Input components.
-### Listbox +### List @@ -10015,769 +10116,848 @@ The following table lists the available variables for customizing the Classic th - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - - - - + + + + - - + - - -
$kendo-listbox-spacingNumberk-map-get( $kendo-spacing, 2 )8px$kendo-list-font-familyString$kendo-font-familyinherit
Description
The spacing between the ListBox elements.
+
Description
The font family of the List components.
$kendo-listbox-button-spacingNumberk-map-get( $kendo-spacing, 2 )8px$kendo-list-font-sizeNullnullnull
Description
The spacing between the ListBox buttons.
+
Description
The font size of the List component, if no size is set.
$kendo-listbox-widthNumber10em10em$kendo-list-line-heightNullnullnull
Description
The width of the ListBox.
+
Description
The line height of the List component, if no size is set.
$kendo-listbox-default-heightNumber200px200px$kendo-list-header-padding-xNullnullnull
Description
The height of the ListBox.
+
Description
The horizontal padding of the List header, if no size is set.
$kendo-listbox-border-widthNumber1px1px$kendo-list-header-padding-yNullnullnull
Description
The width of the border around the ListBox.
+
Description
The vertical padding of the List header, if no size is set.
$kendo-listbox-font-familyString$kendo-font-familyinherit$kendo-list-header-border-widthList0 0 1px0 0 1px
Description
The font family of the ListBox.
+
Description
The border width of the List header.
$kendo-listbox-font-sizeNumber$kendo-font-size-md14px$kendo-list-header-font-sizeNullnullnull
Description
The font size of the ListBox.
+
Description
The font size of the List header, if no size is set.
$kendo-listbox-line-heightNumber$kendo-line-height-md1.4285714286$kendo-list-header-line-heightNullnullnull
Description
The line height of the ListBox.
+
Description
The line height of the List header, if no size is set.
$kendo-listbox-textColor$kendo-component-text#272727$kendo-list-header-font-weightNumber$kendo-font-weight-bold700
Description
The text color of the ListBox.
+
Description
The font weight of the List header.
$kendo-listbox-bgColor$kendo-component-bg#ffffff$kendo-list-item-padding-xNullnullnull
Description
The background color of the ListBox.
+
Description
The horizontal padding of the List items, when no size is set.
$kendo-listbox-borderColor$kendo-component-border#cacaca$kendo-list-item-padding-yNullnullnull
Description
The border color of the ListBox.
+
Description
The vertical padding of the List items, when no size is set.
$kendo-listbox-item-padding-x$kendo-list-item-font-size Null null null
Description
The inline padding of the ListBox item.
+
Description
The font size of the List items, if no size is set.
$kendo-listbox-item-padding-y$kendo-list-item-line-height Null null null
Description
The block padding of the ListBox item.
+
Description
The line height of the List items, if no size is set.
$kendo-listbox-drop-hint-widthNumber1px1px$kendo-list-group-item-padding-xNullnullnull
Description
The width of the ListBox drop hint.
+
Description
The horizontal padding of the List group items, when no size is set.
$kendo-listbox-drop-hint-border-width$kendo-list-group-item-padding-y Null null null
Description
The width of the border around the ListBox drop hint.
+
Description
The vertical padding of the List group items, when no size is set.
- -### Listview - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + - - - - - + + + + - - + + + + + + + + + + - - + - - + - - + + - - -
NameTypeDefault valueComputed value
$kendo-listview-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
$kendo-list-group-item-border-widthList1px 0 01px 0 0
Description
The horizontal padding of the ListView.
+
Description
The border width of the List group items.
$kendo-listview-padding-yNumberk-map-get( $kendo-spacing, 1 )4px$kendo-list-group-item-font-sizeNullnullnull
Description
The vertical padding of the ListView.
+
Description
The font size of the List group items, if no size is set.
$kendo-listview-border-widthNumber1px1px$kendo-list-group-item-line-heightNullnullnull
Description
The width of the border around bordered ListView.
+
Description
The line height of the List group items, if no size is set.
$kendo-listview-font-familyString$kendo-font-familyinherit
$kendo-list-group-item-font-weightNumber$kendo-font-weight-bold700
Description
The font family of the ListView.
+
Description
The font weight of a List group item.
$kendo-listview-font-sizeNumber$kendo-font-size-md14px$kendo-list-sizesMap( + sm: ( + font-size: $kendo-list-sm-font-size, + line-height: $kendo-list-sm-line-height, + header-padding-x: $kendo-list-sm-header-padding-x, + header-padding-y: $kendo-list-sm-header-padding-y, + header-font-size: null, + header-line-height: null, + item-padding-x: $kendo-list-sm-item-padding-x, + item-padding-y: $kendo-list-sm-item-padding-y, + item-font-size: null, + item-line-height: null, + group-item-padding-x: $kendo-list-sm-group-item-padding-x, + group-item-padding-y: $kendo-list-sm-group-item-padding-y, + group-item-font-size: null, + group-item-line-height: null + ), + md: ( + font-size: $kendo-list-md-font-size, + line-height: $kendo-list-md-line-height, + header-padding-x: $kendo-list-md-header-padding-x, + header-padding-y: $kendo-list-md-header-padding-y, + header-font-size: null, + header-line-height: null, + item-padding-x: $kendo-list-md-item-padding-x, + item-padding-y: $kendo-list-md-item-padding-y, + item-font-size: null, + item-line-height: null, + group-item-padding-x: $kendo-list-md-group-item-padding-x, + group-item-padding-y: $kendo-list-md-group-item-padding-y, + group-item-font-size: null, + group-item-line-height: null + ), + lg: ( + font-size: $kendo-list-lg-font-size, + line-height: $kendo-list-lg-line-height, + header-padding-x: $kendo-list-lg-header-padding-x, + header-padding-y: $kendo-list-lg-header-padding-y, + header-font-size: null, + header-line-height: null, + item-padding-x: $kendo-list-lg-item-padding-x, + item-padding-y: $kendo-list-lg-item-padding-y, + item-font-size: null, + item-line-height: null, + group-item-padding-x: $kendo-list-lg-group-item-padding-x, + group-item-padding-y: $kendo-list-lg-group-item-padding-y, + group-item-font-size: null, + group-item-line-height: null + ) +)(sm: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 8px, header-padding-y: 2px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 2px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 2px, group-item-font-size: null, group-item-line-height: null), md: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 8px, header-padding-y: 4px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 4px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 4px, group-item-font-size: null, group-item-line-height: null), lg: (font-size: 16px, line-height: 1.5, header-padding-x: 8px, header-padding-y: 6px, header-font-size: null, header-line-height: null, item-padding-x: 12px, item-padding-y: 8px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 6px, group-item-font-size: null, group-item-line-height: null))
Description
The font size of the ListView.
+
Description
The map with the sizes of the List.
$kendo-listview-line-heightNumber$kendo-line-height-md1.4285714286$kendo-list-bgColor$kendo-component-bg#ffffff
Description
The line height of the ListView.
+
Description
The background color of the List component.
$kendo-listview-text$kendo-list-text Color $kendo-component-text #272727
Description
The text color of the ListView.
+
Description
The text color of the List component.
$kendo-listview-bg$kendo-list-border Color$kendo-component-bg#ffffff$kendo-component-border#cacaca
Description
The background color of the ListView.
+
Description
The border color of the List component.
$kendo-listview-borderColor$kendo-component-border#cacaca$kendo-list-header-bgNullnullnull
Description
The border color of the ListView.
+
Description
The background color of the List header.
$kendo-listview-item-padding-xNumberk-map-get( $kendo-spacing, 1 )4px$kendo-list-header-textNullnullnull
Description
The horizontal padding of the ListView items.
+
Description
The text color of the List header.
$kendo-listview-item-padding-yNumberk-map-get( $kendo-spacing, 1 )4px$kendo-list-header-borderStringinheritinherit
Description
The vertical padding of the ListView items.
+
Description
The border color of the List header.
$kendo-listview-item-selected-text$kendo-list-header-shadow Null null null
Description
The text color of the selected ListView items.
+
Description
The box shadow of the List header.
$kendo-listview-item-selected-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 ))rgba(243, 88, 0, 0.25)$kendo-list-item-bgNullnullnull
Description
The background color of the selected ListView items.
+
Description
The background color of the List items.
$kendo-listview-item-selected-border$kendo-list-item-text Null null null
Description
The border color of the selected ListView items.
+
Description
The text color of the List items.
$kendo-listview-item-focus-textNullnullnull$kendo-list-item-hover-bgColor$kendo-hover-bg#dddddd
Description
The text color of the focused ListView items.
+
Description
The background color of the hovered List items.
$kendo-listview-item-focus-bg$kendo-list-item-hover-textColor$kendo-hover-text#272727
Description
The text color of the hovered List items.
+
$kendo-list-item-focus-bg Null null null
Description
The background color of the focused ListView items.
+
Description
The background color of the focused List items.
$kendo-listview-item-focus-border$kendo-list-item-focus-text Null null null
Description
The border color of the focused ListView items.
+
Description
The text color of the focused List items.
$kendo-listview-item-focus-shadow$kendo-list-item-focus-shadow Listinset 0 0 0 2px rgba( black, .13 )inset 0 0 0 2px rgba(0, 0, 0, 0.13)inset 0 0 0 2px rgba( black, .12 )inset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The box shadow of the focused ListView items.
+
Description
The box shadow of the focused List items.
- -### Loader - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-loader-segment-border-radiusNumber50%50%
$kendo-list-item-selected-bgColor$kendo-selected-bg#f35800
Description
The border radius of the Loader segment.
+
Description
The background color of the selected List items.
$kendo-loader-sm-segment-sizeNumberk-map-get( $kendo-spacing, 1 )4px$kendo-list-item-selected-textColor$kendo-selected-textwhite
Description
The size of the small Loader segment.
+
Description
The text color of the selected List items.
$kendo-loader-md-segment-sizeNumberk-map-get( $kendo-spacing, 2 )8px$kendo-list-group-item-bgNullnullnull
Description
The size of the medium Loader segment.
+
Description
The background color of the List group items.
$kendo-loader-lg-segment-sizeNumberk-map-get( $kendo-spacing, 4 )16px$kendo-list-group-item-textNullnullnull
Description
The size of the large Loader segment.
+
Description
The text color of the List group items.
$kendo-loader-sm-paddingNumberk-math-div( $kendo-loader-sm-segment-size, 2 )2px$kendo-list-group-item-borderStringinheritinherit
Description
The padding of the small Loader.
+
Description
The border color of the List group items.
$kendo-loader-md-paddingNumberk-math-div( $kendo-loader-md-segment-size, 2 )4px$kendo-list-group-item-shadowNullnullnull
Description
The padding of the medium Loader.
+
Description
The base shadow of the List group items.
$kendo-loader-lg-paddingNumberk-math-div( $kendo-loader-lg-segment-size, 2 )8px$kendo-list-no-data-textColor$kendo-subtle-text#646464
Description
The padding of the large Loader.
+
Description
The color of the 'No Data' text.
$kendo-loader-sm-spinner-3-width$kendo-list-option-label-textColor$kendo-subtle-text#646464
Description
The color of the 'Option Label' text.
+
+ +### Listbox + + + + + + + + + + + + + + + + + + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-listbox-spacing Number( $kendo-loader-sm-segment-size * 4 )16pxk-map-get( $kendo-spacing, 2 )8px
Description
The width of the small spinner-3 Loader.
+
Description
The spacing between the ListBox elements.
$kendo-loader-md-spinner-3-width$kendo-listbox-button-spacing Number( $kendo-loader-md-segment-size * 4 )32pxk-map-get( $kendo-spacing, 2 )8px
Description
The width of the medium spinner-3 Loader.
+
Description
The spacing between the ListBox buttons.
$kendo-loader-lg-spinner-3-width$kendo-listbox-width Number( $kendo-loader-lg-segment-size * 4 )64px10em10em
Description
The width of the large spinner-3 Loader.
+
Description
The width of the ListBox.
$kendo-loader-sm-spinner-3-height$kendo-listbox-default-height Number( $kendo-loader-sm-spinner-3-width * $equilateral-height )13.8564064608px200px200px
Description
The height of the small spinner-3 Loader.
+
Description
The height of the ListBox.
$kendo-loader-md-spinner-3-height$kendo-listbox-border-width Number( $kendo-loader-md-spinner-3-width * $equilateral-height )27.7128129216px1px1px
Description
The height of the medium spinner-3 Loader.
+
Description
The width of the border around the ListBox.
$kendo-loader-lg-spinner-3-heightNumber( $kendo-loader-lg-spinner-3-width * $equilateral-height )55.4256258432px$kendo-listbox-font-familyString$kendo-font-familyinherit
Description
The height of the large spinner-3 Loader.
+
Description
The font family of the ListBox.
$kendo-loader-sm-spinner-4-width$kendo-listbox-font-size Number$kendo-loader-sm-segment-size * 416px$kendo-font-size-md14px
Description
The width of the small spinner-4 Loader.
+
Description
The font size of the ListBox.
$kendo-loader-md-spinner-4-width$kendo-listbox-line-height Number$kendo-loader-md-segment-size * 432px$kendo-line-height-md1.4285714286
Description
The width of the medium spinner-4 Loader.
+
Description
The line height of the ListBox.
$kendo-loader-lg-spinner-4-widthNumber$kendo-loader-lg-segment-size * 464px$kendo-listbox-textColor$kendo-component-text#272727
Description
The width of the large spinner-4 Loader.
+
Description
The text color of the ListBox.
$kendo-loader-sm-spinner-4-heightNumber$kendo-loader-sm-spinner-4-width16px$kendo-listbox-bgColor$kendo-component-bg#ffffff
Description
The height of the small spinner-4 Loader.
+
Description
The background color of the ListBox.
$kendo-loader-md-spinner-4-heightNumber$kendo-loader-md-spinner-4-width32px$kendo-listbox-borderColor$kendo-component-border#cacaca
Description
The height of the medium spinner-4 Loader.
+
Description
The border color of the ListBox.
$kendo-loader-lg-spinner-4-heightNumber$kendo-loader-lg-spinner-4-width64px$kendo-listbox-item-padding-xNullnullnull
Description
The height of the large spinner-4 Loader.
+
Description
The inline padding of the ListBox item.
$kendo-loader-secondary-bgColor#656565#656565$kendo-listbox-item-padding-yNullnullnull
Description
The color of the Loader based on the secondary theme color.
+
Description
The block padding of the ListBox item.
$kendo-loader-container-panel-border-width$kendo-listbox-drop-hint-width Number 1px 1px
Description
The border width of the container panel.
+
Description
The width of the ListBox drop hint.
$kendo-loader-container-panel-border-styleStringsolidsolid$kendo-listbox-drop-hint-border-widthNullnullnull
Description
The border style of the container panel.
+
Description
The width of the border around the ListBox drop hint.
$kendo-loader-container-panel-border-colorColor$kendo-component-border#cacaca
+ +### Listview + + + + + + + + + + + + + + + + + + + + + - - + - + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-listview-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The border color of the container panel.
+
Description
The horizontal padding of the ListView.
$kendo-loader-container-panel-border-radius$kendo-listview-padding-y Number$kendo-border-radius-mdk-map-get( $kendo-spacing, 1 ) 4px
Description
The border radius of the container panel.
+
Description
The vertical padding of the ListView.
$kendo-loader-container-panel-bgColor$kendo-color-white#ffffff$kendo-listview-border-widthNumber1px1px
Description
The background color of the container panel.
+
Description
The width of the border around bordered ListView.
$kendo-loader-sm-container-paddingNumber15px15px$kendo-listview-font-familyString$kendo-font-familyinherit
Description
The padding of the small Loader container.
+
Description
The font family of the ListView.
$kendo-loader-md-container-padding$kendo-listview-font-size Number20px20px$kendo-font-size-md14px
Description
The padding of the medium Loader container.
+
Description
The font size of the ListView.
$kendo-loader-lg-container-padding$kendo-listview-line-height Number25px25px$kendo-line-height-md1.4285714286
Description
The padding of the large Loader container.
+
Description
The line height of the ListView.
$kendo-loader-sm-container-gapNumberk-map-get( $kendo-spacing, 1 )4px$kendo-listview-textColor$kendo-component-text#272727
Description
The gap of the small Loader container.
+
Description
The text color of the ListView.
$kendo-loader-md-container-gapNumberk-map-get( $kendo-spacing, 2 )8px$kendo-listview-bgColor$kendo-component-bg#ffffff
Description
The gap of the medium Loader container.
+
Description
The background color of the ListView.
$kendo-loader-lg-container-gapNumberk-map-get( $kendo-spacing, 3 )12px$kendo-listview-borderColor$kendo-component-border#cacaca
Description
The gap of the large Loader container.
+
Description
The border color of the ListView.
$kendo-loader-sm-container-font-size$kendo-listview-item-padding-x Number$kendo-font-size-xs10pxk-map-get( $kendo-spacing, 1 )4px
Description
The font size of the small Loader container.
+
Description
The horizontal padding of the ListView items.
$kendo-loader-md-container-font-size$kendo-listview-item-padding-y Number$kendo-font-size-md14pxk-map-get( $kendo-spacing, 1 )4px
Description
The font size of the medium Loader container.
+
Description
The vertical padding of the ListView items.
$kendo-loader-lg-container-font-sizeNumber$kendo-font-size-lg16px$kendo-listview-item-selected-textNullnullnull
Description
The font size of the large Loader container.
+
Description
The text color of the selected ListView items.
- -### Loading - - - - - - - - - - - - - - - - - - + + - - + + - - - - - + + + + - - - - - + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-loading-bg
$kendo-listview-item-selected-bg Color$kendo-component-bg#ffffffif($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 ))rgba(243, 88, 0, 0.25)
Description
The background color of the Loading indicator.
+
Description
The background color of the selected ListView items.
$kendo-loading-textStringcurrentColorcurrentColor$kendo-listview-item-selected-borderNullnullnull
Description
The text color of the Loading indicator.
+
Description
The border color of the selected ListView items.
$kendo-loading-opacityNumber.30.3$kendo-listview-item-focus-textNullnullnull
Description
The opacity of the Loading indicator.
+
Description
The text color of the focused ListView items.
+
$kendo-listview-item-focus-bgNullnullnull
Description
The background color of the focused ListView items.
+
$kendo-listview-item-focus-borderNullnullnull
Description
The border color of the focused ListView items.
+
$kendo-listview-item-focus-shadowListinset 0 0 0 2px rgba( black, .13 )inset 0 0 0 2px rgba(0, 0, 0, 0.13)
Description
The box shadow of the focused ListView items.
-### Menu +### Loader @@ -10795,289 +10975,349 @@ The following table lists the available variables for customizing the Classic th - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
$kendo-menu-popup-padding-xNullnullnull$kendo-loader-segment-border-radiusNumber50%50%
Description
Horizontal padding of the menu popup.
+
Description
The border radius of the Loader segment.
$kendo-menu-popup-padding-yNullnullnull$kendo-loader-sm-segment-sizeNumberk-map-get( $kendo-spacing, 1 )4px
Description
Vertical padding of the menu popup.
+
Description
The size of the small Loader segment.
$kendo-menu-popup-border-width$kendo-loader-md-segment-size Number$kendo-popup-border-width1pxk-map-get( $kendo-spacing, 2 )8px
Description
Width of the border around the menu popup.
+
Description
The size of the medium Loader segment.
$kendo-menu-popup-font-size$kendo-loader-lg-segment-size Number$kendo-font-size-md14pxk-map-get( $kendo-spacing, 4 )16px
Description
Font sizes of the menu popup.
+
Description
The size of the large Loader segment.
$kendo-menu-popup-line-height$kendo-loader-sm-padding Number$kendo-line-height-md1.4285714286k-math-div( $kendo-loader-sm-segment-size, 2 )2px
Description
Line heights used along with $kendo-font-size.
+
Description
The padding of the small Loader.
$kendo-menu-popup-bgColor$kendo-popup-bg#ffffff$kendo-loader-md-paddingNumberk-math-div( $kendo-loader-md-segment-size, 2 )4px
Description
The background of the menu popup.
+
Description
The padding of the medium Loader.
$kendo-menu-popup-textColor$kendo-popup-text#272727$kendo-loader-lg-paddingNumberk-math-div( $kendo-loader-lg-segment-size, 2 )8px
Description
The text color of the menu popup.
+
Description
The padding of the large Loader.
$kendo-menu-popup-borderColor$kendo-popup-border#cacaca$kendo-loader-sm-spinner-3-widthNumber( $kendo-loader-sm-segment-size * 4 )16px
Description
The border color of the menu popup.
+
Description
The width of the small spinner-3 Loader.
$kendo-menu-popup-gradientNullnullnull$kendo-loader-md-spinner-3-widthNumber( $kendo-loader-md-segment-size * 4 )32px
Description
The background gradient of the menu popup.
+
Description
The width of the medium spinner-3 Loader.
$kendo-menu-popup-item-padding-x$kendo-loader-lg-spinner-3-width Numberk-map-get( $kendo-spacing, 2 )8px( $kendo-loader-lg-segment-size * 4 )64px
Description
Horizontal padding of the menu item in popup.
+
Description
The width of the large spinner-3 Loader.
$kendo-menu-popup-item-padding-y$kendo-loader-sm-spinner-3-height Numberk-map-get( $kendo-spacing, 1 )4px( $kendo-loader-sm-spinner-3-width * $equilateral-height )13.8564064608px
Description
Vertical padding of the menu item in popup.
+
Description
The height of the small spinner-3 Loader.
$kendo-menu-popup-item-padding-endCalculationcalc( #{$kendo-menu-popup-item-padding-x * 2} + #{$kendo-icon-size} )calc(16px + 16px)$kendo-loader-md-spinner-3-heightNumber( $kendo-loader-md-spinner-3-width * $equilateral-height )27.7128129216px
Description
The end padding of the menu item in popup.
+
Description
The height of the medium spinner-3 Loader.
$kendo-menu-popup-sm-item-icon-margin-start$kendo-loader-lg-spinner-3-height Number$kendo-menu-popup-sm-item-padding-x8px( $kendo-loader-lg-spinner-3-width * $equilateral-height )55.4256258432px
Description
The start margin of the menu item expand icon.
+
Description
The height of the large spinner-3 Loader.
$kendo-menu-popup-sm-item-icon-margin-endCalculationcalc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )calc(-1 * (calc(16px + 16px) - 4px))$kendo-loader-sm-spinner-4-widthNumber$kendo-loader-sm-segment-size * 416px
Description
The end margin of the menu item expand icon.
+
Description
The width of the small spinner-4 Loader.
$kendo-menu-popup-item-spacing$kendo-loader-md-spinner-4-width Number0px0px$kendo-loader-md-segment-size * 432px
Description
The spacing between the menu items in popup.
+
Description
The width of the medium spinner-4 Loader.
$kendo-menu-popup-item-bgNullnullnull$kendo-loader-lg-spinner-4-widthNumber$kendo-loader-lg-segment-size * 464px
Description
The background of the menu item in popup.
+
Description
The width of the large spinner-4 Loader.
$kendo-menu-popup-item-textNullnullnull$kendo-loader-sm-spinner-4-heightNumber$kendo-loader-sm-spinner-4-width16px
Description
The text color of the menu item in popup.
+
Description
The height of the small spinner-4 Loader.
$kendo-menu-popup-item-borderNullnullnull$kendo-loader-md-spinner-4-heightNumber$kendo-loader-md-spinner-4-width32px
Description
The border color of the menu item in popup.
+
Description
The height of the medium spinner-4 Loader.
$kendo-menu-popup-item-gradientNullnullnull$kendo-loader-lg-spinner-4-heightNumber$kendo-loader-lg-spinner-4-width64px
Description
The background gradient of the menu item in popup.
+
Description
The height of the large spinner-4 Loader.
$kendo-menu-popup-item-hover-bg$kendo-loader-secondary-bg Color$kendo-list-item-hover-bg#dddddd#656565#656565
Description
The background of hovered menu item in popup.
+
Description
The color of the Loader based on the secondary theme color.
$kendo-menu-popup-item-hover-textColor$kendo-list-item-hover-text#272727$kendo-loader-container-panel-border-widthNumber1px1px
Description
The text color of hovered menu item in popup.
+
Description
The border width of the container panel.
$kendo-menu-popup-item-hover-borderNullnullnull$kendo-loader-container-panel-border-styleStringsolidsolid
Description
The border color of hovered menu item in popup.
+
Description
The border style of the container panel.
$kendo-menu-popup-item-hover-gradientNullnullnull$kendo-loader-container-panel-border-colorColor$kendo-component-border#cacaca
Description
The background gradient of hovered menu item in popup.
+
Description
The border color of the container panel.
$kendo-menu-popup-item-expanded-bgColor$kendo-list-item-selected-bg#f35800$kendo-loader-container-panel-border-radiusNumber$kendo-border-radius-md4px
Description
The background of expanded menu item in popup.
+
Description
The border radius of the container panel.
$kendo-menu-popup-item-expanded-text$kendo-loader-container-panel-bg Color$kendo-list-item-selected-textwhite$kendo-color-white#ffffff
Description
The text color of expanded menu item in popup.
+
Description
The background color of the container panel.
$kendo-menu-popup-item-expanded-borderNullnullnull$kendo-loader-sm-container-paddingNumber15px15px
Description
The border color of expanded menu item in popup.
+
Description
The padding of the small Loader container.
$kendo-menu-popup-item-expanded-gradientNullnullnull$kendo-loader-md-container-paddingNumber20px20px
Description
The background gradient of expanded menu item in popup.
+
Description
The padding of the medium Loader container.
$kendo-menu-popup-item-focus-shadowList$kendo-menu-item-focus-shadowinset 0 0 3px 1px rgba(39, 39, 39, 0.25)$kendo-loader-lg-container-paddingNumber25px25px
Description
The base shadow of focused menu item in popup.
+
Description
The padding of the large Loader container.
+
$kendo-loader-sm-container-gapNumberk-map-get( $kendo-spacing, 1 )4px
Description
The gap of the small Loader container.
+
$kendo-loader-md-container-gapNumberk-map-get( $kendo-spacing, 2 )8px
Description
The gap of the medium Loader container.
+
$kendo-loader-lg-container-gapNumberk-map-get( $kendo-spacing, 3 )12px
Description
The gap of the large Loader container.
+
$kendo-loader-sm-container-font-sizeNumber$kendo-font-size-xs10px
Description
The font size of the small Loader container.
+
$kendo-loader-md-container-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the medium Loader container.
+
$kendo-loader-lg-container-font-sizeNumber$kendo-font-size-lg16px
Description
The font size of the large Loader container.
-### Menu-button +### Loading @@ -11095,19 +11335,39 @@ The following table lists the available variables for customizing the Classic th - + + + + + + + + + + + + + + + + + + + - - + + -
$kendo-menu-button-arrow-padding-x$kendo-loading-bgColor$kendo-component-bg#ffffff
Description
The background color of the Loading indicator.
+
$kendo-loading-textStringcurrentColorcurrentColor
Description
The text color of the Loading indicator.
+
$kendo-loading-opacity Number$kendo-button-padding-y4px.30.3
Description
The horizontal padding of the button arrow in the Menu Button.
+
Description
The opacity of the Loading indicator.
-### Notification +### Menu @@ -11125,1001 +11385,949 @@ The following table lists the available variables for customizing the Classic th - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - + - + - - + - + - - + - + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - -
$kendo-notification-group-gapNumberk-map-get( $kendo-spacing, 2 )8px$kendo-menu-popup-padding-xNullnullnull
Description
The row-gap between the elements in the Notification group.
+
Description
Horizontal padding of the menu popup.
$kendo-notification-padding-xNumber8px8px$kendo-menu-popup-padding-yNullnullnull
Description
The horizontal padding of the Notification.
+
Description
Vertical padding of the menu popup.
$kendo-notification-padding-y$kendo-menu-popup-border-width Number4px4px$kendo-popup-border-width1px
Description
The vertical padding of the Notification.
+
Description
Width of the border around the menu popup.
$kendo-notification-border-width$kendo-menu-popup-font-size Number1px1px$kendo-font-size-md14px
Description
The width of the border around the Notification.
-
$kendo-notification-border-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the Notification.
-
$kendo-notification-font-familyString$kendo-font-familyinherit
Description
The font family of the Notification.
-
$kendo-notification-font-sizeNumber$kendo-font-size-sm12px
Description
The font size of the Notification.
+
Description
Font sizes of the menu popup.
$kendo-notification-line-height$kendo-menu-popup-line-height Number $kendo-line-height-md 1.4285714286
Description
The line height of the Notification.
+
Description
Line heights used along with $kendo-font-size.
$kendo-notification-bg$kendo-menu-popup-bg Color$kendo-component-bg$kendo-popup-bg #ffffff
Description
The background color of the Notification.
+
Description
The background of the menu popup.
$kendo-notification-text$kendo-menu-popup-text Color$kendo-component-text$kendo-popup-text #272727
Description
The text color of the Notification.
+
Description
The text color of the menu popup.
$kendo-notification-border$kendo-menu-popup-border Color$kendo-component-border$kendo-popup-border #cacaca
Description
The border color of the Notification.
+
Description
The border color of the menu popup.
$kendo-notification-shadowString$kendo-popup-shadowvar(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-menu-popup-gradientNullnullnull
Description
The box shadow of the Notification.
+
Description
The background gradient of the menu popup.
$kendo-notification-icon-spacing$kendo-menu-popup-item-padding-x Number$kendo-icon-spacing4pxk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal spacing of the Notification icon.
+
Description
Horizontal padding of the menu item in popup.
$kendo-notification-theme-colorsMap$kendo-theme-colors("primary": #f35800, "secondary": #e9e9e9, "tertiary": #03a9f4, "info": #2498bc, "success": #3ea44e, "warning": #ff9800, "error": #d92800, "dark": #404040, "light": #ebebeb, "inverse": #404040)$kendo-menu-popup-item-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
The theme colors map for the Notification.
+
Description
Vertical padding of the menu item in popup.
$kendo-notification-themeMapnotification-theme( $kendo-notification-theme-colors )("inverse": (color: white, background-color: #404040, border: #404040), "light": (color: black, background-color: #ebebeb, border: #ebebeb), "dark": (color: white, background-color: #404040, border: #404040), "error": (color: white, background-color: #d92800, border: #d92800), "warning": (color: white, background-color: #ff9800, border: #ff9800), "success": (color: white, background-color: #3ea44e, border: #3ea44e), "info": (color: white, background-color: #2498bc, border: #2498bc), "tertiary": (color: white, background-color: #03a9f4, border: #03a9f4), "secondary": (color: black, background-color: #e9e9e9, border: #e9e9e9), "primary": (color: white, background-color: #f35800, border: #f35800))$kendo-menu-popup-item-padding-endCalculationcalc( #{$kendo-menu-popup-item-padding-x * 2} + #{$kendo-icon-size} )calc(16px + 16px)
Description
The generated theme colors map for the Notification.
+
Description
The end padding of the menu item in popup.
- -### Pager - - - - - - - - - - - - - - - - - - + + - + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - + +
NameTypeDefault valueComputed value
$kendo-pager-padding-x
$kendo-menu-popup-sm-item-icon-margin-start Numberk-map-get( $kendo-spacing, 2 )$kendo-menu-popup-sm-item-padding-x 8px
Description
The horizontal padding of the Pager.
+
Description
The start margin of the menu item expand icon.
$kendo-pager-sm-padding-xNumberk-map-get( $kendo-spacing, 1 )4px$kendo-menu-popup-sm-item-icon-margin-endCalculationcalc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )calc(-1 * (calc(16px + 16px) - 4px))
Description
The horizontal padding of the small Pager.
+
Description
The end margin of the menu item expand icon.
$kendo-pager-md-padding-x$kendo-menu-popup-item-spacing Numberk-map-get( $kendo-spacing, 2 )8px0px0px
Description
The horizontal padding of the medium Pager.
+
Description
The spacing between the menu items in popup.
$kendo-pager-lg-padding-xNumberk-map-get( $kendo-spacing, 2.5 )10px$kendo-menu-popup-item-bgNullnullnull
Description
The horizontal padding of the large Pager.
+
Description
The background of the menu item in popup.
$kendo-pager-padding-yNumber$kendo-pager-padding-x8px$kendo-menu-popup-item-textNullnullnull
Description
The vertical padding of the Pager.
+
Description
The text color of the menu item in popup.
$kendo-pager-sm-padding-yNumber$kendo-pager-sm-padding-x4px$kendo-menu-popup-item-borderNullnullnull
Description
The vertical padding of the small Pager.
+
Description
The border color of the menu item in popup.
$kendo-pager-md-padding-yNumber$kendo-pager-md-padding-x8px$kendo-menu-popup-item-gradientNullnullnull
Description
The vertical padding of the medium Pager.
+
Description
The background gradient of the menu item in popup.
$kendo-pager-lg-padding-yNumber$kendo-pager-lg-padding-x10px$kendo-menu-popup-item-hover-bgColor$kendo-list-item-hover-bg#dddddd
Description
The vertical padding of the large Pager.
+
Description
The background of hovered menu item in popup.
$kendo-pager-sm-item-min-widthCalculation$kendo-button-sm-calc-sizecalc(1.4285714286em + 4px + 2px)$kendo-menu-popup-item-hover-textColor$kendo-list-item-hover-text#272727
Description
The minimum width of the items in the small Pager.
+
Description
The text color of hovered menu item in popup.
$kendo-pager-md-item-min-widthCalculation$kendo-button-md-calc-sizecalc(1.4285714286em + 8px + 2px)$kendo-menu-popup-item-hover-borderNullnullnull
Description
The minimum width of the items in the medium Pagers.
+
Description
The border color of hovered menu item in popup.
$kendo-pager-lg-item-min-widthCalculation$kendo-button-lg-calc-sizecalc(1.5em + 16px + 2px)$kendo-menu-popup-item-hover-gradientNullnullnull
Description
The minimum width of the items in the large Pagers.
+
Description
The background gradient of hovered menu item in popup.
$kendo-pager-sm-item-group-spacingNumberk-map-get( $kendo-spacing, 3 )12px$kendo-menu-popup-item-expanded-bgColor$kendo-list-item-selected-bg#f35800
Description
The margin between the item groups in the small Pager..
+
Description
The background of expanded menu item in popup.
$kendo-pager-md-item-group-spacingNumberk-map-get( $kendo-spacing, 3.5 )14px$kendo-menu-popup-item-expanded-textColor$kendo-list-item-selected-textwhite
Description
The margin between the item groups in the medium Pager.
+
Description
The text color of expanded menu item in popup.
$kendo-pager-lg-item-group-spacingNumberk-map-get( $kendo-spacing, 4 )16px$kendo-menu-popup-item-expanded-borderNullnullnull
Description
The margin between the item groups in the large Pager.
+
Description
The border color of expanded menu item in popup.
$kendo-pager-border-widthNumber1px1px$kendo-menu-popup-item-expanded-gradientNullnullnull
Description
The border width of the Pager.
+
Description
The background gradient of expanded menu item in popup.
$kendo-pager-font-familyString$kendo-font-familyinherit$kendo-menu-popup-item-focus-shadowList$kendo-menu-item-focus-shadowinset 0 0 3px 1px rgba(39, 39, 39, 0.25)
Description
The font family of the Pager.
+
Description
The base shadow of focused menu item in popup.
$kendo-pager-font-size
+ +### Menu-button + + + + + + + + + + + + + + + + + + - - + + - - - + +
NameTypeDefault valueComputed value
$kendo-menu-button-arrow-padding-x Number$kendo-font-size-md14px$kendo-button-padding-y4px
Description
The font size of the Pager.
+
Description
The horizontal padding of the button arrow in the Menu Button.
$kendo-pager-line-height
+ +### Notification + + + + + + + + + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-notification-group-gap Number$kendo-line-height-md1.4285714286k-map-get( $kendo-spacing, 2 )8px
Description
The line height of the Pager.
+
Description
The row-gap between the elements in the Notification group.
$kendo-pager-bgColor$kendo-component-header-bg#f0f0f0$kendo-notification-padding-xNumber8px8px
Description
The background color of the Pager.
+
Description
The horizontal padding of the Notification.
$kendo-pager-textColor$kendo-component-header-text#272727$kendo-notification-padding-yNumber4px4px
Description
The text color of the Pager.
+
Description
The vertical padding of the Notification.
$kendo-pager-borderColor$kendo-component-border#cacaca$kendo-notification-border-widthNumber1px1px
Description
The border color of the Pager.
+
Description
The width of the border around the Notification.
$kendo-pager-focus-bgNullnullnull$kendo-notification-border-radiusNumber$kendo-border-radius-md4px
Description
The background color of the focused Pager.
+
Description
The border radius of the Notification.
$kendo-pager-focus-shadowList$kendo-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.13)$kendo-notification-font-familyString$kendo-font-familyinherit
Description
The box shadow of the focused Pager.
+
Description
The font family of the Notification.
$kendo-pager-section-spacing$kendo-notification-font-size Numberk-map-get( $kendo-spacing, 4 )16px$kendo-font-size-sm12px
Description
The spacing between the Pager sections.
+
Description
The font size of the Notification.
$kendo-pager-item-border-width$kendo-notification-line-height Number0px0px$kendo-line-height-md1.4285714286
Description
The border width of the Pager items.
+
Description
The line height of the Notification.
$kendo-pager-item-border-radiusNullnullnull$kendo-notification-bgColor$kendo-component-bg#ffffff
Description
The border radius of the Pager items.
+
Description
The background color of the Notification.
$kendo-pager-item-spacingNullnullnull$kendo-notification-textColor$kendo-component-text#272727
Description
The spacing around the Pager items.
+
Description
The text color of the Notification.
$kendo-pager-item-bgNullnullnull$kendo-notification-borderColor$kendo-component-border#cacaca
Description
The background color of the Pager items.
+
Description
The border color of the Notification.
$kendo-pager-item-textNullnullnull$kendo-notification-shadowString$kendo-popup-shadowvar(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The text color of the Pager items.
+
Description
The box shadow of the Notification.
$kendo-pager-item-borderNullnullnull$kendo-notification-icon-spacingNumber$kendo-icon-spacing4px
Description
The border color of the Pager items.
+
Description
The horizontal spacing of the Notification icon.
$kendo-pager-item-hover-bgColor$kendo-list-item-hover-bg#dddddd$kendo-notification-theme-colorsMap$kendo-theme-colors("primary": #f35800, "secondary": #e9e9e9, "tertiary": #03a9f4, "info": #2498bc, "success": #3ea44e, "warning": #ff9800, "error": #d92800, "dark": #404040, "light": #ebebeb, "inverse": #404040)
Description
The background color of the hovered Pager items.
+
Description
The theme colors map for the Notification.
$kendo-pager-item-hover-textColor$kendo-list-item-hover-text#272727$kendo-notification-themeMapnotification-theme( $kendo-notification-theme-colors )("inverse": (color: white, background-color: #404040, border: #404040), "light": (color: black, background-color: #ebebeb, border: #ebebeb), "dark": (color: white, background-color: #404040, border: #404040), "error": (color: white, background-color: #d92800, border: #d92800), "warning": (color: white, background-color: #ff9800, border: #ff9800), "success": (color: white, background-color: #3ea44e, border: #3ea44e), "info": (color: white, background-color: #2498bc, border: #2498bc), "tertiary": (color: white, background-color: #03a9f4, border: #03a9f4), "secondary": (color: black, background-color: #e9e9e9, border: #e9e9e9), "primary": (color: white, background-color: #f35800, border: #f35800))
Description
The text color of the hovered Pager items.
+
Description
The generated theme colors map for the Notification.
$kendo-pager-item-hover-borderNullnullnull
+ +### Orgchart + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-orgchart-spacerNumberk-map-get( $kendo-spacing, 6 )24px
Description
The border color of the hovered Pager items.
+
Description
The spacing index of the OrgChart.
$kendo-pager-item-selected-bgColor$kendo-list-item-selected-bg#f35800$kendo-orgchart-padding-yNumber$kendo-orgchart-spacer24px
Description
The background color of the selected Pager items.
+
Description
The vertical padding of the OrgChart.
$kendo-pager-item-selected-textColor$kendo-list-item-selected-textwhite$kendo-orgchart-padding-xNumber$kendo-orgchart-padding-y24px
Description
The text color of the selected Pager items.
+
Description
The horizontal padding of the OrgChart.
$kendo-pager-item-selected-borderNullnullnull
$kendo-orgchart-font-familyString$kendo-font-familyinherit
Description
The border color of the selected Pager items.
+
Description
The font family of the OrgChart.
$kendo-pager-item-focus-opacityNullnullnull$kendo-orgchart-font-sizeNumber$kendo-font-size-md14px
Description
The opacity of the focused Pager items.
+
Description
The font size of the OrgChart.
$kendo-pager-item-focus-bgColortransparenttransparent$kendo-orgchart-line-heightNumber$kendo-line-height-md1.4285714286
Description
The background color of the focused Pager items.
+
Description
The line height of the OrgChart.
$kendo-pager-item-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)$kendo-orgchart-bgColor$kendo-component-bg#ffffff
Description
The box shadow of the focused Pager items.
+
Description
The background color of the OrgChart.
$kendo-pager-number-border-radiusNullnullnull$kendo-orgchart-textColor$kendo-component-text#272727
Description
The border radius of the Pager numbers.
+
Description
The text color of the OrgChart.
$kendo-pager-input-widthNumber5em5em$kendo-orgchart-borderColor$kendo-component-border#cacaca
Description
The width of the Inputs in the Pager.
+
Description
The border color of the OrgChart.
$kendo-pager-sm-dropdown-width$kendo-orgchart-node-gap Number5em5em$kendo-orgchart-spacer24px
Description
The width of the DropDowns in the small Pager.
+
Description
The spacing of the OrgChart node.
$kendo-pager-md-dropdown-width$kendo-orgchart-group-gap Number5em5em$kendo-orgchart-spacer24px
Description
The width of the DropDowns in the medium Pager.
+
Description
The spacing of the OrgChart group.
$kendo-pager-lg-dropdown-width$kendo-orgchart-node-container-gap Number5em5em$kendo-orgchart-spacer24px
Description
The width of the DropDowns in the large Pager.
+
Description
The spacing of the OrgChart node container.
$kendo-pager-sizesMap( - sm: ( - padding-x: $kendo-pager-sm-padding-x, - padding-y: $kendo-pager-sm-padding-y, - item-group-spacing: $kendo-pager-sm-item-group-spacing, - item-min-width: $kendo-pager-sm-item-min-width, - pager-dropdown-width: $kendo-pager-sm-dropdown-width - ), - md: ( - padding-x: $kendo-pager-md-padding-x, - padding-y: $kendo-pager-md-padding-y, - item-group-spacing: $kendo-pager-md-item-group-spacing, - item-min-width: $kendo-pager-md-item-min-width, - pager-dropdown-width: $kendo-pager-md-dropdown-width - ), - lg: ( - padding-x: $kendo-pager-lg-padding-x, - padding-y: $kendo-pager-lg-padding-y, - item-group-spacing: $kendo-pager-lg-item-group-spacing, - item-min-width: $kendo-pager-lg-item-min-width, - pager-dropdown-width: $kendo-pager-lg-dropdown-width - ) -)(sm: (padding-x: 4px, padding-y: 4px, item-group-spacing: 12px, item-min-width: calc(1.4285714286em + 4px + 2px), pager-dropdown-width: 5em), md: (padding-x: 8px, padding-y: 8px, item-group-spacing: 14px, item-min-width: calc(1.4285714286em + 8px + 2px), pager-dropdown-width: 5em), lg: (padding-x: 10px, padding-y: 10px, item-group-spacing: 16px, item-min-width: calc(1.5em + 16px + 2px), pager-dropdown-width: 5em))$kendo-orgchart-node-group-padding-yNumber$kendo-orgchart-spacer24px
Description
The sizes map of the Pager.
+
Description
The vertical padding of the OrgChart node group.
- -### Pdf-viewer - - - - - - - - - - - - - - - - - - + + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - - - - - - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - - - - - - - - - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-pdf-viewer-border-width
$kendo-orgchart-node-group-padding-x Number1px1px$kendo-orgchart-node-group-padding-y24px
Description
The border width of the PDFViewer.
+
Description
The horizontal padding of the OrgChart node group.
$kendo-pdf-viewer-font-familyString$kendo-font-familyinherit$kendo-orgchart-node-group-border-widthNumber1px1px
Description
The font family of the PDFViewer.
+
Description
The border width of the OrgChart node group.
$kendo-pdf-viewer-font-size$kendo-orgchart-node-group-border-radius Number$kendo-font-size-md14px$kendo-border-radius-md4px
Description
The font size of the PDFViewer.
+
Description
The border radius of the OrgChart node group.
$kendo-pdf-viewer-line-heightNumber$kendo-line-height-md1.4285714286$kendo-orgchart-node-group-bgColor$kendo-base-bg#f0f0f0
Description
The line height of the PDFViewer.
+
Description
The background color of the OrgChart node group.
$kendo-pdf-viewer-bg$kendo-orgchart-node-group-text Color$kendo-component-bg#ffffff$kendo-base-text#272727
Description
The background color of the PDFViewer.
+
Description
The text color of the OrgChart node group.
$kendo-pdf-viewer-text$kendo-orgchart-node-group-border Color$kendo-component-text#272727$kendo-base-border#cacaca
Description
The text color of the PDFViewer.
+
Description
The border color of the OrgChart node group.
$kendo-pdf-viewer-border$kendo-orgchart-node-group-focus-border Color$kendo-component-border#cacaca$kendo-card-focus-borderrgba(0, 0, 0, 0.15)
Description
The border color of the PDFViewer.
+
Description
The border color of the focused OrgChart node group.
$kendo-pdf-viewer-toolbar-bgNullnullnull$kendo-orgchart-node-group-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The background color of the PDFViewer Toolbar.
+
Description
The shadow of the focused OrgChart node group.
$kendo-pdf-viewer-toolbar-textNullnullnull$kendo-orgchart-node-group-title-font-sizeNumber$kendo-font-size-xl20px
Description
The text color of the PDFViewer Toolbar.
+
Description
The font size of the OrgChart node group title.
$kendo-pdf-viewer-toolbar-borderNullnullnull$kendo-orgchart-node-group-title-margin-bottomNumberk-math-div( $kendo-orgchart-spacer, 4 )6px
Description
The border color of the PDFViewer Toolbar.
+
Description
The bottom margin of the OrgChart node group title.
$kendo-pdf-viewer-toolbar-gradientNullnullnull$kendo-orgchart-node-group-title-line-heightNumber$kendo-line-height-sm1.25
Description
The gradient of the PDFViewer Toolbar.
+
Description
The line height of the OrgChart node group title.
$kendo-pdf-viewer-canvas-bgColor$kendo-app-bg#ffffff$kendo-orgchart-node-group-subtitle-margin-bottomNumber$kendo-orgchart-spacer24px
Description
The background color of the PDFViewer canvas.
+
Description
The bottom margin of the OrgChart node group subtitle.
$kendo-pdf-viewer-canvas-textNullnullnull$kendo-orgchart-node-group-subtitle-font-sizeNumber$kendo-font-size-md14px
Description
The text color of the PDFViewer canvas.
+
Description
The font size of the OrgChart node group subtitle.
$kendo-pdf-viewer-canvas-borderNullnullnull$kendo-orgchart-node-group-subtitle-textColor$kendo-subtle-text#646464
Description
The border color of the PDFViewer canvas.
+
Description
The line height of the OrgChart node group subtitle.
$kendo-pdf-viewer-page-spacing$kendo-orgchart-card-width Number30px30px300px300px
Description
The spacing of the PDFViewer page.
+
Description
The width of the OrgChart Card.
$kendo-pdf-viewer-page-bgColorwhitewhite$kendo-orgchart-card-padding-yNumber$kendo-card-padding-y12px
Description
The background color of the PDFViewer page.
+
Description
The vertical padding of the OrgChart Card.
$kendo-pdf-viewer-page-textColor$kendo-component-text#272727$kendo-orgchart-card-padding-xNumber$kendo-orgchart-card-padding-y12px
Description
The text color of the PDFViewer page.
+
Description
The horizontal padding of the OrgChart Card.
$kendo-pdf-viewer-page-borderColor$kendo-component-border#cacaca$kendo-orgchart-card-border-widthNumber$kendo-card-border-width1px
Description
The border color of the PDFViewer page.
+
Description
The border width of the OrgChart Card.
$kendo-pdf-viewer-page-shadow$kendo-orgchart-card-shadow Stringk-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-card-shadowvar(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the PDFViewer page.
+
Description
The shadow of the OrgChart Card.
$kendo-pdf-viewer-search-panel-padding-xNumber$kendo-toolbar-md-padding-x8px$kendo-orgchart-card-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The horizontal padding of the PDFViewer search panel.
+
Description
The shadow of the focused OrgChart Card.
$kendo-pdf-viewer-search-panel-padding-y$kendo-orgchart-card-title-margin-bottom Numberk-map-get( $kendo-spacing, 3 )12px0px0px
Description
The vertical padding of the PDFViewer search panel.
+
Description
The bottom margin of the OrgChart Card title.
$kendo-pdf-viewer-search-panel-spacingNumber$kendo-toolbar-md-spacing8px
Description
The spacing of the PDFViewer search panel.
-
$kendo-pdf-viewer-search-panel-border-widthNumber1px1px$kendo-orgchart-card-title-font-sizeNullnullnull
Description
The border width of the PDFViewer search panel.
+
Description
The font size of the OrgChart Card title.
$kendo-pdf-viewer-search-panel-border-radius$kendo-orgchart-card-subtitle-margin-bottom Numberk-map-get( $kendo-spacing, 1 )4px0px0px
Description
The border radius of the PDFViewer search panel.
+
Description
The bottom margin of the OrgChart Card subtitle.
$kendo-pdf-viewer-search-panel-bgColor$kendo-component-bg#ffffff$kendo-orgchart-card-subtitle-font-sizeNullnullnull
Description
The background color of the PDFViewer search panel.
+
Description
The font size of the OrgChart Card subtitle.
$kendo-pdf-viewer-search-panel-textColor$kendo-component-text#272727$kendo-orgchart-card-body-border-widthList2px 0 02px 0 0
Description
The text color of the PDFViewer search panel.
+
Description
The border width of the OrgChart Card body.
$kendo-pdf-viewer-search-panel-border$kendo-orgchart-card-body-border-color Color$kendo-component-border#cacaca
Description
The border color of the PDFViewer search panel.
-
$kendo-pdf-viewer-search-panel-shadowString$kendo-window-shadowvar(--kendo-elevation-8, 0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12))transparenttransparent
Description
The shadow of the PDFViewer search panel.
+
Description
The border color of the OrgChart Card body.
$kendo-pdf-viewer-search-panel-matches-spacing$kendo-orgchart-card-body-vbox-margin-right Number$kendo-padding-sm-x4pxk-math-div( $kendo-orgchart-spacer, 2 )12px
Description
The spacing of the matches container in the PDFViewer search panel.
+
Description
The right margin of the OrgChart Card body title wrap.
$kendo-pdf-viewer-selection-line-height$kendo-orgchart-card-body-vbox-min-height Number$kendo-line-height-sm1.25$kendo-card-avatar-size45px
Description
The line height of the PDFViewer selection.
+
Description
The min height of the OrgChart Card body title wrap.
$kendo-pdf-viewer-search-highlight-bgColor$kendo-body-text#272727$kendo-orgchart-line-sizeNumber1px1px
Description
The background color of the PDFViewer highlight.
+
Description
The size of the OrgChart connecting line.
$kendo-pdf-viewer-search-highlight-mark-bg$kendo-orgchart-line-fill Coloryellowyellow$kendo-base-border#cacaca
Description
The background color of the PDFViewer highlight mark.
+
Description
The fill color of the OrgChart connecting line.
$kendo-pdf-viewer-icon-textColor$kendo-dropzone-icon-text#6c6c6c$kendo-orgchart-line-v-heightNumber25px25px
Description
The text color of the PDFViewer icon.
+
Description
The height of the OrgChart connecting line.
-### Picker +### Pager @@ -12137,889 +12345,831 @@ The following table lists the available variables for customizing the Classic th - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - - - - - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + - - + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - - - - - -
$kendo-picker-bgColor$kendo-button-bg#f0f0f0$kendo-pager-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The background color of the Picker components.
+
Description
The horizontal padding of the Pager.
$kendo-picker-textColor$kendo-button-text#272727$kendo-pager-sm-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The text color of the Picker components.
+
Description
The horizontal padding of the small Pager.
$kendo-picker-borderColor$kendo-button-border#cacaca$kendo-pager-md-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The border color of the Picker components.
+
Description
The horizontal padding of the medium Pager.
$kendo-picker-gradientList$kendo-button-gradientrgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)$kendo-pager-lg-padding-xNumberk-map-get( $kendo-spacing, 2.5 )10px
Description
The gradient of the Picker components.
+
Description
The horizontal padding of the large Pager.
$kendo-picker-shadowNull$kendo-button-shadownull$kendo-pager-padding-yNumber$kendo-pager-padding-x8px
Description
The shadow of the Picker components.
+
Description
The vertical padding of the Pager.
$kendo-picker-hover-bgColor$kendo-button-hover-bg#dddddd$kendo-pager-sm-padding-yNumber$kendo-pager-sm-padding-x4px
Description
The background color of the hovered Picker components.
+
Description
The vertical padding of the small Pager.
$kendo-picker-hover-textNull$kendo-button-hover-textnull$kendo-pager-md-padding-yNumber$kendo-pager-md-padding-x8px
Description
The text color of the hovered Picker components.
+
Description
The vertical padding of the medium Pager.
$kendo-picker-hover-borderColor$kendo-button-hover-border#b6b6b6$kendo-pager-lg-padding-yNumber$kendo-pager-lg-padding-x10px
Description
The border color of the hovered Picker components.
+
Description
The vertical padding of the large Pager.
$kendo-picker-hover-gradientNull$kendo-button-hover-gradientnull$kendo-pager-sm-item-min-widthCalculation$kendo-button-sm-calc-sizecalc(1.4285714286em + 4px + 2px)
Description
The gradient of the hovered Picker components.
+
Description
The minimum width of the items in the small Pager.
$kendo-picker-hover-shadowNull$kendo-button-hover-shadownull$kendo-pager-md-item-min-widthCalculation$kendo-button-md-calc-sizecalc(1.4285714286em + 8px + 2px)
Description
The shadow of the hovered Picker components.
+
Description
The minimum width of the items in the medium Pagers.
$kendo-picker-focus-bgNull$kendo-button-focus-bgnull$kendo-pager-lg-item-min-widthCalculation$kendo-button-lg-calc-sizecalc(1.5em + 16px + 2px)
Description
The background color of the focused Picker components.
+
Description
The minimum width of the items in the large Pagers.
$kendo-picker-focus-textNull$kendo-button-focus-textnull$kendo-pager-sm-item-group-spacingNumberk-map-get( $kendo-spacing, 3 )12px
Description
The text color of the focused Picker components.
+
Description
The margin between the item groups in the small Pager..
$kendo-picker-focus-borderNull$kendo-button-focus-bordernull$kendo-pager-md-item-group-spacingNumberk-map-get( $kendo-spacing, 3.5 )14px
Description
The border color of the focused Picker components.
+
Description
The margin between the item groups in the medium Pager.
$kendo-picker-focus-gradientNull$kendo-button-focus-gradientnull$kendo-pager-lg-item-group-spacingNumberk-map-get( $kendo-spacing, 4 )16px
Description
The gradient of the focused Picker components.
+
Description
The margin between the item groups in the large Pager.
$kendo-picker-focus-shadowList$kendo-button-focus-shadow0 0 4px 0 rgba(202, 202, 202, 0.75)$kendo-pager-border-widthNumber1px1px
Description
The shadow of the focused Picker components.
+
Description
The border width of the Pager.
$kendo-picker-disabled-bgNullnullnull$kendo-pager-font-familyString$kendo-font-familyinherit
Description
The background color of the disabled Picker components.
+
Description
The font family of the Pager.
$kendo-picker-disabled-textNullnullnull$kendo-pager-font-sizeNumber$kendo-font-size-md14px
Description
The text color of the disabled Picker components.
-
$kendo-picker-disabled-borderNullnullnull
Description
The border color of the disabled Picker components.
+
Description
The font size of the Pager.
$kendo-picker-disabled-gradientNullnullnull$kendo-pager-line-heightNumber$kendo-line-height-md1.4285714286
Description
The gradient of the disabled Picker components.
+
Description
The line height of the Pager.
$kendo-picker-disabled-shadowNullnullnull$kendo-pager-bgColor$kendo-component-header-bg#f0f0f0
Description
The shadow of the disabled Picker components.
+
Description
The background color of the Pager.
$kendo-picker-outline-bgNullnullnull$kendo-pager-textColor$kendo-component-header-text#272727
Description
The background color of the outline Picker components.
+
Description
The text color of the Pager.
$kendo-picker-outline-text$kendo-pager-border Color$kendo-button-text#272727$kendo-component-border#cacaca
Description
The text color of the outline Picker components.
+
Description
The border color of the Pager.
$kendo-picker-outline-borderColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-picker-outline-text, .5))rgba(39, 39, 39, 0.5)$kendo-pager-focus-bgNullnullnull
Description
The border color of the outline Picker components.
+
Description
The background color of the focused Pager.
$kendo-picker-outline-hover-bgColor$kendo-picker-outline-text#272727$kendo-pager-focus-shadowList$kendo-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.13)
Description
The background color of the outline hovered Picker components.
+
Description
The box shadow of the focused Pager.
$kendo-picker-outline-hover-textColorif($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-picker-outline-hover-bg ))white$kendo-pager-section-spacingNumberk-map-get( $kendo-spacing, 4 )16px
Description
The text color of the outline hovered Picker components.
+
Description
The spacing between the Pager sections.
$kendo-picker-outline-hover-borderColor$kendo-picker-outline-hover-bg#272727$kendo-pager-item-border-widthNumber0px0px
Description
The border color of the outline hovered Picker components.
+
Description
The border width of the Pager items.
$kendo-picker-outline-focus-bg$kendo-pager-item-border-radius Null null null
Description
The background color of the outline focused Picker components.
+
Description
The border radius of the Pager items.
$kendo-picker-outline-focus-text$kendo-pager-item-spacing Null null null
Description
The text color of the outline focused Picker components.
+
Description
The spacing around the Pager items.
$kendo-picker-outline-focus-border$kendo-pager-item-bg Null null null
Description
The border color of the outline focused Picker components.
+
Description
The background color of the Pager items.
$kendo-picker-outline-focus-shadowList$kendo-picker-focus-shadow0 0 4px 0 rgba(202, 202, 202, 0.75)$kendo-pager-item-textNullnullnull
Description
The shadow of the outline focused Picker components.
+
Description
The text color of the Pager items.
$kendo-picker-outline-hover-focus-bg$kendo-pager-item-border Null null null
Description
The background color of the outline hovered and focused Picker components.
+
Description
The border color of the Pager items.
$kendo-picker-outline-hover-focus-textNullnullnull$kendo-pager-item-hover-bgColor$kendo-list-item-hover-bg#dddddd
Description
The text color of the outline hovered and focused Picker components.
+
Description
The background color of the hovered Pager items.
$kendo-picker-outline-hover-focus-borderNullnullnull$kendo-pager-item-hover-textColor$kendo-list-item-hover-text#272727
Description
The border color of the outline hovered and focused Picker components.
+
Description
The text color of the hovered Pager items.
$kendo-picker-flat-bg$kendo-pager-item-hover-border Null null null
Description
The background color of the flat Picker components.
+
Description
The border color of the hovered Pager items.
$kendo-picker-flat-text$kendo-pager-item-selected-bg Color$kendo-button-text#272727$kendo-list-item-selected-bg#f35800
Description
The text color of the flat Picker components.
+
Description
The background color of the selected Pager items.
$kendo-picker-flat-border$kendo-pager-item-selected-text Color$kendo-button-border#cacaca$kendo-list-item-selected-textwhite
Description
The border color of the flat Picker components.
+
Description
The text color of the selected Pager items.
$kendo-picker-flat-hover-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .04 ), rgba( $kendo-button-text, .04 ))rgba(39, 39, 39, 0.04)$kendo-pager-item-selected-borderNullnullnull
Description
The background color of the flat hovered Picker components.
+
Description
The border color of the selected Pager items.
$kendo-picker-flat-hover-text$kendo-pager-item-focus-opacity Null null null
Description
The text color of the flat hovered Picker components.
+
Description
The opacity of the focused Pager items.
$kendo-picker-flat-hover-border$kendo-pager-item-focus-bg Colorif($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), rgba( $kendo-button-border, .16 ))rgba(202, 202, 202, 0.16)transparenttransparent
Description
The border color of the flat hovered Picker components.
+
Description
The background color of the focused Pager items.
$kendo-picker-flat-focus-bgNullnullnull$kendo-pager-item-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The background color of the flat focused Picker components.
+
Description
The box shadow of the focused Pager items.
$kendo-picker-flat-focus-text$kendo-pager-number-border-radius Null null null
Description
The text color of the flat focused Picker components.
+
Description
The border radius of the Pager numbers.
$kendo-picker-flat-focus-borderNullnullnull$kendo-pager-input-widthNumber5em5em
Description
The border color of the flat focused Picker components.
+
Description
The width of the Inputs in the Pager.
$kendo-picker-flat-focus-shadowList$kendo-picker-focus-shadow0 0 4px 0 rgba(202, 202, 202, 0.75)$kendo-pager-sm-dropdown-widthNumber5em5em
Description
The shadow of the flat focused Picker components.
+
Description
The width of the DropDowns in the small Pager.
$kendo-picker-flat-hover-focus-bgNullnullnull$kendo-pager-md-dropdown-widthNumber5em5em
Description
The background color of the flat hovered and focused Picker components.
+
Description
The width of the DropDowns in the medium Pager.
$kendo-picker-flat-hover-focus-textNullnullnull$kendo-pager-lg-dropdown-widthNumber5em5em
Description
The text color of the flat hovered and focused Picker components.
+
Description
The width of the DropDowns in the large Pager.
$kendo-picker-flat-hover-focus-borderNullnullnull
Description
The border color of the flat hovered and focused Picker components.
-
- -### Popover - - - - - - - - - - - + + + + + + + + + +
Name$kendo-pager-sizesMap( + sm: ( + padding-x: $kendo-pager-sm-padding-x, + padding-y: $kendo-pager-sm-padding-y, + item-group-spacing: $kendo-pager-sm-item-group-spacing, + item-min-width: $kendo-pager-sm-item-min-width, + pager-dropdown-width: $kendo-pager-sm-dropdown-width + ), + md: ( + padding-x: $kendo-pager-md-padding-x, + padding-y: $kendo-pager-md-padding-y, + item-group-spacing: $kendo-pager-md-item-group-spacing, + item-min-width: $kendo-pager-md-item-min-width, + pager-dropdown-width: $kendo-pager-md-dropdown-width + ), + lg: ( + padding-x: $kendo-pager-lg-padding-x, + padding-y: $kendo-pager-lg-padding-y, + item-group-spacing: $kendo-pager-lg-item-group-spacing, + item-min-width: $kendo-pager-lg-item-min-width, + pager-dropdown-width: $kendo-pager-lg-dropdown-width + ) +)(sm: (padding-x: 4px, padding-y: 4px, item-group-spacing: 12px, item-min-width: calc(1.4285714286em + 4px + 2px), pager-dropdown-width: 5em), md: (padding-x: 8px, padding-y: 8px, item-group-spacing: 14px, item-min-width: calc(1.4285714286em + 8px + 2px), pager-dropdown-width: 5em), lg: (padding-x: 10px, padding-y: 10px, item-group-spacing: 16px, item-min-width: calc(1.5em + 16px + 2px), pager-dropdown-width: 5em))
Description
The sizes map of the Pager.
+
+ +### Pdf-viewer + + + + + + + + + + + - + - + - - - - - - - - - - - - - - - - - - - - + - + - - + - + - - + - + - - + - - + + - - + - - + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - - - - - - - - - - - - - - - -
Name Type Default value Computed value
$kendo-popover-border-width$kendo-pdf-viewer-border-width Number$kendo-card-border-width1px 1px
Description
The width of the border around the Popover.
-
$kendo-popover-border-styleStringsolidsolid
Description
The style of the border around the Popover.
-
$kendo-popover-border-radiusNumber$kendo-card-border-radius8px
Description
The radius of the border around the Popover.
+
Description
The border width of the PDFViewer.
$kendo-popover-font-family$kendo-pdf-viewer-font-family String$kendo-card-font-family$kendo-font-family inherit
Description
The font family of the Popover.
+
Description
The font family of the PDFViewer.
$kendo-popover-font-size$kendo-pdf-viewer-font-size Number$kendo-card-font-size$kendo-font-size-md 14px
Description
The font size of the Popover.
+
Description
The font size of the PDFViewer.
$kendo-popover-line-height$kendo-pdf-viewer-line-height Number$kendo-card-line-height$kendo-line-height-md 1.4285714286
Description
The line height of the Popover.
+
Description
The line height of the PDFViewer.
$kendo-popover-text$kendo-pdf-viewer-bg Color$kendo-component-text#272727$kendo-component-bg#ffffff
Description
The text color of the Popover.
+
Description
The background color of the PDFViewer.
$kendo-popover-bg$kendo-pdf-viewer-text Color$kendo-component-bg#ffffff$kendo-component-text#272727
Description
The background color of the Popover.
+
Description
The text color of the PDFViewer.
$kendo-popover-border$kendo-pdf-viewer-border Color $kendo-component-border #cacaca
Description
The border color of the Popover.
+
Description
The border color of the PDFViewer.
$kendo-popover-shadowString$kendo-popup-shadowvar(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-pdf-viewer-toolbar-bgNullnullnull
Description
The box shadow of the Popover.
+
Description
The background color of the PDFViewer Toolbar.
$kendo-popover-header-padding-xNumber$kendo-card-header-padding-x16px$kendo-pdf-viewer-toolbar-textNullnullnull
Description
The horizontal padding of the Popover header.
+
Description
The text color of the PDFViewer Toolbar.
$kendo-popover-header-padding-yNumber$kendo-card-header-padding-y12px$kendo-pdf-viewer-toolbar-borderNullnullnull
Description
The vertical padding of the Popover header.
+
Description
The border color of the PDFViewer Toolbar.
$kendo-popover-header-border-widthNumber$kendo-card-header-border-width1px$kendo-pdf-viewer-toolbar-gradientNullnullnull
Description
The border width of the Popover header.
+
Description
The gradient of the PDFViewer Toolbar.
$kendo-popover-header-border-styleString$kendo-popover-border-stylesolid$kendo-pdf-viewer-canvas-bgColor$kendo-app-bg#ffffff
Description
The border style of the Popover header.
+
Description
The background color of the PDFViewer canvas.
$kendo-popover-header-textColor$kendo-card-header-text#272727$kendo-pdf-viewer-canvas-textNullnullnull
Description
The text color of the Popover header.
+
Description
The text color of the PDFViewer canvas.
$kendo-popover-header-bg$kendo-pdf-viewer-canvas-border Null$kendo-card-header-bgnull null
Description
The background color of the Popover header.
+
Description
The border color of the PDFViewer canvas.
$kendo-popover-header-borderColor$kendo-card-header-border#cacaca$kendo-pdf-viewer-page-spacingNumber30px30px
Description
The border color of the Popover header.
+
Description
The spacing of the PDFViewer page.
$kendo-popover-body-padding-xNumber$kendo-card-body-padding-x16px$kendo-pdf-viewer-page-bgColorwhitewhite
Description
The horizontal padding of the Popover body.
+
Description
The background color of the PDFViewer page.
$kendo-popover-body-padding-yNumber$kendo-card-body-padding-y16px$kendo-pdf-viewer-page-textColor$kendo-component-text#272727
Description
The vertical padding of the Popover body.
+
Description
The text color of the PDFViewer page.
$kendo-popover-actions-border-widthNumber$kendo-popover-border-width1px$kendo-pdf-viewer-page-borderColor$kendo-component-border#cacaca
Description
The border width of the Popover actions.
+
Description
The border color of the PDFViewer page.
$kendo-popover-callout-widthNumber$kendo-card-callout-width20px$kendo-pdf-viewer-page-shadowStringk-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The width of the Popover callout.
+
Description
The shadow of the PDFViewer page.
$kendo-popover-callout-height$kendo-pdf-viewer-search-panel-padding-x Number$kendo-card-callout-height20px$kendo-toolbar-md-padding-x8px
Description
The height of the Popover callout.
+
Description
The horizontal padding of the PDFViewer search panel.
$kendo-popover-callout-border-width$kendo-pdf-viewer-search-panel-padding-y Number$kendo-popover-border-width1pxk-map-get( $kendo-spacing, 3 )12px
Description
The border width of the Popover callout.
+
Description
The vertical padding of the PDFViewer search panel.
$kendo-popover-callout-border-styleString$kendo-popover-border-stylesolid$kendo-pdf-viewer-search-panel-spacingNumber$kendo-toolbar-md-spacing8px
Description
The border style of the Popover callout.
+
Description
The spacing of the PDFViewer search panel.
$kendo-popover-callout-bgColor$kendo-popover-bg#ffffff
Description
The background color of the Popover callout.
-
$kendo-popover-callout-borderColor$kendo-popover-border#cacaca
Description
The border color of the Popover callout.
-
- -### Popup - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - + - - + - - + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-popup-padding-xNullnullnull
Description
Horizontal padding of the popup.
-
$kendo-popup-padding-yNullnullnull$kendo-pdf-viewer-search-panel-border-widthNumber1px1px
Description
Vertical padding of the popup.
+
Description
The border width of the PDFViewer search panel.
$kendo-popup-border-width$kendo-pdf-viewer-search-panel-border-radius Number1px1pxk-map-get( $kendo-spacing, 1 )4px
Description
Width of the border around the popup.
+
Description
The border radius of the PDFViewer search panel.
$kendo-popup-border-radiusNullnullnull$kendo-pdf-viewer-search-panel-bgColor$kendo-component-bg#ffffff
Description
Border radius of the popup.
+
Description
The background color of the PDFViewer search panel.
$kendo-popup-font-sizeNumber$kendo-font-size-md14px$kendo-pdf-viewer-search-panel-textColor$kendo-component-text#272727
Description
Font size of the popup.
+
Description
The text color of the PDFViewer search panel.
$kendo-popup-line-heightNumber$kendo-line-height-md1.4285714286$kendo-pdf-viewer-search-panel-borderColor$kendo-component-border#cacaca
Description
Line height of the popup.
+
Description
The border color of the PDFViewer search panel.
$kendo-popup-content-padding-xNumberk-map-get( $kendo-spacing, 2 )8px$kendo-pdf-viewer-search-panel-shadowString$kendo-window-shadowvar(--kendo-elevation-8, 0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
Horizontal padding of the popup content.
+
Description
The shadow of the PDFViewer search panel.
$kendo-popup-content-padding-y$kendo-pdf-viewer-search-panel-matches-spacing Numberk-map-get( $kendo-spacing, 2 )8px$kendo-padding-sm-x4px
Description
Vertical padding of the popup content.
+
Description
The spacing of the matches container in the PDFViewer search panel.
$kendo-popup-bgColor$kendo-component-bg#ffffff$kendo-pdf-viewer-selection-line-heightNumber$kendo-line-height-sm1.25
Description
Background color of the popup.
+
Description
The line height of the PDFViewer selection.
$kendo-popup-text$kendo-pdf-viewer-search-highlight-bg Color$kendo-component-text$kendo-body-text #272727
Description
Text color of the popup.
+
Description
The background color of the PDFViewer highlight.
$kendo-popup-border$kendo-pdf-viewer-search-highlight-mark-bg Color$kendo-component-border#cacacayellowyellow
Description
Border color of the popup.
+
Description
The background color of the PDFViewer highlight mark.
$kendo-popup-shadowStringk-elevation(4)var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-pdf-viewer-icon-textColor$kendo-dropzone-icon-text#6c6c6c
Description
Box shadow of the popup.
+
Description
The text color of the PDFViewer icon.
-### Progressbar +### Picker @@ -13037,449 +13187,469 @@ The following table lists the available variables for customizing the Classic th - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + - - + + - - + - - + + - - -
$kendo-progressbar-heightNumber22px22px$kendo-picker-bgColor$kendo-button-bg#f0f0f0
Description
The height of the ProgressBar.
+
Description
The background color of the Picker components.
$kendo-progressbar-horizontal-widthNumber100%100%$kendo-picker-textColor$kendo-button-text#272727
Description
The horizontal width of the ProgressBar.
+
Description
The text color of the Picker components.
$kendo-progressbar-animation-timingList1s linear infinite1s linear infinite$kendo-picker-borderColor$kendo-button-border#cacaca
Description
The animation timing of the ProgressBar.
+
Description
The border color of the Picker components.
$kendo-progressbar-border-widthNumber0px0px$kendo-picker-gradientList$kendo-button-gradientrgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)
Description
The width of the border around the ProgressBar.
+
Description
The gradient of the Picker components.
$kendo-progressbar-font-familyString$kendo-font-familyinherit$kendo-picker-shadowNull$kendo-button-shadownull
Description
The font family of the ProgressBar.
+
Description
The shadow of the Picker components.
$kendo-progressbar-font-sizeNumber$kendo-font-size-sm12px$kendo-picker-hover-bgColor$kendo-button-hover-bg#dddddd
Description
The font size of the ProgressBar.
+
Description
The background color of the hovered Picker components.
$kendo-progressbar-line-heightNumber11$kendo-picker-hover-textNull$kendo-button-hover-textnull
Description
The line height of the ProgressBar.
+
Description
The text color of the hovered Picker components.
$kendo-progressbar-bg$kendo-picker-hover-border Colorif($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-component-bg, 1 ))#ebebeb$kendo-button-hover-border#b6b6b6
Description
The background color of the ProgressBar.
+
Description
The border color of the hovered Picker components.
$kendo-progressbar-textColor$kendo-component-text#272727$kendo-picker-hover-gradientNull$kendo-button-hover-gradientnull
Description
The text color of the ProgressBar.
+
Description
The gradient of the hovered Picker components.
$kendo-progressbar-borderColor$kendo-component-border#cacaca$kendo-picker-hover-shadowNull$kendo-button-hover-shadownull
Description
The border color of the ProgressBar.
+
Description
The shadow of the hovered Picker components.
$kendo-progressbar-gradient$kendo-picker-focus-bg Nullnull$kendo-button-focus-bg null
Description
The background gradient of the ProgressBar.
+
Description
The background color of the focused Picker components.
$kendo-progressbar-value-bgColor$kendo-color-primary#f35800$kendo-picker-focus-textNull$kendo-button-focus-textnull
Description
The progress background color of the ProgressBar.
+
Description
The text color of the focused Picker components.
$kendo-progressbar-value-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-progressbar-value-bg ))white$kendo-picker-focus-borderNull$kendo-button-focus-bordernull
Description
The progress text color of the ProgressBar.
+
Description
The border color of the focused Picker components.
$kendo-progressbar-value-borderColorif($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-progressbar-value-bg ))#e05100$kendo-picker-focus-gradientNull$kendo-button-focus-gradientnull
Description
The progress border color of the ProgressBar.
+
Description
The gradient of the focused Picker components.
$kendo-progressbar-value-gradient$kendo-picker-focus-shadowList$kendo-button-focus-shadow0 0 4px 0 rgba(202, 202, 202, 0.75)
Description
The shadow of the focused Picker components.
+
$kendo-picker-disabled-bg Null null null
Description
The progress background gradient of the ProgressBar.
+
Description
The background color of the disabled Picker components.
$kendo-progressbar-indeterminate-bgColor$kendo-progressbar-bg#ebebeb$kendo-picker-disabled-textNullnullnull
Description
The background color of the indeterminate ProgressBar.
+
Description
The text color of the disabled Picker components.
$kendo-progressbar-indeterminate-textColor$kendo-progressbar-text#272727$kendo-picker-disabled-borderNullnullnull
Description
The text color of the indeterminate ProgressBar.
+
Description
The border color of the disabled Picker components.
$kendo-progressbar-indeterminate-borderColor$kendo-progressbar-border#cacaca$kendo-picker-disabled-gradientNullnullnull
Description
The border color of the indeterminate ProgressBar.
+
Description
The gradient of the disabled Picker components.
$kendo-progressbar-indeterminate-gradient$kendo-picker-disabled-shadow Null null null
Description
The background gradient of the indeterminate ProgressBar.
+
Description
The shadow of the disabled Picker components.
$kendo-progressbar-chunk-borderColor$kendo-body-bg#ffffff$kendo-picker-outline-bgNullnullnull
Description
The border color of the chunk ProgressBar.
+
Description
The background color of the outline Picker components.
$kendo-circular-progressbar-arc-stroke$kendo-picker-outline-text Color$kendo-color-primary#f35800$kendo-button-text#272727
Description
The arc stroke color of the circular ProgressBar.
+
Description
The text color of the outline Picker components.
$kendo-circular-progressbar-scale-stroke$kendo-picker-outline-border Color$kendo-progressbar-bg#ebebebif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-picker-outline-text, .5))rgba(39, 39, 39, 0.5)
Description
The scale stroke background color of the circular ProgressBar.
+
Description
The border color of the outline Picker components.
- -### Prompt - - - - - - - - - - - - - - - - - - + + - + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-prompt-text
$kendo-picker-outline-hover-bg Color$kendo-component-text$kendo-picker-outline-text #272727
Description
The text color of the Prompt.
+
Description
The background color of the outline hovered Picker components.
$kendo-prompt-bg$kendo-picker-outline-hover-text Color$kendo-component-bg#ffffffif($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-picker-outline-hover-bg ))white
Description
The background color of the Prompt.
+
Description
The text color of the outline hovered Picker components.
$kendo-prompt-border$kendo-picker-outline-hover-border Color$kendo-component-border#cacaca$kendo-picker-outline-hover-bg#272727
Description
The border color of the Prompt.
+
Description
The border color of the outline hovered Picker components.
$kendo-prompt-header-textColor$kendo-component-header-text#272727$kendo-picker-outline-focus-bgNullnullnull
Description
The text color of the Prompt header.
+
Description
The background color of the outline focused Picker components.
$kendo-prompt-header-bgColor$kendo-component-bg#ffffff$kendo-picker-outline-focus-textNullnullnull
Description
The background color of the Prompt header.
+
Description
The text color of the outline focused Picker components.
$kendo-prompt-header-borderColor$kendo-component-header-border#cacaca$kendo-picker-outline-focus-borderNullnullnull
Description
The border color of the Prompt header.
+
Description
The border color of the outline focused Picker components.
$kendo-prompt-content-padding-yNumberk-map-get( $kendo-spacing, 4 )16px$kendo-picker-outline-focus-shadowList$kendo-picker-focus-shadow0 0 4px 0 rgba(202, 202, 202, 0.75)
Description
The vertical padding of the Prompt content.
+
Description
The shadow of the outline focused Picker components.
$kendo-prompt-content-padding-xNumberk-map-get( $kendo-spacing, 4 )16px$kendo-picker-outline-hover-focus-bgNullnullnull
Description
The horizontal padding of the Prompt content.
+
Description
The background color of the outline hovered and focused Picker components.
$kendo-prompt-content-spacingNumberk-map-get( $kendo-spacing, 4 )16px$kendo-picker-outline-hover-focus-textNullnullnull
Description
The spacing between the items of the Prompt content.
+
Description
The text color of the outline hovered and focused Picker components.
$kendo-prompt-content-textColor$kendo-component-header-text#272727$kendo-picker-outline-hover-focus-borderNullnullnull
Description
The text color of the Prompt content.
+
Description
The border color of the outline hovered and focused Picker components.
$kendo-prompt-content-bgColor$kendo-component-header-bg#f0f0f0$kendo-picker-flat-bgNullnullnull
Description
The background color of the Prompt content.
+
Description
The background color of the flat Picker components.
$kendo-prompt-content-border$kendo-picker-flat-text Color$kendo-component-header-border#cacaca$kendo-button-text#272727
Description
The text border of the Prompt content.
+
Description
The text color of the flat Picker components.
$kendo-prompt-expander-spacingNumberk-map-get( $kendo-spacing, 2 )8px$kendo-picker-flat-borderColor$kendo-button-border#cacaca
Description
The spacing between the items of the Prompt content expander.
+
Description
The border color of the flat Picker components.
$kendo-prompt-suggestion-padding-yNumberk-map-get( $kendo-spacing, 2 )8px$kendo-picker-flat-hover-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .04 ), rgba( $kendo-button-text, .04 ))rgba(39, 39, 39, 0.04)
Description
The vertical padding of the Prompt suggestion container.
+
Description
The background color of the flat hovered Picker components.
$kendo-prompt-suggestion-padding-xNumberk-map-get( $kendo-spacing, 2 )8px$kendo-picker-flat-hover-textNullnullnull
Description
The horizontal padding of the Prompt suggestion container.
+
Description
The text color of the flat hovered Picker components.
$kendo-prompt-suggestion-border-radiusNumber$kendo-border-radius-md4px$kendo-picker-flat-hover-borderColorif($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), rgba( $kendo-button-border, .16 ))rgba(202, 202, 202, 0.16)
Description
The border radius of the Prompt suggestion container.
+
Description
The border color of the flat hovered Picker components.
$kendo-prompt-suggestion-textColor$kendo-component-text#272727$kendo-picker-flat-focus-bgNullnullnull
Description
The text color of the Prompt suggestion container.
+
Description
The background color of the flat focused Picker components.
$kendo-prompt-suggestion-bgColor$kendo-body-bg#ffffff$kendo-picker-flat-focus-textNullnullnull
Description
The background color of the Prompt suggestion container.
+
Description
The text color of the flat focused Picker components.
$kendo-prompt-suggestion-borderColor$kendo-component-border#cacaca$kendo-picker-flat-focus-borderNullnullnull
Description
The border color of the Prompt suggestion container.
+
Description
The border color of the flat focused Picker components.
$kendo-prompt-suggestion-shadowStringk-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-picker-flat-focus-shadowList$kendo-picker-focus-shadow0 0 4px 0 rgba(202, 202, 202, 0.75)
Description
The elevation of the Prompt suggestion container.
+
Description
The shadow of the flat focused Picker components.
+
$kendo-picker-flat-hover-focus-bgNullnullnull
Description
The background color of the flat hovered and focused Picker components.
+
$kendo-picker-flat-hover-focus-textNullnullnull
Description
The text color of the flat hovered and focused Picker components.
+
$kendo-picker-flat-hover-focus-borderNullnullnull
Description
The border color of the flat hovered and focused Picker components.
-### Radio +### Popover @@ -13497,645 +13667,649 @@ The following table lists the available variables for customizing the Classic th - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - + +
$kendo-radio-radius$kendo-popover-border-width Number50%50%$kendo-card-border-width1px
Description
The border radius of the RadioButton.
+
Description
The width of the border around the Popover.
$kendo-radio-border-widthNumber1px1px$kendo-popover-border-styleStringsolidsolid
Description
The border width of the RadioButton.
+
Description
The style of the border around the Popover.
$kendo-radio-sm-size$kendo-popover-border-radius Numberk-map-get( $kendo-spacing, 3 )12px$kendo-card-border-radius8px
Description
The size of a small RadioButton.
+
Description
The radius of the border around the Popover.
$kendo-radio-md-sizeNumberk-map-get( $kendo-spacing, 4 )16px$kendo-popover-font-familyString$kendo-card-font-familyinherit
Description
The size of a medium RadioButton.
+
Description
The font family of the Popover.
$kendo-radio-lg-size$kendo-popover-font-size Numberk-map-get( $kendo-spacing, 5 )20px$kendo-card-font-size14px
Description
The size of a large RadioButton.
+
Description
The font size of the Popover.
$kendo-radio-sm-glyph-size$kendo-popover-line-height Numberk-map-get( $kendo-spacing, 2.5 )10px$kendo-card-line-height1.4285714286
Description
The glyph size of a small RadioButton.
+
Description
The line height of the Popover.
$kendo-radio-md-glyph-sizeNumberk-map-get( $kendo-spacing, 3.5 )14px$kendo-popover-textColor$kendo-component-text#272727
Description
The glyph size of a medium RadioButton.
+
Description
The text color of the Popover.
$kendo-radio-lg-glyph-sizeNumberk-map-get( $kendo-spacing, 4.5 )18px$kendo-popover-bgColor$kendo-component-bg#ffffff
Description
The glyph size of a large RadioButton.
+
Description
The background color of the Popover.
$kendo-radio-sm-ripple-sizeNumber300%300%$kendo-popover-borderColor$kendo-component-border#cacaca
Description
The ripple size of a small RadioButton.
+
Description
The border color of the Popover.
$kendo-radio-md-ripple-sizeNumber300%300%$kendo-popover-shadowString$kendo-popup-shadowvar(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The ripple size of a medium RadioButton.
+
Description
The box shadow of the Popover.
$kendo-radio-lg-ripple-size$kendo-popover-header-padding-x Number300%300%$kendo-card-header-padding-x16px
Description
The ripple size of a large RadioButton.
+
Description
The horizontal padding of the Popover header.
$kendo-radio-sizesMap( - sm: ( - size: $kendo-radio-sm-size, - glyph-size: $kendo-radio-sm-glyph-size, - ripple-size: $kendo-radio-sm-ripple-size - ), - md: ( - size: $kendo-radio-md-size, - glyph-size: $kendo-radio-md-glyph-size, - ripple-size: $kendo-radio-md-ripple-size - ), - lg: ( - size: $kendo-radio-lg-size, - glyph-size: $kendo-radio-lg-glyph-size, - ripple-size: $kendo-radio-lg-ripple-size - ) -)(sm: (size: 12px, glyph-size: 10px, ripple-size: 300%), md: (size: 16px, glyph-size: 14px, ripple-size: 300%), lg: (size: 20px, glyph-size: 18px, ripple-size: 300%))$kendo-popover-header-padding-yNumber$kendo-card-header-padding-y12px
Description
The map with the different RadioButton sizes.
+
Description
The vertical padding of the Popover header.
$kendo-radio-bgColor$kendo-checkbox-bg#ffffff$kendo-popover-header-border-widthNumber$kendo-card-header-border-width1px
Description
The background color of the RadioButton.
+
Description
The border width of the Popover header.
$kendo-radio-textNull$kendo-checkbox-textnull$kendo-popover-header-border-styleString$kendo-popover-border-stylesolid
Description
The color of the RadioButton.
+
Description
The border style of the Popover header.
$kendo-radio-border$kendo-popover-header-text Color$kendo-checkbox-border#cacaca$kendo-card-header-text#272727
Description
The border color of the RadioButton.
+
Description
The text color of the Popover header.
$kendo-radio-hover-bg$kendo-popover-header-bg Null$kendo-checkbox-hover-bg$kendo-card-header-bg null
Description
The background color of the hovered RadioButton.
+
Description
The background color of the Popover header.
$kendo-radio-hover-textNull$kendo-checkbox-hover-textnull$kendo-popover-header-borderColor$kendo-card-header-border#cacaca
Description
The color of the hovered RadioButton.
+
Description
The border color of the Popover header.
$kendo-radio-hover-borderNull$kendo-checkbox-hover-bordernull$kendo-popover-body-padding-xNumber$kendo-card-body-padding-x16px
Description
The border color of the hovered RadioButton.
+
Description
The horizontal padding of the Popover body.
$kendo-radio-checked-bgColor$kendo-checkbox-checked-bg#f35800$kendo-popover-body-padding-yNumber$kendo-card-body-padding-y16px
Description
The background color of the checked RadioButton.
+
Description
The vertical padding of the Popover body.
$kendo-radio-checked-textColor$kendo-checkbox-checked-textwhite$kendo-popover-actions-border-widthNumber$kendo-popover-border-width1px
Description
The color of the checked RadioButton.
+
Description
The border width of the Popover actions.
$kendo-radio-checked-borderColor$kendo-checkbox-checked-border#f35800$kendo-popover-callout-widthNumber$kendo-card-callout-width20px
Description
The border color of the checked RadioButton.
+
Description
The width of the Popover callout.
$kendo-radio-focus-borderNull$kendo-checkbox-focus-bordernull$kendo-popover-callout-heightNumber$kendo-card-callout-height20px
Description
The border color of the focused RadioButton.
+
Description
The height of the Popover callout.
$kendo-radio-focus-shadowList$kendo-checkbox-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.06)$kendo-popover-callout-border-widthNumber$kendo-popover-border-width1px
Description
The box shadow of the focused RadioButton.
+
Description
The border width of the Popover callout.
$kendo-radio-focus-checked-borderNull$kendo-checkbox-focus-checked-bordernull$kendo-popover-callout-border-styleString$kendo-popover-border-stylesolid
Description
The border color of the focused and checked RadioButton.
+
Description
The border style of the Popover callout.
$kendo-radio-focus-checked-shadowList$kendo-checkbox-focus-checked-shadow0 0 0 2px rgba(243, 88, 0, 0.3)$kendo-popover-callout-bgColor$kendo-popover-bg#ffffff
Description
The box shadow of the focused and checked RadioButton.
+
Description
The background color of the Popover callout.
$kendo-radio-disabled-bgNull$kendo-checkbox-disabled-bgnull$kendo-popover-callout-borderColor$kendo-popover-border#cacaca
Description
The background color of the disabled RadioButton.
+
Description
The border color of the Popover callout.
$kendo-radio-disabled-text
+ +### Popup + + + + + + + + + + + + + + + + + + - + - - + - + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-popup-padding-x Null$kendo-checkbox-disabled-textnull null
Description
The color of the disabled RadioButton.
+
Description
Horizontal padding of the popup.
$kendo-radio-disabled-border$kendo-popup-padding-y Null$kendo-checkbox-disabled-bordernull null
Description
The border color of the disabled RadioButton.
+
Description
Vertical padding of the popup.
$kendo-radio-disabled-checked-bgNull$kendo-checkbox-disabled-checked-bgnull$kendo-popup-border-widthNumber1px1px
Description
The background color of the disabled and checked RadioButton.
+
Description
Width of the border around the popup.
$kendo-radio-disabled-checked-text$kendo-popup-border-radius Null$kendo-checkbox-disabled-checked-textnull null
Description
The color of the disabled and checked RadioButton.
+
Description
Border radius of the popup.
$kendo-radio-disabled-checked-borderNull$kendo-checkbox-disabled-checked-bordernull$kendo-popup-font-sizeNumber$kendo-font-size-md14px
Description
The border color of disabled and checked RadioButton.
+
Description
Font size of the popup.
$kendo-radio-invalid-bgNull$kendo-checkbox-invalid-bgnull$kendo-popup-line-heightNumber$kendo-line-height-md1.4285714286
Description
The background color of the invalid RadioButton.
+
Description
Line height of the popup.
$kendo-radio-invalid-textColor$kendo-checkbox-invalid-text#d92800$kendo-popup-content-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The color of the invalid RadioButton.
+
Description
Horizontal padding of the popup content.
$kendo-radio-invalid-borderColor$kendo-checkbox-invalid-border#d92800$kendo-popup-content-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The border color of the invalid RadioButton.
+
Description
Vertical padding of the popup content.
$kendo-radio-indicator-typeStringimageimage$kendo-popup-bgColor$kendo-component-bg#ffffff
Description
The type of the RadioButton indicator.
+
Description
Background color of the popup.
$kendo-radio-glyph-font-familyList"WebComponentsIcons", monospace"WebComponentsIcons", monospace$kendo-popup-textColor$kendo-component-text#272727
Description
The font family of the RadioButton indicator glyph.
+
Description
Text color of the popup.
$kendo-radio-checked-glyphString"\e308""\e308"$kendo-popup-borderColor$kendo-component-border#cacaca
Description
The glyph of the RadioButton indicator.
+
Description
Border color of the popup.
$kendo-radio-checked-image$kendo-popup-shadow Stringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='white'/%3e%3c/svg%3e")k-elevation(4)var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The image of the checked RadioButton indicator.
+
Description
Box shadow of the popup.
$kendo-radio-disabled-checked-imageNullnullnull
+ +### Progressbar + + + + + + + + + + + + + + + + + + + + + - - + - - + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - + - - + + - - -
NameTypeDefault valueComputed value
$kendo-progressbar-heightNumber22px22px
Description
The image of the disabled and checked RadioButton indicator.
+
Description
The height of the ProgressBar.
$kendo-radio-label-margin-x$kendo-progressbar-horizontal-width Numberk-map-get( $kendo-spacing, 1 )4px100%100%
Description
The horizontal margin of the RadioButton inside of a label.
+
Description
The horizontal width of the ProgressBar.
$kendo-radio-list-spacingNumberk-map-get( $kendo-spacing, 4 )16px$kendo-progressbar-animation-timingList1s linear infinite1s linear infinite
Description
The horizontal list item margin of the RadioButton.
+
Description
The animation timing of the ProgressBar.
$kendo-radio-list-item-padding-x$kendo-progressbar-border-width Number 0px 0px
Description
The horizontal list item padding of the RadioButton.
+
Description
The width of the border around the ProgressBar.
$kendo-radio-list-item-padding-yNumber$kendo-list-md-item-padding-y4px$kendo-progressbar-font-familyString$kendo-font-familyinherit
Description
The vertical list item padding of the RadioButton.
+
Description
The font family of the ProgressBar.
$kendo-radio-ripple-bgColor$kendo-radio-checked-bg#f35800$kendo-progressbar-font-sizeNumber$kendo-font-size-sm12px
Description
The background color of the RadioButton ripple.
+
Description
The font size of the ProgressBar.
$kendo-radio-ripple-opacity$kendo-progressbar-line-height Number.250.2511
Description
The opacity of the RadioButton ripple.
+
Description
The line height of the ProgressBar.
- -### Rating - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-rating-font-familyString$kendo-font-familyinherit
$kendo-progressbar-bgColorif($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-component-bg, 1 ))#ebebeb
Description
The font family of the Rating.
+
Description
The background color of the ProgressBar.
$kendo-rating-font-sizeNumber$kendo-font-size-md14px$kendo-progressbar-textColor$kendo-component-text#272727
Description
The font size of the Rating.
+
Description
The text color of the ProgressBar.
$kendo-rating-line-heightNumber$kendo-line-height-md1.4285714286$kendo-progressbar-borderColor$kendo-component-border#cacaca
Description
The line height of the Rating.
+
Description
The border color of the ProgressBar.
$kendo-rating-container-margin-xNumber$kendo-padding-sm-x4px$kendo-progressbar-gradientNullnullnull
Description
The horizontal margin of the Rating container.
+
Description
The background gradient of the ProgressBar.
$kendo-rating-item-padding-xNumber$kendo-padding-sm-x4px$kendo-progressbar-value-bgColor$kendo-color-primary#f35800
Description
The horizontal padding of the Rating item.
+
Description
The progress background color of the ProgressBar.
$kendo-rating-item-padding-yNumber$kendo-padding-md-y4px$kendo-progressbar-value-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-progressbar-value-bg ))white
Description
The vertical padding of the Rating item.
+
Description
The progress text color of the ProgressBar.
$kendo-rating-label-margin-xNumber$kendo-padding-md-x8px$kendo-progressbar-value-borderColorif($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-progressbar-value-bg ))#e05100
Description
The horizontal margin of the Rating label.
+
Description
The progress border color of the ProgressBar.
$kendo-rating-label-margin-yNumber$kendo-padding-md-y4px$kendo-progressbar-value-gradientNullnullnull
Description
The vertical margin of the Rating label.
+
Description
The progress background gradient of the ProgressBar.
$kendo-rating-label-line-heightNumber$kendo-line-height-lg1.5$kendo-progressbar-indeterminate-bgColor$kendo-progressbar-bg#ebebeb
Description
The line height of the Rating label.
+
Description
The background color of the indeterminate ProgressBar.
$kendo-rating-icon-text$kendo-progressbar-indeterminate-text Color$kendo-component-text$kendo-progressbar-text #272727
Description
The text color of the Rating icon.
+
Description
The text color of the indeterminate ProgressBar.
$kendo-rating-icon-selected-text$kendo-progressbar-indeterminate-border Color$kendo-selected-bg#f35800$kendo-progressbar-border#cacaca
Description
The text color of the selected Rating icon.
+
Description
The border color of the indeterminate ProgressBar.
$kendo-rating-icon-hover-textColor$kendo-selected-bg#f35800$kendo-progressbar-indeterminate-gradientNullnullnull
Description
The text color of the hovered Rating icon.
+
Description
The background gradient of the indeterminate ProgressBar.
$kendo-rating-icon-focus-text$kendo-progressbar-chunk-border Color$kendo-selected-bg#f35800$kendo-body-bg#ffffff
Description
The text color of the focused Rating icon.
+
Description
The border color of the chunk ProgressBar.
$kendo-rating-icon-focus-shadowList0 2px 4px rgba( black, .1 )0 2px 4px rgba(0, 0, 0, 0.1)$kendo-circular-progressbar-arc-strokeColor$kendo-color-primary#f35800
Description
The shadow of the focused Rating icon.
+
Description
The arc stroke color of the circular ProgressBar.
$kendo-rating-icon-focus-selected-shadowList0 2px 4px rgba( black, .1)0 2px 4px rgba(0, 0, 0, 0.1)$kendo-circular-progressbar-scale-strokeColor$kendo-progressbar-bg#ebebeb
Description
The shadow of the focused and selected Rating icon.
+
Description
The scale stroke background color of the circular ProgressBar.
-### Scrollview +### Prompt @@ -14153,369 +14327,2849 @@ The following table lists the available variables for customizing the Classic th - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
$kendo-scrollview-border-widthNumber1px1px$kendo-prompt-textColor$kendo-component-text#272727
Description
The width of the border around the ScrollView.
+
Description
The text color of the Prompt.
$kendo-scrollview-font-familyString$kendo-font-familyinherit$kendo-prompt-bgColor$kendo-component-bg#ffffff
Description
The font family of the ScrollView.
+
Description
The background color of the Prompt.
$kendo-scrollview-font-sizeNumber$kendo-font-size-md14px$kendo-prompt-borderColor$kendo-component-border#cacaca
Description
The font size of the ScrollView.
+
Description
The border color of the Prompt.
$kendo-scrollview-line-heightNumber$kendo-line-height-md1.4285714286$kendo-prompt-header-textColor$kendo-component-header-text#272727
Description
The text color of the Prompt header.
+
$kendo-prompt-header-bgColor$kendo-component-bg#ffffff
Description
The background color of the Prompt header.
+
$kendo-prompt-header-borderColor$kendo-component-header-border#cacaca
Description
The border color of the Prompt header.
+
$kendo-prompt-content-padding-yNumberk-map-get( $kendo-spacing, 4 )16px
Description
The vertical padding of the Prompt content.
+
$kendo-prompt-content-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the Prompt content.
+
$kendo-prompt-content-spacingNumberk-map-get( $kendo-spacing, 4 )16px
Description
The spacing between the items of the Prompt content.
+
$kendo-prompt-content-textColor$kendo-component-header-text#272727
Description
The text color of the Prompt content.
+
$kendo-prompt-content-bgColor$kendo-component-header-bg#f0f0f0
Description
The background color of the Prompt content.
+
$kendo-prompt-content-borderColor$kendo-component-header-border#cacaca
Description
The text border of the Prompt content.
+
$kendo-prompt-expander-spacingNumberk-map-get( $kendo-spacing, 2 )8px
Description
The spacing between the items of the Prompt content expander.
+
$kendo-prompt-suggestion-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The vertical padding of the Prompt suggestion container.
+
$kendo-prompt-suggestion-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the Prompt suggestion container.
+
$kendo-prompt-suggestion-border-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the Prompt suggestion container.
+
$kendo-prompt-suggestion-textColor$kendo-component-text#272727
Description
The text color of the Prompt suggestion container.
+
$kendo-prompt-suggestion-bgColor$kendo-body-bg#ffffff
Description
The background color of the Prompt suggestion container.
+
$kendo-prompt-suggestion-borderColor$kendo-component-border#cacaca
Description
The border color of the Prompt suggestion container.
+
$kendo-prompt-suggestion-shadowStringk-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The elevation of the Prompt suggestion container.
+
+ +### Radio + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-radio-radiusNumber50%50%
Description
The border radius of the RadioButton.
+
$kendo-radio-border-widthNumber1px1px
Description
The border width of the RadioButton.
+
$kendo-radio-sm-sizeNumberk-map-get( $kendo-spacing, 3 )12px
Description
The size of a small RadioButton.
+
$kendo-radio-md-sizeNumberk-map-get( $kendo-spacing, 4 )16px
Description
The size of a medium RadioButton.
+
$kendo-radio-lg-sizeNumberk-map-get( $kendo-spacing, 5 )20px
Description
The size of a large RadioButton.
+
$kendo-radio-sm-glyph-sizeNumberk-map-get( $kendo-spacing, 2.5 )10px
Description
The glyph size of a small RadioButton.
+
$kendo-radio-md-glyph-sizeNumberk-map-get( $kendo-spacing, 3.5 )14px
Description
The glyph size of a medium RadioButton.
+
$kendo-radio-lg-glyph-sizeNumberk-map-get( $kendo-spacing, 4.5 )18px
Description
The glyph size of a large RadioButton.
+
$kendo-radio-sm-ripple-sizeNumber300%300%
Description
The ripple size of a small RadioButton.
+
$kendo-radio-md-ripple-sizeNumber300%300%
Description
The ripple size of a medium RadioButton.
+
$kendo-radio-lg-ripple-sizeNumber300%300%
Description
The ripple size of a large RadioButton.
+
$kendo-radio-sizesMap( + sm: ( + size: $kendo-radio-sm-size, + glyph-size: $kendo-radio-sm-glyph-size, + ripple-size: $kendo-radio-sm-ripple-size + ), + md: ( + size: $kendo-radio-md-size, + glyph-size: $kendo-radio-md-glyph-size, + ripple-size: $kendo-radio-md-ripple-size + ), + lg: ( + size: $kendo-radio-lg-size, + glyph-size: $kendo-radio-lg-glyph-size, + ripple-size: $kendo-radio-lg-ripple-size + ) +)(sm: (size: 12px, glyph-size: 10px, ripple-size: 300%), md: (size: 16px, glyph-size: 14px, ripple-size: 300%), lg: (size: 20px, glyph-size: 18px, ripple-size: 300%))
Description
The map with the different RadioButton sizes.
+
$kendo-radio-bgColor$kendo-checkbox-bg#ffffff
Description
The background color of the RadioButton.
+
$kendo-radio-textNull$kendo-checkbox-textnull
Description
The color of the RadioButton.
+
$kendo-radio-borderColor$kendo-checkbox-border#cacaca
Description
The border color of the RadioButton.
+
$kendo-radio-hover-bgNull$kendo-checkbox-hover-bgnull
Description
The background color of the hovered RadioButton.
+
$kendo-radio-hover-textNull$kendo-checkbox-hover-textnull
Description
The color of the hovered RadioButton.
+
$kendo-radio-hover-borderNull$kendo-checkbox-hover-bordernull
Description
The border color of the hovered RadioButton.
+
$kendo-radio-checked-bgColor$kendo-checkbox-checked-bg#f35800
Description
The background color of the checked RadioButton.
+
$kendo-radio-checked-textColor$kendo-checkbox-checked-textwhite
Description
The color of the checked RadioButton.
+
$kendo-radio-checked-borderColor$kendo-checkbox-checked-border#f35800
Description
The border color of the checked RadioButton.
+
$kendo-radio-focus-borderNull$kendo-checkbox-focus-bordernull
Description
The border color of the focused RadioButton.
+
$kendo-radio-focus-shadowList$kendo-checkbox-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.06)
Description
The box shadow of the focused RadioButton.
+
$kendo-radio-focus-checked-borderNull$kendo-checkbox-focus-checked-bordernull
Description
The border color of the focused and checked RadioButton.
+
$kendo-radio-focus-checked-shadowList$kendo-checkbox-focus-checked-shadow0 0 0 2px rgba(243, 88, 0, 0.3)
Description
The box shadow of the focused and checked RadioButton.
+
$kendo-radio-disabled-bgNull$kendo-checkbox-disabled-bgnull
Description
The background color of the disabled RadioButton.
+
$kendo-radio-disabled-textNull$kendo-checkbox-disabled-textnull
Description
The color of the disabled RadioButton.
+
$kendo-radio-disabled-borderNull$kendo-checkbox-disabled-bordernull
Description
The border color of the disabled RadioButton.
+
$kendo-radio-disabled-checked-bgNull$kendo-checkbox-disabled-checked-bgnull
Description
The background color of the disabled and checked RadioButton.
+
$kendo-radio-disabled-checked-textNull$kendo-checkbox-disabled-checked-textnull
Description
The color of the disabled and checked RadioButton.
+
$kendo-radio-disabled-checked-borderNull$kendo-checkbox-disabled-checked-bordernull
Description
The border color of disabled and checked RadioButton.
+
$kendo-radio-invalid-bgNull$kendo-checkbox-invalid-bgnull
Description
The background color of the invalid RadioButton.
+
$kendo-radio-invalid-textColor$kendo-checkbox-invalid-text#d92800
Description
The color of the invalid RadioButton.
+
$kendo-radio-invalid-borderColor$kendo-checkbox-invalid-border#d92800
Description
The border color of the invalid RadioButton.
+
$kendo-radio-indicator-typeStringimageimage
Description
The type of the RadioButton indicator.
+
$kendo-radio-glyph-font-familyList"WebComponentsIcons", monospace"WebComponentsIcons", monospace
Description
The font family of the RadioButton indicator glyph.
+
$kendo-radio-checked-glyphString"\e308""\e308"
Description
The glyph of the RadioButton indicator.
+
$kendo-radio-checked-imageStringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='white'/%3e%3c/svg%3e")
Description
The image of the checked RadioButton indicator.
+
$kendo-radio-disabled-checked-imageNullnullnull
Description
The image of the disabled and checked RadioButton indicator.
+
$kendo-radio-label-margin-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal margin of the RadioButton inside of a label.
+
$kendo-radio-list-spacingNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal list item margin of the RadioButton.
+
$kendo-radio-list-item-padding-xNumber0px0px
Description
The horizontal list item padding of the RadioButton.
+
$kendo-radio-list-item-padding-yNumber$kendo-list-md-item-padding-y4px
Description
The vertical list item padding of the RadioButton.
+
$kendo-radio-ripple-bgColor$kendo-radio-checked-bg#f35800
Description
The background color of the RadioButton ripple.
+
$kendo-radio-ripple-opacityNumber.250.25
Description
The opacity of the RadioButton ripple.
+
+ +### Rating + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-rating-font-familyString$kendo-font-familyinherit
Description
The font family of the Rating.
+
$kendo-rating-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Rating.
+
$kendo-rating-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the Rating.
+
$kendo-rating-container-margin-xNumber$kendo-padding-sm-x4px
Description
The horizontal margin of the Rating container.
+
$kendo-rating-item-padding-xNumber$kendo-padding-sm-x4px
Description
The horizontal padding of the Rating item.
+
$kendo-rating-item-padding-yNumber$kendo-padding-md-y4px
Description
The vertical padding of the Rating item.
+
$kendo-rating-label-margin-xNumber$kendo-padding-md-x8px
Description
The horizontal margin of the Rating label.
+
$kendo-rating-label-margin-yNumber$kendo-padding-md-y4px
Description
The vertical margin of the Rating label.
+
$kendo-rating-label-line-heightNumber$kendo-line-height-lg1.5
Description
The line height of the Rating label.
+
$kendo-rating-icon-textColor$kendo-component-text#272727
Description
The text color of the Rating icon.
+
$kendo-rating-icon-selected-textColor$kendo-selected-bg#f35800
Description
The text color of the selected Rating icon.
+
$kendo-rating-icon-hover-textColor$kendo-selected-bg#f35800
Description
The text color of the hovered Rating icon.
+
$kendo-rating-icon-focus-textColor$kendo-selected-bg#f35800
Description
The text color of the focused Rating icon.
+
$kendo-rating-icon-focus-shadowList0 2px 4px rgba( black, .1 )0 2px 4px rgba(0, 0, 0, 0.1)
Description
The shadow of the focused Rating icon.
+
$kendo-rating-icon-focus-selected-shadowList0 2px 4px rgba( black, .1)0 2px 4px rgba(0, 0, 0, 0.1)
Description
The shadow of the focused and selected Rating icon.
+
+ +### Scrollview + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-scrollview-border-widthNumber1px1px
Description
The width of the border around the ScrollView.
+
$kendo-scrollview-font-familyString$kendo-font-familyinherit
Description
The font family of the ScrollView.
+
$kendo-scrollview-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the ScrollView.
+
$kendo-scrollview-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the ScrollView.
+
$kendo-scrollview-textColor$kendo-component-text#272727
Description
The text color of the ScrollView.
+
$kendo-scrollview-bgColor$kendo-component-bg#ffffff
Description
The background color of the ScrollView.
+
$kendo-scrollview-borderColor$kendo-component-border#cacaca
Description
The border color of the ScrollView.
+
$kendo-scrollview-pagebutton-sizeNumber10px10px
Description
The size of the ScrollView page button.
+
$kendo-scrollview-pagebutton-bgColor$kendo-button-bg#f0f0f0
Description
The background color of the ScrollView page button.
+
$kendo-scrollview-pagebutton-borderColor$kendo-button-border#cacaca
Description
The border color of the ScrollView page button.
+
$kendo-scrollview-pagebutton-primary-bgColor$kendo-color-primary#f35800
Description
The primary background color of the ScrollView page button.
+
$kendo-scrollview-pagebutton-primary-borderColorif($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-color-primary, 2 ))#cc4a00
Description
The primary border color of the ScrollView page button.
+
$kendo-scrollview-pagebutton-shadowList0 0 0 2px rgba( black, .13 )0 0 0 2px rgba(0, 0, 0, 0.13)
Description
The box shadow of the ScrollView page button.
+
$kendo-scrollview-pager-offsetNumber00
Description
The offset of the ScrollView pager.
+
$kendo-scrollview-pager-item-spacingNumber20px20px
Description
The spacing between the ScrollView pager items.
+
$kendo-scrollview-pager-item-border-widthNumber0px0px
Description
The border width of the ScrollView pager items.
+
$kendo-scrollview-pager-heightCalculationcalc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + #{$kendo-scrollview-pager-item-spacing * 2} )calc(10px + 0px + 40px)
Description
The height of the ScrollView pager.
+
$kendo-scrollview-arrow-tap-highlight-colorColor$kendo-color-rgba-transparentrgba(0, 0, 0, 0)
Description
The text color of the highlight over the tapped ScrollView navigation arrows.
+
$kendo-scrollview-navigation-colorColorwhitewhite
Description
The color of the ScrollView navigation arrows.
+
$kendo-scrollview-navigation-icon-shadowListrgba( black, .3 ) 0 0 15pxrgba(0, 0, 0, 0.3) 0 0 15px
Description
The box shadow of the ScrollView navigation arrows.
+
$kendo-scrollview-navigation-bgColorrgba( black, 0 )rgba(0, 0, 0, 0)
Description
The background color of the ScrollView navigation.
+
$kendo-scrollview-navigation-default-opacityNumber.70.7
Description
The opacity of the ScrollView navigation.
+
$kendo-scrollview-navigation-hover-opacityNumber11
Description
The hover opacity of the ScrollView navigation.
+
$kendo-scrollview-navigation-hover-span-bgNullnullnull
Description
The hover background color of the ScrollView navigation arrows.
+
$kendo-scrollview-light-bgColorrgba( white, .4 )rgba(255, 255, 255, 0.4)
Description
The background color of the ScrollView pager in light mode.
+
$kendo-scrollview-dark-bgColorrgba( black, .4 )rgba(0, 0, 0, 0.4)
Description
The background color of the ScrollView pager in dark mode.
+
$kendo-scrollview-transition-durationNumber.3s0.3s
Description
The duration of the ScrollView transition.
+
$kendo-scrollview-transition-timing-functionStringease-in-outease-in-out
Description
The timing function of the ScrollView transition.
+
+ +### Skeleton + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-skeleton-text-transformStringscale( 1, .6 )scale(1, 0.6)
Description
The transform scale of the Skeleton text.
+
$kendo-skeleton-text-border-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the Skeleton text.
+
$kendo-skeleton-rect-border-radiusNumber00
Description
The border radius of the rectangular Skeleton.
+
$kendo-skeleton-circle-border-radiusNumber9999px9999px
Description
The border radius of the circular Skeleton.
+
$kendo-skeleton-item-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), rgba( $kendo-color-inverse, .2 ))rgba(64, 64, 64, 0.2)
Description
The background color of the Skeleton item.
+
$kendo-skeleton-wave-bgColorrgba( black, .04 )rgba(0, 0, 0, 0.04)
Description
The background color of the Skeleton wave animation.
+
+ +### Split-button + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-split-button-focus-shadowList$kendo-button-focus-shadow0 0 4px 0 rgba(202, 202, 202, 0.75)
Description
The focus shadow of the SplitButton.
+
$kendo-split-button-arrow-padding-xNumber$kendo-button-padding-y4px
Description
The horizontal padding of the arrow Button.
+
$kendo-split-button-sm-arrow-padding-xNumber$kendo-button-sm-padding-y2px
Description
The horizontal padding of the small arrow Button.
+
$kendo-split-button-md-arrow-padding-xNumber$kendo-button-md-padding-y4px
Description
The horizontal padding of the medium arrow Button.
+
$kendo-split-button-lg-arrow-padding-xNumber$kendo-button-lg-padding-y8px
Description
The horizontal padding of the large arrow Button.
+
$kendo-split-button-arrow-padding-yNumber$kendo-button-padding-y4px
Description
The vertical padding of the arrow Button.
+
$kendo-split-button-sm-arrow-padding-yNumber$kendo-button-sm-padding-y2px
Description
The vertical padding of the small arrow Button.
+
$kendo-split-button-md-arrow-padding-yNumber$kendo-button-md-padding-y4px
Description
The vertical padding of the medium arrow Button.
+
$kendo-split-button-lg-arrow-padding-yNumber$kendo-button-lg-padding-y8px
Description
The vertical padding of the large arrow Button.
+
+ +### Splitter + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-splitter-border-widthNumber1px1px
Description
The width of the border around the Splitter.
+
$kendo-splitter-font-familyString$kendo-font-familyinherit
Description
The font family of the Splitter.
+
$kendo-splitter-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Splitter.
+
$kendo-splitter-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the Splitter.
+
$kendo-splitter-bgColor$kendo-component-bg#ffffff
Description
The background color of the Splitter.
+
$kendo-splitter-textColor$kendo-component-text#272727
Description
The text color of the Splitter.
+
$kendo-splitter-borderColor$kendo-component-border#cacaca
Description
The border color of the Splitter.
+
$kendo-splitter-splitbar-sizeNumberk-map-get( $kendo-spacing, 3 )12px
Description
The size of the Splitter splitbar.
+
$kendo-splitter-drag-handle-lengthNumber20px20px
Description
The length of the Splitter drag handle.
+
$kendo-splitter-drag-handle-thicknessNumber2px2px
Description
The thickness of the Splitter drag handle.
+
$kendo-splitter-drag-icon-marginNumber7px7px
Description
The margin of the Splitter drag handle icon.
+
$kendo-splitter-collapse-icon-padding-xNullnullnull
Description
The horizontal padding of the collapse icon in the Splitter.
+
$kendo-splitter-collapse-icon-padding-yNumberk-map-get( $kendo-spacing, .5 )2px
Description
The vertical padding of the collapse icon in the Splitter.
+
$kendo-splitbar-bgColor$kendo-base-bg#f0f0f0
Description
The background color of the Splitter splitbar.
+
$kendo-splitbar-textColor$kendo-base-text#272727
Description
The text color of the Splitter splitbar.
+
$kendo-splitbar-hover-bgColorif($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-splitbar-bg, .5 ))#e6e6e6
Description
The hover background color of the Splitter splitbar.
+
$kendo-splitbar-hover-textColor$kendo-splitbar-text#272727
Description
The hover text color of the Splitter splitbar.
+
$kendo-splitbar-selected-bgColor$kendo-selected-bg#f35800
Description
The selected background color of the Splitter splitbar.
+
$kendo-splitbar-selected-textColor$kendo-selected-textwhite
Description
The selected text color of the Splitter splitbar.
+
+ +### Stepper + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-stepper-margin-xNullnullnull
Description
The horizontal margin the Stepper.
+
$kendo-stepper-margin-yNullnullnull
Description
The vertical margin the Stepper.
+
$kendo-stepper-padding-xNullnullnull
Description
The horizontal padding the Stepper.
+
$kendo-stepper-padding-yNullnullnull
Description
The vertical padding the Stepper.
+
$kendo-stepper-label-margin-xNumber12px12px
Description
The horizontal margin the Stepper label.
+
$kendo-stepper-label-padding-xNumber12px12px
Description
The horizontal padding the Stepper label.
+
$kendo-stepper-label-padding-yNumber5px5px
Description
The vertical padding the Stepper label.
+
$kendo-stepper-border-widthNumber0px0px
Description
The width of the border around the Stepper.
+
$kendo-stepper-inline-content-padding-xNumber20px20px
Description
The horizontal padding the Stepper content.
+
$kendo-stepper-inline-content-padding-yNumber10px10px
Description
The vertical padding the Stepper content.
+
$kendo-stepper-font-sizeNumber$kendo-font-size-md14px
+
$kendo-stepper-line-heightNumber$kendo-line-height-md1.4285714286
+
$kendo-stepper-font-familyString$kendo-font-familyinherit
+
$kendo-stepper-bgNullnullnull
Description
The background color of the Stepper.
+
$kendo-stepper-textColor$kendo-component-text#272727
Description
The text color of the Stepper.
+
$kendo-stepper-borderNullnullnull
Description
The border color of the Stepper.
+
$kendo-stepper-indicator-widthNumber28px28px
Description
The width of the Stepper indicator.
+
$kendo-stepper-indicator-heightNumber$kendo-stepper-indicator-width28px
Description
The height of the Stepper indicator.
+
$kendo-stepper-indicator-border-widthNumber1px1px
Description
The border width of the Stepper indicator.
+
$kendo-stepper-indicator-border-radiusNumber50%50%
Description
The border radius of the Stepper indicator.
+
$kendo-stepper-indicator-focus-border-widthNumber1px1px
Description
The border width of the focused Stepper indicator.
+
$kendo-stepper-indicator-focus-sizeNumber2px2px
Description
The size of the focused Stepper indicator.
+
$kendo-stepper-indicator-focus-offsetNumber3px3px
Description
The offset of the Stepper focused indicator.
+
$kendo-stepper-indicator-focus-calc-offsetCalculationcalc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} )calc(1px + 3px)
Description
The calculated offset of the focused Stepper indicator.
+
$kendo-stepper-indicator-bgColor$kendo-component-bg#ffffff
Description
The background color of the Stepper indicator.
+
$kendo-stepper-indicator-textColor$kendo-component-text#272727
Description
The text color of the Stepper indicator.
+
$kendo-stepper-indicator-borderColor$kendo-component-border#cacaca
Description
The border color of the Stepper indicator.
+
$kendo-stepper-indicator-hover-bgColorif($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-stepper-indicator-bg ))#ebebeb
Description
The background color of the hovered Stepper indicator.
+
$kendo-stepper-indicator-hover-textNullnullnull
Description
The text color of the hovered Stepper indicator.
+
$kendo-stepper-indicator-hover-borderNullnullnull
Description
The border color of the hovered Stepper indicator.
+
$kendo-stepper-indicator-disabled-bgNullnullnull
Description
The background color of the disabled Stepper indicator.
+
$kendo-stepper-indicator-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text)#8d8d8d
Description
The text color of the disabled Stepper indicator.
+
$kendo-stepper-indicator-disabled-borderNullnullnull
Description
The border color of the disabled Stepper indicator.
+
$kendo-stepper-indicator-done-bgColor$kendo-color-primary#f35800
Description
The background color of the Stepper done indicator.
+
$kendo-stepper-indicator-done-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg ))white
Description
The text color of the Stepper done indicator.
+
$kendo-stepper-indicator-done-borderColor$kendo-stepper-indicator-done-bg#f35800
Description
The border color of the Stepper done indicator.
+
$kendo-stepper-indicator-done-hover-bgColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg ))#e05100
Description
The background color of the hovered Stepper done indicator.
+
$kendo-stepper-indicator-done-hover-textNullnullnull
Description
The text color of the hovered Stepper done indicator.
+
$kendo-stepper-indicator-done-hover-borderNullnullnull
Description
The border color of the hovered Stepper done indicator.
+
$kendo-stepper-indicator-done-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .6 ), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60% ))#f89b66
Description
The background color of the disabled Stepper done indicator.
+
$kendo-stepper-indicator-done-disabled-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg ))white
Description
The text color of the disabled Stepper done indicator.
+
$kendo-stepper-indicator-done-disabled-borderColor$kendo-stepper-indicator-done-disabled-bg#f89b66
Description
The border color of the disabled Stepper done indicator.
+
$kendo-stepper-indicator-current-bgColor$kendo-stepper-indicator-done-bg#f35800
Description
The background color of the Stepper current indicator.
+
$kendo-stepper-indicator-current-textColor$kendo-stepper-indicator-done-textwhite
Description
The text color of the Stepper current indicator.
+
$kendo-stepper-indicator-current-borderColor$kendo-stepper-indicator-done-border#f35800
Description
The border color of the Stepper current indicator.
+
$kendo-stepper-indicator-current-hover-bgColor$kendo-stepper-indicator-done-hover-bg#e05100
Description
The background color of the hovered Stepper current indicator.
+
$kendo-stepper-indicator-current-hover-textNull$kendo-stepper-indicator-done-hover-textnull
Description
The text color of the hovered Stepper current indicator.
+
$kendo-stepper-indicator-current-hover-borderNull$kendo-stepper-indicator-done-hover-bordernull
Description
The border color of the hovered Stepper current indicator.
+
$kendo-stepper-indicator-current-disabled-bgColor$kendo-stepper-indicator-done-disabled-bg#f89b66
Description
The background color of the disabled Stepper current indicator.
+
$kendo-stepper-indicator-current-disabled-textColor$kendo-stepper-indicator-done-disabled-textwhite
Description
The text color of the disabled Stepper current indicator.
+
$kendo-stepper-indicator-current-disabled-borderColor$kendo-stepper-indicator-done-disabled-border#f89b66
Description
The border color of the disabled Stepper current indicator.
+
$kendo-stepper-label-textNullnullnull
Description
The text color of the Stepper label.
+
$kendo-stepper-label-success-textColor$kendo-color-success#3ea44e
Description
The success text color of the Stepper label.
+
$kendo-stepper-label-error-textColor$kendo-color-error#d92800
Description
The error text color of the Stepper label.
+
$kendo-stepper-label-hover-textNullnullnull
Description
The text color of the hovered Stepper label.
+
$kendo-stepper-label-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text)#8d8d8d
Description
The text color of the disabled Stepper label.
+
$kendo-stepper-optional-label-textColor$kendo-subtle-text#646464
Description
The text color of the Stepper optional label.
+
$kendo-stepper-optional-label-opacityNullnullnull
Description
The opacity of the Stepper optional label.
+
$kendo-stepper-optional-label-font-sizeNumber$kendo-font-size-sm12px
Description
The font size of the Stepper optional label.
+
$kendo-stepper-optional-label-font-styleNullnullnull
Description
The font style of the Stepper optional label.
+
$kendo-stepper-progressbar-sizeNumber2px2px
Description
The size of the Stepper ProgressBar.
+
$kendo-stepper-progressbar-bgNullnullnull
Description
The background color of the Stepper ProgressBar.
+
$kendo-stepper-progressbar-textNullnullnull
Description
The text color of the Stepper ProgressBar.
+
$kendo-stepper-progressbar-fill-bgNullnullnull
Description
The background color of the selected Stepper ProgressBar.
+
$kendo-stepper-progressbar-fill-textNullnullnull
Description
The text color of the selected Stepper ProgressBar.
+
$kendo-stepper-content-transition-propertyStringheightheight
Description
The property name of the Stepper transition.
+
$kendo-stepper-content-transition-durationNumber300ms300ms
Description
The duration of the Stepper transition.
+
$kendo-stepper-content-transition-timing-functionListcubic-bezier(.4, 0, .2, 1) 0mscubic-bezier(0.4, 0, 0.2, 1) 0ms
Description
The timing function of the Stepper transition.
+
+ +### Switch + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-switch-font-familyNullnullnull
Description
The font family of the Switch.
+
$kendo-switch-track-border-widthNumber1px1px
Description
The border width of the Switch track.
+
$kendo-switch-thumb-border-widthNumber1px1px
Description
The border width of the Switch thumb.
+
$kendo-switch-label-text-transformNullnullnull
Description
The text transform of the Switch label.
+
$kendo-switch-label-displayStringinlineinline
Description
The display of the Switch label.
+
$kendo-switch-sizesMap( + sm: ( font-size: 12px, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: 4px ), + md: ( font-size: 12px, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: 6px ), + lg: ( font-size: 12px, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: 8px ) +)(sm: (font-size: 12px, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: 4px), md: (font-size: 12px, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: 6px), lg: (font-size: 12px, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: 8px))
Description
The map with the different Switch sizes.
+
$kendo-switch-off-track-bgColor$kendo-component-bg#ffffff
Description
The background of the track when the Switch is not checked.
+
$kendo-switch-off-track-textColor$kendo-component-text#272727
Description
The text color of the track when the Switch is not checked.
+
$kendo-switch-off-track-borderColor$kendo-component-border#cacaca
Description
The border color of the track when the Switch is not checked.
+
$kendo-switch-off-track-gradientNullnullnull
Description
The background gradient of the track when the Switch is not checked.
+
$kendo-switch-off-track-hover-bgNullnullnull
Description
The background of the track when the hovered Switch is not checked.
+
$kendo-switch-off-track-hover-textNullnullnull
Description
The text color of the track when the hovered Switch is not checked.
+
$kendo-switch-off-track-hover-borderNullnullnull
Description
The border color of the track when the hovered Switch is not checked.
+
$kendo-switch-off-track-hover-gradientNullnullnull
Description
The background gradient of the track when the hovered Switch is not checked.
+
$kendo-switch-off-track-focus-bgNullnullnull
Description
The background of the track when the focused Switch is not checked.
+
$kendo-switch-off-track-focus-textNullnullnull
Description
The text color of the track when the focused Switch is not checked.
+
$kendo-switch-off-track-focus-borderNullnullnull
Description
The border color of the track when the focused Switch is not checked.
+
$kendo-switch-off-track-focus-gradientNullnullnull
Description
The background gradient of the track when the focused Switch is not checked.
+
$kendo-switch-off-track-focus-ringList0 0 3px 1px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .25 )0 0 3px 1px rgba(0, 0, 0, 0.25)
Description
The ring around the track when the focused Switch is not checked.
+
$kendo-switch-off-track-disabled-bgNullnullnull
Description
The background of the track when the disabled Switch is not checked.
+
$kendo-switch-off-track-disabled-textNullnullnull
Description
The text color of the track when the disabled Switch is not checked.
+
$kendo-switch-off-track-disabled-borderNullnullnull
Description
The border color of the track when the disabled Switch is not checked.
+
$kendo-switch-off-track-disabled-gradientNullnullnull
Description
The background gradient of the track when the disabled Switch is not checked.
+
$kendo-switch-off-thumb-bgColorif($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-switch-off-track-bg ))#ebebeb
Description
The background of the thumb when the Switch is not checked.
+
$kendo-switch-off-thumb-textNullnullnull
Description
The line height of the ScrollView.
+
Description
The text color of the thumb when the Switch is not checked.
$kendo-scrollview-text$kendo-switch-off-thumb-border Color$kendo-component-text#272727$kendo-switch-off-track-border#cacaca
Description
The text color of the ScrollView.
+
Description
The border color of the thumb when the Switch is not checked.
$kendo-scrollview-bgColor$kendo-component-bg#ffffff$kendo-switch-off-thumb-gradientList$kendo-base-gradientrgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)
Description
The background color of the ScrollView.
+
Description
The background gradient of the thumb when the Switch is not checked.
$kendo-scrollview-border$kendo-switch-off-thumb-hover-bg Color$kendo-component-border#cacacaif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-switch-off-thumb-bg ))#d8d8d8
Description
The border color of the ScrollView.
+
Description
The background of the thumb when the hovered Switch is not checked.
$kendo-scrollview-pagebutton-sizeNumber10px10px$kendo-switch-off-thumb-hover-textNullnullnull
Description
The size of the ScrollView page button.
+
Description
The text color of the thumb when the hovered Switch is not checked.
$kendo-scrollview-pagebutton-bg$kendo-switch-off-thumb-hover-border Color$kendo-button-bg#f0f0f0$kendo-switch-off-thumb-border#cacaca
Description
The background color of the ScrollView page button.
+
Description
The border color of the thumb when the hovered Switch is not checked.
$kendo-scrollview-pagebutton-borderColor$kendo-button-border#cacaca$kendo-switch-off-thumb-hover-gradientNullnullnull
Description
The border color of the ScrollView page button.
+
Description
The background gradient of the thumb when the hovered Switch is not checked.
$kendo-scrollview-pagebutton-primary-bg$kendo-switch-on-track-bg Color$kendo-color-primary#f35800$kendo-component-bg#ffffff
Description
The primary background color of the ScrollView page button.
+
Description
The background of the track when the Switch is checked.
$kendo-scrollview-pagebutton-primary-border$kendo-switch-on-track-text Colorif($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-color-primary, 2 ))#cc4a00$kendo-color-primary#f35800
Description
The primary border color of the ScrollView page button.
+
Description
The text color of the track when the Switch is checked.
$kendo-scrollview-pagebutton-shadowList0 0 0 2px rgba( black, .13 )0 0 0 2px rgba(0, 0, 0, 0.13)$kendo-switch-on-track-borderColor$kendo-component-border#cacaca
Description
The box shadow of the ScrollView page button.
+
Description
The border color of the track when the Switch is checked.
$kendo-scrollview-pager-offsetNumber00$kendo-switch-on-track-gradientNullnullnull
Description
The offset of the ScrollView pager.
+
Description
The background gradient of the track when the Switch is checked.
$kendo-scrollview-pager-item-spacingNumber20px20px$kendo-switch-on-track-hover-bgNullnullnull
Description
The spacing between the ScrollView pager items.
+
Description
The background of the track wen the hovered Switch is checked.
$kendo-scrollview-pager-item-border-widthNumber0px0px$kendo-switch-on-track-hover-textNullnullnull
Description
The border width of the ScrollView pager items.
+
Description
The text color of the track wen the hovered Switch is checked.
$kendo-scrollview-pager-heightCalculationcalc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + #{$kendo-scrollview-pager-item-spacing * 2} )calc(10px + 0px + 40px)$kendo-switch-on-track-hover-borderNullnullnull
Description
The height of the ScrollView pager.
+
Description
The border color of the track wen the hovered Switch is checked.
$kendo-scrollview-arrow-tap-highlight-colorColor$kendo-color-rgba-transparentrgba(0, 0, 0, 0)$kendo-switch-on-track-hover-gradientNullnullnull
Description
The text color of the highlight over the tapped ScrollView navigation arrows.
+
Description
The background gradient of the track wen the hovered Switch is checked.
$kendo-scrollview-navigation-colorColorwhitewhite$kendo-switch-on-track-focus-bgNullnullnull
Description
The color of the ScrollView navigation arrows.
+
Description
The background of the track wen the focused Switch is checked.
$kendo-scrollview-navigation-icon-shadowListrgba( black, .3 ) 0 0 15pxrgba(0, 0, 0, 0.3) 0 0 15px$kendo-switch-on-track-focus-textNullnullnull
Description
The box shadow of the ScrollView navigation arrows.
+
Description
The text color of the track wen the focused Switch is checked.
$kendo-scrollview-navigation-bgColorrgba( black, 0 )rgba(0, 0, 0, 0)$kendo-switch-on-track-focus-borderNullnullnull
Description
The background color of the ScrollView navigation.
+
Description
The border color of the track wen the focused Switch is checked.
$kendo-scrollview-navigation-default-opacityNumber.70.7$kendo-switch-on-track-focus-gradientNullnullnull
Description
The opacity of the ScrollView navigation.
+
Description
The background gradient of the track wen the focused Switch is checked.
$kendo-scrollview-navigation-hover-opacityNumber11$kendo-switch-on-track-focus-ringList0 0 3px 1px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .25 )0 0 3px 1px rgba(0, 0, 0, 0.25)
Description
The hover opacity of the ScrollView navigation.
+
Description
The ring around the track wen the focused Switch is checked.
$kendo-scrollview-navigation-hover-span-bg$kendo-switch-on-track-disabled-bg Null null null
Description
The hover background color of the ScrollView navigation arrows.
+
Description
The background of the track when the disabled Switch is checked.
$kendo-scrollview-light-bgColorrgba( white, .4 )rgba(255, 255, 255, 0.4)$kendo-switch-on-track-disabled-textNullnullnull
Description
The background color of the ScrollView pager in light mode.
+
Description
The text color of the track when the disabled Switch is checked.
$kendo-scrollview-dark-bgColorrgba( black, .4 )rgba(0, 0, 0, 0.4)$kendo-switch-on-track-disabled-borderNullnullnull
Description
The background color of the ScrollView pager in dark mode.
+
Description
The border color of the track when the disabled Switch is checked.
$kendo-scrollview-transition-durationNumber.3s0.3s$kendo-switch-on-track-disabled-gradientNullnullnull
Description
The duration of the ScrollView transition.
+
Description
The background gradient of the track when the disabled Switch is checked.
$kendo-scrollview-transition-timing-functionStringease-in-outease-in-out$kendo-switch-on-thumb-bgColor$kendo-color-primary#f35800
Description
The timing function of the ScrollView transition.
+
Description
The background of the thumb when the Switch is checked.
- -### Skeleton - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-skeleton-text-transformStringscale( 1, .6 )scale(1, 0.6)
$kendo-switch-on-thumb-textNullnullnull
Description
The transform scale of the Skeleton text.
+
Description
The text color of the thumb when the Switch is checked.
$kendo-skeleton-text-border-radiusNumber$kendo-border-radius-md4px$kendo-switch-on-thumb-borderColorif($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-switch-on-thumb-bg ))#e05100
Description
The border radius of the Skeleton text.
+
Description
The border color of the thumb when the Switch is checked.
$kendo-skeleton-rect-border-radiusNumber00$kendo-switch-on-thumb-gradientList$kendo-base-gradientrgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)
Description
The border radius of the rectangular Skeleton.
+
Description
The background gradient of the thumb when the Switch is checked.
$kendo-skeleton-circle-border-radiusNumber9999px9999px$kendo-switch-on-thumb-hover-bgColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-switch-on-thumb-bg ))#e05100
Description
The border radius of the circular Skeleton.
+
Description
The background of the thumb when the hovered Switch is checked.
$kendo-skeleton-item-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), rgba( $kendo-color-inverse, .2 ))rgba(64, 64, 64, 0.2)$kendo-switch-on-thumb-hover-textNullnullnull
Description
The background color of the Skeleton item.
+
Description
The text color of the thumb when the hovered Switch is checked.
$kendo-skeleton-wave-bg$kendo-switch-on-thumb-hover-border Colorrgba( black, .04 )rgba(0, 0, 0, 0.04)if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-switch-on-thumb-hover-bg ))#ce4b00
Description
The background color of the Skeleton wave animation.
+
Description
The border color of the thumb when the hovered Switch is checked.
+
$kendo-switch-on-thumb-hover-gradientNullnullnull
Description
The background gradient of the thumb when the hovered Switch is checked.
-### Split-button +### Table @@ -14533,1346 +17187,1422 @@ The following table lists the available variables for customizing the Classic th - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
$kendo-split-button-focus-shadowList$kendo-button-focus-shadow0 0 4px 0 rgba(202, 202, 202, 0.75)$kendo-table-border-widthNumber1px1px
Description
The focus shadow of the SplitButton.
+
Description
The width of the table border.
$kendo-split-button-arrow-padding-x$kendo-table-cell-vertical-border-width Number$kendo-button-padding-y4px1px1px
Description
The horizontal padding of the arrow Button.
+
Description
The width of vertical border of table cells.
$kendo-split-button-sm-arrow-padding-x$kendo-table-cell-horizontal-border-width Number$kendo-button-sm-padding-y2px0px0px
Description
The horizontal padding of the small arrow Button.
+
Description
The width of horizontal border of table cells.
$kendo-split-button-md-arrow-padding-xNumber$kendo-button-md-padding-y4px$kendo-table-font-sizeNullnullnull
Description
The horizontal padding of the medium arrow Button.
+
Description
The font size of the table if no size is specified.
$kendo-split-button-lg-arrow-padding-xNumber$kendo-button-lg-padding-y8px$kendo-table-line-heightNullnullnull
Description
The horizontal padding of the large arrow Button.
+
Description
The line-height of the table if no size is specified.
$kendo-split-button-arrow-padding-yNumber$kendo-button-padding-y4px$kendo-table-cell-padding-xNullnullnull
Description
The vertical padding of the arrow Button.
+
Description
The horizontal padding of the cells in the table if no size is specified.
$kendo-split-button-sm-arrow-padding-yNumber$kendo-button-sm-padding-y2px$kendo-table-cell-padding-yNullnullnull
Description
The vertical padding of the small arrow Button.
+
Description
The vertical padding of the cells in the table if no size is specified.
$kendo-split-button-md-arrow-padding-yNumber$kendo-button-md-padding-y4px$kendo-table-sizesMap( + sm: ( + font-size: $kendo-font-size-md, + line-height: $kendo-line-height-md, + cell-padding-x: $kendo-table-sm-cell-padding-x, + cell-padding-y: $kendo-table-sm-cell-padding-y + ), + md: ( + font-size: $kendo-font-size-md, + line-height: $kendo-line-height-md, + cell-padding-x: $kendo-table-md-cell-padding-x, + cell-padding-y: $kendo-table-md-cell-padding-y + ), + lg: ( + font-size: $kendo-font-size-md, + line-height: $kendo-line-height-md, + cell-padding-x: $kendo-table-lg-cell-padding-x, + cell-padding-y: $kendo-table-lg-cell-padding-y + ) +)(sm: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 4px, cell-padding-y: 4px), md: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 8px, cell-padding-y: 8px), lg: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 8px, cell-padding-y: 10px))
Description
The vertical padding of the medium arrow Button.
+
Description
The sizes of the table.
$kendo-split-button-lg-arrow-padding-yNumber$kendo-button-lg-padding-y8px$kendo-table-bgColor$kendo-component-bg#ffffff
Description
The vertical padding of the large arrow Button.
+
Description
Background color of tables.
- -### Switch - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - + - - + - + - - - - - + + + + - - + - - + - - - - - + + + + - - + - - + - - + - - + - - + - - + - - + + - - - - - + + + + - - + - - + - - - + +
NameTypeDefault valueComputed value
$kendo-switch-font-familyNullnullnull
$kendo-table-textColor$kendo-component-text#272727
Description
The font family of the Switch.
+
Description
Text color of tables.
$kendo-switch-track-border-widthNumber1px1px$kendo-table-borderColor$kendo-component-border#cacaca
Description
The border width of the Switch track.
+
Description
Border color of tables.
$kendo-switch-thumb-border-widthNumber1px1px$kendo-table-header-bgColor$kendo-component-header-bg#f0f0f0
Description
The border width of the Switch thumb.
+
Description
Background color of table headers.
$kendo-switch-label-text-transformNullnullnull$kendo-table-header-textColor$kendo-component-header-text#272727
Description
Text color of table headers.
+
$kendo-table-header-borderColor$kendo-component-header-border#cacaca
Description
Border color of table headers.
+
$kendo-table-header-gradientList$kendo-component-header-gradientrgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)
Description
Gradient of table headers.
+
$kendo-table-footer-bgColor$kendo-table-header-bg#f0f0f0
Description
The text transform of the Switch label.
+
Description
Background color of table footers.
$kendo-switch-label-displayStringinlineinline$kendo-table-footer-textColor$kendo-table-header-text#272727
Description
The display of the Switch label.
+
Description
Text color of table footers.
$kendo-switch-sizesMap( - sm: ( font-size: 12px, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: 4px ), - md: ( font-size: 12px, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: 6px ), - lg: ( font-size: 12px, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: 8px ) -)(sm: (font-size: 12px, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: 4px), md: (font-size: 12px, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: 6px), lg: (font-size: 12px, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: 8px))$kendo-table-footer-borderColor$kendo-table-header-border#cacaca
Description
The map with the different Switch sizes.
+
Description
Border color of table footers.
$kendo-switch-off-track-bg$kendo-table-group-row-bg Color$kendo-component-bg#ffffff$kendo-table-header-bg#f0f0f0
Description
The background of the track when the Switch is not checked.
+
Description
Background color of group rows in table.
$kendo-switch-off-track-text$kendo-table-group-row-text Color$kendo-component-text$kendo-table-header-text #272727
Description
The text color of the track when the Switch is not checked.
+
Description
Text color of group rows in table.
$kendo-switch-off-track-border$kendo-table-group-row-border Color$kendo-component-border$kendo-table-header-border #cacaca
Description
The border color of the track when the Switch is not checked.
+
Description
Border color of group rows in table.
$kendo-switch-off-track-gradientNullnullnull$kendo-table-alt-row-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), k-try-shade( $kendo-table-bg, .5 ))whitesmoke
Description
The background gradient of the track when the Switch is not checked.
+
Description
Background color of alternating rows in table.
$kendo-switch-off-track-hover-bg$kendo-table-alt-row-text Null null null
Description
The background of the track when the hovered Switch is not checked.
+
Description
Text color of alternating rows in table.
$kendo-switch-off-track-hover-text$kendo-table-alt-row-border Null null null
Description
The text color of the track when the hovered Switch is not checked.
+
Description
Border color of alternating rows in table.
$kendo-switch-off-track-hover-borderNullnullnull$kendo-table-hover-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .11 ), k-try-shade( $kendo-table-bg, 1 ))#ebebeb
Description
The border color of the track when the hovered Switch is not checked.
+
Description
Background color of hovered rows in table.
$kendo-switch-off-track-hover-gradient$kendo-table-hover-text Null null null
Description
The background gradient of the track when the hovered Switch is not checked.
+
Description
Text color of hovered rows in table.
$kendo-switch-off-track-focus-bg$kendo-table-hover-border Null null null
Description
The background of the track when the focused Switch is not checked.
+
Description
Border color of hovered rows in table.
$kendo-switch-off-track-focus-text$kendo-table-focus-bg Null null null
Description
The text color of the track when the focused Switch is not checked.
+
Description
Background color of focused rows in table.
$kendo-switch-off-track-focus-border$kendo-table-focus-text Null null null
Description
The border color of the track when the focused Switch is not checked.
+
Description
Text color of focused rows in table.
$kendo-switch-off-track-focus-gradient$kendo-table-focus-border Null null null
Description
The background gradient of the track when the focused Switch is not checked.
+
Description
Border color of focused rows in table.
$kendo-switch-off-track-focus-ring$kendo-table-focus-shadow List0 0 3px 1px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .25 )0 0 3px 1px rgba(0, 0, 0, 0.25)$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The ring around the track when the focused Switch is not checked.
+
Description
Box shadow of focused rows in table.
$kendo-switch-off-track-disabled-bgNullnullnull$kendo-table-selected-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 ))rgba(243, 88, 0, 0.25)
Description
The background of the track when the disabled Switch is not checked.
+
Description
Background color of selected rows in table.
$kendo-switch-off-track-disabled-text$kendo-table-selected-text Null null null
Description
The text color of the track when the disabled Switch is not checked.
+
Description
Text color of selected rows in table.
$kendo-switch-off-track-disabled-border$kendo-table-selected-border Null null null
Description
The border color of the track when the disabled Switch is not checked.
+
Description
Border color of selected rows in table.
$kendo-switch-off-track-disabled-gradient
+ +### Tabstrip + + + + + + + + + + + + + + + + + + - - + - - + + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + - - + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + - - + - - + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-tabstrip-bg Null null null
Description
The background gradient of the track when the disabled Switch is not checked.
+
Description
Background color of tabstrip component
$kendo-switch-off-thumb-bg$kendo-tabstrip-text Colorif($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-switch-off-track-bg ))#ebebeb$kendo-component-text#272727
Description
The background of the thumb when the Switch is not checked.
+
Description
Text color of tabstrip component
$kendo-switch-off-thumb-textNullnullnull$kendo-tabstrip-borderColor$kendo-component-border#cacaca
Description
The text color of the thumb when the Switch is not checked.
+
Description
Border color of tabstrip component
$kendo-switch-off-thumb-border$kendo-tabstrip-item-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
Horizontal padding of tabs
+
$kendo-tabstrip-item-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
Vertical padding of tabs
+
$kendo-tabstrip-item-border-widthNumber1px1px
Description
Width of border around tabs
+
$kendo-tabstrip-item-border-radiusNumber$kendo-border-radius-md4px
Description
Border radius of tabs
+
$kendo-tabstrip-item-gapNumber00
Description
Spacing between tabs
+
$kendo-tabstrip-item-bg Color$kendo-switch-off-track-border$kendo-base-bg#f0f0f0
Description
Background color of tabs
+
$kendo-tabstrip-item-textColor$kendo-base-text#272727
Description
Text color of tabs
+
$kendo-tabstrip-item-borderColor$kendo-base-border #cacaca
Description
The border color of the thumb when the Switch is not checked.
+
Description
Border color of tabs
$kendo-switch-off-thumb-gradient$kendo-tabstrip-item-gradient List $kendo-base-gradient rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)
Description
The background gradient of the thumb when the Switch is not checked.
+
Description
Background gradient of tabs
$kendo-switch-off-thumb-hover-bg$kendo-tabstrip-item-hover-bg Colorif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-switch-off-thumb-bg ))#d8d8d8$kendo-hover-bg#dddddd
Description
The background of the thumb when the hovered Switch is not checked.
+
Description
Background color of hovered tabs
$kendo-switch-off-thumb-hover-textNullnullnull$kendo-tabstrip-item-hover-textColor$kendo-hover-text#272727
Description
The text color of the thumb when the hovered Switch is not checked.
+
Description
Text color of hovered tabs
$kendo-switch-off-thumb-hover-border$kendo-tabstrip-item-hover-border Color$kendo-switch-off-thumb-border#cacaca$kendo-hover-border#bababa
Description
The border color of the thumb when the hovered Switch is not checked.
+
Description
Border color of hovered tabs
$kendo-switch-off-thumb-hover-gradient$kendo-tabstrip-item-hover-gradient Null null null
Description
The background gradient of the thumb when the hovered Switch is not checked.
+
Description
Background gradient of hovered tabs
$kendo-switch-on-track-bg$kendo-tabstrip-item-selected-bg Color $kendo-component-bg #ffffff
Description
The background of the track when the Switch is checked.
+
Description
Background color of selected tabs
$kendo-switch-on-track-text$kendo-tabstrip-item-selected-text Color$kendo-color-primary#f35800$kendo-component-text#272727
Description
The text color of the track when the Switch is checked.
+
Description
Text color of selected tabs
$kendo-switch-on-track-border$kendo-tabstrip-item-selected-border Color $kendo-component-border #cacaca
Description
The border color of the track when the Switch is checked.
+
Description
Border color of selected tabs
$kendo-switch-on-track-gradientNullnullnull$kendo-tabstrip-item-selected-gradientBoolfalsefalse
Description
The background gradient of the track when the Switch is checked.
+
Description
Background gradient of selected tabs
$kendo-switch-on-track-hover-bgNullnullnull$kendo-tabstrip-content-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The background of the track wen the hovered Switch is checked.
+
Description
Horizontal padding of tabstrip content
$kendo-switch-on-track-hover-textNullnullnull$kendo-tabstrip-content-padding-yNumberk-map-get( $kendo-spacing, 4 )16px
Description
The text color of the track wen the hovered Switch is checked.
+
Description
Vertical padding of tabstrip content
$kendo-switch-on-track-hover-borderNullnullnull$kendo-tabstrip-content-border-widthNumber1px1px
Description
The border color of the track wen the hovered Switch is checked.
+
Description
Width of border around tabstrip content
$kendo-switch-on-track-hover-gradientNullnullnull$kendo-tabstrip-content-bgColor$kendo-component-bg#ffffff
Description
The background gradient of the track wen the hovered Switch is checked.
+
Description
Background color of tabstrip content
$kendo-switch-on-track-focus-bgNullnullnull$kendo-tabstrip-content-textColor$kendo-component-text#272727
Description
The background of the track wen the focused Switch is checked.
+
Description
Text color of tabstrip content
$kendo-switch-on-track-focus-textNullnullnull$kendo-tabstrip-content-borderColor$kendo-component-border#cacaca
Description
The text color of the track wen the focused Switch is checked.
+
Description
Border color of tabstrip content
$kendo-switch-on-track-focus-border$kendo-tabstrip-content-focus-borderColor$kendo-component-text#272727
Description
Border color of tabstrip focused content
+
+ +### Taskboard + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - - - - - - - - - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + - - - -
NameTypeDefault valueComputed value
$kendo-taskboard-spacerNumberk-map-get( $kendo-spacing, 4 )16px
Description
The spacing index of the TaskBoard.
+
$kendo-taskboard-padding-y Null null null
Description
The border color of the track wen the focused Switch is checked.
+
Description
The vertical padding of the TaskBoard.
$kendo-switch-on-track-focus-gradient$kendo-taskboard-padding-x Null null null
Description
The background gradient of the track wen the focused Switch is checked.
+
Description
The horizontal of the TaskBoard.
$kendo-switch-on-track-focus-ringList0 0 3px 1px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .25 )0 0 3px 1px rgba(0, 0, 0, 0.25)$kendo-taskboard-font-familyString$kendo-font-familyinherit
Description
The ring around the track wen the focused Switch is checked.
+
Description
The font family of the TaskBoard.
$kendo-switch-on-track-disabled-bgNullnullnull$kendo-taskboard-font-sizeNumber$kendo-font-size-md14px
Description
The background of the track when the disabled Switch is checked.
+
Description
The font size of the TaskBoard.
$kendo-switch-on-track-disabled-textNullnullnull$kendo-taskboard-line-heightNumber$kendo-line-height-md1.4285714286
Description
The text color of the track when the disabled Switch is checked.
+
Description
The line height of the TaskBoard.
$kendo-switch-on-track-disabled-border$kendo-taskboard-bg Null null null
Description
The border color of the track when the disabled Switch is checked.
+
Description
The background color of the TaskBoard.
$kendo-switch-on-track-disabled-gradient$kendo-taskboard-text Null null null
Description
The background gradient of the track when the disabled Switch is checked.
-
$kendo-switch-on-thumb-bgColor$kendo-color-primary#f35800
Description
The background of the thumb when the Switch is checked.
+
Description
The text color of the TaskBoard.
$kendo-switch-on-thumb-text$kendo-taskboard-border Null null null
Description
The text color of the thumb when the Switch is checked.
+
Description
The border color of the TaskBoard.
$kendo-switch-on-thumb-borderColorif($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-switch-on-thumb-bg ))#e05100$kendo-taskboard-toolbar-padding-yNumber$kendo-taskboard-spacer16px
Description
The border color of the thumb when the Switch is checked.
+
Description
The vertical padding of the TaskBoard Toolbar.
$kendo-switch-on-thumb-gradientList$kendo-base-gradientrgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)$kendo-taskboard-toolbar-padding-xNumber$kendo-taskboard-toolbar-padding-y16px
Description
The background gradient of the thumb when the Switch is checked.
+
Description
The horizontal padding of the TaskBoard Toolbar.
$kendo-switch-on-thumb-hover-bgColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-switch-on-thumb-bg ))#e05100$kendo-taskboard-toolbar-bgNullnullnull
Description
The background of the thumb when the hovered Switch is checked.
+
Description
The background color of the TaskBoard Toolbar.
$kendo-switch-on-thumb-hover-text$kendo-taskboard-toolbar-text Null null null
Description
The text color of the thumb when the hovered Switch is checked.
+
Description
The text color of the TaskBoard Toolbar.
$kendo-switch-on-thumb-hover-borderColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-switch-on-thumb-hover-bg ))#ce4b00$kendo-taskboard-toolbar-borderNullnullnull
Description
The border color of the thumb when the hovered Switch is checked.
+
Description
The border color of the TaskBoard Toolbar.
$kendo-switch-on-thumb-hover-gradient$kendo-taskboard-toolbar-gradient Null null null
Description
The background gradient of the thumb when the hovered Switch is checked.
-
- -### Table - - - - - - - - - - - - - - - - - - - - - - - - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + - - - - - + + + + - - - - - + + + + - - + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-table-border-widthNumber1px1px
Description
The width of the table border.
+
Description
The gradient of the TaskBoard Toolbar.
$kendo-table-cell-vertical-border-width$kendo-taskboard-content-padding-y Number1px1px$kendo-taskboard-spacer16px
Description
The width of vertical border of table cells.
+
Description
The vertical padding of the TaskBoard content.
$kendo-table-cell-horizontal-border-width$kendo-taskboard-content-padding-x Number0px0px$kendo-taskboard-content-padding-y16px
Description
The width of horizontal border of table cells.
+
Description
The horizontal padding of the TaskBoard content.
$kendo-table-font-sizeNullnullnull$kendo-taskboard-column-container-spacing-yNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The font size of the table if no size is specified.
+
Description
The vertical spacing of the TaskBoard column container.
$kendo-table-line-heightNullnullnull$kendo-taskboard-column-container-padding-yNumber0px0px
Description
The line-height of the table if no size is specified.
+
Description
The vertical padding of the TaskBoard column container.
$kendo-table-cell-padding-xNullnullnull$kendo-taskboard-column-container-padding-xNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The horizontal padding of the cells in the table if no size is specified.
+
Description
The horizontal padding of the TaskBoard column container.
$kendo-table-cell-padding-yNullnullnull$kendo-taskboard-columns-container-gapNumber$kendo-taskboard-spacer16px
Description
The vertical padding of the cells in the table if no size is specified.
+
Description
The spacing of the TaskBoard columns container.
$kendo-table-sizesMap( - sm: ( - font-size: $kendo-font-size-md, - line-height: $kendo-line-height-md, - cell-padding-x: $kendo-table-sm-cell-padding-x, - cell-padding-y: $kendo-table-sm-cell-padding-y - ), - md: ( - font-size: $kendo-font-size-md, - line-height: $kendo-line-height-md, - cell-padding-x: $kendo-table-md-cell-padding-x, - cell-padding-y: $kendo-table-md-cell-padding-y - ), - lg: ( - font-size: $kendo-font-size-md, - line-height: $kendo-line-height-md, - cell-padding-x: $kendo-table-lg-cell-padding-x, - cell-padding-y: $kendo-table-lg-cell-padding-y - ) -)(sm: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 4px, cell-padding-y: 4px), md: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 8px, cell-padding-y: 8px), lg: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 8px, cell-padding-y: 10px))$kendo-taskboard-column-widthNumber320px320px
Description
The sizes of the table.
+
Description
The default width of the TaskBoard column.
$kendo-table-bgColor$kendo-component-bg#ffffff$kendo-taskboard-column-border-widthNumber1px1px
Description
Background color of tables.
+
Description
The border width of the TaskBoard column.
$kendo-table-textColor$kendo-component-text#272727$kendo-taskboard-column-border-radiusNumber$kendo-border-radius-md4px
Description
Text color of tables.
+
Description
The border radius of the TaskBoard column.
$kendo-table-border$kendo-taskboard-column-bg Color$kendo-component-border#cacaca$kendo-base-bg#f0f0f0
Description
Border color of tables.
+
Description
The background color of the TaskBoard column.
$kendo-table-header-bgColor$kendo-component-header-bg#f0f0f0$kendo-taskboard-column-textNullnullnull
Description
Background color of table headers.
+
Description
The text color of the TaskBoard column.
$kendo-table-header-text$kendo-taskboard-column-border Color$kendo-component-header-text#272727transparenttransparent
Description
Text color of table headers.
+
Description
The border color of the TaskBoard column.
$kendo-table-header-borderColor$kendo-component-header-border#cacaca$kendo-taskboard-column-focus-bgNullnullnull
Description
Border color of table headers.
+
Description
The background color of the focused TaskBoard column.
$kendo-table-header-gradientList$kendo-component-header-gradientrgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)$kendo-taskboard-column-focus-textNullnullnull
Description
Gradient of table headers.
+
Description
The text color of the focused TaskBoard column.
$kendo-table-footer-bg$kendo-taskboard-column-focus-border Color$kendo-table-header-bg#f0f0f0if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 ))#a2a2a2
Description
Background color of table footers.
+
Description
The border color of the focused TaskBoard column.
$kendo-table-footer-textColor$kendo-table-header-text#272727$kendo-taskboard-column-header-padding-yNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
Text color of table footers.
+
Description
The vertical padding of the TaskBoard column header.
$kendo-table-footer-borderColor$kendo-table-header-border#cacaca$kendo-taskboard-column-header-padding-xNumber$kendo-taskboard-column-header-padding-y8px
Description
Border color of table footers.
+
Description
The horizontal padding of the TaskBoard column header.
$kendo-table-group-row-bgColor$kendo-table-header-bg#f0f0f0$kendo-taskboard-column-header-gapNumberk-math-div( $kendo-taskboard-spacer, 4 )4px
Description
Background color of group rows in table.
+
Description
The spacing of the TaskBoard column header.
$kendo-table-group-row-textColor$kendo-table-header-text#272727$kendo-taskboard-column-header-actions-gapNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
Text color of group rows in table.
+
Description
The spacing of the TaskBoard column header actions.
$kendo-table-group-row-borderColor$kendo-table-header-border#cacaca$kendo-taskboard-column-header-font-weightNumber500500
Description
Border color of group rows in table.
+
Description
The font weight of the TaskBoard column header.
$kendo-table-alt-row-bg$kendo-taskboard-column-header-text Colorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), k-try-shade( $kendo-table-bg, .5 ))whitesmoke$kendo-component-header-text#272727
Description
Background color of alternating rows in table.
+
Description
The text color of the TaskBoard column header.
$kendo-table-alt-row-text$kendo-taskboard-column-cards-padding-y Null null null
Description
Text color of alternating rows in table.
+
Description
The vertical padding of the TaskBoard column Card wrapper.
$kendo-table-alt-row-border$kendo-taskboard-column-cards-padding-x Null null null
Description
Border color of alternating rows in table.
+
Description
The horizontal padding of the TaskBoard column Card wrapper.
$kendo-table-hover-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .11 ), k-try-shade( $kendo-table-bg, 1 ))#ebebeb$kendo-taskboard-column-cards-gapNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
Background color of hovered rows in table.
+
Description
The spacing of the TaskBoard column Card wrapper.
$kendo-table-hover-textNullnullnull$kendo-taskboard-pane-widthNumber$kendo-taskboard-column-width320px
Description
Text color of hovered rows in table.
+
Description
The default width of the TaskBoard pane.
$kendo-table-hover-border$kendo-taskboard-pane-padding-y Null null null
Description
Border color of hovered rows in table.
+
Description
The vertical padding of the TaskBoard pane.
$kendo-table-focus-bg$kendo-taskboard-pane-padding-x Null null null
Description
Background color of focused rows in table.
+
Description
The horizontal padding of the TaskBoard pane.
$kendo-table-focus-textNullnullnull$kendo-taskboard-pane-border-widthNumber1px1px
Description
Text color of focused rows in table.
+
Description
The border width of the TaskBoard pane.
$kendo-table-focus-borderNullnullnull$kendo-taskboard-pane-bgColor$kendo-component-bg#ffffff
Description
Border color of focused rows in table.
+
Description
The background color of the TaskBoard pane.
$kendo-table-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)$kendo-taskboard-pane-textColor$kendo-component-text#272727
Description
Box shadow of focused rows in table.
+
Description
The text color of the TaskBoard pane.
$kendo-table-selected-bg$kendo-taskboard-pane-border Colorif($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 ))rgba(243, 88, 0, 0.25)$kendo-component-border#cacaca
Description
Background color of selected rows in table.
+
Description
The border color of the TaskBoard pane.
$kendo-table-selected-textNullnullnull$kendo-taskboard-pane-header-padding-yNumber( $kendo-taskboard-spacer * .75 )12px
Description
Text color of selected rows in table.
+
Description
The vertical padding of the TaskBoard pane header.
$kendo-table-selected-borderNullnullnull$kendo-taskboard-pane-header-padding-xNumber$kendo-taskboard-spacer16px
Description
Border color of selected rows in table.
+
Description
The horizontal padding of the TaskBoard pane header.
- -### Tabstrip - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + - - + + - - + - - - - - - - - - - @@ -17727,6 +20457,126 @@ The following table lists the available variables for customizing the Classic th
NameTypeDefault valueComputed value
$kendo-tabstrip-bgNullnullnull
$kendo-taskboard-pane-header-font-weightNumber500500
Description
The font weight of the TaskBoard pane header.
+
$kendo-taskboard-pane-header-textColor$kendo-component-header-text#272727
Description
Background color of tabstrip component
+
Description
The text color of the TaskBoard pane header.
$kendo-tabstrip-textColor$kendo-component-text#272727$kendo-taskboard-pane-content-padding-yNumber0px0px
Description
Text color of tabstrip component
+
Description
The vertical padding of the TaskBoard pane content.
$kendo-tabstrip-borderColor$kendo-component-border#cacaca$kendo-taskboard-pane-content-padding-xNumber$kendo-taskboard-spacer16px
Description
Border color of tabstrip component
+
Description
The horizontal padding of the TaskBoard pane content.
$kendo-tabstrip-item-padding-x$kendo-taskboard-pane-actions-padding-y Numberk-map-get( $kendo-spacing, 2 )8px( $kendo-taskboard-spacer * .75 )12px
Description
Horizontal padding of tabs
+
Description
The vertical padding of the TaskBoard pane actions.
$kendo-tabstrip-item-padding-y$kendo-taskboard-pane-actions-padding-x Numberk-map-get( $kendo-spacing, 1 )4px$kendo-taskboard-spacer16px
Description
Vertical padding of tabs
+
Description
The horizontal padding of the TaskBoard pane actions.
$kendo-tabstrip-item-border-width$kendo-taskboard-card-padding-y Number1px1px$kendo-taskboard-spacer16px
Description
Width of border around tabs
+
Description
The vertical padding of the TaskBoard Card.
$kendo-tabstrip-item-border-radius$kendo-taskboard-card-padding-x Number$kendo-border-radius-md4px$kendo-taskboard-card-padding-y16px
Description
Border radius of tabs
+
Description
The horizontal padding of the TaskBoard Card.
$kendo-tabstrip-item-gap$kendo-taskboard-card-border-width Number00$kendo-card-border-width1px
Description
Spacing between tabs
+
Description
The border width of the TaskBoard Card.
$kendo-tabstrip-item-bgColor$kendo-base-bg#f0f0f0$kendo-taskboard-card-border-radiusNumber$kendo-card-border-radius8px
Description
Background color of tabs
+
Description
The border radius of the TaskBoard Card.
$kendo-tabstrip-item-text$kendo-taskboard-card-bg Color$kendo-base-text#272727$kendo-card-bg#ffffff
Description
Text color of tabs
+
Description
The background color of the TaskBoard Card.
$kendo-tabstrip-item-border$kendo-taskboard-card-text Color$kendo-base-border#cacaca$kendo-card-text#272727
Description
Border color of tabs
+
Description
The text color of the TaskBoard Card.
$kendo-tabstrip-item-gradientList$kendo-base-gradientrgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)$kendo-taskboard-card-borderColor$kendo-card-border#cacaca
Description
Background gradient of tabs
+
Description
The border color of the TaskBoard Card.
$kendo-tabstrip-item-hover-bgColor$kendo-hover-bg#dddddd$kendo-taskboard-card-shadowString$kendo-card-shadowvar(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
Background color of hovered tabs
+
Description
The shadow of the TaskBoard Card.
$kendo-tabstrip-item-hover-textColor$kendo-hover-text#272727$kendo-taskboard-card-category-border-widthNumber4px4px
Description
Text color of hovered tabs
+
Description
The border width of the TaskBoard Card category.
$kendo-tabstrip-item-hover-border$kendo-taskboard-card-hover-border Color$kendo-hover-border#bababaif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% ))#b6b6b6
Description
Border color of hovered tabs
+
Description
The border color of the hovered TaskBoard Card.
$kendo-tabstrip-item-hover-gradientNullnullnull$kendo-taskboard-card-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% ))#a6a6a6
Description
Background gradient of hovered tabs
+
Description
The border color of the focused TaskBoard Card.
$kendo-tabstrip-item-selected-bgColor$kendo-component-bg#ffffff$kendo-taskboard-card-focus-shadowStringnonenone
Description
Background color of selected tabs
+
Description
The shadow of the focused TaskBoard Card.
$kendo-tabstrip-item-selected-text$kendo-taskboard-card-selected-border Color$kendo-component-text#272727k-color-tint( $kendo-color-primary-lighter, 5 )#f9ab7f
Description
Text color of selected tabs
+
Description
The border of the selected TaskBoard Card.
$kendo-tabstrip-item-selected-borderColor$kendo-component-border#cacaca$kendo-taskboard-card-selected-shadowStringnonenone
Description
Border color of selected tabs
+
Description
The shadow of the selected TaskBoard Card.
$kendo-tabstrip-item-selected-gradientBoolfalsefalse$kendo-taskboard-card-header-textColor$kendo-color-primary#f35800
Description
Background gradient of selected tabs
+
Description
The text color of the TaskBoard Card header text.
$kendo-tabstrip-content-padding-xNumberk-map-get( $kendo-spacing, 4 )16px$kendo-taskboard-card-header-focus-textColor$kendo-color-primary-darker#cc4a00
Description
Horizontal padding of tabstrip content
+
Description
The text color of the hovered TaskBoard Card header text.
$kendo-tabstrip-content-padding-yNumberk-map-get( $kendo-spacing, 4 )16px$kendo-taskboard-card-header-hover-textColor$kendo-color-primary-darker#cc4a00
Description
Vertical padding of tabstrip content
+
Description
The text color of the focused TaskBoard Card header text.
$kendo-tabstrip-content-border-width$kendo-taskboard-drag-placeholder-border-width Number 1px 1px
Description
Width of border around tabstrip content
+
Description
The border width of the TaskBoard Card placeholder.
$kendo-tabstrip-content-bgColor$kendo-component-bg#ffffff$kendo-taskboard-drag-placeholder-border-radiusNumber$kendo-taskboard-card-border-radius8px
Description
Background color of tabstrip content
+
Description
The border radius of the TaskBoard Card placeholder.
$kendo-tabstrip-content-text$kendo-taskboard-drag-placeholder-bg Color$kendo-component-text#272727rgba( white, .2 )rgba(255, 255, 255, 0.2)
Description
Text color of tabstrip content
+
Description
The background color of the TaskBoard Card placeholder.
$kendo-tabstrip-content-border$kendo-taskboard-drag-placeholder-border Color $kendo-component-border #cacaca
Description
Border color of tabstrip content
-
$kendo-tabstrip-content-focus-borderColor$kendo-component-text#272727
Description
Border color of tabstrip focused content
+
Description
The border color of the TaskBoard Card placeholder.
+### Wizard + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-wizard-padding-xNumber$kendo-padding-md-x * 2.520px
Description
The horizontal padding of the Wizard.
+
$kendo-wizard-padding-yNumber$kendo-wizard-padding-x20px
Description
The vertical padding of the Wizard.
+
$kendo-wizard-content-padding-xNumber$kendo-padding-md-x * 432px
Description
The horizontal padding of the Wizard content.
+
$kendo-wizard-content-padding-yNumber$kendo-padding-md-y * 832px
Description
The vertical padding of the Wizard content.
+
$kendo-wizard-buttons-margin-xNumber10px10px
Description
The horizontal margin of the Wizard Button container.
+
$kendo-wizard-border-widthNumber0px0px
Description
The border width of the Wizard.
+
$kendo-wizard-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Wizard.
+
$kendo-wizard-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the Wizard.
+
$kendo-wizard-font-familyString$kendo-font-familyinherit
Description
The font family of the Wizard.
+
$kendo-wizard-step-focus-borderColor#656565#656565
Description
The outline of the focused Wizard step.
+
+ diff --git a/packages/default/docs/customization-chat.md b/packages/default/docs/customization-chat.md new file mode 100644 index 00000000000..78fb144ee71 --- /dev/null +++ b/packages/default/docs/customization-chat.md @@ -0,0 +1,608 @@ +--- +title: Customizing Chat +description: "Refer to the list of the Kendo UI Default theme variables available for customization." +slug: variables_kendothemedefault_chat +position: 9 +--- + +# Customizing Chat + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-chat-padding-xNumber16px16px
Description
The horizontal padding of the Chat.
+
$kendo-chat-padding-yNumber16px16px
Description
The vertical padding of the Chat.
+
$kendo-chat-widthNumber500px500px
Description
The width of the Chat.
+
$kendo-chat-heightNumber600px600px
Description
The height of the Chat.
+
$kendo-chat-border-widthNumber1px1px
Description
The border width of the Chat.
+
$kendo-chat-font-familyString$kendo-font-familyinherit
Description
The font family of the Chat.
+
$kendo-chat-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Chat.
+
$kendo-chat-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the Chat.
+
$kendo-chat-item-spacing-xNumber8px8px
Description
The horizontal spacing between items of the Chat.
+
$kendo-chat-item-spacing-yNumber16px16px
Description
The vertical spacing between items of the Chat.
+
$kendo-chat-message-list-padding-xNumber$kendo-chat-padding-x16px
Description
The horizontal padding of the Chat message list.
+
$kendo-chat-message-list-padding-yNumber$kendo-chat-padding-y16px
Description
The vertical padding of the Chat message list.
+
$kendo-chat-message-list-spacingNumber$kendo-chat-item-spacing-y16px
Description
The spacing of the Chat message list.
+
$kendo-chat-timestamp-font-sizeStringsmallersmaller
Description
The font size of the Chat timestamp.
+
$kendo-chat-timestamp-line-heightNullnullnull
Description
The line height of the Chat timestamp.
+
$kendo-chat-timestamp-transformStringuppercaseuppercase
Description
The text transform of the Chat timestamp.
+
$kendo-chat-timestamp-textColor$kendo-subtle-text#666666
Description
The text color of the Chat timestamp.
+
$kendo-chat-timestamp-bgNullnullnull
Description
The background color of the Chat timestamp.
+
$kendo-chat-bubble-padding-xNumber12px12px
Description
The horizontal padding of the Chat bubble message.
+
$kendo-chat-bubble-padding-yNumber8px8px
Description
The vertical padding of the Chat bubble message.
+
$kendo-chat-bubble-spacingNumber2px2px
Description
The spacing of the Chat bubble message.
+
$kendo-chat-bubble-line-heightNumber18px18px
Description
The line height of the Chat bubble message.
+
$kendo-chat-bubble-border-radiusNumber12px12px
Description
The border radius of the Chat bubble message.
+
$kendo-chat-bubble-border-radius-smNumber2px2px
Description
The border radius of the Chat small bubble message
+
$kendo-chat-avatar-sizeNumber32px32px
Description
The size of the Chat Avatar.
+
$kendo-chat-avatar-spacingNumber$kendo-chat-item-spacing-x8px
Description
The spacing of the Chat Avatar.
+
$kendo-chat-toolbar-padding-xNumber$kendo-toolbar-md-padding-x8px
Description
The horizontal padding of the Chat Toolbar.
+
$kendo-chat-toolbar-padding-yNumber$kendo-toolbar-md-padding-y8px
Description
The vertical padding of the Chat Toolbar.
+
$kendo-chat-toolbar-spacingNumber$kendo-toolbar-md-spacing8px
Description
The spacing of the Chat Toolbar.
+
$kendo-chat-toolbar-bgColor$kendo-toolbar-bg#fafafa
Description
The background color of the Chat Toolbar.
+
$kendo-chat-toolbar-textColor$kendo-toolbar-text#424242
Description
The text color of the Chat Toolbar.
+
$kendo-chat-toolbar-borderStringinheritinherit
Description
The border color of the Chat Toolbar.
+
$kendo-chat-quick-reply-padding-xNumber12px12px
Description
The horizontal padding of the Chat quick reply.
+
$kendo-chat-quick-reply-padding-yNumber8px8px
Description
The vertical padding of the Chat quick reply.
+
$kendo-chat-quick-reply-spacingNumber8px8px
Description
The spacing of the Chat quick reply.
+
$kendo-chat-quick-reply-line-heightNumber$kendo-chat-bubble-line-height18px
Description
The line height of the Chat quick reply.
+
$kendo-chat-bgColor$kendo-app-bg#fafafa
Description
The background color of the Chat.
+
$kendo-chat-textColor$kendo-app-text#424242
Description
The text color of the Chat.
+
$kendo-chat-borderColor$kendo-app-borderrgba(0, 0, 0, 0.08)
Description
The border color of the Chat.
+
$kendo-chat-bubble-bgColor$kendo-component-bg#ffffff
Description
The background color of the Chat bubble.
+
$kendo-chat-bubble-textColor$kendo-component-text#424242
Description
The text color of the Chat bubble.
+
$kendo-chat-bubble-borderColor$kendo-chat-bubble-bg#ffffff
Description
The border color of the Chat bubble.
+
$kendo-chat-bubble-shadowStringk-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The box shadow of the Chat bubble.
+
$kendo-chat-bubble-hover-shadowStringk-elevation(2)var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the hovered Chat bubble.
+
$kendo-chat-bubble-selected-shadowStringk-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the selected Chat bubble.
+
$kendo-chat-alt-bubble-bgColor$kendo-color-primary#ff6358
Description
The background color of the Chat alt bubble.
+
$kendo-chat-alt-bubble-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-chat-alt-bubble-bg ))white
Description
The text color of the Chat alt bubble.
+
$kendo-chat-alt-bubble-borderColor$kendo-chat-alt-bubble-bg#ff6358
Description
The border color of the Chat alt bubble.
+
$kendo-chat-alt-bubble-shadowStringk-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the Chat alt bubble.
+
$kendo-chat-alt-bubble-hover-shadowStringk-elevation(2)var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the hovered Chat alt bubble.
+
$kendo-chat-alt-bubble-selected-shadowStringk-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the selected Chat alt bubble.
+
$kendo-chat-quick-reply-bgColortransparenttransparent
Description
The background color of Chat quick reply.
+
$kendo-chat-quick-reply-textColor$kendo-color-primary#ff6358
Description
The text color of Chat quick reply.
+
$kendo-chat-quick-reply-borderColor$kendo-color-primary#ff6358
Description
The border color of Chat quick reply.
+
$kendo-chat-quick-reply-hover-bgColor$kendo-color-primary#ff6358
Description
The background color of the hovered Chat quick reply.
+
$kendo-chat-quick-reply-hover-textColor$kendo-color-primary-contrastwhite
Description
The text color of the Chat quick reply.
+
$kendo-chat-quick-reply-hover-borderColor$kendo-color-primary#ff6358
Description
The border color of the hovered Chat quick reply.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/default/docs/customization-orgchart.md b/packages/default/docs/customization-orgchart.md new file mode 100644 index 00000000000..d776981a8e3 --- /dev/null +++ b/packages/default/docs/customization-orgchart.md @@ -0,0 +1,478 @@ +--- +title: Customizing Orgchart +description: "Refer to the list of the Kendo UI Default theme variables available for customization." +slug: variables_kendothemedefault_orgchart +position: 9 +--- + +# Customizing Orgchart + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-orgchart-spacerNumberk-map-get( $kendo-spacing, 6 )24px
Description
The spacing index of the OrgChart.
+
$kendo-orgchart-padding-yNumber$kendo-orgchart-spacer24px
Description
The vertical padding of the OrgChart.
+
$kendo-orgchart-padding-xNumber$kendo-orgchart-padding-y24px
Description
The horizontal padding of the OrgChart.
+
$kendo-orgchart-font-familyString$kendo-font-familyinherit
Description
The font family of the OrgChart.
+
$kendo-orgchart-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the OrgChart.
+
$kendo-orgchart-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the OrgChart.
+
$kendo-orgchart-bgColor$kendo-component-bg#ffffff
Description
The background color of the OrgChart.
+
$kendo-orgchart-textColor$kendo-component-text#424242
Description
The text color of the OrgChart.
+
$kendo-orgchart-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the OrgChart.
+
$kendo-orgchart-node-gapNumber$kendo-orgchart-spacer24px
Description
The spacing of the OrgChart node.
+
$kendo-orgchart-group-gapNumber$kendo-orgchart-spacer24px
Description
The spacing of the OrgChart group.
+
$kendo-orgchart-node-container-gapNumber$kendo-orgchart-spacer24px
Description
The spacing of the OrgChart node container.
+
$kendo-orgchart-node-group-padding-yNumber$kendo-orgchart-spacer24px
Description
The vertical padding of the OrgChart node group.
+
$kendo-orgchart-node-group-padding-xNumber$kendo-orgchart-node-group-padding-y24px
Description
The horizontal padding of the OrgChart node group.
+
$kendo-orgchart-node-group-border-widthNumber1px1px
Description
The border width of the OrgChart node group.
+
$kendo-orgchart-node-group-border-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the OrgChart node group.
+
$kendo-orgchart-node-group-bgColor$kendo-base-bg#fafafa
Description
The background color of the OrgChart node group.
+
$kendo-orgchart-node-group-textColor$kendo-base-text#424242
Description
The text color of the OrgChart node group.
+
$kendo-orgchart-node-group-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The border color of the OrgChart node group.
+
$kendo-orgchart-node-group-focus-borderColor$kendo-card-focus-borderrgba(0, 0, 0, 0.15)
Description
The border color of the focused OrgChart node group.
+
$kendo-orgchart-node-group-focus-shadowStringk-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the focused OrgChart node group.
+
$kendo-orgchart-node-group-title-font-sizeNumber$kendo-font-size-lg16px
Description
The font size of the OrgChart node group title.
+
$kendo-orgchart-node-group-title-margin-bottomNumberk-math-div( $kendo-orgchart-spacer, 3 )8px
Description
The bottom margin of the OrgChart node group title.
+
$kendo-orgchart-node-group-title-line-heightNumber$kendo-line-height-sm1.25
Description
The line height of the OrgChart node group title.
+
$kendo-orgchart-node-group-subtitle-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the OrgChart node group subtitle.
+
$kendo-orgchart-node-group-subtitle-margin-bottomNumber$kendo-orgchart-spacer24px
Description
The bottom margin of the OrgChart node group subtitle.
+
$kendo-orgchart-node-group-subtitle-textColor$kendo-subtle-text#666666
Description
The line height of the OrgChart node group subtitle.
+
$kendo-orgchart-card-widthNumber300px300px
Description
The width of the OrgChart Card.
+
$kendo-orgchart-card-padding-yNumber$kendo-card-padding-y12px
Description
The vertical padding of the OrgChart Card.
+
$kendo-orgchart-card-padding-xNumber$kendo-orgchart-card-padding-y12px
Description
The horizontal padding of the OrgChart Card.
+
$kendo-orgchart-card-border-widthNumber$kendo-card-border-width1px
Description
The border width of the OrgChart Card.
+
$kendo-orgchart-card-shadowNull$kendo-card-shadownull
Description
The shadow of the OrgChart Card.
+
$kendo-orgchart-card-focus-shadowStringk-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the focused OrgChart Card.
+
$kendo-orgchart-card-title-margin-bottomNumber0px0px
Description
The bottom margin of the OrgChart Card title.
+
$kendo-orgchart-card-title-font-sizeNullnullnull
Description
The font size of the OrgChart Card title.
+
$kendo-orgchart-card-subtitle-margin-bottomNumber0px0px
Description
The bottom margin of the OrgChart Card subtitle.
+
$kendo-orgchart-card-subtitle-font-sizeNullnullnull
Description
The font size of the OrgChart Card subtitle.
+
$kendo-orgchart-card-body-border-widthList2px 0 02px 0 0
Description
The border width of the OrgChart Card body.
+
$kendo-orgchart-card-body-border-colorColortransparenttransparent
Description
The border color of the OrgChart Card body.
+
$kendo-orgchart-card-body-vbox-margin-rightNumberk-math-div( $kendo-orgchart-spacer, 2 )12px
Description
The right margin of the OrgChart Card body title wrap.
+
$kendo-orgchart-card-body-vbox-min-heightNumber$kendo-card-avatar-size45px
Description
The min height of the OrgChart Card body title wrap.
+
$kendo-orgchart-line-sizeNumber1px1px
Description
The size of the OrgChart connecting line.
+
$kendo-orgchart-line-fillColor$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The fill color of the OrgChart connecting line.
+
$kendo-orgchart-line-v-heightNumber25px25px
Description
The height of the OrgChart connecting line.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/default/docs/customization-splitter.md b/packages/default/docs/customization-splitter.md new file mode 100644 index 00000000000..f51c0aa9949 --- /dev/null +++ b/packages/default/docs/customization-splitter.md @@ -0,0 +1,228 @@ +--- +title: Customizing Splitter +description: "Refer to the list of the Kendo UI Default theme variables available for customization." +slug: variables_kendothemedefault_splitter +position: 9 +--- + +# Customizing Splitter + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-splitter-border-widthNumber1px1px
Description
The width of the border around the Splitter.
+
$kendo-splitter-font-familyString$kendo-font-familyinherit
Description
The font family of the Splitter.
+
$kendo-splitter-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Splitter.
+
$kendo-splitter-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the Splitter.
+
$kendo-splitter-bgColor$kendo-component-bg#ffffff
Description
The background color of the Splitter.
+
$kendo-splitter-textColor$kendo-component-text#424242
Description
The text color of the Splitter.
+
$kendo-splitter-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the Splitter.
+
$kendo-splitter-splitbar-sizeNumberk-map-get( $kendo-spacing, 3 )12px
Description
The size of the Splitter splitbar.
+
$kendo-splitter-drag-handle-lengthNumber20px20px
Description
The length of the Splitter drag handle.
+
$kendo-splitter-drag-handle-thicknessNumber2px2px
Description
The thickness of the Splitter drag handle.
+
$kendo-splitter-drag-icon-marginNumber7px7px
Description
The margin of the Splitter drag handle icon.
+
$kendo-splitter-collapse-icon-padding-xNullnullnull
Description
The horizontal padding of the collapse icon in the Splitter.
+
$kendo-splitter-collapse-icon-padding-yNumberk-map-get( $kendo-spacing, .5 )2px
Description
The vertical padding of the collapse icon in the Splitter.
+
$kendo-splitbar-bgColor$kendo-base-bg#fafafa
Description
The background color of the Splitter splitbar.
+
$kendo-splitbar-textColor$kendo-base-text#424242
Description
The text color of the Splitter splitbar.
+
$kendo-splitbar-hover-bgColorif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-splitbar-bg, .5 ))#f0f0f0
Description
The hover background color of the Splitter splitbar.
+
$kendo-splitbar-hover-textColor$kendo-splitbar-text#424242
Description
The hover text color of the Splitter splitbar.
+
$kendo-splitbar-selected-bgColor$kendo-selected-bg#ff6358
Description
The selected background color of the Splitter splitbar.
+
$kendo-splitbar-selected-textColor$kendo-selected-textwhite
Description
The selected text color of the Splitter splitbar.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/default/docs/customization-stepper.md b/packages/default/docs/customization-stepper.md new file mode 100644 index 00000000000..912472607a7 --- /dev/null +++ b/packages/default/docs/customization-stepper.md @@ -0,0 +1,718 @@ +--- +title: Customizing Stepper +description: "Refer to the list of the Kendo UI Default theme variables available for customization." +slug: variables_kendothemedefault_stepper +position: 9 +--- + +# Customizing Stepper + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-stepper-margin-xNullnullnull
Description
The horizontal margin the Stepper.
+
$kendo-stepper-margin-yNullnullnull
Description
The vertical margin the Stepper.
+
$kendo-stepper-padding-xNullnullnull
Description
The horizontal padding the Stepper.
+
$kendo-stepper-padding-yNullnullnull
Description
The vertical padding the Stepper.
+
$kendo-stepper-label-margin-xNumber12px12px
Description
The horizontal margin the Stepper label.
+
$kendo-stepper-label-padding-xNumber12px12px
Description
The horizontal padding the Stepper label.
+
$kendo-stepper-label-padding-yNumber5px5px
Description
The vertical padding the Stepper label.
+
$kendo-stepper-border-widthNumber0px0px
Description
The width of the border around the Stepper.
+
$kendo-stepper-inline-content-padding-xNumber20px20px
Description
The horizontal padding the Stepper content.
+
$kendo-stepper-inline-content-padding-yNumber10px10px
Description
The vertical padding the Stepper content.
+
$kendo-stepper-font-sizeNumber$kendo-font-size-md14px
+
$kendo-stepper-line-heightNumber$kendo-line-height-md1.4285714286
+
$kendo-stepper-font-familyString$kendo-font-familyinherit
+
$kendo-stepper-bgNullnullnull
Description
The background color of the Stepper.
+
$kendo-stepper-textColor$kendo-component-text#424242
Description
The text color of the Stepper.
+
$kendo-stepper-borderNullnullnull
Description
The border color of the Stepper.
+
$kendo-stepper-indicator-widthNumber28px28px
Description
The width of the Stepper indicator.
+
$kendo-stepper-indicator-heightNumber$kendo-stepper-indicator-width28px
Description
The height of the Stepper indicator.
+
$kendo-stepper-indicator-border-widthNumber1px1px
Description
The border width of the Stepper indicator.
+
$kendo-stepper-indicator-border-radiusNumber50%50%
Description
The border radius of the Stepper indicator.
+
$kendo-stepper-indicator-focus-border-widthNumber1px1px
Description
The border width of the focused Stepper indicator.
+
$kendo-stepper-indicator-focus-sizeNumber2px2px
Description
The size of the focused Stepper indicator.
+
$kendo-stepper-indicator-focus-offsetNumber3px3px
Description
The offset of the Stepper focused indicator.
+
$kendo-stepper-indicator-focus-calc-offsetCalculationcalc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} )calc(1px + 3px)
Description
The calculated offset of the focused Stepper indicator.
+
$kendo-stepper-indicator-bgColor$kendo-component-bg#ffffff
Description
The background color of the Stepper indicator.
+
$kendo-stepper-indicator-textColor$kendo-component-text#424242
Description
The text color of the Stepper indicator.
+
$kendo-stepper-indicator-borderColor#cccccc#cccccc
Description
The border color of the Stepper indicator.
+
$kendo-stepper-indicator-hover-bgColorif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-stepper-indicator-bg ))#ebebeb
Description
The background color of the hovered Stepper indicator.
+
$kendo-stepper-indicator-hover-textNullnullnull
Description
The text color of the hovered Stepper indicator.
+
$kendo-stepper-indicator-hover-borderNullnullnull
Description
The border color of the hovered Stepper indicator.
+
$kendo-stepper-indicator-disabled-bgNullnullnull
Description
The background color of the disabled Stepper indicator.
+
$kendo-stepper-indicator-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text)#8f8f8f
Description
The text color of the disabled Stepper indicator.
+
$kendo-stepper-indicator-disabled-borderNullnullnull
Description
The border color of the disabled Stepper indicator.
+
$kendo-stepper-indicator-done-bgColor$kendo-color-primary#ff6358
Description
The background color of the Stepper done indicator.
+
$kendo-stepper-indicator-done-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg ))white
Description
The text color of the Stepper done indicator.
+
$kendo-stepper-indicator-done-borderColor$kendo-stepper-indicator-done-bg#ff6358
Description
The border color of the Stepper done indicator.
+
$kendo-stepper-indicator-done-hover-bgColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg ))#eb5b51
Description
The background color of the hovered Stepper done indicator.
+
$kendo-stepper-indicator-done-hover-textNullnullnull
Description
The text color of the hovered Stepper done indicator.
+
$kendo-stepper-indicator-done-hover-borderNullnullnull
Description
The border color of the hovered Stepper done indicator.
+
$kendo-stepper-indicator-done-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .6 ), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%))#ffa19b
Description
The background color of the disabled Stepper done indicator.
+
$kendo-stepper-indicator-done-disabled-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg ))white
Description
The text color of the disabled Stepper done indicator.
+
$kendo-stepper-indicator-done-disabled-borderColor$kendo-stepper-indicator-done-disabled-bg#ffa19b
Description
The border color of the disabled Stepper done indicator.
+
$kendo-stepper-indicator-current-bgColor$kendo-stepper-indicator-done-bg#ff6358
Description
The background color of the Stepper current indicator.
+
$kendo-stepper-indicator-current-textColor$kendo-stepper-indicator-done-textwhite
Description
The text color of the Stepper current indicator.
+
$kendo-stepper-indicator-current-borderColor$kendo-stepper-indicator-done-border#ff6358
Description
The border color of the Stepper current indicator.
+
$kendo-stepper-indicator-current-hover-bgColor$kendo-stepper-indicator-done-hover-bg#eb5b51
Description
The background color of the hovered Stepper current indicator.
+
$kendo-stepper-indicator-current-hover-textNull$kendo-stepper-indicator-done-hover-textnull
Description
The text color of the hovered Stepper current indicator.
+
$kendo-stepper-indicator-current-hover-borderNull$kendo-stepper-indicator-done-hover-bordernull
Description
The border color of the hovered Stepper current indicator.
+
$kendo-stepper-indicator-current-disabled-bgColor$kendo-stepper-indicator-done-disabled-bg#ffa19b
Description
The background color of the disabled Stepper current indicator.
+
$kendo-stepper-indicator-current-disabled-textColor$kendo-stepper-indicator-done-disabled-textwhite
Description
The text color of the disabled Stepper current indicator.
+
$kendo-stepper-indicator-current-disabled-borderColor$kendo-stepper-indicator-done-disabled-border#ffa19b
Description
The border color of the disabled Stepper current indicator.
+
$kendo-stepper-label-textNullnullnull
Description
The text color of the Stepper label.
+
$kendo-stepper-label-success-textColor$kendo-color-success#37b400
Description
The success text color of the Stepper label.
+
$kendo-stepper-label-error-textColor$kendo-color-error#f31700
Description
The error text color of the Stepper label.
+
$kendo-stepper-label-hover-textColorif($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-stepper-text, 2 ))#373737
Description
The text color of the hovered Stepper label.
+
$kendo-stepper-label-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text)#8f8f8f
Description
The text color of the disabled Stepper label.
+
$kendo-stepper-optional-label-textColor$kendo-subtle-text#666666
Description
The text color of the Stepper optional label.
+
$kendo-stepper-optional-label-opacityNullnullnull
Description
The opacity of the Stepper optional label.
+
$kendo-stepper-optional-label-font-sizeNullnullnull
Description
The font size of the Stepper optional label.
+
$kendo-stepper-optional-label-font-styleStringitalicitalic
Description
The font style of the Stepper optional label.
+
$kendo-stepper-progressbar-sizeNumber2px2px
Description
The size of the Stepper ProgressBar.
+
$kendo-stepper-progressbar-bgNullnullnull
Description
The background color of the Stepper ProgressBar.
+
$kendo-stepper-progressbar-textNullnullnull
Description
The text color of the Stepper ProgressBar.
+
$kendo-stepper-progressbar-fill-bgNullnullnull
Description
The background color of the selected Stepper ProgressBar.
+
$kendo-stepper-progressbar-fill-textNullnullnull
Description
The text color of the selected Stepper ProgressBar.
+
$kendo-stepper-content-transition-propertyStringheightheight
Description
The property name of the Stepper transition.
+
$kendo-stepper-content-transition-durationNumber300ms300ms
Description
The duration of the Stepper transition.
+
$kendo-stepper-content-transition-timing-functionListcubic-bezier(.4, 0, .2, 1) 0mscubic-bezier(0.4, 0, 0.2, 1) 0ms
Description
The timing function of the Stepper transition.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/default/docs/customization-taskboard.md b/packages/default/docs/customization-taskboard.md new file mode 100644 index 00000000000..38579cb994c --- /dev/null +++ b/packages/default/docs/customization-taskboard.md @@ -0,0 +1,788 @@ +--- +title: Customizing Taskboard +description: "Refer to the list of the Kendo UI Default theme variables available for customization." +slug: variables_kendothemedefault_taskboard +position: 9 +--- + +# Customizing Taskboard + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-taskboard-spacerNumberk-map-get( $kendo-spacing, 4 )16px
Description
The spacing index of the TaskBoard.
+
$kendo-taskboard-padding-yNullnullnull
Description
The vertical padding of the TaskBoard.
+
$kendo-taskboard-padding-xNullnullnull
Description
The horizontal of the TaskBoard.
+
$kendo-taskboard-font-familyString$kendo-font-familyinherit
Description
The font family of the TaskBoard.
+
$kendo-taskboard-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the TaskBoard.
+
$kendo-taskboard-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the TaskBoard.
+
$kendo-taskboard-bgNullnullnull
Description
The background color of the TaskBoard.
+
$kendo-taskboard-textNullnullnull
Description
The text color of the TaskBoard.
+
$kendo-taskboard-borderNullnullnull
Description
The border color of the TaskBoard.
+
$kendo-taskboard-toolbar-padding-yNumber$kendo-taskboard-spacer16px
Description
The vertical padding of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-padding-xNumber$kendo-taskboard-toolbar-padding-y16px
Description
The horizontal padding of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-bgNullnullnull
Description
The background color of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-textNullnullnull
Description
The text color of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-borderNullnullnull
Description
The border color of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-gradientNullnullnull
Description
The gradient of the TaskBoard Toolbar.
+
$kendo-taskboard-content-padding-yNumber$kendo-taskboard-spacer16px
Description
The vertical padding of the TaskBoard content.
+
$kendo-taskboard-content-padding-xNumber$kendo-taskboard-content-padding-y16px
Description
The horizontal padding of the TaskBoard content.
+
$kendo-taskboard-column-container-spacing-yNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The vertical spacing of the TaskBoard column container.
+
$kendo-taskboard-column-container-padding-yNumber0px0px
Description
The vertical padding of the TaskBoard column container.
+
$kendo-taskboard-column-container-padding-xNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The horizontal padding of the TaskBoard column container.
+
$kendo-taskboard-columns-container-gapNumber$kendo-taskboard-spacer16px
Description
The spacing of the TaskBoard columns container.
+
$kendo-taskboard-column-widthNumber320px320px
Description
The default width of the TaskBoard column.
+
$kendo-taskboard-column-border-widthNumber1px1px
Description
The border width of the TaskBoard column.
+
$kendo-taskboard-column-border-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the TaskBoard column.
+
$kendo-taskboard-column-bgColor$kendo-base-bg#fafafa
Description
The background color of the TaskBoard column.
+
$kendo-taskboard-column-textNullnullnull
Description
The text color of the TaskBoard column.
+
$kendo-taskboard-column-borderColortransparenttransparent
Description
The border color of the TaskBoard column.
+
$kendo-taskboard-column-focus-bgNullnullnull
Description
The background color of the focused TaskBoard column.
+
$kendo-taskboard-column-focus-textNullnullnull
Description
The text color of the focused TaskBoard column.
+
$kendo-taskboard-column-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 ))rgba(0, 0, 0, 0.264)
Description
The border color of the focused TaskBoard column.
+
$kendo-taskboard-column-header-padding-yNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The vertical padding of the TaskBoard column header.
+
$kendo-taskboard-column-header-padding-xNumber$kendo-taskboard-column-header-padding-y8px
Description
The horizontal padding of the TaskBoard column header.
+
$kendo-taskboard-column-header-gapNumberk-math-div( $kendo-taskboard-spacer, 4 )4px
Description
The spacing of the TaskBoard column header.
+
$kendo-taskboard-column-header-actions-gapNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The spacing of the TaskBoard column header actions.
+
$kendo-taskboard-column-header-font-weightNumber500500
Description
The font weight of the TaskBoard column header.
+
$kendo-taskboard-column-header-textColor$kendo-component-header-text#424242
Description
The text color of the TaskBoard column header.
+
$kendo-taskboard-column-cards-padding-yNullnullnull
Description
The vertical padding of the TaskBoard column Card wrapper.
+
$kendo-taskboard-column-cards-padding-xNullnullnull
Description
The horizontal padding of the TaskBoard column Card wrapper.
+
$kendo-taskboard-column-cards-gapNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The spacing of the TaskBoard column Card wrapper.
+
$kendo-taskboard-pane-widthNumber$kendo-taskboard-column-width320px
Description
The default width of the TaskBoard pane.
+
$kendo-taskboard-pane-padding-yNullnullnull
Description
The vertical padding of the TaskBoard pane.
+
$kendo-taskboard-pane-padding-xNullnullnull
Description
The horizontal padding of the TaskBoard pane.
+
$kendo-taskboard-pane-border-widthNumber1px1px
Description
The border width of the TaskBoard pane.
+
$kendo-taskboard-pane-bgColor$kendo-component-bg#ffffff
Description
The background color of the TaskBoard pane.
+
$kendo-taskboard-pane-textColor$kendo-component-text#424242
Description
The text color of the TaskBoard pane.
+
$kendo-taskboard-pane-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the TaskBoard pane.
+
$kendo-taskboard-pane-header-padding-yNumber( $kendo-taskboard-spacer * .75 )12px
Description
The vertical padding of the TaskBoard pane header.
+
$kendo-taskboard-pane-header-padding-xNumber$kendo-taskboard-spacer16px
Description
The horizontal padding of the TaskBoard pane header.
+
$kendo-taskboard-pane-header-font-weightNumber500500
Description
The font weight of the TaskBoard pane header.
+
$kendo-taskboard-pane-header-textColor$kendo-component-header-text#424242
Description
The text color of the TaskBoard pane header.
+
$kendo-taskboard-pane-content-padding-yNumber0px0px
Description
The vertical padding of the TaskBoard pane content.
+
$kendo-taskboard-pane-content-padding-xNumber$kendo-taskboard-spacer16px
Description
The horizontal padding of the TaskBoard pane content.
+
$kendo-taskboard-pane-actions-padding-yNumber( $kendo-taskboard-spacer * .75 )12px
Description
The vertical padding of the TaskBoard pane actions.
+
$kendo-taskboard-pane-actions-padding-xNumber$kendo-taskboard-spacer16px
Description
The horizontal padding of the TaskBoard pane actions.
+
$kendo-taskboard-card-padding-yNumber$kendo-taskboard-spacer16px
Description
The vertical padding of the TaskBoard Card.
+
$kendo-taskboard-card-padding-xNumber$kendo-taskboard-card-padding-y16px
Description
The horizontal padding of the TaskBoard Card.
+
$kendo-taskboard-card-border-widthNumber$kendo-card-border-width1px
Description
The border width of the TaskBoard Card.
+
$kendo-taskboard-card-border-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the TaskBoard Card.
+
$kendo-taskboard-card-shadowNull$kendo-card-shadownull
Description
The shadow of the TaskBoard Card.
+
$kendo-taskboard-card-bgColor$kendo-card-bg#ffffff
Description
The background color of the TaskBoard Card.
+
$kendo-taskboard-card-textColor$kendo-card-text#424242
Description
The text color of the TaskBoard Card.
+
$kendo-taskboard-card-borderColor$kendo-card-borderrgba(0, 0, 0, 0.08)
Description
The border color of the TaskBoard Card.
+
$kendo-taskboard-card-category-border-widthNumber4px4px
Description
The border width of the TaskBoard Card category.
+
$kendo-taskboard-card-hover-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% ))rgba(0, 0, 0, 0.172)
Description
The border color of the hovered TaskBoard Card.
+
$kendo-taskboard-card-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% ))rgba(0, 0, 0, 0.2456)
Description
The border color of the focused TaskBoard Card.
+
$kendo-taskboard-card-focus-shadowStringnonenone
Description
The shadow of the focused TaskBoard Card.
+
$kendo-taskboard-card-selected-borderColorif($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary-lighter, 5 ))#ffb0ab
Description
The border of the selected TaskBoard Card.
+
$kendo-taskboard-card-selected-shadowStringnonenone
Description
The shadow of the selected TaskBoard Card.
+
$kendo-taskboard-card-header-textColor$kendo-color-primary#ff6358
Description
The text color of the TaskBoard Card header text.
+
$kendo-taskboard-card-header-hover-textColorif($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker)#d6534a
Description
The text color of the hovered TaskBoard Card header text.
+
$kendo-taskboard-card-header-focus-textColorif($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker)#d6534a
Description
The text color of the focused TaskBoard Card header text.
+
$kendo-taskboard-drag-placeholder-border-widthNumber1px1px
Description
The border width of the TaskBoard Card placeholder.
+
$kendo-taskboard-drag-placeholder-border-radiusNumber$kendo-taskboard-card-border-radius4px
Description
The border radius of the TaskBoard Card placeholder.
+
$kendo-taskboard-drag-placeholder-bgColorrgba(255, 255, 255, .2)rgba(255, 255, 255, 0.2)
Description
The background color of the TaskBoard Card placeholder.
+
$kendo-taskboard-drag-placeholder-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the TaskBoard Card placeholder.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/default/docs/customization-wizard.md b/packages/default/docs/customization-wizard.md new file mode 100644 index 00000000000..f68fbf4998d --- /dev/null +++ b/packages/default/docs/customization-wizard.md @@ -0,0 +1,138 @@ +--- +title: Customizing Wizard +description: "Refer to the list of the Kendo UI Default theme variables available for customization." +slug: variables_kendothemedefault_wizard +position: 9 +--- + +# Customizing Wizard + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-wizard-padding-xNumber$kendo-padding-md-x * 2.520px
Description
The horizontal padding of the Wizard.
+
$kendo-wizard-padding-yNumber$kendo-wizard-padding-x20px
Description
The vertical padding of the Wizard.
+
$kendo-wizard-content-padding-xNumber$kendo-padding-md-x * 432px
Description
The horizontal padding of the Wizard content.
+
$kendo-wizard-content-padding-yNumber$kendo-padding-md-y * 832px
Description
The vertical padding of the Wizard content.
+
$kendo-wizard-buttons-margin-xNumber10px10px
Description
The horizontal margin of the Wizard Button container.
+
$kendo-wizard-border-widthNumber0px0px
Description
The border width of the Wizard.
+
$kendo-wizard-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Wizard.
+
$kendo-wizard-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the Wizard.
+
$kendo-wizard-font-familyString$kendo-font-familyinherit
Description
The font family of the Wizard.
+
$kendo-wizard-step-focus-borderColor#656565#656565
Description
The outline of the focused Wizard step.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/default/docs/customization.md b/packages/default/docs/customization.md index 58d53ba3655..bad46914712 100644 --- a/packages/default/docs/customization.md +++ b/packages/default/docs/customization.md @@ -3367,7 +3367,7 @@ The following table lists the available variables for customizing the Default th -### Checkbox +### Chat @@ -3385,479 +3385,579 @@ The following table lists the available variables for customizing the Default th - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + + + + + + + + + + - + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - + - - + + - - + - - + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - + + + + + + + + + + + + + + + + + +
$kendo-checkbox-border-width$kendo-chat-padding-x Number1px1px16px16px
Description
The border width of the CheckBox.
+
Description
The horizontal padding of the Chat.
$kendo-checkbox-sm-size$kendo-chat-padding-y Numberk-map-get( $kendo-spacing, 3 )12px16px16px
Description
The size of a small CheckBox.
+
Description
The vertical padding of the Chat.
$kendo-checkbox-md-size$kendo-chat-width Numberk-map-get( $kendo-spacing, 4 )16px500px500px
Description
The size of a medium CheckBox.
+
Description
The width of the Chat.
$kendo-checkbox-lg-size$kendo-chat-height Numberk-map-get( $kendo-spacing, 5 )20px600px600px
Description
The size of a large CheckBox.
+
Description
The height of the Chat.
$kendo-checkbox-sm-glyph-size$kendo-chat-border-width Numberk-map-get( $kendo-spacing, 2.5 )10px1px1px
Description
The glyph size of a small CheckBox.
+
Description
The border width of the Chat.
$kendo-checkbox-md-glyph-size$kendo-chat-font-familyString$kendo-font-familyinherit
Description
The font family of the Chat.
+
$kendo-chat-font-size Numberk-map-get( $kendo-spacing, 3.5 )$kendo-font-size-md 14px
Description
The glyph size of a medium CheckBox.
+
Description
The font size of the Chat.
$kendo-checkbox-lg-glyph-size$kendo-chat-line-height Numberk-map-get( $kendo-spacing, 4.5 )18px$kendo-line-height-md1.4285714286
Description
The glyph size of a large CheckBox.
+
Description
The line height of the Chat.
$kendo-checkbox-sm-ripple-size$kendo-chat-item-spacing-x Number300%300%8px8px
Description
The ripple size of a small CheckBox.
+
Description
The horizontal spacing between items of the Chat.
$kendo-checkbox-md-ripple-size$kendo-chat-item-spacing-y Number300%300%16px16px
Description
The ripple size of a medium CheckBox.
+
Description
The vertical spacing between items of the Chat.
$kendo-checkbox-lg-ripple-size$kendo-chat-message-list-padding-x Number300%300%$kendo-chat-padding-x16px
Description
The ripple size of a large CheckBox.
+
Description
The horizontal padding of the Chat message list.
$kendo-checkbox-bgColor$kendo-component-bg#ffffff$kendo-chat-message-list-padding-yNumber$kendo-chat-padding-y16px
Description
The background color of the CheckBox.
+
Description
The vertical padding of the Chat message list.
$kendo-checkbox-textNullnullnull$kendo-chat-message-list-spacingNumber$kendo-chat-item-spacing-y16px
Description
The text color of the CheckBox.
+
Description
The spacing of the Chat message list.
$kendo-checkbox-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)$kendo-chat-timestamp-font-sizeStringsmallersmaller
Description
The border color of the CheckBox.
+
Description
The font size of the Chat timestamp.
$kendo-checkbox-hover-bg$kendo-chat-timestamp-line-height Null null null
Description
The background color of the hovered CheckBox.
+
Description
The line height of the Chat timestamp.
$kendo-checkbox-hover-textNullnullnull$kendo-chat-timestamp-transformStringuppercaseuppercase
Description
The text color of the hovered CheckBox.
+
Description
The text transform of the Chat timestamp.
$kendo-checkbox-hover-border$kendo-chat-timestamp-textColor$kendo-subtle-text#666666
Description
The text color of the Chat timestamp.
+
$kendo-chat-timestamp-bg Null null null
Description
The border color of the hovered CheckBox.
+
Description
The background color of the Chat timestamp.
$kendo-checkbox-checked-bgColor$kendo-color-primary#ff6358$kendo-chat-bubble-padding-xNumber12px12px
Description
The background color of the checked CheckBox.
+
Description
The horizontal padding of the Chat bubble message.
$kendo-checkbox-checked-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg ))white$kendo-chat-bubble-padding-yNumber8px8px
Description
The text color of the checked CheckBox.
+
Description
The vertical padding of the Chat bubble message.
$kendo-checkbox-checked-borderColor$kendo-checkbox-checked-bg#ff6358$kendo-chat-bubble-spacingNumber2px2px
Description
The border color of the checked CheckBox.
+
Description
The spacing of the Chat bubble message.
$kendo-checkbox-indeterminate-bgColor$kendo-checkbox-bg#ffffff$kendo-chat-bubble-line-heightNumber18px18px
Description
The background color of the indeterminate CheckBox.
+
Description
The line height of the Chat bubble message.
$kendo-checkbox-indeterminate-textColor$kendo-checkbox-checked-bg#ff6358$kendo-chat-bubble-border-radiusNumber12px12px
Description
The text color of the indeterminate CheckBox.
+
Description
The border radius of the Chat bubble message.
$kendo-checkbox-indeterminate-borderColor$kendo-checkbox-borderrgba(0, 0, 0, 0.08)$kendo-chat-bubble-border-radius-smNumber2px2px
Description
The border color of the indeterminate CheckBox.
+
Description
The border radius of the Chat small bubble message
$kendo-checkbox-focus-borderNullnullnull$kendo-chat-avatar-sizeNumber32px32px
Description
The border color of the focused CheckBox.
+
Description
The size of the Chat Avatar.
$kendo-checkbox-focus-shadowList0 0 0 2px rgba(0, 0, 0, .06)0 0 0 2px rgba(0, 0, 0, 0.06)$kendo-chat-avatar-spacingNumber$kendo-chat-item-spacing-x8px
Description
The box shadow of the focused CheckBox.
+
Description
The spacing of the Chat Avatar.
$kendo-checkbox-focus-checked-borderNullnullnull$kendo-chat-toolbar-padding-xNumber$kendo-toolbar-md-padding-x8px
Description
The border color of the focused and checked CheckBox.
+
Description
The horizontal padding of the Chat Toolbar.
$kendo-checkbox-focus-checked-shadowList0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary, .3 ))0 0 0 2px rgba(255, 99, 88, 0.3)$kendo-chat-toolbar-padding-yNumber$kendo-toolbar-md-padding-y8px
Description
The box shadow of the focused and checked CheckBox.
+
Description
The vertical padding of the Chat Toolbar.
$kendo-checkbox-disabled-bgNullnullnull$kendo-chat-toolbar-spacingNumber$kendo-toolbar-md-spacing8px
Description
The background color of the disabled CheckBox.
+
Description
The spacing of the Chat Toolbar.
$kendo-checkbox-disabled-textNullnullnull$kendo-chat-toolbar-bgColor$kendo-toolbar-bg#fafafa
Description
The text color of the disabled CheckBox.
+
Description
The background color of the Chat Toolbar.
$kendo-checkbox-disabled-borderNullnullnull$kendo-chat-toolbar-textColor$kendo-toolbar-text#424242
Description
The border color of the disabled CheckBox.
+
Description
The text color of the Chat Toolbar.
$kendo-checkbox-disabled-checked-bgNullnullnull$kendo-chat-toolbar-borderStringinheritinherit
Description
The background color of the disabled and checked CheckBox.
+
Description
The border color of the Chat Toolbar.
$kendo-checkbox-disabled-checked-textNullnullnull$kendo-chat-quick-reply-padding-xNumber12px12px
Description
The text color of the disabled and checked CheckBox.
+
Description
The horizontal padding of the Chat quick reply.
$kendo-checkbox-disabled-checked-borderNullnullnull$kendo-chat-quick-reply-padding-yNumber8px8px
Description
The border color of the disabled and checked CheckBox.
+
Description
The vertical padding of the Chat quick reply.
$kendo-checkbox-invalid-bgNullnullnull$kendo-chat-quick-reply-spacingNumber8px8px
Description
The background color of an invalid CheckBox.
+
Description
The spacing of the Chat quick reply.
$kendo-checkbox-invalid-textColor$kendo-invalid-text#f31700$kendo-chat-quick-reply-line-heightNumber$kendo-chat-bubble-line-height18px
Description
The text color of an invalid CheckBox.
+
Description
The line height of the Chat quick reply.
$kendo-checkbox-invalid-border$kendo-chat-bg Color$kendo-invalid-border#f31700$kendo-app-bg#fafafa
Description
The border color of an invalid CheckBox.
+
Description
The background color of the Chat.
$kendo-checkbox-indicator-typeStringimageimage$kendo-chat-textColor$kendo-app-text#424242
Description
The type of the CheckBox indicator.
+
Description
The text color of the Chat.
$kendo-checkbox-glyph-font-familyList"WebComponentsIcons", monospace"WebComponentsIcons", monospace$kendo-chat-borderColor$kendo-app-borderrgba(0, 0, 0, 0.08)
Description
The font family of the CheckBox indicator glyph.
+
Description
The border color of the Chat.
$kendo-checkbox-checked-glyph$kendo-chat-bubble-bgColor$kendo-component-bg#ffffff
Description
The background color of the Chat bubble.
+
$kendo-chat-bubble-textColor$kendo-component-text#424242
Description
The text color of the Chat bubble.
+
$kendo-chat-bubble-borderColor$kendo-chat-bubble-bg#ffffff
Description
The border color of the Chat bubble.
+
$kendo-chat-bubble-shadow String"\e118""\e118"k-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The glyph of the CheckBox indicator.
+
Description
The box shadow of the Chat bubble.
$kendo-checkbox-indeterminate-glyph$kendo-chat-bubble-hover-shadow String"\e121""\e121"k-elevation(2)var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The glyph of the indeterminate CheckBox indicator.
+
Description
The shadow of the hovered Chat bubble.
$kendo-checkbox-checked-image$kendo-chat-bubble-selected-shadow Stringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e")k-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The image for a checked CheckBox indicator.
+
Description
The shadow of the selected Chat bubble.
$kendo-checkbox-indeterminate-image$kendo-chat-alt-bubble-bgColor$kendo-color-primary#ff6358
Description
The background color of the Chat alt bubble.
+
$kendo-chat-alt-bubble-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-chat-alt-bubble-bg ))white
Description
The text color of the Chat alt bubble.
+
$kendo-chat-alt-bubble-borderColor$kendo-chat-alt-bubble-bg#ff6358
Description
The border color of the Chat alt bubble.
+
$kendo-chat-alt-bubble-shadow Stringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ff6358' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/%3e%3c/svg%3e")k-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The image for a indeterminate CheckBox indicator.
+
Description
The shadow of the Chat alt bubble.
$kendo-checkbox-label-margin-xNumberk-map-get( $kendo-spacing, 1 )4px$kendo-chat-alt-bubble-hover-shadowStringk-elevation(2)var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The horizontal margin of the CheckBox inside a label.
+
Description
The shadow of the hovered Chat alt bubble.
$kendo-checkbox-list-spacingNumberk-map-get( $kendo-spacing, 4 )16px$kendo-chat-alt-bubble-selected-shadowStringk-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The spacing between the items in a horizontal CheckBox list.
+
Description
The shadow of the selected Chat alt bubble.
$kendo-checkbox-list-item-padding-xNumber0px0px$kendo-chat-quick-reply-bgColortransparenttransparent
Description
The horizontal padding of the CheckBox list items.
+
Description
The background color of Chat quick reply.
$kendo-checkbox-list-item-padding-yNumber$kendo-list-md-item-padding-y4px$kendo-chat-quick-reply-textColor$kendo-color-primary#ff6358
Description
The vertical padding of the CheckBox list items.
+
Description
The text color of Chat quick reply.
$kendo-checkbox-ripple-bg$kendo-chat-quick-reply-border Color$kendo-checkbox-checked-bg$kendo-color-primary #ff6358
Description
The background color of the CheckBox' ripple.
+
Description
The border color of Chat quick reply.
$kendo-checkbox-ripple-opacityNumber.250.25$kendo-chat-quick-reply-hover-bgColor$kendo-color-primary#ff6358
Description
The opacity of the CheckBox' ripple.
+
Description
The background color of the hovered Chat quick reply.
+
$kendo-chat-quick-reply-hover-textColor$kendo-color-primary-contrastwhite
Description
The text color of the Chat quick reply.
+
$kendo-chat-quick-reply-hover-borderColor$kendo-color-primary#ff6358
Description
The border color of the hovered Chat quick reply.
-### Chip +### Checkbox @@ -3875,458 +3975,479 @@ The following table lists the available variables for customizing the Default th - + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + - - - - - + + + + - - + - - - - - + + + + - - + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
$kendo-chip-border-width$kendo-checkbox-border-width Number 1px 1px
Description
The width of the border around the Chip.
+
Description
The border width of the CheckBox.
$kendo-chip-spacing$kendo-checkbox-sm-size Numberk-map-get( $kendo-spacing, 1 )4pxk-map-get( $kendo-spacing, 3 )12px
Description
The spacing between the text and the icons of the Chip.
+
Description
The size of a small CheckBox.
$kendo-chip-padding-x$kendo-checkbox-md-size Numberk-map-get( $kendo-spacing, 1 )4pxk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the Chip.
+
Description
The size of a medium CheckBox.
$kendo-chip-sm-padding-x$kendo-checkbox-lg-size Numberk-map-get( $kendo-spacing, 1 )4pxk-map-get( $kendo-spacing, 5 )20px
Description
The horizontal padding of the small Chip.
+
Description
The size of a large CheckBox.
$kendo-chip-md-padding-x$kendo-checkbox-sm-glyph-size Number$kendo-chip-padding-x4pxk-map-get( $kendo-spacing, 2.5 )10px
Description
The horizontal padding of the medium Chip.
+
Description
The glyph size of a small CheckBox.
$kendo-chip-lg-padding-x$kendo-checkbox-md-glyph-size Numberk-map-get( $kendo-spacing, 1 )4pxk-map-get( $kendo-spacing, 3.5 )14px
Description
The horizontal padding of the large Chip.
+
Description
The glyph size of a medium CheckBox.
$kendo-chip-padding-y$kendo-checkbox-lg-glyph-size Numberk-map-get( $kendo-spacing, 1 )4pxk-map-get( $kendo-spacing, 4.5 )18px
Description
The vertical padding of the Chip.
+
Description
The glyph size of a large CheckBox.
$kendo-chip-sm-padding-y$kendo-checkbox-sm-ripple-size Numberk-map-get( $kendo-spacing, 0.5 )2px300%300%
Description
The vertical padding of the small Chip.
+
Description
The ripple size of a small CheckBox.
$kendo-chip-md-padding-y$kendo-checkbox-md-ripple-size Number$kendo-chip-padding-y4px300%300%
Description
The vertical padding of the medium Chip.
+
Description
The ripple size of a medium CheckBox.
$kendo-chip-lg-padding-y$kendo-checkbox-lg-ripple-size Numberk-map-get( $kendo-spacing, 1.5 )6px300%300%
Description
The vertical padding of the large Chip.
+
Description
The ripple size of a large CheckBox.
$kendo-chip-font-sizeNumber$kendo-font-size-md14px$kendo-checkbox-bgColor$kendo-component-bg#ffffff
Description
The font size of the Chip.
+
Description
The background color of the CheckBox.
$kendo-chip-sm-font-sizeNumber$kendo-font-size-md14px$kendo-checkbox-textNullnullnull
Description
The font size of the small Chip.
+
Description
The text color of the CheckBox.
$kendo-chip-md-font-sizeNumber$kendo-chip-font-size14px$kendo-checkbox-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The font size of the medium Chip.
+
Description
The border color of the CheckBox.
$kendo-chip-lg-font-sizeNumber$kendo-font-size-md14px$kendo-checkbox-hover-bgNullnullnull
Description
The font size of the large Chip.
+
Description
The background color of the hovered CheckBox.
$kendo-chip-line-heightNumber11$kendo-checkbox-hover-textNullnullnull
Description
The Chip's line height that is related to the $kendo-font-size.
+
Description
The text color of the hovered CheckBox.
$kendo-chip-sm-line-heightNumber$kendo-chip-line-height1$kendo-checkbox-hover-borderNullnullnull
Description
The small Chip's line height that is related to the $kendo-font-size.
+
Description
The border color of the hovered CheckBox.
$kendo-chip-md-line-heightNumber$kendo-chip-line-height1$kendo-checkbox-checked-bgColor$kendo-color-primary#ff6358
Description
The medium Chip's line height that is related to the $kendo-font-size.
+
Description
The background color of the checked CheckBox.
$kendo-chip-lg-line-heightNumber$kendo-chip-line-height1$kendo-checkbox-checked-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg ))white
Description
The large Chip's line height that is related to the $kendo-font-size.
+
Description
The text color of the checked CheckBox.
$kendo-chip-calc-sizeCalculationcalc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} )calc(1em + 8px + 2px)$kendo-checkbox-checked-borderColor$kendo-checkbox-checked-bg#ff6358
Description
The calculated height of the Chip.
+
Description
The border color of the checked CheckBox.
$kendo-chip-sizesMap( - sm: ( - padding-x: $kendo-chip-sm-padding-x, - padding-y: $kendo-chip-sm-padding-y, - font-size: $kendo-chip-sm-font-size, - line-height: $kendo-chip-sm-line-height - ), - md: ( - padding-x: $kendo-chip-md-padding-x, - padding-y: $kendo-chip-md-padding-y, - font-size: $kendo-chip-md-font-size, - line-height: $kendo-chip-md-line-height - ), - lg: ( - padding-x: $kendo-chip-lg-padding-x, - padding-y: $kendo-chip-lg-padding-y, - font-size: $kendo-chip-lg-font-size, - line-height: $kendo-chip-lg-line-height - ) -)(sm: (padding-x: 4px, padding-y: 2px, font-size: 14px, line-height: 1), md: (padding-x: 4px, padding-y: 4px, font-size: 14px, line-height: 1), lg: (padding-x: 4px, padding-y: 6px, font-size: 14px, line-height: 1))$kendo-checkbox-indeterminate-bgColor$kendo-checkbox-bg#ffffff
Description
The map with the sizes of the Chip.
+
Description
The background color of the indeterminate CheckBox.
$kendo-chip-base-bg$kendo-checkbox-indeterminate-text Colorif($kendo-enable-color-system, k-color( base-subtle ), $kendo-button-bg)#f5f5f5$kendo-checkbox-checked-bg#ff6358
Description
The base background of the Chip.
+
Description
The text color of the indeterminate CheckBox.
$kendo-chip-theme-colorsMap( - "base": $kendo-chip-base-bg, - "error": k-map-get($kendo-theme-colors, "error"), - "info": k-map-get($kendo-theme-colors, "info"), - "warning": k-map-get($kendo-theme-colors, "warning"), - "success": k-map-get($kendo-theme-colors, "success") -)("base": #f5f5f5, "error": #f31700, "info": #0058e9, "warning": #ffc000, "success": #37b400)$kendo-checkbox-indeterminate-borderColor$kendo-checkbox-borderrgba(0, 0, 0, 0.08)
Description
The theme colors map for the Chip.
+
Description
The border color of the indeterminate CheckBox.
$kendo-chip-solid-bgColor$kendo-chip-base-bg#f5f5f5$kendo-checkbox-focus-borderNullnullnull
Description
The base background color of the solid Chip.
+
Description
The border color of the focused CheckBox.
$kendo-chip-solid-textColor$kendo-button-text#424242$kendo-checkbox-focus-shadowList0 0 0 2px rgba(0, 0, 0, .06)0 0 0 2px rgba(0, 0, 0, 0.06)
Description
The base text color of the solid Chip.
+
Description
The box shadow of the focused CheckBox.
$kendo-chip-solid-borderColor$kendo-button-borderrgba(0, 0, 0, 0.08)$kendo-checkbox-focus-checked-borderNullnullnull
Description
The base border color of the solid Chip.
+
Description
The border color of the focused and checked CheckBox.
$kendo-chip-solid-shadow$kendo-checkbox-focus-checked-shadow List0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ))0 0 0 2px rgba(0, 0, 0, 0.08)0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary, .3 ))0 0 0 2px rgba(255, 99, 88, 0.3)
Description
The base shadow of the solid Chip.
+
Description
The box shadow of the focused and checked CheckBox.
$kendo-chip-solid-gradientList$kendo-button-gradientrgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)$kendo-checkbox-disabled-bgNullnullnull
Description
The base gradient of the solid Chip.
+
Description
The background color of the disabled CheckBox.
$kendo-chip-solid-focus-bg$kendo-checkbox-disabled-text Null null null
Description
The base background color of the focused solid Chip.
+
Description
The text color of the disabled CheckBox.
$kendo-chip-solid-focus-text$kendo-checkbox-disabled-border Null null null
Description
The base text color of the focused solid Chip.
+
Description
The border color of the disabled CheckBox.
$kendo-chip-solid-hover-bgColorif($kendo-enable-color-system, k-color( base-subtle-hover ), $kendo-button-hover-bg)#ebebeb$kendo-checkbox-disabled-checked-bgNullnullnull
Description
The base background color of the hovered solid Chip.
+
Description
The background color of the disabled and checked CheckBox.
$kendo-chip-solid-hover-text$kendo-checkbox-disabled-checked-text Null null null
Description
The base text color of the hovered solid Chip.
+
Description
The text color of the disabled and checked CheckBox.
$kendo-chip-solid-selected-bgColor$kendo-button-active-bg#d8d8d8$kendo-checkbox-disabled-checked-borderNullnullnull
Description
The base background color of the selected solid Chip.
+
Description
The border color of the disabled and checked CheckBox.
$kendo-chip-solid-selected-text$kendo-checkbox-invalid-bg Null null null
Description
The base text color of the selected solid Chip.
+
Description
The background color of an invalid CheckBox.
$kendo-chip-outline-bg$kendo-checkbox-invalid-text Color$kendo-component-bg#ffffff$kendo-invalid-text#f31700
Description
The base background color of the outline Chip.
+
Description
The text color of an invalid CheckBox.
$kendo-chip-outline-text$kendo-checkbox-invalid-border Color$kendo-chip-solid-text#424242$kendo-invalid-border#f31700
Description
The base text color of the outline Chip.
+
Description
The border color of an invalid CheckBox.
$kendo-chip-outline-borderColor$kendo-chip-outline-text#424242$kendo-checkbox-indicator-typeStringimageimage
Description
The base border color of the outline Chip.
+
Description
The type of the CheckBox indicator.
$kendo-chip-outline-shadow$kendo-checkbox-glyph-font-family List0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ))0 0 0 2px rgba(0, 0, 0, 0.08)"WebComponentsIcons", monospace"WebComponentsIcons", monospace
Description
The base shadow of the outline Chip.
+
Description
The font family of the CheckBox indicator glyph.
$kendo-chip-outline-hover-bgColor$kendo-chip-outline-text#424242$kendo-checkbox-checked-glyphString"\e118""\e118"
Description
The base background color of the hovered outline Chip.
+
Description
The glyph of the CheckBox indicator.
$kendo-chip-outline-hover-textColorif($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-chip-outline-hover-bg ))white$kendo-checkbox-indeterminate-glyphString"\e121""\e121"
Description
The base text color of the hovered outline Chip.
+
Description
The glyph of the indeterminate CheckBox indicator.
$kendo-chip-outline-selected-bgColor$kendo-chip-outline-hover-bg#424242$kendo-checkbox-checked-imageStringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e")
Description
The base background color of the selected outline Chip.
+
Description
The image for a checked CheckBox indicator.
$kendo-chip-outline-selected-textColor$kendo-chip-outline-hover-textwhite$kendo-checkbox-indeterminate-imageStringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ff6358' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/%3e%3c/svg%3e")
Description
The base text color of the selected outline Chip.
+
Description
The image for a indeterminate CheckBox indicator.
$kendo-chip-list-sizesMap( - sm: k-map-get( $kendo-spacing, 1 ), - md: k-map-get( $kendo-spacing, 1 ), - lg: k-map-get( $kendo-spacing, 1 ) -)(sm: 4px, md: 4px, lg: 4px)$kendo-checkbox-label-margin-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The sizes of the Chip list.
+
Description
The horizontal margin of the CheckBox inside a label.
+
$kendo-checkbox-list-spacingNumberk-map-get( $kendo-spacing, 4 )16px
Description
The spacing between the items in a horizontal CheckBox list.
+
$kendo-checkbox-list-item-padding-xNumber0px0px
Description
The horizontal padding of the CheckBox list items.
+
$kendo-checkbox-list-item-padding-yNumber$kendo-list-md-item-padding-y4px
Description
The vertical padding of the CheckBox list items.
+
$kendo-checkbox-ripple-bgColor$kendo-checkbox-checked-bg#ff6358
Description
The background color of the CheckBox' ripple.
+
$kendo-checkbox-ripple-opacityNumber.250.25
Description
The opacity of the CheckBox' ripple.
-### Cologradient +### Chip @@ -4344,439 +4465,458 @@ The following table lists the available variables for customizing the Default th - - - - - - - - - - - - - - - - - - - + - - + - + - - + - - + + - - + - - + + - - + - - - - - - - - - - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + -
$kendo-color-gradient-spacerNumberk-map-get( $kendo-spacing, 3 )12px
Description
The spacer of the ColorGradient.
-
$kendo-color-gradient-widthNumber272px272px
Description
The width of the ColorGradient.
-
$kendo-color-gradient-border-width$kendo-chip-border-width Number 1px 1px
Description
The width of the border around the ColorGradient.
+
Description
The width of the border around the Chip.
$kendo-color-gradient-border-radius$kendo-chip-spacing Number$kendo-border-radius-mdk-map-get( $kendo-spacing, 1 ) 4px
Description
The border radius of the ColorGradient.
+
Description
The spacing between the text and the icons of the Chip.
$kendo-color-gradient-padding-y$kendo-chip-padding-x Number$kendo-color-gradient-spacer12pxk-map-get( $kendo-spacing, 1 )4px
Description
The vertical padding of the ColorGradient.
+
Description
The horizontal padding of the Chip.
$kendo-color-gradient-padding-x$kendo-chip-sm-padding-x Number$kendo-color-gradient-padding-y12pxk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the ColorGradient.
+
Description
The horizontal padding of the small Chip.
$kendo-color-gradient-gap$kendo-chip-md-padding-x Number$kendo-color-gradient-spacer12px
Description
The spacing between the sections of the ColorGradient.
-
$kendo-color-gradient-font-familyString$kendo-font-familyinherit$kendo-chip-padding-x4px
Description
The font family of the ColorGradient.
+
Description
The horizontal padding of the medium Chip.
$kendo-color-gradient-font-size$kendo-chip-lg-padding-x Number$kendo-font-size-md14pxk-map-get( $kendo-spacing, 1 )4px
Description
The font size of the ColorGradient.
+
Description
The horizontal padding of the large Chip.
$kendo-color-gradient-line-height$kendo-chip-padding-y Number$kendo-line-height-md1.4285714286k-map-get( $kendo-spacing, 1 )4px
Description
The line height of the ColorGradient.
+
Description
The vertical padding of the Chip.
$kendo-color-gradient-textColor$kendo-component-text#424242$kendo-chip-sm-padding-yNumberk-map-get( $kendo-spacing, 0.5 )2px
Description
The text color of the ColorGradient.
+
Description
The vertical padding of the small Chip.
$kendo-color-gradient-bgColor$kendo-component-bg#ffffff$kendo-chip-md-padding-yNumber$kendo-chip-padding-y4px
Description
The background color of the ColorGradient.
+
Description
The vertical padding of the medium Chip.
$kendo-color-gradient-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)$kendo-chip-lg-padding-yNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
The border color of the ColorGradient.
+
Description
The vertical padding of the large Chip.
$kendo-color-gradient-focus-borderNullnullnull$kendo-chip-font-sizeNumber$kendo-font-size-md14px
Description
The border color of the focused ColorGradient.
+
Description
The font size of the Chip.
$kendo-color-gradient-focus-shadowStringk-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-chip-sm-font-sizeNumber$kendo-font-size-md14px
Description
The box shadow of the focused ColorGradient.
+
Description
The font size of the small Chip.
$kendo-color-gradient-canvas-border-radius$kendo-chip-md-font-size Number$kendo-border-radius-md4px$kendo-chip-font-size14px
Description
The border radius of the ColorGradient canvas.
+
Description
The font size of the medium Chip.
$kendo-color-gradient-canvas-gap$kendo-chip-lg-font-size Number$kendo-color-gradient-spacer12px$kendo-font-size-md14px
Description
The spacing between the items of the ColorGradient canvas.
+
Description
The font size of the large Chip.
$kendo-color-gradient-canvas-rectangle-height$kendo-chip-line-height Number180px180px11
Description
The height the ColorGradient canvas hsv rectangle.
+
Description
The Chip's line height that is related to the $kendo-font-size.
$kendo-color-gradient-slider-track-size$kendo-chip-sm-line-height Number10px10px$kendo-chip-line-height1
Description
The width of the ColorGradient slider.
+
Description
The small Chip's line height that is related to the $kendo-font-size.
$kendo-color-gradient-slider-border-radius$kendo-chip-md-line-height Number10px10px$kendo-chip-line-height1
Description
The border radius of the ColorGradient slider.
+
Description
The medium Chip's line height that is related to the $kendo-font-size.
$kendo-color-gradient-slider-draghandle-border-width$kendo-chip-lg-line-height Number3px3px$kendo-chip-line-height1
Description
The width of the border around the ColorGradient slider drag handle.
+
Description
The large Chip's line height that is related to the $kendo-font-size.
$kendo-color-gradient-slider-vertical-sizeNumber180px180px$kendo-chip-calc-sizeCalculationcalc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} )calc(1em + 8px + 2px)
Description
The height of the ColorGradient vertical slider.
+
Description
The calculated height of the Chip.
$kendo-color-gradient-slider-horizontal-sizeNumber100%100%$kendo-chip-sizesMap( + sm: ( + padding-x: $kendo-chip-sm-padding-x, + padding-y: $kendo-chip-sm-padding-y, + font-size: $kendo-chip-sm-font-size, + line-height: $kendo-chip-sm-line-height + ), + md: ( + padding-x: $kendo-chip-md-padding-x, + padding-y: $kendo-chip-md-padding-y, + font-size: $kendo-chip-md-font-size, + line-height: $kendo-chip-md-line-height + ), + lg: ( + padding-x: $kendo-chip-lg-padding-x, + padding-y: $kendo-chip-lg-padding-y, + font-size: $kendo-chip-lg-font-size, + line-height: $kendo-chip-lg-line-height + ) +)(sm: (padding-x: 4px, padding-y: 2px, font-size: 14px, line-height: 1), md: (padding-x: 4px, padding-y: 4px, font-size: 14px, line-height: 1), lg: (padding-x: 4px, padding-y: 6px, font-size: 14px, line-height: 1))
Description
The width of the ColorGradient horizontal slider.
+
Description
The map with the sizes of the Chip.
$kendo-color-gradient-draghandle-widthNumber14px14px$kendo-chip-base-bgColorif($kendo-enable-color-system, k-color( base-subtle ), $kendo-button-bg)#f5f5f5
Description
The width of the ColorGradient canvas drag handle.
+
Description
The base background of the Chip.
$kendo-color-gradient-draghandle-heightNumber14px14px$kendo-chip-theme-colorsMap( + "base": $kendo-chip-base-bg, + "error": k-map-get($kendo-theme-colors, "error"), + "info": k-map-get($kendo-theme-colors, "info"), + "warning": k-map-get($kendo-theme-colors, "warning"), + "success": k-map-get($kendo-theme-colors, "success") +)("base": #f5f5f5, "error": #f31700, "info": #0058e9, "warning": #ffc000, "success": #37b400)
Description
The height of the ColorGradient canvas drag handle.
+
Description
The theme colors map for the Chip.
$kendo-color-gradient-draghandle-border-widthNumber1px1px$kendo-chip-solid-bgColor$kendo-chip-base-bg#f5f5f5
Description
The width of the border around the ColorGradient canvas drag handle.
+
Description
The base background color of the solid Chip.
$kendo-color-gradient-draghandle-outline-widthNumber1px1px$kendo-chip-solid-textColor$kendo-button-text#424242
Description
The width of the outline around the ColorGradient canvas drag handle.
+
Description
The base text color of the solid Chip.
$kendo-color-gradient-draghandle-border-radiusNumber50%50%$kendo-chip-solid-borderColor$kendo-button-borderrgba(0, 0, 0, 0.08)
Description
The border radius of the ColorGradient canvas drag handle.
+
Description
The base border color of the solid Chip.
$kendo-color-gradient-draghandle-text$kendo-chip-solid-shadowList0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ))0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The base shadow of the solid Chip.
+
$kendo-chip-solid-gradientList$kendo-button-gradientrgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)
Description
The base gradient of the solid Chip.
+
$kendo-chip-solid-focus-bg Null null null
Description
The text color of the ColorGradient canvas drag handle.
+
Description
The base background color of the focused solid Chip.
$kendo-color-gradient-draghandle-bgColortransparenttransparent$kendo-chip-solid-focus-textNullnullnull
Description
The background color of the ColorGradient canvas drag handle.
+
Description
The base text color of the focused solid Chip.
$kendo-color-gradient-draghandle-border$kendo-chip-solid-hover-bg Colorrgba( $kendo-color-white, .8)rgba(255, 255, 255, 0.8)if($kendo-enable-color-system, k-color( base-subtle-hover ), $kendo-button-hover-bg)#ebebeb
Description
The color of the border around the ColorGradient canvas drag handle.
+
Description
The base background color of the hovered solid Chip.
$kendo-color-gradient-draghandle-shadowColorrgba( $kendo-color-black, .5 )rgba(0, 0, 0, 0.5)$kendo-chip-solid-hover-textNullnullnull
Description
The color of the outline around the ColorGradient canvas drag handle.
+
Description
The base text color of the hovered solid Chip.
$kendo-color-gradient-draghandle-focus-shadow$kendo-chip-solid-selected-bg Color$kendo-color-black#000000$kendo-button-active-bg#d8d8d8
Description
The focus color of the outline around the ColorGradient canvas drag handle.
+
Description
The base background color of the selected solid Chip.
$kendo-color-gradient-draghandle-hover-shadowColor$kendo-color-black#000000$kendo-chip-solid-selected-textNullnullnull
Description
The hover color of the outline around the ColorGradient canvas drag handle.
+
Description
The base text color of the selected solid Chip.
$kendo-color-gradient-draghandle-shadow$kendo-chip-outline-bg Colork-elevation(2)rgba(0, 0, 0, 0.5)$kendo-component-bg#ffffff
Description
The box shadow of the ColorGradient canvas drag handle.
+
Description
The base background color of the outline Chip.
$kendo-color-gradient-canvas-draghandle-margin-yNumber- k-math-div( $kendo-color-gradient-draghandle-height, 2 )-7px$kendo-chip-outline-textColor$kendo-chip-solid-text#424242
Description
The vertical margin of the ColorGradient canvas drag handle.
+
Description
The base text color of the outline Chip.
$kendo-color-gradient-canvas-draghandle-margin-xNumber- k-math-div( $kendo-color-gradient-draghandle-width, 2 )-7px$kendo-chip-outline-borderColor$kendo-chip-outline-text#424242
Description
The horizontal margin of the ColorGradient canvas drag handle.
+
Description
The base border color of the outline Chip.
$kendo-color-gradient-input-widthNumber46px46px$kendo-chip-outline-shadowList0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ))0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The width of the ColorGradient input.
+
Description
The base shadow of the outline Chip.
$kendo-color-gradient-input-gapNumberk-math-div( $kendo-color-gradient-spacer, 1.5 )8px$kendo-chip-outline-hover-bgColor$kendo-chip-outline-text#424242
Description
The spacing between the ColorGradient inputs.
+
Description
The base background color of the hovered outline Chip.
$kendo-color-gradient-input-label-gapNumberk-math-div( $kendo-color-gradient-spacer, 3 )4px$kendo-chip-outline-hover-textColorif($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-chip-outline-hover-bg ))white
Description
The spacing between the ColorGradient inputs and their labels.
+
Description
The base text color of the hovered outline Chip.
$kendo-color-gradient-input-label-text$kendo-chip-outline-selected-bg Color$kendo-subtle-text#666666$kendo-chip-outline-hover-bg#424242
Description
The text color of the ColorGradient input labels.
+
Description
The base background color of the selected outline Chip.
$kendo-color-gradient-contrast-ratio-font-weightNumber$kendo-font-weight-bold700$kendo-chip-outline-selected-textColor$kendo-chip-outline-hover-textwhite
Description
The font weight of the ColorGradient contrast ratio text.
+
Description
The base text color of the selected outline Chip.
$kendo-color-gradient-contrast-spacerNumberk-math-div( $kendo-color-gradient-spacer, 1.5 )8px$kendo-chip-list-sizesMap( + sm: k-map-get( $kendo-spacing, 1 ), + md: k-map-get( $kendo-spacing, 1 ), + lg: k-map-get( $kendo-spacing, 1 ) +)(sm: 4px, md: 4px, lg: 4px)
Description
The spacing between the items in the ColorGradient contrast tool.
+
Description
The sizes of the Chip list.
-### Color System +### Cologradient @@ -4794,509 +4934,439 @@ The following table lists the available variables for customizing the Default th - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - -
$kendo-colorsMap$_default-colors(app-surface: #ffffff, on-app-surface: #3d3d3d, subtle: #666666, surface: #fafafa, surface-alt: #ffffff, border: rgba(0, 0, 0, 0.08), border-alt: rgba(0, 0, 0, 0.16), base-subtle: #ebebeb, base-subtle-hover: #e0e0e0, base-subtle-active: #d6d6d6, base: #f5f5f5, base-hover: #ebebeb, base-active: #d6d6d6, base-emphasis: #c2c2c2, base-on-subtle: #3d3d3d, on-base: #3d3d3d, base-on-surface: #3d3d3d, primary-subtle: #ffeceb, primary-subtle-hover: #ffdedb, primary-subtle-active: #ffc8c4, primary: #ff6358, primary-hover: #ea5a51, primary-active: #d45349, primary-emphasis: #ff9d97, primary-on-subtle: #5c201c, on-primary: #ffffff, primary-on-surface: #ff6358, secondary-subtle: #fafafa, secondary-subtle-hover: #f5f5f5, secondary-subtle-active: #ebebeb, secondary: #666666, secondary-hover: #525252, secondary-active: #3d3d3d, secondary-emphasis: #e0e0e0, secondary-on-subtle: #141414, on-secondary: #ffffff, secondary-on-surface: #292929, tertiary-subtle: #d8f1fd, tertiary-subtle-hover: #c5eafc, tertiary-subtle-active: #a3dffb, tertiary: #03a9f4, tertiary-hover: #039ae0, tertiary-active: #028ccb, tertiary-emphasis: #61c9f9, tertiary-on-subtle: #023f5c, on-tertiary: #ffffff, tertiary-on-surface: #028ccb, info-subtle: #d2e2fb, info-subtle-hover: #bdd4f8, info-subtle-active: #80acf4, info: #0058e9, info-hover: #0052d6, info-active: #004ac2, info-emphasis: #6098f2, info-on-subtle: #002259, on-info: #ffffff, info-on-surface: #004ac2, success-subtle: #dcf0d3, success-subtle-hover: #cbe9bf, success-subtle-active: #b7e1a5, success: #37b400, success-hover: #32a500, success-active: #2d9600, success-emphasis: #81d15f, success-on-subtle: #1c5a00, on-success: #ffffff, success-on-surface: #2d9600, warning-subtle: #fff4d3, warning-subtle-hover: #ffeebd, warning-subtle-active: #ffe79e, warning: #ffc000, warning-hover: #eaaf00, warning-active: #d49f00, warning-emphasis: #ffd760, warning-on-subtle: #5e4700, on-warning: #3d3d3d, warning-on-surface: #ffc000, error-subtle: #fcddda, error-subtle-hover: #fbc8c3, error-subtle-active: #f98b80, error: #f31700, error-hover: #df1600, error-active: #ca1400, error-emphasis: #f76f60, error-on-subtle: #7a0c00, on-error: #ffffff, error-on-surface: #ca1400, light-subtle: #fafafa, light-subtle-hover: #f5f5f5, light-subtle-active: #ebebeb, light: #ebebeb, light-hover: #e0e0e0, light-active: #d6d6d6, light-emphasis: #d6d6d6, light-on-subtle: #141414, on-light: #000000, light-on-surface: #e0e0e0, dark-subtle: #c2c2c2, dark-subtle-hover: #adadad, dark-subtle-active: #999999, dark: #3d3d3d, dark-hover: #292929, dark-active: #1f1f1f, dark-emphasis: #666666, dark-on-subtle: #1f1f1f, on-dark: #ffffff, dark-on-surface: #141414, inverse-subtle: #c2c2c2, inverse-subtle-hover: #adadad, inverse-subtle-active: #999999, inverse: #3d3d3d, inverse-hover: #292929, inverse-active: #1f1f1f, inverse-emphasis: #666666, inverse-on-subtle: #1f1f1f, on-inverse: #ffffff, inverse-on-surface: #141414, series-a: #ff6358, series-a-bold: #bf4a42, series-a-bolder: #80322c, series-a-subtle: #ffb1ac, series-a-subtler: #ff8a82, series-b: #ffe162, series-b-bold: #bfa94a, series-b-bolder: #807131, series-b-subtle: #fff0b1, series-b-subtler: #ffe989, series-c: #4cd180, series-c-bold: #399d60, series-c-bolder: #266940, series-c-subtle: #a6e8c0, series-c-subtler: #79dda0, series-d: #4b5ffa, series-d-bold: #3847bc, series-d-bolder: #26307d, series-d-subtle: #a5affd, series-d-subtler: #7887fb, series-e: #ac58ff, series-e-bold: #8142bf, series-e-bolder: #562c80, series-e-subtle: #d6acff, series-e-subtler: #c182ff, series-f: #ff5892, series-f-bold: #bf426e, series-f-bolder: #802c49, series-f-subtle: #ffacc9, series-f-subtler: #ff82ae)$kendo-color-gradient-spacerNumberk-map-get( $kendo-spacing, 3 )12px
Description
The global default Colors map.
+
Description
The spacer of the ColorGradient.
$kendo-color-primaryColor#ff6358#ff6358$kendo-color-gradient-widthNumber272px272px
Description
The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
+
Description
The width of the ColorGradient.
$kendo-color-primary-contrastColork-contrast-legacy($kendo-color-primary)white$kendo-color-gradient-border-widthNumber1px1px
Description
The color used along with the primary color denoted by $kendo-color-primary.
Used to provide contrast between the background and foreground colors.
+
Description
The width of the border around the ColorGradient.
$kendo-color-secondaryColor#666666#666666$kendo-color-gradient-border-radiusNumber$kendo-border-radius-md4px
Description
The secondary color of the theme.
+
Description
The border radius of the ColorGradient.
$kendo-color-secondary-contrastColork-contrast-legacy($kendo-color-secondary)white$kendo-color-gradient-padding-yNumber$kendo-color-gradient-spacer12px
Description
The color used along with the secondary color denoted by $kendo-color-secondary.
Used to provide contrast between the background and foreground colors.
+
Description
The vertical padding of the ColorGradient.
$kendo-color-tertiaryColor#03a9f4#03a9f4$kendo-color-gradient-padding-xNumber$kendo-color-gradient-padding-y12px
Description
The tertiary color of the theme.
+
Description
The horizontal padding of the ColorGradient.
$kendo-color-tertiary-contrastColork-contrast-legacy($kendo-color-tertiary)white$kendo-color-gradient-gapNumber$kendo-color-gradient-spacer12px
Description
The color used along with the tertiary color denoted by $kendo-color-tertiary.
Used to provide contrast between the background and foreground colors.
+
Description
The spacing between the sections of the ColorGradient.
$kendo-color-infoColor#0058e9#0058e9$kendo-color-gradient-font-familyString$kendo-font-familyinherit
Description
The color for informational messages and states.
+
Description
The font family of the ColorGradient.
$kendo-color-successColor#37b400#37b400$kendo-color-gradient-font-sizeNumber$kendo-font-size-md14px
Description
The color for success messages and states.
+
Description
The font size of the ColorGradient.
$kendo-color-warningColor#ffc000#ffc000$kendo-color-gradient-line-heightNumber$kendo-line-height-md1.4285714286
Description
The color for warning messages and states.
+
Description
The line height of the ColorGradient.
$kendo-color-error$kendo-color-gradient-text Color#f31700#f31700$kendo-component-text#424242
Description
The color for error messages and states.
+
Description
The text color of the ColorGradient.
$kendo-color-dark$kendo-color-gradient-bg Color#424242#424242$kendo-component-bg#ffffff
Description
The dark color of the theme.
+
Description
The background color of the ColorGradient.
$kendo-color-light$kendo-color-gradient-border Color#ebebeb#ebebeb$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The light color of the theme.
+
Description
The border color of the ColorGradient.
$kendo-color-inverseColorif($kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark)#424242$kendo-color-gradient-focus-borderNullnullnull
Description
Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
+
Description
The border color of the focused ColorGradient.
- -### Coloreditor - - - - - - - - - - - - - - - - - - - - - + + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - - - - - - - - - - - - - - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - - - - - - -
NameTypeDefault valueComputed value
$kendo-color-editor-spacerNumberk-map-get( $kendo-spacing, 3 )12px
$kendo-color-gradient-focus-shadowStringk-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The spacer of the ColorEditor.
+
Description
The box shadow of the focused ColorGradient.
$kendo-color-editor-min-width$kendo-color-gradient-canvas-border-radius Number272px272px$kendo-border-radius-md4px
Description
The minimum width of the ColorEditor.
+
Description
The border radius of the ColorGradient canvas.
$kendo-color-editor-border-width$kendo-color-gradient-canvas-gap Number1px1px$kendo-color-gradient-spacer12px
Description
The width of the border around the ColorEditor.
+
Description
The spacing between the items of the ColorGradient canvas.
$kendo-color-editor-border-radius$kendo-color-gradient-canvas-rectangle-height Number$kendo-border-radius-md4px180px180px
Description
The border radius of the ColorEditor.
+
Description
The height the ColorGradient canvas hsv rectangle.
$kendo-color-editor-font-familyString$kendo-font-familyinherit$kendo-color-gradient-slider-track-sizeNumber10px10px
Description
The font family of the ColorEditor.
+
Description
The width of the ColorGradient slider.
$kendo-color-editor-font-size$kendo-color-gradient-slider-border-radius Number$kendo-font-size-md14px10px10px
Description
The font size of the ColorEditor.
+
Description
The border radius of the ColorGradient slider.
$kendo-color-editor-line-height$kendo-color-gradient-slider-draghandle-border-width Number$kendo-line-height-md1.42857142863px3px
Description
The line height of the ColorEditor.
+
Description
The width of the border around the ColorGradient slider drag handle.
$kendo-color-editor-textColor$kendo-component-text#424242$kendo-color-gradient-slider-vertical-sizeNumber180px180px
Description
The text color of the ColorEditor.
+
Description
The height of the ColorGradient vertical slider.
$kendo-color-editor-bgColor$kendo-component-bg#ffffff$kendo-color-gradient-slider-horizontal-sizeNumber100%100%
Description
The background color of the ColorEditor.
+
Description
The width of the ColorGradient horizontal slider.
$kendo-color-editor-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)$kendo-color-gradient-draghandle-widthNumber14px14px
Description
The border color of the ColorEditor.
+
Description
The width of the ColorGradient canvas drag handle.
$kendo-color-editor-focus-borderNullnullnull$kendo-color-gradient-draghandle-heightNumber14px14px
Description
The border color of the focused ColorEditor.
+
Description
The height of the ColorGradient canvas drag handle.
$kendo-color-editor-focus-shadowNullnullnull$kendo-color-gradient-draghandle-border-widthNumber1px1px
Description
The box shadow of the focused ColorEditor.
-
$kendo-color-editor-header-padding-yNumber$kendo-color-editor-spacer12px
Description
The vertical padding of the ColorEditor header.
-
$kendo-color-editor-header-padding-xNumber$kendo-color-editor-header-padding-y12px
Description
The horizontal padding of the ColorEditor header.
+
Description
The width of the border around the ColorGradient canvas drag handle.
$kendo-color-editor-header-actions-gap$kendo-color-gradient-draghandle-outline-width Numberk-math-div( $kendo-color-editor-spacer, 1.5 )8px1px1px
Description
The spacing between the ColorEditor header actions.
+
Description
The width of the outline around the ColorGradient canvas drag handle.
$kendo-color-editor-color-preview-width$kendo-color-gradient-draghandle-border-radius Number32px32px50%50%
Description
The width of the ColorEditor preview.
+
Description
The border radius of the ColorGradient canvas drag handle.
$kendo-color-editor-color-preview-heightNumber12px12px$kendo-color-gradient-draghandle-textNullnullnull
Description
The height of the ColorEditor preview.
+
Description
The text color of the ColorGradient canvas drag handle.
$kendo-color-editor-preview-gapNumberk-map-get( $kendo-spacing, 1 )4px$kendo-color-gradient-draghandle-bgColortransparenttransparent
Description
The spacing between the colors in the ColorEditor preview.
+
Description
The background color of the ColorGradient canvas drag handle.
$kendo-color-editor-views-padding-yNumber$kendo-color-editor-spacer12px$kendo-color-gradient-draghandle-borderColorrgba( $kendo-color-white, .8)rgba(255, 255, 255, 0.8)
Description
The vertical padding of the ColorEditor views container.
+
Description
The color of the border around the ColorGradient canvas drag handle.
$kendo-color-editor-views-padding-xNumber$kendo-color-editor-views-padding-y12px$kendo-color-gradient-draghandle-shadowColorrgba( $kendo-color-black, .5 )rgba(0, 0, 0, 0.5)
Description
The horizontal padding of the ColorEditor views container.
+
Description
The color of the outline around the ColorGradient canvas drag handle.
$kendo-color-editor-views-gapNumber$kendo-color-editor-spacer12px$kendo-color-gradient-draghandle-focus-shadowColor$kendo-color-black#000000
Description
The spacing of the ColorEditor views container.
+
Description
The focus color of the outline around the ColorGradient canvas drag handle.
$kendo-color-editor-color-gradient-focus-outline-color$kendo-color-gradient-draghandle-hover-shadow Colorrgba(0, 0, 0, .3)rgba(0, 0, 0, 0.3)$kendo-color-black#000000
Description
The outline color of the focused ColorGradient.
+
Description
The hover color of the outline around the ColorGradient canvas drag handle.
$kendo-color-editor-color-gradient-focus-outlineNumber2px2px$kendo-color-gradient-draghandle-shadowColork-elevation(2)rgba(0, 0, 0, 0.5)
Description
The outline width of the focused ColorGradient.
+
Description
The box shadow of the ColorGradient canvas drag handle.
$kendo-color-editor-color-gradient-focus-outline-offset$kendo-color-gradient-canvas-draghandle-margin-y Number4px4px
Description
The outline offset of the focused ColorGradient.
-
- -### Colorpalette - - - - - - - - - - - - - - - - - - - - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-color-palette-font-familyString$kendo-font-familyinherit- k-math-div( $kendo-color-gradient-draghandle-height, 2 )-7px
Description
The font family of the ColorPalette.
+
Description
The vertical margin of the ColorGradient canvas drag handle.
$kendo-color-palette-font-size$kendo-color-gradient-canvas-draghandle-margin-x Number$kendo-font-size-md14px- k-math-div( $kendo-color-gradient-draghandle-width, 2 )-7px
Description
The font size of the ColorPalette.
+
Description
The horizontal margin of the ColorGradient canvas drag handle.
$kendo-color-palette-line-height$kendo-color-gradient-input-width Number0046px46px
Description
The line height of the ColorPalette.
+
Description
The width of the ColorGradient input.
$kendo-color-palette-tile-width$kendo-color-gradient-input-gap Numberk-map-get( $kendo-spacing, 6 )24pxk-math-div( $kendo-color-gradient-spacer, 1.5 )8px
Description
The width of the ColorPalette tile.
+
Description
The spacing between the ColorGradient inputs.
$kendo-color-palette-tile-height$kendo-color-gradient-input-label-gap Number$kendo-color-palette-tile-width24pxk-math-div( $kendo-color-gradient-spacer, 3 )4px
Description
The height of the ColorPalette tile.
+
Description
The spacing between the ColorGradient inputs and their labels.
$kendo-color-palette-tile-focus-shadowList0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 )0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.5)$kendo-color-gradient-input-label-textColor$kendo-subtle-text#666666
Description
The shadow of the ColorPalette focused tile.
+
Description
The text color of the ColorGradient input labels.
$kendo-color-palette-tile-hover-shadowList0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 )0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.8)$kendo-color-gradient-contrast-ratio-font-weightNumber$kendo-font-weight-bold700
Description
The shadow of the ColorPalette hovered tile.
+
Description
The font weight of the ColorGradient contrast ratio text.
$kendo-color-palette-tile-selected-shadowList0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 )0 1px 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px white$kendo-color-gradient-contrast-spacerNumberk-math-div( $kendo-color-gradient-spacer, 1.5 )8px
Description
The shadow of the ColorPalette selected tile.
+
Description
The spacing between the items in the ColorGradient contrast tool.
-### Component +### Color System @@ -5314,159 +5384,149 @@ The following table lists the available variables for customizing the Default th - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - - - - - - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + -
$kendo-component-bgColor$kendo-body-bg#ffffff$kendo-colorsMap$_default-colors(app-surface: #ffffff, on-app-surface: #3d3d3d, subtle: #666666, surface: #fafafa, surface-alt: #ffffff, border: rgba(0, 0, 0, 0.08), border-alt: rgba(0, 0, 0, 0.16), base-subtle: #ebebeb, base-subtle-hover: #e0e0e0, base-subtle-active: #d6d6d6, base: #f5f5f5, base-hover: #ebebeb, base-active: #d6d6d6, base-emphasis: #c2c2c2, base-on-subtle: #3d3d3d, on-base: #3d3d3d, base-on-surface: #3d3d3d, primary-subtle: #ffeceb, primary-subtle-hover: #ffdedb, primary-subtle-active: #ffc8c4, primary: #ff6358, primary-hover: #ea5a51, primary-active: #d45349, primary-emphasis: #ff9d97, primary-on-subtle: #5c201c, on-primary: #ffffff, primary-on-surface: #ff6358, secondary-subtle: #fafafa, secondary-subtle-hover: #f5f5f5, secondary-subtle-active: #ebebeb, secondary: #666666, secondary-hover: #525252, secondary-active: #3d3d3d, secondary-emphasis: #e0e0e0, secondary-on-subtle: #141414, on-secondary: #ffffff, secondary-on-surface: #292929, tertiary-subtle: #d8f1fd, tertiary-subtle-hover: #c5eafc, tertiary-subtle-active: #a3dffb, tertiary: #03a9f4, tertiary-hover: #039ae0, tertiary-active: #028ccb, tertiary-emphasis: #61c9f9, tertiary-on-subtle: #023f5c, on-tertiary: #ffffff, tertiary-on-surface: #028ccb, info-subtle: #d2e2fb, info-subtle-hover: #bdd4f8, info-subtle-active: #80acf4, info: #0058e9, info-hover: #0052d6, info-active: #004ac2, info-emphasis: #6098f2, info-on-subtle: #002259, on-info: #ffffff, info-on-surface: #004ac2, success-subtle: #dcf0d3, success-subtle-hover: #cbe9bf, success-subtle-active: #b7e1a5, success: #37b400, success-hover: #32a500, success-active: #2d9600, success-emphasis: #81d15f, success-on-subtle: #1c5a00, on-success: #ffffff, success-on-surface: #2d9600, warning-subtle: #fff4d3, warning-subtle-hover: #ffeebd, warning-subtle-active: #ffe79e, warning: #ffc000, warning-hover: #eaaf00, warning-active: #d49f00, warning-emphasis: #ffd760, warning-on-subtle: #5e4700, on-warning: #3d3d3d, warning-on-surface: #ffc000, error-subtle: #fcddda, error-subtle-hover: #fbc8c3, error-subtle-active: #f98b80, error: #f31700, error-hover: #df1600, error-active: #ca1400, error-emphasis: #f76f60, error-on-subtle: #7a0c00, on-error: #ffffff, error-on-surface: #ca1400, light-subtle: #fafafa, light-subtle-hover: #f5f5f5, light-subtle-active: #ebebeb, light: #ebebeb, light-hover: #e0e0e0, light-active: #d6d6d6, light-emphasis: #d6d6d6, light-on-subtle: #141414, on-light: #000000, light-on-surface: #e0e0e0, dark-subtle: #c2c2c2, dark-subtle-hover: #adadad, dark-subtle-active: #999999, dark: #3d3d3d, dark-hover: #292929, dark-active: #1f1f1f, dark-emphasis: #666666, dark-on-subtle: #1f1f1f, on-dark: #ffffff, dark-on-surface: #141414, inverse-subtle: #c2c2c2, inverse-subtle-hover: #adadad, inverse-subtle-active: #999999, inverse: #3d3d3d, inverse-hover: #292929, inverse-active: #1f1f1f, inverse-emphasis: #666666, inverse-on-subtle: #1f1f1f, on-inverse: #ffffff, inverse-on-surface: #141414, series-a: #ff6358, series-a-bold: #bf4a42, series-a-bolder: #80322c, series-a-subtle: #ffb1ac, series-a-subtler: #ff8a82, series-b: #ffe162, series-b-bold: #bfa94a, series-b-bolder: #807131, series-b-subtle: #fff0b1, series-b-subtler: #ffe989, series-c: #4cd180, series-c-bold: #399d60, series-c-bolder: #266940, series-c-subtle: #a6e8c0, series-c-subtler: #79dda0, series-d: #4b5ffa, series-d-bold: #3847bc, series-d-bolder: #26307d, series-d-subtle: #a5affd, series-d-subtler: #7887fb, series-e: #ac58ff, series-e-bold: #8142bf, series-e-bolder: #562c80, series-e-subtle: #d6acff, series-e-subtler: #c182ff, series-f: #ff5892, series-f-bold: #bf426e, series-f-bolder: #802c49, series-f-subtle: #ffacc9, series-f-subtler: #ff82ae)
Description
Background color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.
+
Description
The global default Colors map.
$kendo-component-text$kendo-color-primary Color$kendo-body-text#424242#ff6358#ff6358
Description
Text color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.
+
Description
The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$kendo-component-border$kendo-color-primary-contrast Colorrgba(if($kendo-is-dark-theme, $kendo-color-white, $kendo-color-black), 0.08)rgba(0, 0, 0, 0.08)k-contrast-legacy($kendo-color-primary)white
Description
Border color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.
+
Description
The color used along with the primary color denoted by $kendo-color-primary.
Used to provide contrast between the background and foreground colors.
$kendo-component-header-bg$kendo-color-secondary Color$kendo-base-bg#fafafa#666666#666666
Description
Background color of the component header.
+
Description
The secondary color of the theme.
$kendo-component-header-text$kendo-color-secondary-contrast Color$kendo-base-text#424242k-contrast-legacy($kendo-color-secondary)white
Description
Text color of the component header.
+
Description
The color used along with the secondary color denoted by $kendo-color-secondary.
Used to provide contrast between the background and foreground colors.
$kendo-component-header-border$kendo-color-tertiary Color$kendo-base-borderrgba(0, 0, 0, 0.08)#03a9f4#03a9f4
Description
Border color of the component header.
-
$kendo-component-header-gradientNullnullnull
Description
Gradient of the component header.
+
Description
The tertiary color of the theme.
$kendo-invalid-bgNullnullnull$kendo-color-tertiary-contrastColork-contrast-legacy($kendo-color-tertiary)white
Description
Background color of the invalid items.
+
Description
The color used along with the tertiary color denoted by $kendo-color-tertiary.
Used to provide contrast between the background and foreground colors.
$kendo-invalid-text$kendo-color-info Color$kendo-color-error#f31700#0058e9#0058e9
Description
Text color of the invalid items.
+
Description
The color for informational messages and states.
$kendo-invalid-border$kendo-color-success Color$kendo-color-error#f31700#37b400#37b400
Description
Border color of the invalid items.
+
Description
The color for success messages and states.
$kendo-invalid-shadowNullnullnull$kendo-color-warningColor#ffc000#ffc000
Description
Shadow of the invalid items.
+
Description
The color for warning messages and states.
$kendo-valid-bgNullnullnull$kendo-color-errorColor#f31700#f31700
Description
Background color of the valid items.
+
Description
The color for error messages and states.
$kendo-valid-text$kendo-color-dark Color$kendo-color-success#37b400#424242#424242
Description
Text color of the valid items.
+
Description
The dark color of the theme.
$kendo-valid-border$kendo-color-light Color$kendo-color-success#37b400#ebebeb#ebebeb
Description
Border color of the valid items.
+
Description
The light color of the theme.
$kendo-valid-shadowNullnullnull$kendo-color-inverseColorif($kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark)#424242
Description
Shadow of the valid items.
+
Description
Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
-### Dialog +### Coloreditor @@ -5484,463 +5544,519 @@ The following table lists the available variables for customizing the Default th - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - -
$kendo-dialog-titlebar-bgColor$kendo-component-header-bg#fafafa$kendo-color-editor-spacerNumberk-map-get( $kendo-spacing, 3 )12px
Description
The background color of the Dialog titlebar.
+
Description
The spacer of the ColorEditor.
$kendo-dialog-titlebar-textColor$kendo-component-header-text#424242$kendo-color-editor-min-widthNumber272px272px
Description
The text color of the Dialog titlebar.
+
Description
The minimum width of the ColorEditor.
$kendo-dialog-titlebar-borderStringinheritinherit$kendo-color-editor-border-widthNumber1px1px
Description
The border color of the Dialog titlebar.
+
Description
The width of the border around the ColorEditor.
$kendo-dialog-buttongroup-padding-x$kendo-color-editor-border-radius Number$kendo-actions-padding-x8px$kendo-border-radius-md4px
Description
The horizontal padding of the Dialog action buttons.
+
Description
The border radius of the ColorEditor.
$kendo-dialog-buttongroup-padding-yNumber$kendo-actions-padding-y8px$kendo-color-editor-font-familyString$kendo-font-familyinherit
Description
The vertical padding of the Dialog action buttons.
+
Description
The font family of the ColorEditor.
$kendo-dialog-buttongroup-border-width$kendo-color-editor-font-size Number1px1px$kendo-font-size-md14px
Description
The width of the top border of the Dialog action buttons.
+
Description
The font size of the ColorEditor.
$kendo-dialog-button-spacing$kendo-color-editor-line-height Number$kendo-actions-button-spacing8px$kendo-line-height-md1.4285714286
Description
The spacing between the Dialog action buttons.
+
Description
The line height of the ColorEditor.
$kendo-dialog-theme-colorsMap( - "primary": k-map-get($kendo-theme-colors, "primary"), - "light": k-map-get($kendo-theme-colors, "light"), - "dark": k-map-get($kendo-theme-colors, "dark") -)("primary": #ff6358, "light": #ebebeb, "dark": #424242)$kendo-color-editor-textColor$kendo-component-text#424242
Description
The theme colors map for the Dialog.
+
Description
The text color of the ColorEditor.
- -### Dock-manager - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - + + +
NameTypeDefault valueComputed value
$kendo-dock-manager-border-widthNumber1px1px
$kendo-color-editor-bgColor$kendo-component-bg#ffffff
Description
The width of the border around the DockManager component.
+
Description
The background color of the ColorEditor.
$kendo-dock-manager-border-styleStringsolidsolid$kendo-color-editor-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The style of the border around the DockManager component.
+
Description
The border color of the ColorEditor.
$kendo-dock-manager-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)$kendo-color-editor-focus-borderNullnullnull
Description
The color of the border around the DockManager component.
+
Description
The border color of the focused ColorEditor.
$kendo-dock-manager-pane-header-padding-yNumberk-map-get( $kendo-spacing, 2 )8px$kendo-color-editor-focus-shadowNullnullnull
Description
The vertical padding of the pane header in the DockManager component.
+
Description
The box shadow of the focused ColorEditor.
$kendo-dock-manager-pane-header-padding-x$kendo-color-editor-header-padding-y Numberk-map-get( $kendo-spacing, 4 )16px$kendo-color-editor-spacer12px
Description
The horizontal padding of the pane header in the DockManager component.
+
Description
The vertical padding of the ColorEditor header.
$kendo-dock-manager-pane-header-border-width$kendo-color-editor-header-padding-x Number$kendo-dock-manager-border-width1px$kendo-color-editor-header-padding-y12px
Description
The width of the border around the pane header in the DockManager component.
+
Description
The horizontal padding of the ColorEditor header.
$kendo-dock-manager-pane-header-border-styleStringsolidsolid$kendo-color-editor-header-actions-gapNumberk-math-div( $kendo-color-editor-spacer, 1.5 )8px
Description
The style of the border around the pane header in the DockManager component.
+
Description
The spacing between the ColorEditor header actions.
$kendo-dock-manager-pane-header-bgColor$kendo-component-header-bg#fafafa
$kendo-color-editor-color-preview-widthNumber32px32px
Description
The background color of the pane header in the DockManager component.
+
Description
The width of the ColorEditor preview.
$kendo-dock-manager-pane-title-padding-yNullnullnull$kendo-color-editor-color-preview-heightNumber12px12px
Description
The vertical padding of the pane title in the DockManager component.
+
Description
The height of the ColorEditor preview.
$kendo-dock-manager-pane-title-padding-xNullnullnull$kendo-color-editor-preview-gapNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the pane title in the DockManager component.
+
Description
The spacing between the colors in the ColorEditor preview.
$kendo-dock-manager-pane-title-font-familyString$kendo-font-familyinherit$kendo-color-editor-views-padding-yNumber$kendo-color-editor-spacer12px
Description
The font family of the pane title in the DockManager component.
+
Description
The vertical padding of the ColorEditor views container.
$kendo-dock-manager-pane-title-font-size$kendo-color-editor-views-padding-x Number$kendo-font-size-lg16px$kendo-color-editor-views-padding-y12px
Description
The font size of the pane title in the DockManager component.
+
Description
The horizontal padding of the ColorEditor views container.
$kendo-dock-manager-pane-title-line-height$kendo-color-editor-views-gap Number$kendo-line-height-sm1.25$kendo-color-editor-spacer12px
Description
The line height of the pane title in the DockManager component.
+
Description
The spacing of the ColorEditor views container.
$kendo-dock-manager-pane-title-font-weightNumber$kendo-font-weight-normal400$kendo-color-editor-color-gradient-focus-outline-colorColorrgba(0, 0, 0, .3)rgba(0, 0, 0, 0.3)
Description
The font weight of the pane title in the DockManager component.
+
Description
The outline color of the focused ColorGradient.
$kendo-dock-manager-pane-content-padding-x$kendo-color-editor-color-gradient-focus-outline Number$kendo-dock-manager-pane-header-padding-x16px2px2px
Description
The horizontal padding of the pane content in the DockManager component.
+
Description
The outline width of the focused ColorGradient.
$kendo-dock-manager-pane-content-padding-y$kendo-color-editor-color-gradient-focus-outline-offset Number$kendo-dock-manager-pane-header-padding-x16px4px4px
Description
The vertical padding of the pane content in the DockManager component.
+
Description
The outline offset of the focused ColorGradient.
+
+ +### Colorpalette + + + + + + + + + + + + + + + + + + + + + + + + - + - + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - + +
NameTypeDefault valueComputed value
$kendo-color-palette-font-familyString$kendo-font-familyinherit
Description
The font family of the ColorPalette.
$kendo-dock-manager-tabbed-pane-padding-y$kendo-color-palette-font-size Numberk-map-get( $kendo-spacing, 3.5 )$kendo-font-size-md 14px
Description
The horizontal padding of the tabbed pane in the DockManager component.
+
Description
The font size of the ColorPalette.
$kendo-dock-manager-tabbed-pane-padding-x$kendo-color-palette-line-height Numberk-map-get( $kendo-spacing, 2 )8px00
Description
The horizontal padding of the tabbed pane in the DockManager component.
+
Description
The line height of the ColorPalette.
$kendo-dock-manager-unpinned-container-width$kendo-color-palette-tile-width Number300px300pxk-map-get( $kendo-spacing, 6 )24px
Description
The width of the unpinned pane container in the DockManager component.
+
Description
The width of the ColorPalette tile.
$kendo-dock-manager-unpinned-container-bgColor$kendo-color-white#ffffff$kendo-color-palette-tile-heightNumber$kendo-color-palette-tile-width24px
Description
The background-color of the unpinned pane container in the DockManager component.
+
Description
The height of the ColorPalette tile.
$kendo-dock-manager-unpinned-container-shadow$kendo-color-palette-tile-focus-shadow List4px 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)0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 )0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.5)
Description
The box shadow of the unpinned pane container in the DockManager component.
+
Description
The shadow of the ColorPalette focused tile.
$kendo-dock-indicator-paddingNumberk-map-get( $kendo-spacing, 1.5 )6px$kendo-color-palette-tile-hover-shadowList0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 )0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.8)
Description
The padding of the dock indicator in the DockManager component.
+
Description
The shadow of the ColorPalette hovered tile.
$kendo-dock-indicator-bgColor#f5f5f5#f5f5f5$kendo-color-palette-tile-selected-shadowList0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 )0 1px 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px white
Description
The background color of the dock indicator in the DockManager component.
+
Description
The shadow of the ColorPalette selected tile.
$kendo-dock-indicator-text
+ +### Component + + + + + + + + + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + - - + + - - + - - + + - + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-component-bg Color$kendo-color-primary#ff6358$kendo-body-bg#ffffff
Description
The text color of the dock indicator in the DockManager component.
+
Description
Background color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.
$kendo-dock-indicator-outline-widthNumber1px1px$kendo-component-textColor$kendo-body-text#424242
Description
The outline width of the dock indicator in the DockManager component.
+
Description
Text color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.
$kendo-dock-indicator-outline-styleStringsolidsolid$kendo-component-borderColorrgba(if($kendo-is-dark-theme, $kendo-color-white, $kendo-color-black), 0.08)rgba(0, 0, 0, 0.08)
Description
The outline style of the dock indicator in the DockManager component.
+
Description
Border color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.
$kendo-dock-indicator-outline$kendo-component-header-bg Color$kendo-dock-indicator-text#ff6358$kendo-base-bg#fafafa
Description
The outline color of the dock indicator in the DockManager component.
+
Description
Background color of the component header.
$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))$kendo-component-header-textColor$kendo-base-text#424242
Description
The box shadow of the dock indicator in the DockManager component.
+
Description
Text color of the component header.
$kendo-dock-indicator-hover-bg$kendo-component-header-border Color$kendo-color-primary#ff6358$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The background color of the hovered dock indicator in the DockManager component.
+
Description
Border color of the component header.
$kendo-dock-indicator-hover-textColor$kendo-color-white#ffffff$kendo-component-header-gradientNullnullnull
Description
The text color of the hovered dock indicator in the DockManager component.
+
Description
Gradient of the component header.
$kendo-dock-manager-dock-preview-border-widthNumber1px1px$kendo-invalid-bgNullnullnull
Description
The width of the border around the dropping area in the DockManager component.
+
Description
Background color of the invalid items.
$kendo-dock-manager-dock-preview-border-styleStringdasheddashed$kendo-invalid-textColor$kendo-color-error#f31700
Description
The style of the border around the dropping area in the DockManager component.
+
Description
Text color of the invalid items.
$kendo-dock-manager-dock-preview-border-radiusNumber$kendo-border-radius-sm2px$kendo-invalid-borderColor$kendo-color-error#f31700
Description
The border radius of the dropping area in the DockManager component.
+
Description
Border color of the invalid items.
$kendo-dock-manager-dock-preview-bg$kendo-invalid-shadowNullnullnull
Description
Shadow of the invalid items.
+
$kendo-valid-bgNullnullnull
Description
Background color of the valid items.
+
$kendo-valid-text Colorif($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 ))rgba(255, 99, 88, 0.16)$kendo-color-success#37b400
Description
The background color of the dropping area in the DockManager component.
+
Description
Text color of the valid items.
$kendo-dock-manager-dock-preview-border$kendo-valid-border Color$kendo-color-primary#ff6358$kendo-color-success#37b400
Description
The border color of the dropping area in the DockManager component.
+
Description
Border color of the valid items.
+
$kendo-valid-shadowNullnullnull
Description
Shadow of the valid items.
-### Dropdowntree +### Dialog @@ -5958,29 +6074,93 @@ The following table lists the available variables for customizing the Default th - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - + - + - + + + + + + + + + + + + + + + + + + + + + + + + + + +
$kendo-dropdowntree-popup-padding-x$kendo-dialog-titlebar-bgColor$kendo-component-header-bg#fafafa
Description
The background color of the Dialog titlebar.
+
$kendo-dialog-titlebar-textColor$kendo-component-header-text#424242
Description
The text color of the Dialog titlebar.
+
$kendo-dialog-titlebar-borderStringinheritinherit
Description
The border color of the Dialog titlebar.
+
$kendo-dialog-buttongroup-padding-x Numberk-map-get( $kendo-spacing, 2 )$kendo-actions-padding-x 8px
Description
The horizontal padding of the DropdownTree popup
+
Description
The horizontal padding of the Dialog action buttons.
$kendo-dropdowntree-popup-padding-y$kendo-dialog-buttongroup-padding-y Numberk-map-get( $kendo-spacing, 2 )$kendo-actions-padding-y 8px
Description
The vertical padding of the DropdownTree popup
+
Description
The vertical padding of the Dialog action buttons.
+
$kendo-dialog-buttongroup-border-widthNumber1px1px
Description
The width of the top border of the Dialog action buttons.
+
$kendo-dialog-button-spacingNumber$kendo-actions-button-spacing8px
Description
The spacing between the Dialog action buttons.
+
$kendo-dialog-theme-colorsMap( + "primary": k-map-get($kendo-theme-colors, "primary"), + "light": k-map-get($kendo-theme-colors, "light"), + "dark": k-map-get($kendo-theme-colors, "dark") +)("primary": #ff6358, "light": #ebebeb, "dark": #424242)
Description
The theme colors map for the Dialog.
-### Dropzone +### Dock-manager @@ -5998,379 +6178,359 @@ The following table lists the available variables for customizing the Default th - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - -
$kendo-dropzone-padding-x$kendo-dock-manager-border-width Numberk-map-get( $kendo-spacing, 2 )8px1px1px
Description
The horizontal padding of the DropZone.
+
Description
The width of the border around the DockManager component.
$kendo-dropzone-padding-yNumberk-map-get( $kendo-spacing, 2 )8px$kendo-dock-manager-border-styleStringsolidsolid
Description
The vertical padding of the DropZone.
+
Description
The style of the border around the DockManager component.
$kendo-dropzone-border-widthNumber1px1px$kendo-dock-manager-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The border width of the DropZone.
+
Description
The color of the border around the DockManager component.
$kendo-dropzone-min-height$kendo-dock-manager-pane-header-padding-y Number220px220pxk-map-get( $kendo-spacing, 2 )8px
Description
The minimum height of the DropZone.
+
Description
The vertical padding of the pane header in the DockManager component.
$kendo-dropzone-font-familyString$kendo-font-familyinherit$kendo-dock-manager-pane-header-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The font family of the DropZone.
+
Description
The horizontal padding of the pane header in the DockManager component.
$kendo-dropzone-font-size$kendo-dock-manager-pane-header-border-width Number$kendo-font-size-md14px$kendo-dock-manager-border-width1px
Description
The font size of the DropZone.
+
Description
The width of the border around the pane header in the DockManager component.
$kendo-dropzone-line-heightNumber$kendo-line-height-md1.4285714286$kendo-dock-manager-pane-header-border-styleStringsolidsolid
Description
The line height of the DropZone.
+
Description
The style of the border around the pane header in the DockManager component.
$kendo-dropzone-bg$kendo-dock-manager-pane-header-bg Color$kendo-base-bg$kendo-component-header-bg #fafafa
Description
The background color of the DropZone.
+
Description
The background color of the pane header in the DockManager component.
$kendo-dropzone-textColor$kendo-base-text#424242$kendo-dock-manager-pane-title-padding-yNullnullnull
Description
The text color of the DropZone.
+
Description
The vertical padding of the pane title in the DockManager component.
$kendo-dropzone-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)$kendo-dock-manager-pane-title-padding-xNullnullnull
Description
The border color of the DropZone.
+
Description
The horizontal padding of the pane title in the DockManager component.
$kendo-dropzone-icon-spacingNumberk-map-get( $kendo-spacing, 6 )24px$kendo-dock-manager-pane-title-font-familyString$kendo-font-familyinherit
Description
The spacing below the DropZone icon.
+
Description
The font family of the pane title in the DockManager component.
$kendo-dropzone-icon-textColorif($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 ))#7e7e7e$kendo-dock-manager-pane-title-font-sizeNumber$kendo-font-size-lg16px
Description
The text color of the DropZone icon.
+
Description
The font size of the pane title in the DockManager component.
$kendo-dropzone-icon-hover-textColor$kendo-color-primary#ff6358$kendo-dock-manager-pane-title-line-heightNumber$kendo-line-height-sm1.25
Description
The text color of the hovered DropZone icon.
+
Description
The line height of the pane title in the DockManager component.
$kendo-dropzone-hint-font-sizeNullnullnull$kendo-dock-manager-pane-title-font-weightNumber$kendo-font-weight-normal400
Description
The font size of the DropZone hint.
+
Description
The font weight of the pane title in the DockManager component.
$kendo-dropzone-hint-spacing$kendo-dock-manager-pane-content-padding-x Numberk-map-get( $kendo-spacing, 2 )8px$kendo-dock-manager-pane-header-padding-x16px
Description
The spacing below the DropZone hint.
+
Description
The horizontal padding of the pane content in the DockManager component.
$kendo-dropzone-hint-textNullnullnull$kendo-dock-manager-pane-content-padding-yNumber$kendo-dock-manager-pane-header-padding-x16px
Description
The text color of the DropZone hint.
+
Description
The vertical padding of the pane content in the DockManager component.
$kendo-dropzone-note-font-size$kendo-dock-manager-tabbed-pane-padding-y Number$kendo-font-size-sm12pxk-map-get( $kendo-spacing, 3.5 )14px
Description
The font size of the DropZone note.
+
Description
The horizontal padding of the tabbed pane in the DockManager component.
$kendo-dropzone-note-spacingNullnullnull$kendo-dock-manager-tabbed-pane-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The spacing below the DropZone note.
+
Description
The horizontal padding of the tabbed pane in the DockManager component.
$kendo-dropzone-note-textColor$kendo-subtle-text#666666$kendo-dock-manager-unpinned-container-widthNumber300px300px
Description
The text color of the DropZone note.
+
Description
The width of the unpinned pane container in the DockManager component.
- -### Editor - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + -
NameTypeDefault valueComputed value
$kendo-editor-border-widthNumber1px1px
$kendo-dock-manager-unpinned-container-bgColor$kendo-color-white#ffffff
Description
The width of the border around the Еditor.
+
Description
The background-color of the unpinned pane container in the DockManager component.
$kendo-editor-font-familyString$kendo-font-familyinherit$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 font family of the Еditor.
+
Description
The box shadow of the unpinned pane container in the DockManager component.
$kendo-editor-font-size$kendo-dock-indicator-padding Number$kendo-font-size-md14pxk-map-get( $kendo-spacing, 1.5 )6px
Description
The font size of the Еditor.
+
Description
The padding of the dock indicator in the DockManager component.
$kendo-editor-line-heightNumber$kendo-line-height-md1.4285714286$kendo-dock-indicator-bgColor#f5f5f5#f5f5f5
Description
The line height of the Еditor.
+
Description
The background color of the dock indicator in the DockManager component.
$kendo-editor-placeholder-text$kendo-dock-indicator-text Color$kendo-input-placeholder-text#666666$kendo-color-primary#ff6358
Description
The text color of the Еditor placeholder.
+
Description
The text color of the dock indicator in the DockManager component.
$kendo-editor-placeholder-opacity$kendo-dock-indicator-outline-width Number$kendo-input-placeholder-opacity11px1px
Description
The opacity of the Editor placeholder.
+
Description
The outline width of the dock indicator in the DockManager component.
$kendo-editor-selected-textColor$kendo-color-primary-contrastwhite$kendo-dock-indicator-outline-styleStringsolidsolid
Description
The selected text color of the Editor.
+
Description
The outline style of the dock indicator in the DockManager component.
$kendo-editor-selected-bg$kendo-dock-indicator-outline Color$kendo-color-primary$kendo-dock-indicator-text #ff6358
Description
The selected background color of the Editor.
+
Description
The outline color of the dock indicator in the DockManager component.
$kendo-editor-highlighted-bgColorif($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix($kendo-color-primary, #ffffff, 20%))#ffe0de$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 highlighted background color of the Editor.
+
Description
The box shadow of the dock indicator in the DockManager component.
$kendo-editor-export-tool-icon-margin-xNumber.25em0.25em$kendo-dock-indicator-hover-bgColor$kendo-color-primary#ff6358
Description
The horizontal margin of the Editor's export tool icon.
+
Description
The background color of the hovered dock indicator in the DockManager component.
$kendo-editor-resize-handle-sizeNumber8px8px$kendo-dock-indicator-hover-textColor$kendo-color-white#ffffff
Description
The size of the Editor's resize handle.
+
Description
The text color of the hovered dock indicator in the DockManager component.
$kendo-editor-resize-handle-border-width$kendo-dock-manager-dock-preview-border-width Number 1px 1px
Description
The border width of the Editor's resize handle.
+
Description
The width of the border around the dropping area in the DockManager component.
$kendo-editor-resize-handle-borderColor#000000#000000$kendo-dock-manager-dock-preview-border-styleStringdasheddashed
Description
The border color of the Editor's resize handle.
+
Description
The style of the border around the dropping area in the DockManager component.
$kendo-editor-resize-handle-bgColor#ffffff#ffffff$kendo-dock-manager-dock-preview-border-radiusNumber$kendo-border-radius-sm2px
Description
The background color of the Editor's resize handle.
+
Description
The border radius of the dropping area in the DockManager component.
$kendo-editor-selectednode-outline-widthNumber2px2px$kendo-dock-manager-dock-preview-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 ))rgba(255, 99, 88, 0.16)
Description
The outline width of the Editor's selected node.
+
Description
The background color of the dropping area in the DockManager component.
$kendo-editor-selectednode-outline-color$kendo-dock-manager-dock-preview-border Color#88ccff#88ccff$kendo-color-primary#ff6358
Description
The outline color of the Editor's selected node.
+
Description
The border color of the dropping area in the DockManager component.
-### Expander +### Dropdowntree @@ -6388,229 +6548,239 @@ The following table lists the available variables for customizing the Default th - + - - + - - + + - - - - - - - - - - - - + +
$kendo-expander-spacing-y$kendo-dropdowntree-popup-padding-x Number k-map-get( $kendo-spacing, 2 ) 8px
Description
The vertical spacing of the ExpansionPanel.
+
Description
The horizontal padding of the DropdownTree popup
$kendo-expander-border-width$kendo-dropdowntree-popup-padding-y Number1px1pxk-map-get( $kendo-spacing, 2 )8px
Description
The width of the border around the ExpansionPanel.
+
Description
The vertical padding of the DropdownTree popup
$kendo-expander-font-familyString$kendo-font-familyinherit
Description
The font family of the ExpansionPanel.
-
$kendo-expander-font-size
+ +### Dropzone + + + + + + + + + + + + + + + + + + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-dropzone-padding-x Number$kendo-font-size-md14pxk-map-get( $kendo-spacing, 2 )8px
Description
The font size of the ExpansionPanel.
+
Description
The horizontal padding of the DropZone.
$kendo-expander-line-height$kendo-dropzone-padding-y Number$kendo-line-height-md1.4285714286k-map-get( $kendo-spacing, 2 )8px
Description
The hine height of the ExpansionPanel.
+
Description
The vertical padding of the DropZone.
$kendo-expander-textColor$kendo-component-text#424242$kendo-dropzone-border-widthNumber1px1px
Description
The text color of the ExpansionPanel.
+
Description
The border width of the DropZone.
$kendo-expander-bgColor$kendo-component-bg#ffffff$kendo-dropzone-min-heightNumber220px220px
Description
The background color of the ExpansionPanel.
+
Description
The minimum height of the DropZone.
$kendo-expander-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)$kendo-dropzone-font-familyString$kendo-font-familyinherit
Description
The border color of the ExpansionPanel.
+
Description
The font family of the DropZone.
$kendo-expander-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)$kendo-dropzone-font-sizeNumber$kendo-font-size-md14px
Description
The box shadow of the focused ExpansionPanel.
+
Description
The font size of the DropZone.
$kendo-expander-header-padding-x$kendo-dropzone-line-height Numberk-map-get( $kendo-spacing, 4 )16px$kendo-line-height-md1.4285714286
Description
The horizontal padding of the ExpansionPanel header.
+
Description
The line height of the DropZone.
$kendo-expander-header-padding-yNumberk-map-get( $kendo-spacing, 3 )12px$kendo-dropzone-bgColor$kendo-base-bg#fafafa
Description
The vertical padding of the ExpansionPanel header.
+
Description
The background color of the DropZone.
$kendo-expander-header-text$kendo-dropzone-text Color$kendo-expander-text$kendo-base-text #424242
Description
The text color of the ExpansionPanel header.
+
Description
The text color of the DropZone.
$kendo-expander-header-bg$kendo-dropzone-border Colortransparenttransparent$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The background color of the ExpansionPanel header.
+
Description
The border color of the DropZone.
$kendo-expander-header-borderNullnullnull$kendo-dropzone-icon-spacingNumberk-map-get( $kendo-spacing, 6 )24px
Description
The border color of the ExpansionPanel header.
+
Description
The spacing below the DropZone icon.
$kendo-expander-header-hover-bg$kendo-dropzone-icon-text Colorrgba(0, 0, 0, .04)rgba(0, 0, 0, 0.04)if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 ))#7e7e7e
Description
The background color of the hovered ExpansionPanel header.
+
Description
The text color of the DropZone icon.
$kendo-expander-header-focus-bgNullnullnull$kendo-dropzone-icon-hover-textColor$kendo-color-primary#ff6358
Description
The background color of the focused ExpansionPanel header.
+
Description
The text color of the hovered DropZone icon.
$kendo-expander-header-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)$kendo-dropzone-hint-font-sizeNullnullnull
Description
The box shadow of the focused ExpansionPanel header.
+
Description
The font size of the DropZone hint.
$kendo-expander-title-textColor$kendo-color-primary#ff6358$kendo-dropzone-hint-spacingNumberk-map-get( $kendo-spacing, 2 )8px
Description
The text color of the ExpansionPanel title.
+
Description
The spacing below the DropZone hint.
$kendo-expander-header-sub-title-textColor$kendo-subtle-text#666666$kendo-dropzone-hint-textNullnullnull
Description
The text color of the ExpansionPanel sub-title.
+
Description
The text color of the DropZone hint.
$kendo-expander-indicator-margin-x$kendo-dropzone-note-font-size Numberk-map-get( $kendo-spacing, 3 )$kendo-font-size-sm 12px
Description
The horizontal margin of the ExpansionPanel indicator.
+
Description
The font size of the DropZone note.
$kendo-expander-content-padding-xNumberk-map-get( $kendo-spacing, 4 )16px$kendo-dropzone-note-spacingNullnullnull
Description
The horizontal padding of the ExpansionPanel content.
+
Description
The spacing below the DropZone note.
$kendo-expander-content-padding-yNumberk-map-get( $kendo-spacing, 4 )16px$kendo-dropzone-note-textColor$kendo-subtle-text#666666
Description
The vertical padding of the ExpansionPanel content.
+
Description
The text color of the DropZone note.
-### Filemanager +### Editor @@ -6628,1182 +6798,1099 @@ The following table lists the available variables for customizing the Default th - - - - - - - - - - + - - + - - + - - + - - + - - + + - - - - - + + + + - - + - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - + +
$kendo-file-manager-spacerNumberk-map-get( $kendo-spacing, 4 )16px
Description
The space between the FileManager items.
-
$kendo-file-manager-border-width$kendo-editor-border-width Number 1px 1px
Description
The border width of the FileManager.
+
Description
The width of the border around the Еditor.
$kendo-file-manager-font-family$kendo-editor-font-family String $kendo-font-family inherit
Description
The font family of the FileManager.
+
Description
The font family of the Еditor.
$kendo-file-manager-font-size$kendo-editor-font-size Number $kendo-font-size-md 14px
Description
The font size of the FileManager.
+
Description
The font size of the Еditor.
$kendo-file-manager-line-height$kendo-editor-line-height Number $kendo-line-height-md 1.4285714286
Description
The line height of the FileManager.
+
Description
The line height of the Еditor.
$kendo-file-manager-bg$kendo-editor-placeholder-text Color$kendo-component-bg#ffffff$kendo-input-placeholder-text#666666
Description
The background color of the FileManager.
+
Description
The text color of the Еditor placeholder.
$kendo-file-manager-textColor$kendo-component-text#424242$kendo-editor-placeholder-opacityNumber$kendo-input-placeholder-opacity1
Description
The text color of the FileManager.
+
Description
The opacity of the Editor placeholder.
$kendo-file-manager-border$kendo-editor-selected-text Color$kendo-component-borderrgba(0, 0, 0, 0.08)$kendo-color-primary-contrastwhite
Description
The border color of the FileManager.
+
Description
The selected text color of the Editor.
$kendo-file-manager-toolbar-border-widthNumber$kendo-file-manager-border-width1px
Description
The border width of the FileManager Toolbar.
-
$kendo-file-manager-toolbar-bgNullnullnull
Description
The background color of the FileManager Toolbar.
-
$kendo-file-manager-toolbar-textNullnullnull
Description
The text color of the FileManager Toolbar.
-
$kendo-file-manager-toolbar-borderNullnullnull$kendo-editor-selected-bgColor$kendo-color-primary#ff6358
Description
The border color of the FileManager Toolbar.
+
Description
The selected background color of the Editor.
$kendo-file-manager-toolbar-gradientNullnullnull$kendo-editor-highlighted-bgColorif($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix($kendo-color-primary, #ffffff, 20%))#ffe0de
Description
The gradient of the FileManager Toolbar.
+
Description
The highlighted background color of the Editor.
$kendo-file-manager-navigation-padding-x$kendo-editor-export-tool-icon-margin-x Number$kendo-file-manager-spacer16px.25em0.25em
Description
The horizontal padding of the FileManager Navigation.
+
Description
The horizontal margin of the Editor's export tool icon.
$kendo-file-manager-navigation-padding-y$kendo-editor-resize-handle-size Number$kendo-file-manager-spacer16px8px8px
Description
The vertical padding of the FileManager Navigation.
+
Description
The size of the Editor's resize handle.
$kendo-file-manager-navigation-width$kendo-editor-resize-handle-border-width Number20%20%1px1px
Description
The width of the FileManager Navigation.
+
Description
The border width of the Editor's resize handle.
$kendo-file-manager-navigation-border-widthNumber$kendo-file-manager-border-width1px$kendo-editor-resize-handle-borderColor#000000#000000
Description
The border width of the FileManager Navigation.
+
Description
The border color of the Editor's resize handle.
$kendo-file-manager-navigation-bgNullnullnull$kendo-editor-resize-handle-bgColor#ffffff#ffffff
Description
The background color of the FileManager Navigation.
+
Description
The background color of the Editor's resize handle.
$kendo-file-manager-navigation-textNullnullnull$kendo-editor-selectednode-outline-widthNumber2px2px
Description
The text color of the FileManager Navigation.
+
Description
The outline width of the Editor's selected node.
$kendo-file-manager-navigation-borderNullnullnull$kendo-editor-selectednode-outline-colorColor#88ccff#88ccff
Description
The border color of the FileManager Navigation.
+
Description
The outline color of the Editor's selected node.
$kendo-file-manager-breadcrumb-padding-x
+ +### Expander + + + + + + + + + + + + + + + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-expander-spacing-y Number k-map-get( $kendo-spacing, 2 ) 8px
Description
The horizontal padding of the FileManager Breadcrumb.
+
Description
The vertical spacing of the ExpansionPanel.
$kendo-file-manager-breadcrumb-padding-y$kendo-expander-border-width Numberk-map-get( $kendo-spacing, 2 )8px1px1px
Description
The vertical padding of the FileManager Breadcrumb.
+
Description
The width of the border around the ExpansionPanel.
$kendo-file-manager-breadcrumb-border-widthNumber$kendo-file-manager-border-width1px$kendo-expander-font-familyString$kendo-font-familyinherit
Description
The border width of the FileManager Breadcrumb.
+
Description
The font family of the ExpansionPanel.
$kendo-file-manager-breadcrumb-bgColor$kendo-toolbar-bg#fafafa$kendo-expander-font-sizeNumber$kendo-font-size-md14px
Description
The background color of the FileManager Breadcrumb.
+
Description
The font size of the ExpansionPanel.
$kendo-file-manager-breadcrumb-textNullnullnull$kendo-expander-line-heightNumber$kendo-line-height-md1.4285714286
Description
The text color of the FileManager Breadcrumb.
+
Description
The hine height of the ExpansionPanel.
$kendo-file-manager-breadcrumb-borderNullnullnull$kendo-expander-textColor$kendo-component-text#424242
Description
The border color of the FileManager Breadcrumb.
+
Description
The text color of the ExpansionPanel.
$kendo-file-manager-listview-bgNullnullnull$kendo-expander-bgColor$kendo-component-bg#ffffff
Description
The background color of the FileManager ListView.
+
Description
The background color of the ExpansionPanel.
$kendo-file-manager-listview-textNullnullnull$kendo-expander-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The text color of the FileManager ListView.
+
Description
The border color of the ExpansionPanel.
$kendo-file-manager-listview-borderNullnullnull$kendo-expander-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The border color of the FileManager ListView.
+
Description
The box shadow of the focused ExpansionPanel.
$kendo-file-manager-listview-item-padding-x$kendo-expander-header-padding-x Number k-map-get( $kendo-spacing, 4 ) 16px
Description
The horizontal padding of the FileManager ListView item.
+
Description
The horizontal padding of the ExpansionPanel header.
$kendo-file-manager-listview-item-padding-y$kendo-expander-header-padding-y Numberk-map-get( $kendo-spacing, 4 )16pxk-map-get( $kendo-spacing, 3 )12px
Description
The vertical padding of the FileManager ListView item.
+
Description
The vertical padding of the ExpansionPanel header.
$kendo-file-manager-listview-item-widthNumber120px120px$kendo-expander-header-textColor$kendo-expander-text#424242
Description
The width of the FileManager ListView item.
+
Description
The text color of the ExpansionPanel header.
$kendo-file-manager-listview-item-heightNumber120px120px$kendo-expander-header-bgColortransparenttransparent
Description
The height of the FileManager ListView item.
+
Description
The background color of the ExpansionPanel header.
$kendo-file-manager-listview-item-bg$kendo-expander-header-border Null null null
Description
The background color of the FileManager ListView item.
+
Description
The border color of the ExpansionPanel header.
$kendo-file-manager-listview-item-textNullnullnull$kendo-expander-header-hover-bgColorrgba(0, 0, 0, .04)rgba(0, 0, 0, 0.04)
Description
The text color of the FileManager ListView item.
+
Description
The background color of the hovered ExpansionPanel header.
$kendo-file-manager-listview-item-border$kendo-expander-header-focus-bg Null null null
Description
The border color of the FileManager ListView item.
+
Description
The background color of the focused ExpansionPanel header.
$kendo-file-manager-listview-item-icon-bgNullnullnull$kendo-expander-header-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The background color of the FileManager ListView item icon.
+
Description
The box shadow of the focused ExpansionPanel header.
$kendo-file-manager-listview-item-icon-text$kendo-expander-title-text Colorif($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))#7e7e7e$kendo-color-primary#ff6358
Description
The text color of the FileManager ListView item icon.
+
Description
The text color of the ExpansionPanel title.
$kendo-file-manager-listview-item-icon-borderNullnullnull$kendo-expander-header-sub-title-textColor$kendo-subtle-text#666666
Description
The border color of the FileManager ListView item icon.
+
Description
The text color of the ExpansionPanel sub-title.
$kendo-file-manager-listview-item-icon-selected-bgNullnullnull$kendo-expander-indicator-margin-xNumberk-map-get( $kendo-spacing, 3 )12px
Description
Background color of the FileManager selected ListView item icon.
+
Description
The horizontal margin of the ExpansionPanel indicator.
$kendo-file-manager-listview-item-icon-selected-textStringinheritinherit$kendo-expander-content-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
Text color of the FileManager selected ListView item icon.
+
Description
The horizontal padding of the ExpansionPanel content.
$kendo-file-manager-listview-item-icon-selected-borderNullnullnull$kendo-expander-content-padding-yNumberk-map-get( $kendo-spacing, 4 )16px
Description
Border color of the FileManager selected ListView item icon.
+
Description
The vertical padding of the ExpansionPanel content.
$kendo-file-manager-grid-bgNullnullnull
+ +### Filemanager + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + - - + - - + - - - - - + + + + - - - - - - - - - - -
NameTypeDefault valueComputed value
$kendo-file-manager-spacerNumberk-map-get( $kendo-spacing, 4 )16px
Description
The background color of the FileManager Grid.
+
Description
The space between the FileManager items.
$kendo-file-manager-grid-textNullnullnull$kendo-file-manager-border-widthNumber1px1px
Description
The text color of the FileManager Grid.
+
Description
The border width of the FileManager.
$kendo-file-manager-grid-borderNullnullnull$kendo-file-manager-font-familyString$kendo-font-familyinherit
Description
The border color of the FileManager Grid.
+
Description
The font family of the FileManager.
$kendo-file-manager-preview-padding-x$kendo-file-manager-font-size Number$kendo-file-manager-spacer16px$kendo-font-size-md14px
Description
The horizontal padding of the FileManager preview.
+
Description
The font size of the FileManager.
$kendo-file-manager-preview-padding-y$kendo-file-manager-line-height Number$kendo-file-manager-spacer16px$kendo-line-height-md1.4285714286
Description
The vertical padding of the FileManager preview.
+
Description
The line height of the FileManager.
$kendo-file-manager-preview-widthNumber20%20%$kendo-file-manager-bgColor$kendo-component-bg#ffffff
Description
The width of the FileManager preview.
+
Description
The background color of the FileManager.
$kendo-file-manager-preview-border-widthNumber$kendo-file-manager-border-width1px$kendo-file-manager-textColor$kendo-component-text#424242
Description
The border width of the FileManager preview.
+
Description
The text color of the FileManager.
$kendo-file-manager-preview-spacingNumber$kendo-file-manager-spacer16px$kendo-file-manager-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The spacing of the FileManager preview.
+
Description
The border color of the FileManager.
$kendo-file-manager-preview-column-gap$kendo-file-manager-toolbar-border-width Numberk-map-get( $kendo-spacing, 1 )4px$kendo-file-manager-border-width1px
Description
The gap between the columns in the FileManager preview.
+
Description
The border width of the FileManager Toolbar.
$kendo-file-manager-preview-bg$kendo-file-manager-toolbar-bg Null null null
Description
The background color of the FileManager preview.
+
Description
The background color of the FileManager Toolbar.
$kendo-file-manager-preview-text$kendo-file-manager-toolbar-text Null null null
Description
The text color of the FileManager preview.
+
Description
The text color of the FileManager Toolbar.
$kendo-file-manager-preview-border$kendo-file-manager-toolbar-border Null null null
Description
The border color of the FileManager preview.
+
Description
The border color of the FileManager Toolbar.
$kendo-file-manager-preview-icon-bg$kendo-file-manager-toolbar-gradient Null null null
Description
The background color of the FileManager preview icon.
+
Description
The gradient of the FileManager Toolbar.
$kendo-file-manager-preview-icon-textColorif($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))#7e7e7e$kendo-file-manager-navigation-padding-xNumber$kendo-file-manager-spacer16px
Description
The text color of the FileManager preview icon.
+
Description
The horizontal padding of the FileManager Navigation.
$kendo-file-manager-preview-icon-borderNullnullnull
Description
The border color of the FileManager preview icon.
-
- -### Filter - - - - - - - - - - - - - - - - - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-filter-padding-x$kendo-file-manager-navigation-padding-y Number$kendo-padding-md-x8px$kendo-file-manager-spacer16px
Description
The horizontal padding of the Filter.
+
Description
The vertical padding of the FileManager Navigation.
$kendo-filter-padding-y$kendo-file-manager-navigation-width Number$kendo-padding-md-y4px20%20%
Description
The vertical padding of the Filter.
+
Description
The width of the FileManager Navigation.
$kendo-filter-bottom-margin$kendo-file-manager-navigation-border-width Number30px30px$kendo-file-manager-border-width1px
Description
The bottom margin of the Filter.
+
Description
The border width of the FileManager Navigation.
$kendo-filter-line-sizeNumber1px1px$kendo-file-manager-navigation-bgNullnullnull
Description
The width of the line that connects the Filter items.
+
Description
The background color of the FileManager Navigation.
$kendo-filter-operator-dropdown-widthNumber15em15em$kendo-file-manager-navigation-textNullnullnull
Description
The width of the dropdown elements in the Filter items.
+
Description
The text color of the FileManager Navigation.
$kendo-filter-preview-field-textColor$kendo-color-primary#ff6358$kendo-file-manager-navigation-borderNullnullnull
Description
The text color of the Filter preview field.
+
Description
The border color of the FileManager Navigation.
$kendo-filter-preview-operator-textColor$kendo-subtle-text#666666$kendo-file-manager-breadcrumb-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The text color of the Filter preview operator.
+
Description
The horizontal padding of the FileManager Breadcrumb.
$kendo-filter-toolbar-focus-shadowList0 0 0 2px rgba(0, 0, 0, .08)0 0 0 2px rgba(0, 0, 0, 0.08)$kendo-file-manager-breadcrumb-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The box shadow of the focused Filter toolbar.
+
Description
The vertical padding of the FileManager Breadcrumb.
- -### Floating-action-button - - - - - - - - - - - - - - - - - - + + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-fab-border-width
$kendo-file-manager-breadcrumb-border-width Number1px$kendo-file-manager-border-width 1px
Description
The width of the border around the FAB.
+
Description
The border width of the FileManager Breadcrumb.
$kendo-fab-border-radiusNumber$kendo-border-radius-md4px$kendo-file-manager-breadcrumb-bgColor$kendo-toolbar-bg#fafafa
Description
The border radius of the FAB.
+
Description
The background color of the FileManager Breadcrumb.
$kendo-fab-font-familyString$kendo-font-familyinherit$kendo-file-manager-breadcrumb-textNullnullnull
Description
The font family of the FAB.
+
Description
The text color of the FileManager Breadcrumb.
$kendo-fab-font-sizeNumber$kendo-font-size-md14px$kendo-file-manager-breadcrumb-borderNullnullnull
Description
The font size of the FAB.
+
Description
The border color of the FileManager Breadcrumb.
$kendo-fab-line-heightNumber$kendo-line-height-md1.4285714286$kendo-file-manager-listview-bgNullnullnull
Description
The line height of the FAB.
+
Description
The background color of the FileManager ListView.
$kendo-fab-padding-xNumberk-map-get( $kendo-spacing, 4 )16px$kendo-file-manager-listview-textNullnullnull
Description
The horizontal padding of the FAB.
+
Description
The text color of the FileManager ListView.
$kendo-fab-sm-padding-xNumberk-math-div( $kendo-fab-padding-x, 2 )8px$kendo-file-manager-listview-borderNullnullnull
Description
The horizontal padding of the small FAB.
+
Description
The border color of the FileManager ListView.
$kendo-fab-md-padding-x$kendo-file-manager-listview-item-padding-x Number$kendo-fab-padding-xk-map-get( $kendo-spacing, 4 ) 16px
Description
The horizontal padding of the medium FAB.
+
Description
The horizontal padding of the FileManager ListView item.
$kendo-fab-lg-padding-x$kendo-file-manager-listview-item-padding-y Number( $kendo-fab-padding-x * 1.5 )24pxk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the large FAB.
+
Description
The vertical padding of the FileManager ListView item.
$kendo-fab-padding-y$kendo-file-manager-listview-item-width Number$kendo-fab-padding-x16px120px120px
Description
The vertical padding of the FAB.
+
Description
The width of the FileManager ListView item.
$kendo-fab-sm-padding-y$kendo-file-manager-listview-item-height Numberk-math-div( $kendo-fab-padding-y, 2 )8px120px120px
Description
The vertical padding of the small FAB.
+
Description
The height of the FileManager ListView item.
$kendo-fab-md-padding-yNumber$kendo-fab-padding-y16px$kendo-file-manager-listview-item-bgNullnullnull
Description
The vertical padding of the medium FAB.
+
Description
The background color of the FileManager ListView item.
$kendo-fab-lg-padding-yNumber( $kendo-fab-padding-y * 1.5 )24px$kendo-file-manager-listview-item-textNullnullnull
Description
The vertical padding of the large FAB.
+
Description
The text color of the FileManager ListView item.
$kendo-fab-icon-padding-xNumberk-map-get( $kendo-spacing, 0.5 )2px$kendo-file-manager-listview-item-borderNullnullnull
Description
The horizontal padding of the FAB icon.
+
Description
The border color of the FileManager ListView item.
$kendo-fab-icon-padding-yNumber$kendo-fab-icon-padding-x2px$kendo-file-manager-listview-item-icon-bgNullnullnull
Description
The vertical padding of the FAB icon.
+
Description
The background color of the FileManager ListView item icon.
$kendo-fab-icon-spacingNumberk-map-get( $kendo-spacing, 0.5 )2px$kendo-file-manager-listview-item-icon-textColorif($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))#7e7e7e
Description
The spacing of the FAB icon.
+
Description
The text color of the FileManager ListView item icon.
$kendo-fab-items-padding-xNumber0px0px$kendo-file-manager-listview-item-icon-borderNullnullnull
Description
The horizontal padding of the FAB items.
+
Description
The border color of the FileManager ListView item icon.
$kendo-fab-items-padding-yNumberk-map-get( $kendo-spacing, 4 )16px$kendo-file-manager-listview-item-icon-selected-bgNullnullnull
Description
The vertical padding of the FAB items.
+
Description
Background color of the FileManager selected ListView item icon.
$kendo-fab-item-text-padding-xNumberk-map-get( $kendo-spacing, 1 )4px$kendo-file-manager-listview-item-icon-selected-textStringinheritinherit
Description
The horizontal padding of the FAB item text.
+
Description
Text color of the FileManager selected ListView item icon.
$kendo-fab-item-text-padding-yNumber$kendo-fab-item-text-padding-x4px$kendo-file-manager-listview-item-icon-selected-borderNullnullnull
Description
The vertical padding of the FAB item text.
+
Description
Border color of the FileManager selected ListView item icon.
$kendo-fab-item-text-border-widthNumber1px1px$kendo-file-manager-grid-bgNullnullnull
Description
The width of the FAB item text border.
+
Description
The background color of the FileManager Grid.
$kendo-fab-item-text-border-radiusNumber2px2px$kendo-file-manager-grid-textNullnullnull
Description
The border radius of the FAB item text.
+
Description
The text color of the FileManager Grid.
$kendo-fab-item-text-font-sizeNumber$kendo-font-size-xs10px$kendo-file-manager-grid-borderNullnullnull
Description
The font size of the FAB item text.
+
Description
The border color of the FileManager Grid.
$kendo-fab-item-text-line-height$kendo-file-manager-preview-padding-x Number1.21.2$kendo-file-manager-spacer16px
Description
The line height of the FAB item text.
+
Description
The horizontal padding of the FileManager preview.
$kendo-fab-item-icon-padding-x$kendo-file-manager-preview-padding-y Numberk-map-get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x10px$kendo-file-manager-spacer16px
Description
The horizontal padding of the FAB item icon.
+
Description
The vertical padding of the FileManager preview.
$kendo-fab-item-icon-padding-y$kendo-file-manager-preview-width Number$kendo-fab-item-icon-padding-x10px20%20%
Description
The vertical padding of the FAB item icon.
+
Description
The width of the FileManager preview.
$kendo-fab-item-icon-border-width$kendo-file-manager-preview-border-width Number00$kendo-file-manager-border-width1px
Description
The width of the FAB item icon border.
+
Description
The border width of the FileManager preview.
$kendo-fab-item-icon-border-radius$kendo-file-manager-preview-spacing Number50%50%$kendo-file-manager-spacer16px
Description
The border radius of the FAB item icon.
+
Description
The spacing of the FileManager preview.
$kendo-fab-theme-colorsMap$kendo-theme-colors("primary": #ff6358, "secondary": #666666, "tertiary": #03a9f4, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #ebebeb, "inverse": #424242)$kendo-file-manager-preview-column-gapNumberk-map-get( $kendo-spacing, 1 )4px
Description
The theme colors map for the FAB.
+
Description
The gap between the columns in the FileManager preview.
$kendo-fab-sizesMap( - sm: ( - padding-x: $kendo-fab-sm-padding-x, - padding-y: $kendo-fab-sm-padding-y - ), - md: ( - padding-x: $kendo-fab-md-padding-x, - padding-y: $kendo-fab-md-padding-y - ), - lg: ( - padding-x: $kendo-fab-lg-padding-x, - padding-y: $kendo-fab-lg-padding-y - ) -)(sm: (padding-x: 8px, padding-y: 8px), md: (padding-x: 16px, padding-y: 16px), lg: (padding-x: 24px, padding-y: 24px))$kendo-file-manager-preview-bgNullnullnull
Description
The size map for the FAB.
+
Description
The background color of the FileManager preview.
$kendo-fab-shadowStringk-elevation(5)var(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-file-manager-preview-textNullnullnull
Description
The base shadow of the FAB.
+
Description
The text color of the FileManager preview.
$kendo-fab-disabled-shadowStringk-elevation(5)var(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-file-manager-preview-borderNullnullnull
Description
The shadow of the disabled FAB.
+
Description
The border color of the FileManager preview.
$kendo-fab-active-shadow$kendo-file-manager-preview-icon-bg Null null null
Description
The shadow of the active FAB.
+
Description
The background color of the FileManager preview icon.
$kendo-fab-outline-styleStringsolidsolid$kendo-file-manager-preview-icon-textColorif($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))#7e7e7e
Description
The outline style of the FAB.
+
Description
The text color of the FileManager preview icon.
$kendo-fab-outline-widthNumberk-map-get( $kendo-spacing, 0.5 )2px$kendo-file-manager-preview-icon-borderNullnullnull
Description
The outline width of the FAB.
+
Description
The border color of the FileManager preview icon.
$kendo-fab-item-textColor$kendo-component-text#424242
+ +### Filter + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefault valueComputed value
$kendo-filter-padding-xNumber$kendo-padding-md-x8px
Description
The base text color of the FAB item.
+
Description
The horizontal padding of the Filter.
$kendo-fab-item-bgColor$kendo-component-bg#ffffff$kendo-filter-padding-yNumber$kendo-padding-md-y4px
Description
The base background color of the FAB item.
+
Description
The vertical padding of the Filter.
$kendo-fab-item-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)$kendo-filter-bottom-marginNumber30px30px
Description
The base border color of the FAB item.
+
Description
The bottom margin of the Filter.
$kendo-fab-item-icon-textColor$kendo-button-text#424242$kendo-filter-line-sizeNumber1px1px
Description
The base text color of the FAB item icon.
+
Description
The width of the line that connects the Filter items.
$kendo-fab-item-icon-bgColor$kendo-button-bg#f5f5f5$kendo-filter-operator-dropdown-widthNumber15em15em
Description
The base background color of the FAB item icon.
+
Description
The width of the dropdown elements in the Filter items.
$kendo-fab-item-icon-border$kendo-filter-preview-field-text Color$kendo-button-borderrgba(0, 0, 0, 0.08)$kendo-color-primary#ff6358
Description
The base border color of the FAB item icon.
+
Description
The text color of the Filter preview field.
$kendo-fab-item-shadowString$kendo-fab-shadowvar(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-filter-preview-operator-textColor$kendo-subtle-text#666666
Description
The base shadow of the FAB item.
+
Description
The text color of the Filter preview operator.
$kendo-fab-item-disabled-shadowString$kendo-fab-disabled-shadowvar(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-filter-toolbar-focus-shadowList0 0 0 2px rgba(0, 0, 0, .08)0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The shadow of the disabled FAB item.
-
$kendo-fab-item-active-shadowNull$kendo-fab-active-shadownull
Description
The shadow of the active FAB item.
-
$kendo-fab-item-outline-styleStringsolidsolid
Description
The outline style of the FAB item.
-
$kendo-fab-item-outline-widthNumberk-map-get( $kendo-spacing, 0.5 )2px
Description
The outline width of the FAB item.
-
$kendo-fab-item-outline-colorColorrgba(0, 0, 0, .08)rgba(0, 0, 0, 0.08)
Description
The outline color of the FAB item.
+
Description
The box shadow of the focused Filter toolbar.
-### Floating-label +### Floating-action-button @@ -7821,639 +7908,662 @@ The following table lists the available variables for customizing the Default th - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
$kendo-floating-label-scale$kendo-fab-border-width Number111px1px
Description
The transformation scale of the Floating Label.
+
Description
The width of the border around the FAB.
$kendo-floating-label-font-size$kendo-fab-border-radius Number$kendo-input-font-size14px$kendo-border-radius-md4px
Description
The font size of the Floating Label.
+
Description
The border radius of the FAB.
$kendo-floating-label-max-widthNumber90%90%$kendo-fab-font-familyString$kendo-font-familyinherit
Description
The maximum width of the Floating Label.
+
Description
The font family of the FAB.
$kendo-floating-label-line-height$kendo-fab-font-size Number$kendo-input-line-height1.4285714286$kendo-font-size-md14px
Description
The line height of the Floating Label.
+
Description
The font size of the FAB.
$kendo-floating-label-heightCalculationcalc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} )calc(1.4285714286 * 14px)$kendo-fab-line-heightNumber$kendo-line-height-md1.4285714286
Description
The height of the Floating Label.
+
Description
The line height of the FAB.
$kendo-floating-label-offset-xCalculationcalc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} )calc(8px + 1px)$kendo-fab-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal offset of the Floating Label.
+
Description
The horizontal padding of the FAB.
$kendo-floating-label-offset-yCalculationcalc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} )calc(calc(1.4285714286 * 14px) + 1px + 4px)$kendo-fab-sm-padding-xNumberk-math-div( $kendo-fab-padding-x, 2 )8px
Description
The vertical offset of the Floating Label.
+
Description
The horizontal padding of the small FAB.
$kendo-floating-label-focus-scale$kendo-fab-md-padding-x Number11$kendo-fab-padding-x16px
Description
The transformation scale of the focused Floating Label.
+
Description
The horizontal padding of the medium FAB.
$kendo-floating-label-focus-offset-x$kendo-fab-lg-padding-x Number00( $kendo-fab-padding-x * 1.5 )24px
Description
The horizontal offset of the focused Floating Label.
+
Description
The horizontal padding of the large FAB.
$kendo-floating-label-focus-offset-y$kendo-fab-padding-y Number00$kendo-fab-padding-x16px
Description
The vertical offset of the focused Floating Label.
+
Description
The vertical padding of the FAB.
$kendo-floating-label-transitionList.2s ease-out0.2s ease-out$kendo-fab-sm-padding-yNumberk-math-div( $kendo-fab-padding-y, 2 )8px
Description
The transition of the Floating Label.
+
Description
The vertical padding of the small FAB.
$kendo-floating-label-bgNullnullnull$kendo-fab-md-padding-yNumber$kendo-fab-padding-y16px
Description
The background color of the Floating Label.
+
Description
The vertical padding of the medium FAB.
$kendo-floating-label-textNullnullnull$kendo-fab-lg-padding-yNumber( $kendo-fab-padding-y * 1.5 )24px
Description
The text color of the Floating Label.
+
Description
The vertical padding of the large FAB.
$kendo-floating-label-focus-bgNullnullnull$kendo-fab-icon-padding-xNumberk-map-get( $kendo-spacing, 0.5 )2px
Description
The background color of the focused Floating Label.
+
Description
The horizontal padding of the FAB icon.
$kendo-floating-label-focus-textNullnullnull$kendo-fab-icon-padding-yNumber$kendo-fab-icon-padding-x2px
Description
The text color of the focused Floating Label.
+
Description
The vertical padding of the FAB icon.
- -### Form - - - - - - - - - - - - - - - - - - + + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - - - - - - - - - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - + +
NameTypeDefault valueComputed value
$kendo-form-spacer
$kendo-fab-icon-spacing Number$kendo-padding-md-x * 216pxk-map-get( $kendo-spacing, 0.5 )2px
Description
The padding of the inline Form.
+
Description
The spacing of the FAB icon.
$kendo-form-font-size$kendo-fab-items-padding-x Number$kendo-font-size-md14px0px0px
Description
The font size of the Form.
+
Description
The horizontal padding of the FAB items.
$kendo-form-line-height$kendo-fab-items-padding-y Number$kendo-line-height-md1.4285714286k-map-get( $kendo-spacing, 4 )16px
Description
The line height of the Form.
+
Description
The vertical padding of the FAB items.
$kendo-form-line-height-emCalculationcalc( #{$kendo-form-line-height} * 1em )calc(1.4285714286 * 1em)$kendo-fab-item-text-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The line height of the Form in em units.
+
Description
The horizontal padding of the FAB item text.
$kendo-form-sm-line-height$kendo-fab-item-text-padding-y Number$kendo-line-height-sm1.25$kendo-fab-item-text-padding-x4px
Description
The line height of the small Form.
+
Description
The vertical padding of the FAB item text.
$kendo-form-lg-line-height$kendo-fab-item-text-border-width Number$kendo-line-height-lg1.51px1px
Description
The line height of the large Form.
+
Description
The width of the FAB item text border.
$kendo-form-fieldset-marginList2em 0 02em 0 0$kendo-fab-item-text-border-radiusNumber2px2px
Description
The margin of the Form fieldset.
+
Description
The border radius of the FAB item text.
$kendo-form-fieldset-padding$kendo-fab-item-text-font-size Number0px0px
Description
The padding of the Form fieldset.
-
$kendo-form-legend-marginList0 0 1em0 0 1em$kendo-font-size-xs10px
Description
The margin of the Form legend.
+
Description
The font size of the FAB item text.
$kendo-form-legend-padding$kendo-fab-item-text-line-height Number0px0px1.21.2
Description
The padding of the Form legend.
+
Description
The line height of the FAB item text.
$kendo-form-legend-border-widthList0 0 2px0 0 2px$kendo-fab-item-icon-padding-xNumberk-map-get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x10px
Description
The border width of the Form legend.
+
Description
The horizontal padding of the FAB item icon.
$kendo-form-legend-border-styleStringsolidsolid$kendo-fab-item-icon-padding-yNumber$kendo-fab-item-icon-padding-x10px
Description
The border style of the Form legend.
+
Description
The vertical padding of the FAB item icon.
$kendo-form-legend-border-colorColor$kendo-component-borderrgba(0, 0, 0, 0.08)$kendo-fab-item-icon-border-widthNumber00
Description
The border color of the Form legend.
+
Description
The width of the FAB item icon border.
$kendo-form-legend-width$kendo-fab-item-icon-border-radius Number100%100%50%50%
Description
The width of the Form legend.
+
Description
The border radius of the FAB item icon.
$kendo-form-legend-font-sizeNumber14px14px$kendo-fab-theme-colorsMap$kendo-theme-colors("primary": #ff6358, "secondary": #666666, "tertiary": #03a9f4, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #ebebeb, "inverse": #424242)
Description
The font size of the Form legend.
+
Description
The theme colors map for the FAB.
$kendo-form-legend-text-transformStringuppercaseuppercase$kendo-fab-sizesMap( + sm: ( + padding-x: $kendo-fab-sm-padding-x, + padding-y: $kendo-fab-sm-padding-y + ), + md: ( + padding-x: $kendo-fab-md-padding-x, + padding-y: $kendo-fab-md-padding-y + ), + lg: ( + padding-x: $kendo-fab-lg-padding-x, + padding-y: $kendo-fab-lg-padding-y + ) +)(sm: (padding-x: 8px, padding-y: 8px), md: (padding-x: 16px, padding-y: 16px), lg: (padding-x: 24px, padding-y: 24px))
Description
The text capitalization of the Form legend.
+
Description
The size map for the FAB.
$kendo-form-label-margin-bottomNumber0px0px$kendo-fab-shadowStringk-elevation(5)var(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The bottom margin of the Form label.
+
Description
The base shadow of the FAB.
$kendo-form-button-margin-xNumber8px8px$kendo-fab-disabled-shadowStringk-elevation(5)var(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The horizontal margin of the Form buttons.
+
Description
The shadow of the disabled FAB.
$kendo-form-hint-font-sizeNumber12px12px$kendo-fab-active-shadowNullnullnull
Description
The font size of the Form hint.
+
Description
The shadow of the active FAB.
$kendo-form-hint-font-style$kendo-fab-outline-style Stringitalicitalicsolidsolid
Description
The font style of the Form hint.
+
Description
The outline style of the FAB.
$kendo-form-hint-margin-top$kendo-fab-outline-width Number4px4pxk-map-get( $kendo-spacing, 0.5 )2px
Description
The top margin of the Form hint.
+
Description
The outline width of the FAB.
$kendo-form-sm-rows-spacingNumberk-map-get( $kendo-spacing, 2.5 )10px$kendo-fab-item-textColor$kendo-component-text#424242
Description
The row spacing of the small Form.
+
Description
The base text color of the FAB item.
$kendo-form-md-rows-spacingNumberk-map-get( $kendo-spacing, 3.5 )14px$kendo-fab-item-bgColor$kendo-component-bg#ffffff
Description
The row spacing of the medium Form.
+
Description
The base background color of the FAB item.
$kendo-form-lg-rows-spacingNumberk-map-get( $kendo-spacing, 4.5 )18px$kendo-fab-item-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The row spacing of the large Form.
+
Description
The base border color of the FAB item.
$kendo-form-separator-marginList$kendo-form-md-rows-spacing 0 014px 0 0$kendo-fab-item-icon-textColor$kendo-button-text#424242
Description
The margin of the Form separator.
+
Description
The base text color of the FAB item icon.
$kendo-form-separator-border-color$kendo-fab-item-icon-bg Color$kendo-form-legend-border-colorrgba(0, 0, 0, 0.08)$kendo-button-bg#f5f5f5
Description
The border color of the Form separator.
+
Description
The base background color of the FAB item icon.
$kendo-horizontal-form-label-padding-topNumber5px5px$kendo-fab-item-icon-borderColor$kendo-button-borderrgba(0, 0, 0, 0.08)
Description
The top padding of the label in the horizontal Form.
+
Description
The base border color of the FAB item icon.
$kendo-horizontal-form-label-margin-xNumber10px10px$kendo-fab-item-shadowString$kendo-fab-shadowvar(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The horizontal margin of the label in the horizontal Form.
+
Description
The base shadow of the FAB item.
$kendo-horizontal-form-label-widthNumber25%25%$kendo-fab-item-disabled-shadowString$kendo-fab-disabled-shadowvar(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The width of the label in the horizontal Form.
+
Description
The shadow of the disabled FAB item.
$kendo-horizontal-form-label-alignStringflex-endflex-end$kendo-fab-item-active-shadowNull$kendo-fab-active-shadownull
Description
The horizontal alignment of the label in the horizontal Form.
+
Description
The shadow of the active FAB item.
$kendo-horizontal-form-field-wrap-max-widthCalculationcalc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} )calc(100% - 25% - 10px)$kendo-fab-item-outline-styleStringsolidsolid
Description
The maximum width of the field wrap in the horizontal Form.
+
Description
The outline style of the FAB item.
$kendo-inline-form-element-width$kendo-fab-item-outline-width Number25%25%k-map-get( $kendo-spacing, 0.5 )2px
Description
The width of the inline Form element.
+
Description
The outline width of the FAB item.
$kendo-forms-invalid-color$kendo-fab-item-outline-color Color$kendo-color-error#f31700rgba(0, 0, 0, .08)rgba(0, 0, 0, 0.08)
Description
The invalid text color of the Form.
+
Description
The outline color of the FAB item.
$kendo-label-optional-margin-x
+ +### Floating-label + + + + + + + + + + + + + + + + + + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-floating-label-scale Number6px6px11
Description
The horizontal margin of the optional label in the Form.
+
Description
The transformation scale of the Floating Label.
$kendo-label-optional-font-size$kendo-floating-label-font-size Number12px12px$kendo-input-font-size14px
Description
The font size of the optional label in the Form.
+
Description
The font size of the Floating Label.
$kendo-label-optional-font-styleStringitalicitalic$kendo-floating-label-max-widthNumber90%90%
Description
The font style of the optional label in the Form.
+
Description
The maximum width of the Floating Label.
$kendo-fieldset-margin$kendo-floating-label-line-height Number30px30px$kendo-input-line-height1.4285714286
Description
The margin of the Form fieldset.
+
Description
The line height of the Floating Label.
$kendo-fieldset-font-size$kendo-floating-label-heightCalculationcalc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} )calc(1.4285714286 * 14px)
Description
The height of the Floating Label.
+
$kendo-floating-label-offset-xCalculationcalc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} )calc(8px + 1px)
Description
The horizontal offset of the Floating Label.
+
$kendo-floating-label-offset-yCalculationcalc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} )calc(calc(1.4285714286 * 14px) + 1px + 4px)
Description
The vertical offset of the Floating Label.
+
$kendo-floating-label-focus-scale Number$kendo-h4-font-size22px11
Description
The font size of the Form fieldset.
+
Description
The transformation scale of the focused Floating Label.
$kendo-fieldset-bgNullnullnull$kendo-floating-label-focus-offset-xNumber00
Description
The background color of the Form fieldset.
+
Description
The horizontal offset of the focused Floating Label.
$kendo-fieldset-textNullnullnull$kendo-floating-label-focus-offset-yNumber00
Description
The text color of the Form fieldset.
+
Description
The vertical offset of the focused Floating Label.
$kendo-fieldset-borderNullnullnull$kendo-floating-label-transitionList.2s ease-out0.2s ease-out
Description
The border color of the Form fieldset.
+
Description
The transition of the Floating Label.
$kendo-fieldset-legend-bg$kendo-floating-label-bg Null null null
Description
The background color of the Form legend.
+
Description
The background color of the Floating Label.
$kendo-fieldset-legend-textColorif($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 ))#373737$kendo-floating-label-textNullnullnull
Description
The text color of the Form legend.
+
Description
The text color of the Floating Label.
$kendo-fieldset-legend-border$kendo-floating-label-focus-bg Null null null
Description
The border color of the Form legend.
+
Description
The background color of the focused Floating Label.
$kendo-form-sizesMap( - sm: ( - form-rows-spacing: $kendo-form-sm-rows-spacing - ), - md: ( - form-rows-spacing: $kendo-form-md-rows-spacing - ), - lg: ( - form-rows-spacing: $kendo-form-lg-rows-spacing - ) -)(sm: (form-rows-spacing: 10px), md: (form-rows-spacing: 14px), lg: (form-rows-spacing: 18px))$kendo-floating-label-focus-textNullnullnull
Description
The sizes map for the Form.
+
Description
The text color of the focused Floating Label.
-### Grid +### Form @@ -8471,419 +8581,469 @@ The following table lists the available variables for customizing the Default th - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - - - - + + + + + + - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - - - - + + + + - + + + + + + + + +
$kendo-grid-padding-x$kendo-form-spacer Number$kendo-table-md-cell-padding-x12px$kendo-padding-md-x * 216px
Description
Horizontal padding of the grid.
+
Description
The padding of the inline Form.
$kendo-grid-padding-y$kendo-form-font-size Number$kendo-table-md-cell-padding-y8px$kendo-font-size-md14px
Description
Vertical padding of the grid.
+
Description
The font size of the Form.
$kendo-grid-header-padding-x$kendo-form-line-height Number$kendo-grid-padding-x12px$kendo-line-height-md1.4285714286
Description
Horizontal padding of the grid header.
+
Description
The line height of the Form.
$kendo-grid-header-padding-yNumber$kendo-grid-padding-y8px$kendo-form-line-height-emCalculationcalc( #{$kendo-form-line-height} * 1em )calc(1.4285714286 * 1em)
Description
Vertical padding of the grid header.
+
Description
The line height of the Form in em units.
$kendo-grid-grouping-header-padding-x$kendo-form-sm-line-height Number$kendo-grid-padding-y8px$kendo-line-height-sm1.25
Description
Horizontal padding of the grid grouping header.
+
Description
The line height of the small Form.
$kendo-grid-grouping-header-padding-y$kendo-form-lg-line-height Number$kendo-grid-grouping-header-padding-x8px$kendo-line-height-lg1.5
Description
Vertical padding of the grid grouping header.
+
Description
The line height of the large Form.
$kendo-grid-cell-padding-xNumber$kendo-grid-padding-x12px$kendo-form-fieldset-marginList2em 0 02em 0 0
Description
Horizontal padding of the grid cell.
+
Description
The margin of the Form fieldset.
$kendo-grid-cell-padding-y$kendo-form-fieldset-padding Number$kendo-grid-padding-y8px0px0px
Description
Vertical padding of the grid cell.
+
Description
The padding of the Form fieldset.
$kendo-grid-filter-cell-padding-xNumber$kendo-grid-padding-y8px$kendo-form-legend-marginList0 0 1em0 0 1em
Description
Horizontal padding of the grid filter cell.
+
Description
The margin of the Form legend.
$kendo-grid-filter-cell-padding-y$kendo-form-legend-padding Number$kendo-grid-filter-cell-padding-x8px0px0px
Description
Vertical padding of the grid filter cell.
+
Description
The padding of the Form legend.
$kendo-grid-edit-cell-padding-xNumber$kendo-grid-cell-padding-x12px
Description
Horizontal padding of the grid edit cell.
+ 		$kendo-form-legend-border-widthList0 0 2px0 0 2px
Description
The border width of the Form legend.
$kendo-grid-edit-cell-padding-yNumber3px3px$kendo-form-legend-border-styleStringsolidsolid
Description
Vertical padding of the grid filter cell.
+
Description
The border style of the Form legend.
$kendo-grid-bg$kendo-form-legend-border-color Color$kendo-table-bg#ffffff$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
Background color of the grid component
+
Description
The border color of the Form legend.
$kendo-grid-textColor$kendo-table-text#424242$kendo-form-legend-widthNumber100%100%
Description
Text color of the grid component
+
Description
The width of the Form legend.
$kendo-grid-borderColor$kendo-table-borderrgba(0, 0, 0, 0.08)$kendo-form-legend-font-sizeNumber14px14px
Description
Border color of the grid component
+
Description
The font size of the Form legend.
$kendo-grid-header-bgColor$kendo-table-header-bg#fafafa$kendo-form-legend-text-transformStringuppercaseuppercase
Description
Background color of grid header
+
Description
The text capitalization of the Form legend.
$kendo-grid-header-textColor$kendo-table-header-text#424242$kendo-form-label-margin-bottomNumber0px0px
Description
Text color of grid header
+
Description
The bottom margin of the Form label.
$kendo-grid-header-borderColor$kendo-table-header-borderrgba(0, 0, 0, 0.08)$kendo-form-button-margin-xNumber8px8px
Description
Border color of grid header
+
Description
The horizontal margin of the Form buttons.
$kendo-grid-header-gradientNull$kendo-table-header-gradientnull$kendo-form-hint-font-sizeNumber12px12px
Description
Background gradient of grid header
+
Description
The font size of the Form hint.
$kendo-grid-footer-bgColor$kendo-grid-header-bg#fafafa$kendo-form-hint-font-styleStringitalicitalic
Description
Background color of grid footer
+
Description
The font style of the Form hint.
$kendo-grid-footer-textColor$kendo-grid-header-text#424242$kendo-form-hint-margin-topNumber4px4px
Description
Text color of grid footer
+
Description
The top margin of the Form hint.
$kendo-grid-footer-borderColor$kendo-grid-header-borderrgba(0, 0, 0, 0.08)$kendo-form-sm-rows-spacingNumberk-map-get( $kendo-spacing, 2.5 )10px
Description
Border color of grid footer
+
Description
The row spacing of the small Form.
$kendo-grid-alt-bgColor$kendo-table-alt-row-bgrgba(0, 0, 0, 0.04)$kendo-form-md-rows-spacingNumberk-map-get( $kendo-spacing, 3.5 )14px
Description
Background color of alternating rows in grid
+
Description
The row spacing of the medium Form.
$kendo-grid-alt-textNull$kendo-table-alt-row-textnull$kendo-form-lg-rows-spacingNumberk-map-get( $kendo-spacing, 4.5 )18px
Description
Text color of alternating rows in grid
+
Description
The row spacing of the large Form.
$kendo-grid-alt-borderNull$kendo-table-alt-row-bordernull$kendo-form-separator-marginList$kendo-form-md-rows-spacing 0 014px 0 0
Description
Border color of alternating rows in grid
+
Description
The margin of the Form separator.
$kendo-grid-hover-bg$kendo-form-separator-border-color Color$kendo-table-hover-bg#ededed$kendo-form-legend-border-colorrgba(0, 0, 0, 0.08)
Description
Background color of hovered rows in grid
+
Description
The border color of the Form separator.
$kendo-grid-hover-textNull$kendo-table-hover-textnull$kendo-horizontal-form-label-padding-topNumber5px5px
Description
Text color of hovered rows in grid
+
Description
The top padding of the label in the horizontal Form.
$kendo-grid-hover-borderNull$kendo-table-hover-bordernull$kendo-horizontal-form-label-margin-xNumber10px10px
Description
Border color of hovered rows in grid
+
Description
The horizontal margin of the label in the horizontal Form.
$kendo-grid-selected-bgColor$kendo-table-selected-bgrgba(255, 99, 88, 0.25)$kendo-horizontal-form-label-widthNumber25%25%
Description
Background color of selected rows in grid
+
Description
The width of the label in the horizontal Form.
$kendo-grid-selected-textNull$kendo-table-selected-textnull$kendo-horizontal-form-label-alignStringflex-endflex-end
Description
Text color of selected rows in grid
+
Description
The horizontal alignment of the label in the horizontal Form.
$kendo-grid-selected-borderNull$kendo-table-selected-bordernull$kendo-horizontal-form-field-wrap-max-widthCalculationcalc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} )calc(100% - 25% - 10px)
Description
Border color of selected rows in grid
+
Description
The maximum width of the field wrap in the horizontal Form.
$kendo-grid-selection-aggregates-bgColor$kendo-grid-header-bg#fafafa$kendo-inline-form-element-widthNumber25%25%
Description
Background color of the selection aggregates container
+
Description
The width of the inline Form element.
$kendo-grid-selection-aggregates-text$kendo-forms-invalid-color Color$kendo-grid-text#424242$kendo-color-error#f31700
Description
Text color of the selection aggregates container
+
Description
The invalid text color of the Form.
$kendo-grid-selection-aggregates-borderColor$kendo-grid-borderrgba(0, 0, 0, 0.08)$kendo-label-optional-margin-xNumber6px6px
Description
Border color of the selection aggregates container
+
Description
The horizontal margin of the optional label in the Form.
$kendo-grid-selection-aggregates-border-width$kendo-label-optional-font-size Number$kendo-grid-border-width1px12px12px
Description
Border width of the selection aggregates container
+
Description
The font size of the optional label in the Form.
$kendo-grid-selection-aggregates-spacingNumberk-map-get( $kendo-spacing, 2 )8px$kendo-label-optional-font-styleStringitalicitalic
Description
Spacing between the selection aggregates items
+
Description
The font style of the optional label in the Form.
$kendo-grid-selection-aggregates-line-height$kendo-fieldset-margin Number$kendo-grid-line-height1.428571428630px30px
Description
Line height of the selection aggregates container
+
Description
The margin of the Form fieldset.
$kendo-grid-selection-aggregates-font-weight$kendo-fieldset-font-size Number$kendo-font-weight-bold700$kendo-h4-font-size22px
Description
Font weight of the selection aggregates container
+
Description
The font size of the Form fieldset.
$kendo-grid-row-resizer-hover-bgColorif($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)$kendo-fieldset-bgNullnullnull
Description
Background color of the grid row resize indicator
+
Description
The background color of the Form fieldset.
$kendo-grid-row-resizer-active-bg$kendo-fieldset-textNullnullnull
Description
The text color of the Form fieldset.
+
$kendo-fieldset-borderNullnullnull
Description
The border color of the Form fieldset.
+
$kendo-fieldset-legend-bgNullnullnull
Description
The background color of the Form legend.
+
$kendo-fieldset-legend-text Color$kendo-color-primary#ff6358if($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 ))#373737
Description
Active background color of the grid row resize indicator
+
Description
The text color of the Form legend.
$kendo-grid-row-resizer-heightNumberk-map-get( $kendo-spacing, .5 )2px$kendo-fieldset-legend-borderNullnullnull
Description
Height of the grid row resize indicator
+
Description
The border color of the Form legend.
+
$kendo-form-sizesMap( + sm: ( + form-rows-spacing: $kendo-form-sm-rows-spacing + ), + md: ( + form-rows-spacing: $kendo-form-md-rows-spacing + ), + lg: ( + form-rows-spacing: $kendo-form-lg-rows-spacing + ) +)(sm: (form-rows-spacing: 10px), md: (form-rows-spacing: 14px), lg: (form-rows-spacing: 18px))
Description
The sizes map for the Form.
-### Input +### Grid @@ -8901,2123 +9061,4825 @@ The following table lists the available variables for customizing the Default th - + - - + + - - + - - + + - - - - - + + + + - - + - + - - + - + - - + - + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - - - - - - - - - - - - - - - + - - + + - - + - + - - + - + - - - - - + + + + - - + - + - - + - + - - + - - - - - - - - - - - + + - - + - + - - + - + - - + - - - - - - - - - - - + + - - + - + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - - - - - - - + + - - - - - + + + + - - - - - + + + + - - - - - - + +
$kendo-input-default-width$kendo-grid-padding-x Number100%100%$kendo-table-md-cell-padding-x12px
Description
The default width of the Input components.
+
Description
Horizontal padding of the grid.
$kendo-input-border-width$kendo-grid-padding-y Number1px1px$kendo-table-md-cell-padding-y8px
Description
The border width of the Input components.
+
Description
Vertical padding of the grid.
$kendo-input-border-radiusNullnullnull$kendo-grid-header-padding-xNumber$kendo-grid-padding-x12px
Description
The border radius of the Input components.
+
Description
Horizontal padding of the grid header.
$kendo-input-padding-x$kendo-grid-header-padding-y Numberk-map-get( $kendo-spacing, 2 )$kendo-grid-padding-y 8px
Description
The horizontal padding of the Input components.
+
Description
Vertical padding of the grid header.
$kendo-input-sm-padding-x$kendo-grid-grouping-header-padding-x Numberk-map-get( $kendo-spacing, 2 )$kendo-grid-padding-y 8px
Description
The horizontal padding of the small Input components.
+
Description
Horizontal padding of the grid grouping header.
$kendo-input-md-padding-x$kendo-grid-grouping-header-padding-y Number$kendo-input-padding-x$kendo-grid-grouping-header-padding-x 8px
Description
The horizontal padding of the medium Input components.
+
Description
Vertical padding of the grid grouping header.
$kendo-input-lg-padding-x$kendo-grid-cell-padding-x Numberk-map-get( $kendo-spacing, 2 )8px$kendo-grid-padding-x12px
Description
The horizontal padding of the large Input components.
+
Description
Horizontal padding of the grid cell.
$kendo-input-padding-y$kendo-grid-cell-padding-y Numberk-map-get( $kendo-spacing, 1 )4px$kendo-grid-padding-y8px
Description
The vertical padding of the Input components.
+
Description
Vertical padding of the grid cell.
$kendo-input-sm-padding-y$kendo-grid-filter-cell-padding-x Numberk-map-get( $kendo-spacing, 0.5 )2px$kendo-grid-padding-y8px
Description
The vertical padding of the small Input components.
+
Description
Horizontal padding of the grid filter cell.
$kendo-input-md-padding-y$kendo-grid-filter-cell-padding-y Number$kendo-input-padding-y4px$kendo-grid-filter-cell-padding-x8px
Description
The vertical padding of the medium Input components.
+
Description
Vertical padding of the grid filter cell.
$kendo-input-lg-padding-y$kendo-grid-edit-cell-padding-x Numberk-map-get( $kendo-spacing, 2 )8px$kendo-grid-cell-padding-x12px
Description
The vertical padding of the large Input components.
+
Description
Horizontal padding of the grid edit cell.
$kendo-input-font-familyString$kendo-font-familyinherit$kendo-grid-edit-cell-padding-yNumber3px3px
Description
The font family of the Input components.
+
Description
Vertical padding of the grid filter cell.
$kendo-input-font-sizeNumber$kendo-font-size-md14px$kendo-grid-bgColor$kendo-table-bg#ffffff
Description
The font size of the Input components.
+
Description
Background color of the grid component
$kendo-input-sm-font-sizeNumber$kendo-font-size-md14px$kendo-grid-textColor$kendo-table-text#424242
Description
The font size of the small Input components.
+
Description
Text color of the grid component
$kendo-input-md-font-sizeNumber$kendo-input-font-size14px$kendo-grid-borderColor$kendo-table-borderrgba(0, 0, 0, 0.08)
Description
The font size of the medium Input components.
+
Description
Border color of the grid component
$kendo-input-lg-font-sizeNumber$kendo-font-size-lg16px$kendo-grid-header-bgColor$kendo-table-header-bg#fafafa
Description
The font size of the large Input components.
+
Description
Background color of grid header
$kendo-input-line-heightNumber$kendo-line-height-md1.4285714286$kendo-grid-header-textColor$kendo-table-header-text#424242
Description
The line height of the Input components.
+
Description
Text color of grid header
$kendo-input-sm-line-heightNumber$kendo-line-height-md1.4285714286$kendo-grid-header-borderColor$kendo-table-header-borderrgba(0, 0, 0, 0.08)
Description
The line height of the small Input components.
+
Description
Border color of grid header
$kendo-input-md-line-heightNumber$kendo-input-line-height1.4285714286$kendo-grid-header-gradientNull$kendo-table-header-gradientnull
Description
The line height of the medium Input components.
+
Description
Background gradient of grid header
$kendo-input-lg-line-heightNumber$kendo-line-height-lg1.5
Description
The line height of the large Input components.
-
$kendo-input-sizesMap( - sm: ( - padding-x: $kendo-input-sm-padding-x, - padding-y: $kendo-input-sm-padding-y, - font-size: $kendo-input-sm-font-size, - line-height: $kendo-input-sm-line-height, - button-padding-x: $kendo-input-sm-padding-y, - button-padding-y: $kendo-input-sm-padding-y - ), - md: ( - padding-x: $kendo-input-md-padding-x, - padding-y: $kendo-input-md-padding-y, - font-size: $kendo-input-md-font-size, - line-height: $kendo-input-md-line-height, - button-padding-x: $kendo-input-md-padding-y, - button-padding-y: $kendo-input-md-padding-y - ), - lg: ( - padding-x: $kendo-input-lg-padding-x, - padding-y: $kendo-input-lg-padding-y, - font-size: $kendo-input-lg-font-size, - line-height: $kendo-input-lg-line-height, - button-padding-x: $kendo-input-lg-padding-y, - button-padding-y: $kendo-input-lg-padding-y - ) -)(sm: (padding-x: 8px, padding-y: 2px, font-size: 14px, line-height: 1.4285714286, button-padding-x: 2px, button-padding-y: 2px), md: (padding-x: 8px, padding-y: 4px, font-size: 14px, line-height: 1.4285714286, button-padding-x: 4px, button-padding-y: 4px), lg: (padding-x: 8px, padding-y: 8px, font-size: 16px, line-height: 1.5, button-padding-x: 8px, button-padding-y: 8px))
Description
The sizes map for the Input components.
-
$kendo-input-bg$kendo-grid-footer-bg Color$kendo-component-bg#ffffff$kendo-grid-header-bg#fafafa
Description
The background color of the Input components.
+
Description
Background color of grid footer
$kendo-input-text$kendo-grid-footer-text Color$kendo-component-text$kendo-grid-header-text #424242
Description
The text color of the Input components.
+
Description
Text color of grid footer
$kendo-input-border$kendo-grid-footer-border Color$kendo-component-border$kendo-grid-header-border rgba(0, 0, 0, 0.08)
Description
The border color of the Input components.
+
Description
Border color of grid footer
$kendo-input-shadowNullnullnull$kendo-grid-alt-bgColor$kendo-table-alt-row-bgrgba(0, 0, 0, 0.04)
Description
The shadow of the Input components.
+
Description
Background color of alternating rows in grid
$kendo-input-hover-bg$kendo-grid-alt-text Nullnull$kendo-table-alt-row-text null
Description
The background color of the hovered Input components.
+
Description
Text color of alternating rows in grid
$kendo-input-hover-text$kendo-grid-alt-border Nullnull$kendo-table-alt-row-border null
Description
The text color of the hovered Input components.
+
Description
Border color of alternating rows in grid
$kendo-input-hover-border$kendo-grid-hover-bg Colorif($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-input-border, .16 ))rgba(0, 0, 0, 0.16)
Description
The border color of the hovered Input components.
-
$kendo-input-hover-shadowNullnullnull$kendo-table-hover-bg#ededed
Description
The shadow of the hovered Input components.
+
Description
Background color of hovered rows in grid
$kendo-input-focus-bg$kendo-grid-hover-text Nullnull$kendo-table-hover-text null
Description
The background color of the focused Input components.
+
Description
Text color of hovered rows in grid
$kendo-input-focus-text$kendo-grid-hover-border Nullnull$kendo-table-hover-border null
Description
The text color of the focused Input components.
+
Description
Border color of hovered rows in grid
$kendo-input-focus-border$kendo-grid-selected-bg Color$kendo-input-hover-borderrgba(0, 0, 0, 0.16)
Description
The border color of the focused Input components.
-
$kendo-input-focus-shadowList0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( $kendo-input-focus-border, .08 ))0 0 0 2px rgba(0, 0, 0, 0.08)$kendo-table-selected-bgrgba(255, 99, 88, 0.25)
Description
The shadow of the focused Input components.
+
Description
Background color of selected rows in grid
$kendo-input-selected-bg$kendo-grid-selected-text Nullnull$kendo-table-selected-text null
Description
The background color of the selected Input components.
+
Description
Text color of selected rows in grid
$kendo-input-selected-text$kendo-grid-selected-border Nullnull$kendo-table-selected-border null
Description
The text color of the selected Input components.
+
Description
Border color of selected rows in grid
$kendo-input-disabled-bgNullnullnull$kendo-grid-selection-aggregates-bgColor$kendo-grid-header-bg#fafafa
Description
The background color of the disabled Input components.
+
Description
Background color of the selection aggregates container
$kendo-input-disabled-textNullnullnull$kendo-grid-selection-aggregates-textColor$kendo-grid-text#424242
Description
The text color of the disabled Input components.
+
Description
Text color of the selection aggregates container
$kendo-input-disabled-borderNullnullnull$kendo-grid-selection-aggregates-borderColor$kendo-grid-borderrgba(0, 0, 0, 0.08)
Description
The border color of the disabled Input components.
+
Description
Border color of the selection aggregates container
$kendo-input-disabled-gradientNullnullnull$kendo-grid-selection-aggregates-border-widthNumber$kendo-grid-border-width1px
Description
The gradient of the disabled Input components.
+
Description
Border width of the selection aggregates container
$kendo-input-disabled-shadowNullnullnull$kendo-grid-selection-aggregates-spacingNumberk-map-get( $kendo-spacing, 2 )8px
Description
The shadow of the disabled Input components.
+
Description
Spacing between the selection aggregates items
$kendo-input-outline-bgNullnullnull$kendo-grid-selection-aggregates-line-heightNumber$kendo-grid-line-height1.4285714286
Description
The background color of the outline Input components.
+
Description
Line height of the selection aggregates container
$kendo-input-outline-textColor$kendo-input-text#424242$kendo-grid-selection-aggregates-font-weightNumber$kendo-font-weight-bold700
Description
The text color of the outline Input components.
+
Description
Font weight of the selection aggregates container
$kendo-input-outline-border$kendo-grid-row-resizer-hover-bg Colorif($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $kendo-button-text, .5))rgba(66, 66, 66, 0.5)
Description
The border color of the outline Input components.
-
$kendo-input-outline-hover-bgNullnullnullif($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)
Description
The background color of the outline hovered Input components.
+
Description
Background color of the grid row resize indicator
$kendo-input-outline-hover-textNullnullnull$kendo-grid-row-resizer-active-bgColor$kendo-color-primary#ff6358
Description
The text color of the outline hovered Input components.
+
Description
Active background color of the grid row resize indicator
$kendo-input-outline-hover-borderColorif($kendo-enable-color-system, rgba( k-color( on-base, true ), .8 ), rgba( $kendo-button-text, .8))rgba(66, 66, 66, 0.8)$kendo-grid-row-resizer-heightNumberk-map-get( $kendo-spacing, .5 )2px
Description
The border color of the outline hovered Input components.
+
Description
Height of the grid row resize indicator
$kendo-input-outline-focus-bgNullnullnull
+ +### Input + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - - - - - - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - + - - - -
NameTypeDefault valueComputed value
$kendo-input-default-widthNumber100%100%
Description
The background color of the outline focused Input components.
+
Description
The default width of the Input components.
$kendo-input-outline-focus-textNullnullnull$kendo-input-border-widthNumber1px1px
Description
The text color of the outline focused Input components.
+
Description
The border width of the Input components.
$kendo-input-outline-focus-border$kendo-input-border-radius Null null null
Description
The border color of the outline focused Input components.
+
Description
The border radius of the Input components.
$kendo-input-outline-focus-shadowList$kendo-input-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)$kendo-input-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The shadow of the outline focused Input components.
+
Description
The horizontal padding of the Input components.
$kendo-input-flat-bgNullnullnull$kendo-input-sm-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The background color of the flat Input components.
+
Description
The horizontal padding of the small Input components.
$kendo-input-flat-textColor$kendo-input-text#424242$kendo-input-md-padding-xNumber$kendo-input-padding-x8px
Description
The text color of the flat Input components.
+
Description
The horizontal padding of the medium Input components.
$kendo-input-flat-borderColor$kendo-input-borderrgba(0, 0, 0, 0.08)$kendo-input-lg-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The border color of the flat Input components.
+
Description
The horizontal padding of the large Input components.
$kendo-input-flat-hover-bgNullnullnull$kendo-input-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
The background color of the flat hovered Input components.
+
Description
The vertical padding of the Input components.
$kendo-input-flat-hover-textNullnullnull$kendo-input-sm-padding-yNumberk-map-get( $kendo-spacing, 0.5 )2px
Description
The text color of the flat hovered Input components.
+
Description
The vertical padding of the small Input components.
$kendo-input-flat-hover-borderColor$kendo-input-hover-borderrgba(0, 0, 0, 0.16)$kendo-input-md-padding-yNumber$kendo-input-padding-y4px
Description
The border color of the flat hovered Input components.
+
Description
The vertical padding of the medium Input components.
$kendo-input-flat-focus-bgNullnullnull$kendo-input-lg-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The background color of the flat focused Input components.
+
Description
The vertical padding of the large Input components.
$kendo-input-flat-focus-textNullnullnull$kendo-input-font-familyString$kendo-font-familyinherit
Description
The text color of the flat focused Input components.
+
Description
The font family of the Input components.
$kendo-input-flat-focus-borderNullnullnull$kendo-input-font-sizeNumber$kendo-font-size-md14px
Description
The border color of the flat focused Input components.
+
Description
The font size of the Input components.
$kendo-input-flat-focus-shadowList$kendo-input-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)$kendo-input-sm-font-sizeNumber$kendo-font-size-md14px
Description
The shadow of the flat focused Input components.
+
Description
The font size of the small Input components.
$kendo-input-placeholder-textColor$kendo-subtle-text#666666$kendo-input-md-font-sizeNumber$kendo-input-font-size14px
Description
The text color of the Input placeholder.
+
Description
The font size of the medium Input components.
$kendo-input-placeholder-opacity$kendo-input-lg-font-size Number11$kendo-font-size-lg16px
Description
The opacity of the Input placeholder.
+
Description
The font size of the large Input components.
$kendo-input-clear-value-textNullnullnull$kendo-input-line-heightNumber$kendo-line-height-md1.4285714286
Description
The color of the Input clear value icon.
+
Description
The line height of the Input components.
$kendo-input-clear-value-opacity$kendo-input-sm-line-height Number.50.5$kendo-line-height-md1.4285714286
Description
The opacity of the Input clear value icon.
+
Description
The line height of the small Input components.
$kendo-input-clear-value-hover-textNullnullnull$kendo-input-md-line-heightNumber$kendo-input-line-height1.4285714286
Description
The color of the hovered Input clear value icon.
+
Description
The line height of the medium Input components.
$kendo-input-clear-value-hover-opacity$kendo-input-lg-line-height Number11$kendo-line-height-lg1.5
Description
The opacity of the hovered Input clear value icon.
+
Description
The line height of the large Input components.
$kendo-input-values-margin-yNumberk-map-get( $kendo-spacing, 0.5 )2px$kendo-input-sizesMap( + sm: ( + padding-x: $kendo-input-sm-padding-x, + padding-y: $kendo-input-sm-padding-y, + font-size: $kendo-input-sm-font-size, + line-height: $kendo-input-sm-line-height, + button-padding-x: $kendo-input-sm-padding-y, + button-padding-y: $kendo-input-sm-padding-y + ), + md: ( + padding-x: $kendo-input-md-padding-x, + padding-y: $kendo-input-md-padding-y, + font-size: $kendo-input-md-font-size, + line-height: $kendo-input-md-line-height, + button-padding-x: $kendo-input-md-padding-y, + button-padding-y: $kendo-input-md-padding-y + ), + lg: ( + padding-x: $kendo-input-lg-padding-x, + padding-y: $kendo-input-lg-padding-y, + font-size: $kendo-input-lg-font-size, + line-height: $kendo-input-lg-line-height, + button-padding-x: $kendo-input-lg-padding-y, + button-padding-y: $kendo-input-lg-padding-y + ) +)(sm: (padding-x: 8px, padding-y: 2px, font-size: 14px, line-height: 1.4285714286, button-padding-x: 2px, button-padding-y: 2px), md: (padding-x: 8px, padding-y: 4px, font-size: 14px, line-height: 1.4285714286, button-padding-x: 4px, button-padding-y: 4px), lg: (padding-x: 8px, padding-y: 8px, font-size: 16px, line-height: 1.5, button-padding-x: 8px, button-padding-y: 8px))
Description
The vertical margin of the clear value icon.
+
Description
The sizes map for the Input components.
$kendo-input-values-margin-xNumber$kendo-input-values-margin-y2px$kendo-input-bgColor$kendo-component-bg#ffffff
Description
The horizontal margin of the clear value icon.
+
Description
The background color of the Input components.
$kendo-input-button-widthCalculation$kendo-button-inner-calc-sizecalc(1.4285714286em + 8px)
Description
The width of the Input button.
-
$kendo-input-button-border-widthNumber1px1px$kendo-input-textColor$kendo-component-text#424242
Description
The border width of the Input button.
+
Description
The text color of the Input components.
$kendo-input-spinner-widthCalculation$kendo-button-inner-calc-sizecalc(1.4285714286em + 8px)$kendo-input-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The width of the Input spinner button.
+
Description
The border color of the Input components.
$kendo-input-spinner-icon-offset$kendo-input-shadow Null null null
Description
The icon offset of the Input spinner button.
+
Description
The shadow of the Input components.
$kendo-input-separator-textColor$kendo-input-borderrgba(0, 0, 0, 0.08)$kendo-input-hover-bgNullnullnull
Description
The color of the Input separator.
+
Description
The background color of the hovered Input components.
$kendo-input-separator-opacityNumber.50.5$kendo-input-hover-textNullnullnull
Description
The opacity of the Input separator.
+
Description
The text color of the hovered Input components.
$kendo-input-prefix-text$kendo-input-hover-border Color$kendo-subtle-text#666666if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-input-border, .16 ))rgba(0, 0, 0, 0.16)
Description
The text color of the Input prefix.
+
Description
The border color of the hovered Input components.
$kendo-input-suffix-textColor$kendo-subtle-text#666666$kendo-input-hover-shadowNullnullnull
Description
The text color of the Input suffix.
+
Description
The shadow of the hovered Input components.
$kendo-input-prefix-textColor$kendo-subtle-text#666666$kendo-input-focus-bgNullnullnull
Description
The text color of the Input prefix.
+
Description
The background color of the focused Input components.
$kendo-input-suffix-textColor$kendo-subtle-text#666666$kendo-input-focus-textNullnullnull
Description
The text color of the Input suffix.
+
Description
The text color of the focused Input components.
$kendo-input-invalid-border$kendo-input-focus-border Color$kendo-invalid-border#f31700$kendo-input-hover-borderrgba(0, 0, 0, 0.16)
Description
The border color of the invalid Input components.
+
Description
The border color of the focused Input components.
$kendo-input-invalid-shadowNull$kendo-invalid-shadownull$kendo-input-focus-shadowList0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( $kendo-input-focus-border, .08 ))0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The shadow of the invalid Input components.
+
Description
The shadow of the focused Input components.
$kendo-input-valid-borderColor$kendo-valid-border#37b400$kendo-input-selected-bgNullnullnull
Description
The border color of the valid Input components.
+
Description
The background color of the selected Input components.
$kendo-input-valid-shadow$kendo-input-selected-text Null$kendo-valid-shadownull null
Description
The shadow of the valid Input components.
-
- -### List - - - - - - - - - - - - - - - - - - - - - - - - - + - - + - - + - - + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - + - - + - - - - - + + + + - - + - - + - - + - - + - - + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - + - - + - - -
NameTypeDefault valueComputed value
$kendo-list-font-familyString$kendo-font-familyinherit
Description
The font family of the List components.
+
Description
The text color of the selected Input components.
$kendo-list-font-size$kendo-input-disabled-bg Null null null
Description
The font size of the List component, if no size is set.
+
Description
The background color of the disabled Input components.
$kendo-list-line-height$kendo-input-disabled-text Null null null
Description
The line height of the List component, if no size is set.
+
Description
The text color of the disabled Input components.
$kendo-list-header-padding-x$kendo-input-disabled-border Null null null
Description
The horizontal padding of the List header, if no size is set.
+
Description
The border color of the disabled Input components.
$kendo-list-header-padding-y$kendo-input-disabled-gradient Null null null
Description
The vertical padding of the List header, if no size is set.
+
Description
The gradient of the disabled Input components.
$kendo-list-header-border-widthList0 0 1px0 0 1px$kendo-input-disabled-shadowNullnullnull
Description
The border width of the List header.
+
Description
The shadow of the disabled Input components.
$kendo-list-header-font-size$kendo-input-outline-bg Null null null
Description
The font size of the List header, if no size is set.
+
Description
The background color of the outline Input components.
$kendo-list-header-line-heightNullnullnull$kendo-input-outline-textColor$kendo-input-text#424242
Description
The line height of the List header, if no size is set.
+
Description
The text color of the outline Input components.
$kendo-list-header-font-weightNumber$kendo-font-weight-bold700$kendo-input-outline-borderColorif($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $kendo-button-text, .5))rgba(66, 66, 66, 0.5)
Description
The font weight of the List header.
+
Description
The border color of the outline Input components.
$kendo-list-item-padding-x$kendo-input-outline-hover-bg Null null null
Description
The horizontal padding of the List items, when no size is set.
+
Description
The background color of the outline hovered Input components.
$kendo-list-item-padding-y$kendo-input-outline-hover-text Null null null
Description
The vertical padding of the List items, when no size is set.
+
Description
The text color of the outline hovered Input components.
$kendo-list-item-font-sizeNullnullnull$kendo-input-outline-hover-borderColorif($kendo-enable-color-system, rgba( k-color( on-base, true ), .8 ), rgba( $kendo-button-text, .8))rgba(66, 66, 66, 0.8)
Description
The font size of the List items, if no size is set.
+
Description
The border color of the outline hovered Input components.
$kendo-list-item-line-height$kendo-input-outline-focus-bg Null null null
Description
The line height of the List items, if no size is set.
+
Description
The background color of the outline focused Input components.
$kendo-list-group-item-padding-x$kendo-input-outline-focus-text Null null null
Description
The horizontal padding of the List group items, when no size is set.
+
Description
The text color of the outline focused Input components.
$kendo-list-group-item-padding-y$kendo-input-outline-focus-border Null null null
Description
The vertical padding of the List group items, when no size is set.
+
Description
The border color of the outline focused Input components.
$kendo-list-group-item-border-width$kendo-input-outline-focus-shadow List1px 0 01px 0 0$kendo-input-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The border width of the List group items.
+
Description
The shadow of the outline focused Input components.
$kendo-list-group-item-font-size$kendo-input-flat-bg Null null null
Description
The font size of the List group items, if no size is set.
+
Description
The background color of the flat Input components.
$kendo-list-group-item-line-heightNullnullnull$kendo-input-flat-textColor$kendo-input-text#424242
Description
The line height of the List group items, if no size is set.
+
Description
The text color of the flat Input components.
$kendo-list-group-item-font-weightNumber$kendo-font-weight-bold700$kendo-input-flat-borderColor$kendo-input-borderrgba(0, 0, 0, 0.08)
Description
The font weight of a List group item.
+
Description
The border color of the flat Input components.
$kendo-list-sizesMap( - sm: ( - font-size: $kendo-list-sm-font-size, - line-height: $kendo-list-sm-line-height, - header-padding-x: $kendo-list-sm-header-padding-x, - header-padding-y: $kendo-list-sm-header-padding-y, - header-font-size: null, - header-line-height: null, - item-padding-x: $kendo-list-sm-item-padding-x, - item-padding-y: $kendo-list-sm-item-padding-y, - item-font-size: null, - item-line-height: null, - group-item-padding-x: $kendo-list-sm-group-item-padding-x, - group-item-padding-y: $kendo-list-sm-group-item-padding-y, - group-item-font-size: null, - group-item-line-height: null - ), - md: ( - font-size: $kendo-list-md-font-size, - line-height: $kendo-list-md-line-height, - header-padding-x: $kendo-list-md-header-padding-x, - header-padding-y: $kendo-list-md-header-padding-y, - header-font-size: null, - header-line-height: null, - item-padding-x: $kendo-list-md-item-padding-x, - item-padding-y: $kendo-list-md-item-padding-y, - item-font-size: null, - item-line-height: null, - group-item-padding-x: $kendo-list-md-group-item-padding-x, - group-item-padding-y: $kendo-list-md-group-item-padding-y, - group-item-font-size: null, - group-item-line-height: null - ), - lg: ( - font-size: $kendo-list-lg-font-size, - line-height: $kendo-list-lg-line-height, - header-padding-x: $kendo-list-lg-header-padding-x, - header-padding-y: $kendo-list-lg-header-padding-y, - header-font-size: null, - header-line-height: null, - item-padding-x: $kendo-list-lg-item-padding-x, - item-padding-y: $kendo-list-lg-item-padding-y, - item-font-size: null, - item-line-height: null, - group-item-padding-x: $kendo-list-lg-group-item-padding-x, - group-item-padding-y: $kendo-list-lg-group-item-padding-y, - group-item-font-size: null, - group-item-line-height: null - ) -)(sm: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 8px, header-padding-y: 2px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 2px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 2px, group-item-font-size: null, group-item-line-height: null), md: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 8px, header-padding-y: 4px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 4px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 4px, group-item-font-size: null, group-item-line-height: null), lg: (font-size: 16px, line-height: 1.5, header-padding-x: 8px, header-padding-y: 6px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 8px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 6px, group-item-font-size: null, group-item-line-height: null))$kendo-input-flat-hover-bgNullnullnull
Description
The map with the sizes of the List.
+
Description
The background color of the flat hovered Input components.
$kendo-list-bgColor$kendo-component-bg#ffffff$kendo-input-flat-hover-textNullnullnull
Description
The background color of the List component.
+
Description
The text color of the flat hovered Input components.
$kendo-list-text$kendo-input-flat-hover-border Color$kendo-component-text#424242$kendo-input-hover-borderrgba(0, 0, 0, 0.16)
Description
The text color of the List component.
+
Description
The border color of the flat hovered Input components.
$kendo-list-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)$kendo-input-flat-focus-bgNullnullnull
Description
The border color of the List component.
+
Description
The background color of the flat focused Input components.
$kendo-list-header-bg$kendo-input-flat-focus-text Null null null
Description
The background color of the List header.
+
Description
The text color of the flat focused Input components.
$kendo-list-header-text$kendo-input-flat-focus-border Null null null
Description
The text color of the List header.
+
Description
The border color of the flat focused Input components.
$kendo-list-header-borderStringinheritinherit$kendo-input-flat-focus-shadowList$kendo-input-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The border color of the List header.
+
Description
The shadow of the flat focused Input components.
$kendo-list-header-shadowStringk-elevation(2)var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-input-placeholder-textColor$kendo-subtle-text#666666
Description
The box shadow of the List header.
+
Description
The text color of the Input placeholder.
$kendo-list-item-bgNullnullnull$kendo-input-placeholder-opacityNumber11
Description
The background color of the List items.
+
Description
The opacity of the Input placeholder.
$kendo-list-item-text$kendo-input-clear-value-text Null null null
Description
The text color of the List items.
+
Description
The color of the Input clear value icon.
$kendo-list-item-hover-bgColor$kendo-hover-bg#f0f0f0$kendo-input-clear-value-opacityNumber.50.5
Description
The background color of the hovered List items.
+
Description
The opacity of the Input clear value icon.
$kendo-list-item-hover-textColor$kendo-hover-text#424242$kendo-input-clear-value-hover-textNullnullnull
Description
The text color of the hovered List items.
+
Description
The color of the hovered Input clear value icon.
$kendo-list-item-focus-bgNullnullnull$kendo-input-clear-value-hover-opacityNumber11
Description
The background color of the focused List items.
+
Description
The opacity of the hovered Input clear value icon.
$kendo-list-item-focus-textNullnullnull$kendo-input-values-margin-yNumberk-map-get( $kendo-spacing, 0.5 )2px
Description
The text color of the focused List items.
+
Description
The vertical margin of the clear value icon.
$kendo-list-item-focus-shadowListinset 0 0 0 2px rgba(0, 0, 0, .12)inset 0 0 0 2px rgba(0, 0, 0, 0.12)$kendo-input-values-margin-xNumber$kendo-input-values-margin-y2px
Description
The box shadow of the focused List items.
+
Description
The horizontal margin of the clear value icon.
$kendo-list-item-selected-bgColor$kendo-selected-bg#ff6358$kendo-input-button-widthCalculation$kendo-button-inner-calc-sizecalc(1.4285714286em + 8px)
Description
The background color of the selected List items.
+
Description
The width of the Input button.
$kendo-list-item-selected-textColor$kendo-selected-textwhite$kendo-input-button-border-widthNumber1px1px
Description
The text color of the selected List items.
+
Description
The border width of the Input button.
$kendo-list-group-item-bgNullnullnull$kendo-input-spinner-widthCalculation$kendo-button-inner-calc-sizecalc(1.4285714286em + 8px)
Description
The background color of the List group items.
+
Description
The width of the Input spinner button.
$kendo-list-group-item-text$kendo-input-spinner-icon-offset Null null null
Description
The text color of the List group items.
+
Description
The icon offset of the Input spinner button.
$kendo-list-group-item-borderStringinheritinherit$kendo-input-separator-textColor$kendo-input-borderrgba(0, 0, 0, 0.08)
Description
The border color of the List group items.
+
Description
The color of the Input separator.
$kendo-list-group-item-shadowNullnullnull$kendo-input-separator-opacityNumber.50.5
Description
The base shadow of the List group items.
+
Description
The opacity of the Input separator.
$kendo-list-no-data-text$kendo-input-prefix-text Color $kendo-subtle-text #666666
Description
The color of the 'No Data' text.
+
Description
The text color of the Input prefix.
$kendo-list-option-label-text$kendo-input-suffix-text Color $kendo-subtle-text #666666
Description
The color of the 'Option Label' text.
+
Description
The text color of the Input suffix.
- -### Listbox - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-listbox-spacingNumberk-map-get( $kendo-spacing, 2 )8px
$kendo-input-prefix-textColor$kendo-subtle-text#666666
Description
The spacing between the ListBox elements.
+
Description
The text color of the Input prefix.
$kendo-listbox-button-spacingNumberk-map-get( $kendo-spacing, 2 )8px$kendo-input-suffix-textColor$kendo-subtle-text#666666
Description
The spacing between the ListBox buttons.
+
Description
The text color of the Input suffix.
$kendo-listbox-widthNumber10em10em$kendo-input-invalid-borderColor$kendo-invalid-border#f31700
Description
The width of the ListBox.
+
Description
The border color of the invalid Input components.
$kendo-listbox-default-heightNumber200px200px$kendo-input-invalid-shadowNull$kendo-invalid-shadownull
Description
The height of the ListBox.
+
Description
The shadow of the invalid Input components.
$kendo-listbox-border-widthNumber1px1px$kendo-input-valid-borderColor$kendo-valid-border#37b400
Description
The width of the border around the ListBox.
+
Description
The border color of the valid Input components.
$kendo-listbox-font-family$kendo-input-valid-shadowNull$kendo-valid-shadownull
Description
The shadow of the valid Input components.
+
+ +### List + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - + - - + + - - + - - -
NameTypeDefault valueComputed value
$kendo-list-font-family String $kendo-font-family inherit
Description
The font family of the ListBox.
+
Description
The font family of the List components.
$kendo-listbox-font-sizeNumber$kendo-font-size-md14px$kendo-list-font-sizeNullnullnull
Description
The font size of the ListBox.
+
Description
The font size of the List component, if no size is set.
$kendo-listbox-line-heightNumber$kendo-line-height-md1.4285714286$kendo-list-line-heightNullnullnull
Description
The line height of the ListBox.
+
Description
The line height of the List component, if no size is set.
$kendo-listbox-textColor$kendo-component-text#424242$kendo-list-header-padding-xNullnullnull
Description
The text color of the ListBox.
+
Description
The horizontal padding of the List header, if no size is set.
$kendo-listbox-bgColor$kendo-component-bg#ffffff$kendo-list-header-padding-yNullnullnull
Description
The background color of the ListBox.
+
Description
The vertical padding of the List header, if no size is set.
$kendo-listbox-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)$kendo-list-header-border-widthList0 0 1px0 0 1px
Description
The border color of the ListBox.
+
Description
The border width of the List header.
$kendo-listbox-item-padding-x$kendo-list-header-font-size Null null null
Description
The inline padding of the ListBox item.
+
Description
The font size of the List header, if no size is set.
$kendo-listbox-item-padding-y$kendo-list-header-line-height Null null null
Description
The block padding of the ListBox item.
+
Description
The line height of the List header, if no size is set.
$kendo-listbox-drop-hint-width$kendo-list-header-font-weight Number1px1px$kendo-font-weight-bold700
Description
The width of the ListBox drop hint.
+
Description
The font weight of the List header.
$kendo-listbox-drop-hint-border-width$kendo-list-item-padding-x Null null null
Description
The width of the border around the ListBox drop hint.
+
Description
The horizontal padding of the List items, when no size is set.
- -### Listview - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-listview-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
$kendo-list-item-padding-yNullnullnull
Description
The horizontal padding of the ListView.
+
Description
The vertical padding of the List items, when no size is set.
$kendo-listview-padding-yNumberk-map-get( $kendo-spacing, 1 )4px$kendo-list-item-font-sizeNullnullnull
Description
The vertical padding of the ListView.
+
Description
The font size of the List items, if no size is set.
$kendo-listview-border-widthNumber1px1px$kendo-list-item-line-heightNullnullnull
Description
The width of the border around bordered ListView.
+
Description
The line height of the List items, if no size is set.
$kendo-listview-font-familyString$kendo-font-familyinherit$kendo-list-group-item-padding-xNullnullnull
Description
The font family of the ListView.
+
Description
The horizontal padding of the List group items, when no size is set.
$kendo-listview-font-sizeNumber$kendo-font-size-md14px$kendo-list-group-item-padding-yNullnullnull
Description
The font size of the ListView.
+
Description
The vertical padding of the List group items, when no size is set.
$kendo-listview-line-heightNumber$kendo-line-height-md1.4285714286$kendo-list-group-item-border-widthList1px 0 01px 0 0
Description
The line height of the ListView.
+
Description
The border width of the List group items.
$kendo-listview-textColor$kendo-component-text#424242
$kendo-list-group-item-font-sizeNullnullnull
Description
The font size of the List group items, if no size is set.
+
$kendo-list-group-item-line-heightNullnullnull
Description
The line height of the List group items, if no size is set.
+
$kendo-list-group-item-font-weightNumber$kendo-font-weight-bold700
Description
The font weight of a List group item.
+
$kendo-list-sizesMap( + sm: ( + font-size: $kendo-list-sm-font-size, + line-height: $kendo-list-sm-line-height, + header-padding-x: $kendo-list-sm-header-padding-x, + header-padding-y: $kendo-list-sm-header-padding-y, + header-font-size: null, + header-line-height: null, + item-padding-x: $kendo-list-sm-item-padding-x, + item-padding-y: $kendo-list-sm-item-padding-y, + item-font-size: null, + item-line-height: null, + group-item-padding-x: $kendo-list-sm-group-item-padding-x, + group-item-padding-y: $kendo-list-sm-group-item-padding-y, + group-item-font-size: null, + group-item-line-height: null + ), + md: ( + font-size: $kendo-list-md-font-size, + line-height: $kendo-list-md-line-height, + header-padding-x: $kendo-list-md-header-padding-x, + header-padding-y: $kendo-list-md-header-padding-y, + header-font-size: null, + header-line-height: null, + item-padding-x: $kendo-list-md-item-padding-x, + item-padding-y: $kendo-list-md-item-padding-y, + item-font-size: null, + item-line-height: null, + group-item-padding-x: $kendo-list-md-group-item-padding-x, + group-item-padding-y: $kendo-list-md-group-item-padding-y, + group-item-font-size: null, + group-item-line-height: null + ), + lg: ( + font-size: $kendo-list-lg-font-size, + line-height: $kendo-list-lg-line-height, + header-padding-x: $kendo-list-lg-header-padding-x, + header-padding-y: $kendo-list-lg-header-padding-y, + header-font-size: null, + header-line-height: null, + item-padding-x: $kendo-list-lg-item-padding-x, + item-padding-y: $kendo-list-lg-item-padding-y, + item-font-size: null, + item-line-height: null, + group-item-padding-x: $kendo-list-lg-group-item-padding-x, + group-item-padding-y: $kendo-list-lg-group-item-padding-y, + group-item-font-size: null, + group-item-line-height: null + ) +)(sm: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 8px, header-padding-y: 2px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 2px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 2px, group-item-font-size: null, group-item-line-height: null), md: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 8px, header-padding-y: 4px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 4px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 4px, group-item-font-size: null, group-item-line-height: null), lg: (font-size: 16px, line-height: 1.5, header-padding-x: 8px, header-padding-y: 6px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 8px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 6px, group-item-font-size: null, group-item-line-height: null))
Description
The map with the sizes of the List.
+
$kendo-list-bgColor$kendo-component-bg#ffffff
Description
The background color of the List component.
+
$kendo-list-textColor$kendo-component-text#424242
Description
The text color of the List component.
+
$kendo-list-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the List component.
+
$kendo-list-header-bgNullnullnull
Description
The background color of the List header.
+
$kendo-list-header-textNullnullnull
Description
The text color of the List header.
+
$kendo-list-header-borderStringinheritinherit
Description
The border color of the List header.
+
$kendo-list-header-shadowStringk-elevation(2)var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The box shadow of the List header.
+
$kendo-list-item-bgNullnullnull
Description
The background color of the List items.
+
$kendo-list-item-textNullnullnull
Description
The text color of the List items.
+
$kendo-list-item-hover-bgColor$kendo-hover-bg#f0f0f0
Description
The background color of the hovered List items.
+
$kendo-list-item-hover-textColor$kendo-hover-text#424242
Description
The text color of the hovered List items.
+
$kendo-list-item-focus-bgNullnullnull
Description
The background color of the focused List items.
+
$kendo-list-item-focus-textNullnullnull
Description
The text color of the focused List items.
+
$kendo-list-item-focus-shadowListinset 0 0 0 2px rgba(0, 0, 0, .12)inset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The box shadow of the focused List items.
+
$kendo-list-item-selected-bgColor$kendo-selected-bg#ff6358
Description
The background color of the selected List items.
+
$kendo-list-item-selected-textColor$kendo-selected-textwhite
Description
The text color of the selected List items.
+
$kendo-list-group-item-bgNullnullnull
Description
The background color of the List group items.
+
$kendo-list-group-item-textNullnullnull
Description
The text color of the List group items.
+
$kendo-list-group-item-borderStringinheritinherit
Description
The border color of the List group items.
+
$kendo-list-group-item-shadowNullnullnull
Description
The base shadow of the List group items.
+
$kendo-list-no-data-textColor$kendo-subtle-text#666666
Description
The color of the 'No Data' text.
+
$kendo-list-option-label-textColor$kendo-subtle-text#666666
Description
The color of the 'Option Label' text.
+
+ +### Listbox + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-listbox-spacingNumberk-map-get( $kendo-spacing, 2 )8px
Description
The spacing between the ListBox elements.
+
$kendo-listbox-button-spacingNumberk-map-get( $kendo-spacing, 2 )8px
Description
The spacing between the ListBox buttons.
+
$kendo-listbox-widthNumber10em10em
Description
The width of the ListBox.
+
$kendo-listbox-default-heightNumber200px200px
Description
The height of the ListBox.
+
$kendo-listbox-border-widthNumber1px1px
Description
The width of the border around the ListBox.
+
$kendo-listbox-font-familyString$kendo-font-familyinherit
Description
The font family of the ListBox.
+
$kendo-listbox-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the ListBox.
+
$kendo-listbox-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the ListBox.
+
$kendo-listbox-textColor$kendo-component-text#424242
Description
The text color of the ListBox.
+
$kendo-listbox-bgColor$kendo-component-bg#ffffff
Description
The background color of the ListBox.
+
$kendo-listbox-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the ListBox.
+
$kendo-listbox-item-padding-xNullnullnull
Description
The inline padding of the ListBox item.
+
$kendo-listbox-item-padding-yNullnullnull
Description
The block padding of the ListBox item.
+
$kendo-listbox-drop-hint-widthNumber1px1px
Description
The width of the ListBox drop hint.
+
$kendo-listbox-drop-hint-border-widthNullnullnull
Description
The width of the border around the ListBox drop hint.
+
+ +### Listview + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-listview-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the ListView.
+
$kendo-listview-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
The vertical padding of the ListView.
+
$kendo-listview-border-widthNumber1px1px
Description
The width of the border around bordered ListView.
+
$kendo-listview-font-familyString$kendo-font-familyinherit
Description
The font family of the ListView.
+
$kendo-listview-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the ListView.
+
$kendo-listview-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the ListView.
+
$kendo-listview-textColor$kendo-component-text#424242
Description
The text color of the ListView.
$kendo-listview-bg$kendo-listview-bgColor$kendo-component-bg#ffffff
Description
The background color of the ListView.
+
$kendo-listview-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the ListView.
+
$kendo-listview-item-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the ListView items.
+
$kendo-listview-item-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
The vertical padding of the ListView items.
+
$kendo-listview-item-selected-textNullnullnull
Description
The text color of the selected ListView items.
+
$kendo-listview-item-selected-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25))rgba(255, 99, 88, 0.25)
Description
The background color of the selected ListView items.
+
$kendo-listview-item-selected-borderNullnullnull
Description
The border color of the selected ListView items.
+
$kendo-listview-item-focus-textNullnullnull
Description
The text color of the focused ListView items.
+
$kendo-listview-item-focus-bgNullnullnull
Description
The background color of the focused ListView items.
+
$kendo-listview-item-focus-borderNullnullnull
Description
The border color of the focused ListView items.
+
$kendo-listview-item-focus-shadowListinset 0 0 0 2px rgba(0, 0, 0, .13)inset 0 0 0 2px rgba(0, 0, 0, 0.13)
Description
The box shadow of the focused ListView items.
+
+ +### Loader + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-loader-segment-border-radiusNumber50%50%
Description
The border radius of the Loader segment.
+
$kendo-loader-sm-segment-sizeNumberk-map-get( $kendo-spacing, 1 )4px
Description
The size of the small Loader segment.
+
$kendo-loader-md-segment-sizeNumberk-map-get( $kendo-spacing, 2 )8px
Description
The size of the medium Loader segment.
+
$kendo-loader-lg-segment-sizeNumberk-map-get( $kendo-spacing, 4 )16px
Description
The size of the large Loader segment.
+
$kendo-loader-sm-paddingNumberk-math-div( $kendo-loader-sm-segment-size, 2 )2px
Description
The padding of the small Loader.
+
$kendo-loader-md-paddingNumberk-math-div( $kendo-loader-md-segment-size, 2 )4px
Description
The padding of the medium Loader.
+
$kendo-loader-lg-paddingNumberk-math-div( $kendo-loader-lg-segment-size, 2 )8px
Description
The padding of the large Loader.
+
$kendo-loader-sm-spinner-3-widthNumber( $kendo-loader-sm-segment-size * 4 )16px
Description
The width of the small spinner-3 Loader.
+
$kendo-loader-md-spinner-3-widthNumber( $kendo-loader-md-segment-size * 4 )32px
Description
The width of the medium spinner-3 Loader.
+
$kendo-loader-lg-spinner-3-widthNumber( $kendo-loader-lg-segment-size * 4 )64px
Description
The width of the large spinner-3 Loader.
+
$kendo-loader-sm-spinner-3-heightNumber( $kendo-loader-sm-spinner-3-width * $equilateral-height )13.8564064608px
Description
The height of the small spinner-3 Loader.
+
$kendo-loader-md-spinner-3-heightNumber( $kendo-loader-md-spinner-3-width * $equilateral-height )27.7128129216px
Description
The height of the medium spinner-3 Loader.
+
$kendo-loader-lg-spinner-3-heightNumber( $kendo-loader-lg-spinner-3-width * $equilateral-height )55.4256258432px
Description
The height of the large spinner-3 Loader.
+
$kendo-loader-sm-spinner-4-widthNumber$kendo-loader-sm-segment-size * 416px
Description
The width of the small spinner-4 Loader.
+
$kendo-loader-md-spinner-4-widthNumber$kendo-loader-md-segment-size * 432px
Description
The width of the medium spinner-4 Loader.
+
$kendo-loader-lg-spinner-4-widthNumber$kendo-loader-lg-segment-size * 464px
Description
The width of the large spinner-4 Loader.
+
$kendo-loader-sm-spinner-4-heightNumber$kendo-loader-sm-spinner-4-width16px
Description
The height of the small spinner-4 Loader.
+
$kendo-loader-md-spinner-4-heightNumber$kendo-loader-md-spinner-4-width32px
Description
The height of the medium spinner-4 Loader.
+
$kendo-loader-lg-spinner-4-heightNumber$kendo-loader-lg-spinner-4-width64px
Description
The height of the large spinner-4 Loader.
+
$kendo-loader-secondary-bgColor#656565#656565
Description
The color of the Loader based on the secondary theme color.
+
$kendo-loader-container-panel-border-widthNumber1px1px
Description
The border width of the container panel.
+
$kendo-loader-container-panel-border-styleStringsolidsolid
Description
The border style of the container panel.
+
$kendo-loader-container-panel-border-colorColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the container panel.
+
$kendo-loader-container-panel-border-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the container panel.
+
$kendo-loader-container-panel-bgColor$kendo-color-white#ffffff
Description
The background color of the container panel.
+
$kendo-loader-sm-container-paddingNumberk-map-get( $kendo-spacing, 4 )16px
Description
The padding of the small Loader container.
+
$kendo-loader-md-container-paddingNumberk-map-get( $kendo-spacing, 5 )20px
Description
The padding of the medium Loader container.
+
$kendo-loader-lg-container-paddingNumberk-map-get( $kendo-spacing, 6 )24px
Description
The padding of the large Loader container.
+
$kendo-loader-sm-container-gapNumberk-map-get( $kendo-spacing, 1 )4px
Description
The gap of the small Loader container.
+
$kendo-loader-md-container-gapNumberk-map-get( $kendo-spacing, 2 )8px
Description
The gap of the medium Loader container.
+
$kendo-loader-lg-container-gapNumberk-map-get( $kendo-spacing, 3 )12px
Description
The gap of the large Loader container.
+
$kendo-loader-sm-container-font-sizeNumber$kendo-font-size-sm12px
Description
The font size of the small Loader container.
+
$kendo-loader-md-container-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the medium Loader container.
+
$kendo-loader-lg-container-font-sizeNumber$kendo-font-size-lg16px
Description
The font size of the large Loader container.
+
+ +### Loading + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-loading-bgColor$kendo-component-bg#ffffff
Description
The background color of the Loading indicator.
+
$kendo-loading-textStringcurrentColorcurrentColor
Description
The text color of the Loading indicator.
+
$kendo-loading-opacityNumber.30.3
Description
The opacity of the Loading indicator.
+
+ +### Menu + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-menu-popup-padding-xNullnullnull
Description
Horizontal padding of the menu popup.
+
$kendo-menu-popup-padding-yNullnullnull
Description
Vertical padding of the menu popup.
+
$kendo-menu-popup-border-widthNumber$kendo-popup-border-width1px
Description
Width of the border around the menu popup.
+
$kendo-menu-popup-font-sizeNumber$kendo-font-size-md14px
Description
Font sizes of the menu popup.
+
$kendo-menu-popup-line-heightNumber$kendo-line-height-md1.4285714286
Description
Line heights used along with $kendo-font-size.
+
$kendo-menu-popup-bgColor$kendo-popup-bg#ffffff
Description
The background of the menu popup.
+
$kendo-menu-popup-textColor$kendo-popup-text#424242
Description
The text color of the menu popup.
+
$kendo-menu-popup-borderColor$kendo-popup-borderrgba(0, 0, 0, 0.08)
Description
The border color of the menu popup.
+
$kendo-menu-popup-gradientNullnullnull
Description
The background gradient of the menu popup.
+
$kendo-menu-popup-item-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
Horizontal padding of the menu item in popup.
+
$kendo-menu-popup-item-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
Vertical padding of the menu item in popup.
+
$kendo-menu-popup-item-padding-endCalculationcalc( #{$kendo-menu-popup-item-padding-x * 2} + #{$kendo-icon-size} )calc(16px + 16px)
Description
The end padding of the menu item in popup.
+
$kendo-menu-popup-sm-item-icon-margin-startNumber$kendo-menu-popup-sm-item-padding-x8px
Description
The start margin of the menu item expand icon.
+
$kendo-menu-popup-sm-item-icon-margin-endCalculationcalc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )calc(-1 * (calc(16px + 16px) - 4px))
Description
The end margin of the menu item expand icon.
+
$kendo-menu-popup-item-spacingNumber0px0px
Description
The spacing between the menu items in popup.
+
$kendo-menu-popup-item-bgNullnullnull
Description
The background of the menu item in popup.
+
$kendo-menu-popup-item-textNullnullnull
Description
The text color of the menu item in popup.
+
$kendo-menu-popup-item-borderNullnullnull
Description
The border color of the menu item in popup.
+
$kendo-menu-popup-item-gradientNullnullnull
Description
The background gradient of the menu item in popup.
+
$kendo-menu-popup-item-hover-bgColor$kendo-list-item-hover-bg#f0f0f0
Description
The background of hovered menu item in popup.
+
$kendo-menu-popup-item-hover-textColor$kendo-list-item-hover-text#424242
Description
The text color of hovered menu item in popup.
+
$kendo-menu-popup-item-hover-borderNullnullnull
Description
The border color of hovered menu item in popup.
+
$kendo-menu-popup-item-hover-gradientNullnullnull
Description
The background gradient of hovered menu item in popup.
+
$kendo-menu-popup-item-expanded-bgColor$kendo-list-item-selected-bg#ff6358
Description
The background of expanded menu item in popup.
+
$kendo-menu-popup-item-expanded-textColor$kendo-list-item-selected-textwhite
Description
The text color of expanded menu item in popup.
+
$kendo-menu-popup-item-expanded-borderNullnullnull
Description
The border color of expanded menu item in popup.
+
$kendo-menu-popup-item-expanded-gradientNullnullnull
Description
The background gradient of expanded menu item in popup.
+
$kendo-menu-popup-item-focus-shadowList$kendo-menu-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The base shadow of focused menu item in popup.
+
+ +### Menu-button + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-menu-button-arrow-padding-xNumber$kendo-button-padding-y4px
Description
The horizontal padding of the button arrow in the Menu Button..
+
+ +### Notification + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-notification-group-gapNumberk-map-get( $kendo-spacing, 2 )8px
Description
The row-gap between the elements in the Notification group.
+
$kendo-notification-padding-xNumber8px8px
Description
The horizontal padding of the Notification.
+
$kendo-notification-padding-yNumber4px4px
Description
The vertical padding of the Notification.
+
$kendo-notification-border-widthNumber1px1px
Description
The width of the border around the Notification.
+
$kendo-notification-border-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the Notification.
+
$kendo-notification-font-familyString$kendo-font-familyinherit
Description
The font family of the Notification.
+
$kendo-notification-font-sizeNumber$kendo-font-size-sm12px
Description
The font size of the Notification.
+
$kendo-notification-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the Notification.
+
$kendo-notification-bgColor$kendo-component-bg#ffffff
Description
The background color of the Notification.
+
$kendo-notification-textColor$kendo-component-text#424242
Description
The text color of the Notification.
+
$kendo-notification-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the Notification.
+
$kendo-notification-shadowString$kendo-popup-shadowvar(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The box shadow of the Notification.
+
$kendo-notification-icon-spacingNumber$kendo-icon-spacing4px
Description
The horizontal spacing of the Notification icon.
+
$kendo-notification-theme-colorsMap$kendo-theme-colors("primary": #ff6358, "secondary": #666666, "tertiary": #03a9f4, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #ebebeb, "inverse": #424242)
Description
The theme colors map for the Notification.
+
$kendo-notification-themeMapnotification-theme( $kendo-notification-theme-colors )("inverse": (color: white, background-color: #424242, border: #424242), "light": (color: black, background-color: #ebebeb, border: #ebebeb), "dark": (color: white, background-color: #424242, border: #424242), "error": (color: white, background-color: #f31700, border: #f31700), "warning": (color: black, background-color: #ffc000, border: #ffc000), "success": (color: white, background-color: #37b400, border: #37b400), "info": (color: white, background-color: #0058e9, border: #0058e9), "tertiary": (color: white, background-color: #03a9f4, border: #03a9f4), "secondary": (color: white, background-color: #666666, border: #666666), "primary": (color: white, background-color: #ff6358, border: #ff6358))
Description
The generated theme colors map for the Notification.
+
+ +### Orgchart + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-orgchart-spacerNumberk-map-get( $kendo-spacing, 6 )24px
Description
The spacing index of the OrgChart.
+
$kendo-orgchart-padding-yNumber$kendo-orgchart-spacer24px
Description
The vertical padding of the OrgChart.
+
$kendo-orgchart-padding-xNumber$kendo-orgchart-padding-y24px
Description
The horizontal padding of the OrgChart.
+
$kendo-orgchart-font-familyString$kendo-font-familyinherit
Description
The font family of the OrgChart.
+
$kendo-orgchart-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the OrgChart.
+
$kendo-orgchart-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the OrgChart.
+
$kendo-orgchart-bgColor$kendo-component-bg#ffffff
Description
The background color of the OrgChart.
+
$kendo-orgchart-textColor$kendo-component-text#424242
Description
The text color of the OrgChart.
+
$kendo-orgchart-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the OrgChart.
+
$kendo-orgchart-node-gapNumber$kendo-orgchart-spacer24px
Description
The spacing of the OrgChart node.
+
$kendo-orgchart-group-gapNumber$kendo-orgchart-spacer24px
Description
The spacing of the OrgChart group.
+
$kendo-orgchart-node-container-gapNumber$kendo-orgchart-spacer24px
Description
The spacing of the OrgChart node container.
+
$kendo-orgchart-node-group-padding-yNumber$kendo-orgchart-spacer24px
Description
The vertical padding of the OrgChart node group.
+
$kendo-orgchart-node-group-padding-xNumber$kendo-orgchart-node-group-padding-y24px
Description
The horizontal padding of the OrgChart node group.
+
$kendo-orgchart-node-group-border-widthNumber1px1px
Description
The border width of the OrgChart node group.
+
$kendo-orgchart-node-group-border-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the OrgChart node group.
+
$kendo-orgchart-node-group-bgColor$kendo-base-bg#fafafa
Description
The background color of the OrgChart node group.
+
$kendo-orgchart-node-group-textColor$kendo-base-text#424242
Description
The text color of the OrgChart node group.
+
$kendo-orgchart-node-group-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The border color of the OrgChart node group.
+
$kendo-orgchart-node-group-focus-borderColor$kendo-card-focus-borderrgba(0, 0, 0, 0.15)
Description
The border color of the focused OrgChart node group.
+
$kendo-orgchart-node-group-focus-shadowStringk-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the focused OrgChart node group.
+
$kendo-orgchart-node-group-title-font-sizeNumber$kendo-font-size-lg16px
Description
The font size of the OrgChart node group title.
+
$kendo-orgchart-node-group-title-margin-bottomNumberk-math-div( $kendo-orgchart-spacer, 3 )8px
Description
The bottom margin of the OrgChart node group title.
+
$kendo-orgchart-node-group-title-line-heightNumber$kendo-line-height-sm1.25
Description
The line height of the OrgChart node group title.
+
$kendo-orgchart-node-group-subtitle-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the OrgChart node group subtitle.
+
$kendo-orgchart-node-group-subtitle-margin-bottomNumber$kendo-orgchart-spacer24px
Description
The bottom margin of the OrgChart node group subtitle.
+
$kendo-orgchart-node-group-subtitle-textColor$kendo-subtle-text#666666
Description
The line height of the OrgChart node group subtitle.
+
$kendo-orgchart-card-widthNumber300px300px
Description
The width of the OrgChart Card.
+
$kendo-orgchart-card-padding-yNumber$kendo-card-padding-y12px
Description
The vertical padding of the OrgChart Card.
+
$kendo-orgchart-card-padding-xNumber$kendo-orgchart-card-padding-y12px
Description
The horizontal padding of the OrgChart Card.
+
$kendo-orgchart-card-border-widthNumber$kendo-card-border-width1px
Description
The border width of the OrgChart Card.
+
$kendo-orgchart-card-shadowNull$kendo-card-shadownull
Description
The shadow of the OrgChart Card.
+
$kendo-orgchart-card-focus-shadowStringk-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the focused OrgChart Card.
+
$kendo-orgchart-card-title-margin-bottomNumber0px0px
Description
The bottom margin of the OrgChart Card title.
+
$kendo-orgchart-card-title-font-sizeNullnullnull
Description
The font size of the OrgChart Card title.
+
$kendo-orgchart-card-subtitle-margin-bottomNumber0px0px
Description
The bottom margin of the OrgChart Card subtitle.
+
$kendo-orgchart-card-subtitle-font-sizeNullnullnull
Description
The font size of the OrgChart Card subtitle.
+
$kendo-orgchart-card-body-border-widthList2px 0 02px 0 0
Description
The border width of the OrgChart Card body.
+
$kendo-orgchart-card-body-border-colorColortransparenttransparent
Description
The border color of the OrgChart Card body.
+
$kendo-orgchart-card-body-vbox-margin-rightNumberk-math-div( $kendo-orgchart-spacer, 2 )12px
Description
The right margin of the OrgChart Card body title wrap.
+
$kendo-orgchart-card-body-vbox-min-heightNumber$kendo-card-avatar-size45px
Description
The min height of the OrgChart Card body title wrap.
+
$kendo-orgchart-line-sizeNumber1px1px
Description
The size of the OrgChart connecting line.
+
$kendo-orgchart-line-fillColor$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The fill color of the OrgChart connecting line.
+
$kendo-orgchart-line-v-heightNumber25px25px
Description
The height of the OrgChart connecting line.
+
+ +### Pager + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-pager-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the Pager.
+
$kendo-pager-sm-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the small Pager.
+
$kendo-pager-md-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the medium Pager.
+
$kendo-pager-lg-padding-xNumberk-map-get( $kendo-spacing, 2.5 )10px
Description
The horizontal padding of the large Pager.
+
$kendo-pager-padding-yNumber$kendo-pager-padding-x8px
Description
The vertical padding of the Pager.
+
$kendo-pager-sm-padding-yNumber$kendo-pager-sm-padding-x4px
Description
The vertical padding of the small Pager.
+
$kendo-pager-md-padding-yNumber$kendo-pager-md-padding-x8px
Description
The vertical padding of the medium Pager.
+
$kendo-pager-lg-padding-yNumber$kendo-pager-lg-padding-x10px
Description
The vertical padding of the large Pager.
+
$kendo-pager-sm-item-min-widthCalculation$kendo-button-sm-calc-sizecalc(1.4285714286em + 4px + 2px)
Description
The minimum width of the items in the small Pager.
+
$kendo-pager-md-item-min-widthCalculation$kendo-button-md-calc-sizecalc(1.4285714286em + 8px + 2px)
Description
The minimum width of the items in the medium Pagers.
+
$kendo-pager-lg-item-min-widthCalculation$kendo-button-lg-calc-sizecalc(1.5em + 16px + 2px)
Description
The minimum width of the items in the large Pagers.
+
$kendo-pager-sm-item-group-spacingNumberk-map-get( $kendo-spacing, 3 )12px
Description
The margin between the item groups in the small Pager.
+
$kendo-pager-md-item-group-spacingNumberk-map-get( $kendo-spacing, 3.5 )14px
Description
The margin between the item groups in the medium Pager.
+
$kendo-pager-lg-item-group-spacingNumberk-map-get( $kendo-spacing, 4 )16px
Description
The margin between the item groups in the large Pager.
+
$kendo-pager-border-widthNumber1px1px
Description
The border width of the Pager.
+
$kendo-pager-font-familyString$kendo-font-familyinherit
Description
The font family of the Pager.
+
$kendo-pager-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Pager.
+
$kendo-pager-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the Pager.
+
$kendo-pager-bgColor$kendo-component-header-bg#fafafa
Description
The background color of the Pager.
+
$kendo-pager-textColor$kendo-component-header-text#424242
Description
The text color of the Pager.
+
$kendo-pager-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the Pager.
+
$kendo-pager-focus-bgNullnullnull
Description
The background color of the focused Pager.
+
$kendo-pager-focus-shadowList$kendo-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.13)
Description
The box shadow of the focused Pager.
+
$kendo-pager-item-border-widthNumber0px0px
Description
The border width of the Pager items.
+
$kendo-pager-item-border-radiusNullnullnull
Description
The border radius of the Pager items.
+
$kendo-pager-item-spacingNullnullnull
Description
The spacing around the Pager items.
+
$kendo-pager-item-bgNullnullnull
Description
The background color of the Pager items.
+
$kendo-pager-item-textNullnullnull
Description
The text color of the Pager items.
+
$kendo-pager-item-borderNullnullnull
Description
The border color of the Pager items.
+
$kendo-pager-item-hover-bgColor$kendo-list-item-hover-bg#f0f0f0
Description
The background color of the hovered Pager items.
+
$kendo-pager-item-hover-textColor$kendo-list-item-hover-text#424242
Description
The text color of the hovered Pager items.
+
$kendo-pager-item-hover-borderNullnullnull
Description
The border color of the hovered Pager items.
+
$kendo-pager-item-selected-bgColor$kendo-list-item-selected-bg#ff6358
Description
The background color of the selected Pager items.
+
$kendo-pager-item-selected-textColor$kendo-list-item-selected-textwhite
Description
The text color of the selected Pager items.
+
$kendo-pager-item-selected-borderNullnullnull
Description
The border color of the selected Pager items.
+
$kendo-pager-item-focus-opacityNullnullnull
Description
The opacity of the focused Pager items.
+
$kendo-pager-item-focus-bgColortransparenttransparent
Description
The background color of the focused Pager items.
+
$kendo-pager-item-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The box shadow of the focused Pager items.
+
$kendo-pager-number-border-radiusNullnullnull
Description
The border radius of the Pager numbers.
+
$kendo-pager-input-widthNumber5em5em
Description
The width of the Inputs in the Pager.
+
$kendo-pager-sm-dropdown-widthNumber5em5em
Description
The width of the DropDowns in the small Pager.
+
$kendo-pager-md-dropdown-widthNumber5em5em
Description
The width of the DropDowns in the medium Pager.
+
$kendo-pager-lg-dropdown-widthNumber5em5em
Description
The width of the DropDowns in the large Pager.
+
$kendo-pager-sizesMap( + sm: ( + padding-x: $kendo-pager-sm-padding-x, + padding-y: $kendo-pager-sm-padding-y, + item-group-spacing: $kendo-pager-sm-item-group-spacing, + item-min-width: $kendo-pager-sm-item-min-width, + pager-dropdown-width: $kendo-pager-sm-dropdown-width + ), + md: ( + padding-x: $kendo-pager-md-padding-x, + padding-y: $kendo-pager-md-padding-y, + item-group-spacing: $kendo-pager-md-item-group-spacing, + item-min-width: $kendo-pager-md-item-min-width, + pager-dropdown-width: $kendo-pager-md-dropdown-width + ), + lg: ( + padding-x: $kendo-pager-lg-padding-x, + padding-y: $kendo-pager-lg-padding-y, + item-group-spacing: $kendo-pager-lg-item-group-spacing, + item-min-width: $kendo-pager-lg-item-min-width, + pager-dropdown-width: $kendo-pager-lg-dropdown-width + ) +)(sm: (padding-x: 4px, padding-y: 4px, item-group-spacing: 12px, item-min-width: calc(1.4285714286em + 4px + 2px), pager-dropdown-width: 5em), md: (padding-x: 8px, padding-y: 8px, item-group-spacing: 14px, item-min-width: calc(1.4285714286em + 8px + 2px), pager-dropdown-width: 5em), lg: (padding-x: 10px, padding-y: 10px, item-group-spacing: 16px, item-min-width: calc(1.5em + 16px + 2px), pager-dropdown-width: 5em))
Description
The sizes map of the Pager.
+
+ +### Pdf-viewer + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - + - - + + - - - - - + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-pdf-viewer-border-widthNumber1px1px
Description
The border width of the PDFViewer.
+
$kendo-pdf-viewer-font-familyString$kendo-font-familyinherit
Description
The font family of the PDFViewer.
+
$kendo-pdf-viewer-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the PDFViewer.
+
$kendo-pdf-viewer-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the PDFViewer.
+
$kendo-pdf-viewer-bgColor$kendo-component-bg#ffffff
Description
The background color of the PDFViewer.
+
$kendo-pdf-viewer-textColor$kendo-component-text#424242
Description
The text color of the PDFViewer.
+
$kendo-pdf-viewer-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the PDFViewer.
+
$kendo-pdf-viewer-toolbar-bgNullnullnull
Description
The background color of the PDFViewer Toolbar.
+
$kendo-pdf-viewer-toolbar-textNullnullnull
Description
The text color of the PDFViewer Toolbar.
+
$kendo-pdf-viewer-toolbar-borderNullnullnull
Description
The border color of the PDFViewer Toolbar.
+
$kendo-pdf-viewer-toolbar-gradientNullnullnull
Description
The gradient of the PDFViewer Toolbar.
+
$kendo-pdf-viewer-canvas-bgColor$kendo-app-bg#fafafa
Description
The background color of the PDFViewer canvas.
+
$kendo-pdf-viewer-canvas-textNullnullnull
Description
The text color of the PDFViewer canvas.
+
$kendo-pdf-viewer-canvas-borderNullnullnull
Description
The border color of the PDFViewer canvas.
+
$kendo-pdf-viewer-page-spacingNumber30px30px
Description
The spacing of the PDFViewer page.
+
$kendo-pdf-viewer-page-bgColorwhitewhite
Description
The background color of the PDFViewer page.
+
$kendo-pdf-viewer-page-textColor$kendo-component-text#424242
Description
The text color of the PDFViewer page.
+
$kendo-pdf-viewer-page-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the PDFViewer page.
+
$kendo-pdf-viewer-page-shadowStringk-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the PDFViewer page.
+
$kendo-pdf-viewer-search-panel-padding-xNumber$kendo-toolbar-md-padding-x8px
Description
The horizontal padding of the PDFViewer search panel.
+
$kendo-pdf-viewer-search-panel-padding-yCalculationcalc( #{$kendo-toolbar-md-padding-x} * 2 )calc(8px * 2)
Description
The vertical padding of the PDFViewer search panel.
+
$kendo-pdf-viewer-search-panel-spacingNumber$kendo-toolbar-md-spacing8px
Description
The spacing of the PDFViewer search panel.
+
$kendo-pdf-viewer-search-panel-border-widthNumber1px1px
Description
The border width of the PDFViewer search panel.
+
$kendo-pdf-viewer-search-panel-border-radiusNumber00
Description
The border radius of the PDFViewer search panel.
+
$kendo-pdf-viewer-search-panel-bgColor$kendo-component-bg#ffffff
Description
The background color of the PDFViewer search panel.
+
$kendo-pdf-viewer-search-panel-textColor$kendo-component-text#424242
Description
The text color of the PDFViewer search panel.
+
$kendo-pdf-viewer-search-panel-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the PDFViewer search panel.
+
$kendo-pdf-viewer-search-panel-shadowString$kendo-window-shadowvar(--kendo-elevation-8, 0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the PDFViewer search panel.
+
$kendo-pdf-viewer-search-panel-matches-spacingNumber$kendo-padding-sm-x4px
Description
The spacing of the matches container in the PDFViewer search panel.
+
$kendo-pdf-viewer-selection-line-heightNumber$kendo-line-height-sm1.25
Description
The line height of the PDFViewer selection.
+
$kendo-pdf-viewer-search-highlight-bg Color$kendo-component-bg#ffffff$kendo-body-text#424242
Description
The background color of the ListView.
+
Description
The background color of the PDFViewer highlight.
$kendo-listview-border$kendo-pdf-viewer-search-highlight-mark-bg Color$kendo-component-borderrgba(0, 0, 0, 0.08)yellowyellow
Description
The border color of the ListView.
+
Description
The background color of the PDFViewer highlight mark.
$kendo-listview-item-padding-xNumberk-map-get( $kendo-spacing, 1 )4px$kendo-pdf-viewer-icon-textColor$kendo-dropzone-icon-text#7e7e7e
Description
The horizontal padding of the ListView items.
+
Description
The text color of the PDFViewer icon.
$kendo-listview-item-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
+ +### Picker + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - + - - + + + + + + + + + + - + - - + - + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-picker-bgColor$kendo-button-bg#f5f5f5
Description
The vertical padding of the ListView items.
+
Description
The background color of the Picker components.
$kendo-listview-item-selected-textNullnullnull$kendo-picker-textColor$kendo-button-text#424242
Description
The text color of the selected ListView items.
+
Description
The text color of the Picker components.
$kendo-listview-item-selected-bg$kendo-picker-border Colorif($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25))rgba(255, 99, 88, 0.25)$kendo-button-borderrgba(0, 0, 0, 0.08)
Description
The background color of the selected ListView items.
+
Description
The border color of the Picker components.
$kendo-listview-item-selected-borderNullnullnull$kendo-picker-gradientList$kendo-button-gradientrgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)
Description
The border color of the selected ListView items.
+
Description
The gradient of the Picker components.
$kendo-listview-item-focus-text$kendo-picker-shadow Nullnull$kendo-button-shadow null
Description
The text color of the focused ListView items.
+
Description
The shadow of the Picker components.
$kendo-listview-item-focus-bg$kendo-picker-hover-bgColor$kendo-button-hover-bg#ebebeb
Description
The background color of the hovered Picker components.
+
$kendo-picker-hover-text Nullnull$kendo-button-hover-text null
Description
The background color of the focused ListView items.
+
Description
The text color of the hovered Picker components.
$kendo-listview-item-focus-border$kendo-picker-hover-border Nullnull$kendo-button-hover-border null
Description
The border color of the focused ListView items.
+
Description
The border color of the hovered Picker components.
$kendo-listview-item-focus-shadowListinset 0 0 0 2px rgba(0, 0, 0, .13)inset 0 0 0 2px rgba(0, 0, 0, 0.13)$kendo-picker-hover-gradientNull$kendo-button-hover-gradientnull
Description
The box shadow of the focused ListView items.
+
Description
The gradient of the hovered Picker components.
- -### Loader - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-loader-segment-border-radiusNumber50%50%
$kendo-picker-hover-shadowNull$kendo-button-hover-shadownull
Description
The border radius of the Loader segment.
+
Description
The shadow of the hovered Picker components.
$kendo-loader-sm-segment-sizeNumberk-map-get( $kendo-spacing, 1 )4px$kendo-picker-focus-bgNull$kendo-button-focus-bgnull
Description
The size of the small Loader segment.
+
Description
The background color of the focused Picker components.
$kendo-loader-md-segment-sizeNumberk-map-get( $kendo-spacing, 2 )8px$kendo-picker-focus-textNull$kendo-button-focus-textnull
Description
The size of the medium Loader segment.
+
Description
The text color of the focused Picker components.
$kendo-loader-lg-segment-sizeNumberk-map-get( $kendo-spacing, 4 )16px$kendo-picker-focus-borderNull$kendo-button-focus-bordernull
Description
The size of the large Loader segment.
+
Description
The border color of the focused Picker components.
$kendo-loader-sm-paddingNumberk-math-div( $kendo-loader-sm-segment-size, 2 )2px$kendo-picker-focus-gradientNull$kendo-button-focus-gradientnull
Description
The padding of the small Loader.
+
Description
The gradient of the focused Picker components.
$kendo-loader-md-paddingNumberk-math-div( $kendo-loader-md-segment-size, 2 )4px$kendo-picker-focus-shadowList$kendo-button-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The padding of the medium Loader.
+
Description
The shadow of the focused Picker components.
$kendo-loader-lg-paddingNumberk-math-div( $kendo-loader-lg-segment-size, 2 )8px$kendo-picker-disabled-bgNullnullnull
Description
The padding of the large Loader.
+
Description
The background color of the disabled Picker components.
$kendo-loader-sm-spinner-3-widthNumber( $kendo-loader-sm-segment-size * 4 )16px$kendo-picker-disabled-textNullnullnull
Description
The width of the small spinner-3 Loader.
+
Description
The text color of the disabled Picker components.
$kendo-loader-md-spinner-3-widthNumber( $kendo-loader-md-segment-size * 4 )32px$kendo-picker-disabled-borderNullnullnull
Description
The width of the medium spinner-3 Loader.
+
Description
The border color of the disabled Picker components.
$kendo-loader-lg-spinner-3-widthNumber( $kendo-loader-lg-segment-size * 4 )64px$kendo-picker-disabled-gradientNullnullnull
Description
The width of the large spinner-3 Loader.
+
Description
The gradient of the disabled Picker components.
$kendo-loader-sm-spinner-3-heightNumber( $kendo-loader-sm-spinner-3-width * $equilateral-height )13.8564064608px$kendo-picker-disabled-shadowNullnullnull
Description
The height of the small spinner-3 Loader.
+
Description
The shadow of the disabled Picker components.
$kendo-loader-md-spinner-3-heightNumber( $kendo-loader-md-spinner-3-width * $equilateral-height )27.7128129216px$kendo-picker-outline-bgNullnullnull
Description
The height of the medium spinner-3 Loader.
+
Description
The background color of the outline Picker components.
$kendo-loader-lg-spinner-3-heightNumber( $kendo-loader-lg-spinner-3-width * $equilateral-height )55.4256258432px$kendo-picker-outline-textColor$kendo-button-text#424242
Description
The height of the large spinner-3 Loader.
+
Description
The text color of the outline Picker components.
$kendo-loader-sm-spinner-4-widthNumber$kendo-loader-sm-segment-size * 416px$kendo-picker-outline-borderColorif($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $kendo-picker-outline-text, .5))rgba(66, 66, 66, 0.5)
Description
The width of the small spinner-4 Loader.
+
Description
The border color of the outline Picker components.
$kendo-loader-md-spinner-4-widthNumber$kendo-loader-md-segment-size * 432px$kendo-picker-outline-hover-bgColor$kendo-picker-outline-text#424242
Description
The width of the medium spinner-4 Loader.
+
Description
The background color of the outline hovered Picker components.
$kendo-loader-lg-spinner-4-widthNumber$kendo-loader-lg-segment-size * 464px$kendo-picker-outline-hover-textColorif($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg ))white
Description
The width of the large spinner-4 Loader.
+
Description
The text color of the outline hovered Picker components.
$kendo-loader-sm-spinner-4-heightNumber$kendo-loader-sm-spinner-4-width16px$kendo-picker-outline-hover-borderColor$kendo-picker-outline-hover-bg#424242
Description
The height of the small spinner-4 Loader.
+
Description
The border color of the outline hovered Picker components.
$kendo-loader-md-spinner-4-heightNumber$kendo-loader-md-spinner-4-width32px$kendo-picker-outline-focus-bgNullnullnull
Description
The height of the medium spinner-4 Loader.
+
Description
The background color of the outline focused Picker components.
$kendo-loader-lg-spinner-4-heightNumber$kendo-loader-lg-spinner-4-width64px$kendo-picker-outline-focus-textNullnullnull
Description
The height of the large spinner-4 Loader.
+
Description
The text color of the outline focused Picker components.
$kendo-loader-secondary-bgColor#656565#656565$kendo-picker-outline-focus-borderNullnullnull
Description
The color of the Loader based on the secondary theme color.
+
Description
The border color of the outline focused Picker components.
$kendo-loader-container-panel-border-widthNumber1px1px$kendo-picker-outline-focus-shadowList$kendo-picker-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The border width of the container panel.
+
Description
The shadow of the outline focused Picker components.
$kendo-loader-container-panel-border-styleStringsolidsolid$kendo-picker-outline-hover-focus-bgNullnullnull
Description
The border style of the container panel.
+
Description
The background color of the outline hovered and focused Picker components.
$kendo-loader-container-panel-border-colorColor$kendo-component-borderrgba(0, 0, 0, 0.08)$kendo-picker-outline-hover-focus-textNullnullnull
Description
The border color of the container panel.
+
Description
The text color of the outline hovered and focused Picker components.
$kendo-loader-container-panel-border-radiusNumber$kendo-border-radius-md4px$kendo-picker-outline-hover-focus-borderNullnullnull
Description
The border radius of the container panel.
+
Description
The border color of the outline hovered and focused Picker components.
$kendo-loader-container-panel-bgColor$kendo-color-white#ffffff$kendo-picker-flat-bgNullnullnull
Description
The background color of the container panel.
+
Description
The background color of the flat Picker components.
$kendo-loader-sm-container-paddingNumberk-map-get( $kendo-spacing, 4 )16px$kendo-picker-flat-textColor$kendo-button-text#424242
Description
The padding of the small Loader container.
+
Description
The text color of the flat Picker components.
$kendo-loader-md-container-paddingNumberk-map-get( $kendo-spacing, 5 )20px$kendo-picker-flat-borderColor$kendo-button-borderrgba(0, 0, 0, 0.08)
Description
The padding of the medium Loader container.
+
Description
The border color of the flat Picker components.
$kendo-loader-lg-container-paddingNumberk-map-get( $kendo-spacing, 6 )24px$kendo-picker-flat-hover-bgColorif($kendo-enable-color-system, rgba( k-color( on-base, true ), .04 ), rgba( $kendo-button-text, .04 ))rgba(66, 66, 66, 0.04)
Description
The padding of the large Loader container.
+
Description
The background color of the flat hovered Picker components.
$kendo-loader-sm-container-gapNumberk-map-get( $kendo-spacing, 1 )4px$kendo-picker-flat-hover-textNullnullnull
Description
The gap of the small Loader container.
+
Description
The text color of the flat hovered Picker components.
$kendo-loader-md-container-gapNumberk-map-get( $kendo-spacing, 2 )8px$kendo-picker-flat-hover-borderColorif($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 ))rgba(0, 0, 0, 0.16)
Description
The gap of the medium Loader container.
+
Description
The border color of the flat hovered Picker components.
$kendo-loader-lg-container-gapNumberk-map-get( $kendo-spacing, 3 )12px$kendo-picker-flat-focus-bgNullnullnull
Description
The gap of the large Loader container.
+
Description
The background color of the flat focused Picker components.
$kendo-loader-sm-container-font-sizeNumber$kendo-font-size-sm12px$kendo-picker-flat-focus-textNullnullnull
Description
The font size of the small Loader container.
+
Description
The text color of the flat focused Picker components.
$kendo-loader-md-container-font-sizeNumber$kendo-font-size-md14px$kendo-picker-flat-focus-borderNullnullnull
Description
The font size of the medium Loader container.
+
Description
The border color of the flat focused Picker components.
$kendo-loader-lg-container-font-sizeNumber$kendo-font-size-lg16px$kendo-picker-flat-focus-shadowList$kendo-picker-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The font size of the large Loader container.
+
Description
The shadow of the flat focused Picker components.
- -### Loading - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-loading-bgColor$kendo-component-bg#ffffff
$kendo-picker-flat-hover-focus-bgNullnullnull
Description
The background color of the Loading indicator.
+
Description
The background color of the flat hovered and focused Picker components.
$kendo-loading-textStringcurrentColorcurrentColor$kendo-picker-flat-hover-focus-textNullnullnull
Description
The text color of the Loading indicator.
+
Description
The text color of the flat hovered and focused Picker components.
$kendo-loading-opacityNumber.30.3$kendo-picker-flat-hover-focus-borderNullnullnull
Description
The opacity of the Loading indicator.
+
Description
The border color of the flat hovered and focused Picker components.
-### Menu +### Popover @@ -11035,319 +13897,269 @@ The following table lists the available variables for customizing the Default th - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - - - - - - - - - - + + - - + - - - - - - - - - - - + + - - + - - - - - - - - - - - + + - - - - - + + + + - - - - - + + + + - - + - + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
$kendo-menu-popup-padding-xNullnullnull$kendo-popover-border-widthNumber$kendo-card-border-width1px
Description
Horizontal padding of the menu popup.
+
Description
The width of the border around the Popover.
$kendo-menu-popup-padding-yNullnullnull$kendo-popover-border-styleStringsolidsolid
Description
Vertical padding of the menu popup.
+
Description
The style of the border around the Popover.
$kendo-menu-popup-border-width$kendo-popover-border-radius Number$kendo-popup-border-width1px$kendo-card-border-radius6px
Description
Width of the border around the menu popup.
+
Description
The radius of the border around the Popover.
$kendo-menu-popup-font-sizeNumber$kendo-font-size-md14px$kendo-popover-font-familyString$kendo-card-font-familyinherit
Description
Font sizes of the menu popup.
+
Description
The font family of the Popover.
$kendo-menu-popup-line-height$kendo-popover-font-size Number$kendo-line-height-md1.4285714286$kendo-card-font-size14px
Description
Line heights used along with $kendo-font-size.
+
Description
The font size of the Popover.
$kendo-menu-popup-bgColor$kendo-popup-bg#ffffff$kendo-popover-line-heightNumber$kendo-card-line-height1.4285714286
Description
The background of the menu popup.
+
Description
The line height of the Popover.
$kendo-menu-popup-text$kendo-popover-text Color$kendo-popup-text$kendo-component-text #424242
Description
The text color of the menu popup.
+
Description
The text color of the Popover.
$kendo-menu-popup-border$kendo-popover-bg Color$kendo-popup-borderrgba(0, 0, 0, 0.08)$kendo-component-bg#ffffff
Description
The border color of the menu popup.
+
Description
The background color of the Popover.
$kendo-menu-popup-gradientNullnullnull$kendo-popover-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The background gradient of the menu popup.
+
Description
The border color of the Popover.
$kendo-menu-popup-item-padding-xNumberk-map-get( $kendo-spacing, 2 )8px$kendo-popover-shadowString$kendo-popup-shadowvar(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
Horizontal padding of the menu item in popup.
+
Description
The box shadow of the Popover.
$kendo-menu-popup-item-padding-y$kendo-popover-header-padding-x Numberk-map-get( $kendo-spacing, 1 )4px
Description
Vertical padding of the menu item in popup.
-
$kendo-menu-popup-item-padding-endCalculationcalc( #{$kendo-menu-popup-item-padding-x * 2} + #{$kendo-icon-size} )calc(16px + 16px)$kendo-card-header-padding-x16px
Description
The end padding of the menu item in popup.
+
Description
The horizontal padding of the Popover header.
$kendo-menu-popup-sm-item-icon-margin-start$kendo-popover-header-padding-y Number$kendo-menu-popup-sm-item-padding-x8px
Description
The start margin of the menu item expand icon.
-
$kendo-menu-popup-sm-item-icon-margin-endCalculationcalc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )calc(-1 * (calc(16px + 16px) - 4px))$kendo-card-header-padding-y12px
Description
The end margin of the menu item expand icon.
+
Description
The vertical padding of the Popover header.
$kendo-menu-popup-item-spacing$kendo-popover-header-border-width Number0px0px
Description
The spacing between the menu items in popup.
-
$kendo-menu-popup-item-bgNullnullnull$kendo-card-header-border-width1px
Description
The background of the menu item in popup.
+
Description
The border width of the Popover header.
$kendo-menu-popup-item-textNullnullnull$kendo-popover-header-border-styleString$kendo-popover-border-stylesolid
Description
The text color of the menu item in popup.
+
Description
The border style of the Popover header.
$kendo-menu-popup-item-borderNullnullnull$kendo-popover-header-textColor$kendo-card-header-text#424242
Description
The border color of the menu item in popup.
+
Description
The text color of the Popover header.
$kendo-menu-popup-item-gradient$kendo-popover-header-bg Nullnull$kendo-card-header-bg null
Description
The background gradient of the menu item in popup.
+
Description
The background color of the Popover header.
$kendo-menu-popup-item-hover-bg$kendo-popover-header-border Color$kendo-list-item-hover-bg#f0f0f0$kendo-card-header-borderrgba(0, 0, 0, 0.08)
Description
The background of hovered menu item in popup.
+
Description
The border color of the Popover header.
$kendo-menu-popup-item-hover-textColor$kendo-list-item-hover-text#424242$kendo-popover-body-padding-xNumber$kendo-card-body-padding-x16px
Description
The text color of hovered menu item in popup.
+
Description
The horizontal padding of the Popover body.
$kendo-menu-popup-item-hover-borderNullnullnull$kendo-popover-body-padding-yNumber$kendo-card-body-padding-y16px
Description
The border color of hovered menu item in popup.
+
Description
The vertical padding of the Popover body.
$kendo-menu-popup-item-hover-gradientNullnullnull$kendo-popover-actions-border-widthNumber$kendo-popover-border-width1px
Description
The background gradient of hovered menu item in popup.
+
Description
The border width of the Popover actions.
$kendo-menu-popup-item-expanded-bgColor$kendo-list-item-selected-bg#ff6358$kendo-popover-callout-widthNumber$kendo-card-callout-width20px
Description
The background of expanded menu item in popup.
+
Description
The width of the Popover callout.
$kendo-menu-popup-item-expanded-textColor$kendo-list-item-selected-textwhite$kendo-popover-callout-heightNumber$kendo-card-callout-height20px
Description
The text color of expanded menu item in popup.
+
Description
The height of the Popover callout.
$kendo-menu-popup-item-expanded-borderNullnullnull$kendo-popover-callout-border-widthNumber$kendo-popover-border-width1px
Description
The border color of expanded menu item in popup.
+
Description
The border width of the Popover callout.
$kendo-menu-popup-item-expanded-gradientNullnullnull$kendo-popover-callout-border-styleString$kendo-popover-border-stylesolid
Description
The background gradient of expanded menu item in popup.
+
Description
The border style of the Popover callout.
$kendo-menu-popup-item-focus-shadowList$kendo-menu-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)$kendo-popover-callout-bgColor$kendo-popover-bg#ffffff
Description
The base shadow of focused menu item in popup.
+
Description
The background color of the Popover callout.
- -### Menu-button - - - - - - - - - - - - - - - - - - - - - + + + + + -
NameTypeDefault valueComputed value
$kendo-menu-button-arrow-padding-xNumber$kendo-button-padding-y4px
$kendo-popover-callout-borderColor$kendo-popover-borderrgba(0, 0, 0, 0.08)
Description
The horizontal padding of the button arrow in the Menu Button..
+
Description
The border color of the Popover callout.
-### Notification +### Popup @@ -11365,159 +14177,129 @@ The following table lists the available variables for customizing the Default th - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + - - + - - + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - -
$kendo-notification-group-gapNumberk-map-get( $kendo-spacing, 2 )8px$kendo-popup-padding-xNullnullnull
Description
The row-gap between the elements in the Notification group.
+
Description
Horizontal padding of the popup.
$kendo-notification-padding-xNumber8px8px$kendo-popup-padding-yNullnullnull
Description
The horizontal padding of the Notification.
+
Description
Vertical padding of the popup.
$kendo-notification-padding-y$kendo-popup-border-width Number4px4px1px1px
Description
The vertical padding of the Notification.
+
Description
Width of the border around the popup.
$kendo-notification-border-widthNumber1px1px$kendo-popup-border-radiusNullnullnull
Description
The width of the border around the Notification.
+
Description
Border radius of the popup.
$kendo-notification-border-radius$kendo-popup-font-size Number$kendo-border-radius-md4px$kendo-font-size-md14px
Description
The border radius of the Notification.
+
Description
Font size of the popup.
$kendo-notification-font-familyString$kendo-font-familyinherit$kendo-popup-line-heightNumber$kendo-line-height-md1.4285714286
Description
The font family of the Notification.
+
Description
Line height of the popup.
$kendo-notification-font-size$kendo-popup-content-padding-x Number$kendo-font-size-sm12pxk-map-get( $kendo-spacing, 2 )8px
Description
The font size of the Notification.
+
Description
Horizontal padding of the popup content.
$kendo-notification-line-height$kendo-popup-content-padding-y Number$kendo-line-height-md1.4285714286k-map-get( $kendo-spacing, 2 )8px
Description
The line height of the Notification.
+
Description
Vertical padding of the popup content.
$kendo-notification-bg$kendo-popup-bg Color $kendo-component-bg #ffffff
Description
The background color of the Notification.
+
Description
Background color of the popup.
$kendo-notification-text$kendo-popup-text Color $kendo-component-text #424242
Description
The text color of the Notification.
+
Description
Text color of the popup.
$kendo-notification-border$kendo-popup-border Color $kendo-component-border rgba(0, 0, 0, 0.08)
Description
The border color of the Notification.
+
Description
Border color of the popup.
$kendo-notification-shadow$kendo-popup-shadow String$kendo-popup-shadowk-elevation(4) var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The box shadow of the Notification.
-
$kendo-notification-icon-spacingNumber$kendo-icon-spacing4px
Description
The horizontal spacing of the Notification icon.
-
$kendo-notification-theme-colorsMap$kendo-theme-colors("primary": #ff6358, "secondary": #666666, "tertiary": #03a9f4, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #ebebeb, "inverse": #424242)
Description
The theme colors map for the Notification.
-
$kendo-notification-themeMapnotification-theme( $kendo-notification-theme-colors )("inverse": (color: white, background-color: #424242, border: #424242), "light": (color: black, background-color: #ebebeb, border: #ebebeb), "dark": (color: white, background-color: #424242, border: #424242), "error": (color: white, background-color: #f31700, border: #f31700), "warning": (color: black, background-color: #ffc000, border: #ffc000), "success": (color: white, background-color: #37b400, border: #37b400), "info": (color: white, background-color: #0058e9, border: #0058e9), "tertiary": (color: white, background-color: #03a9f4, border: #03a9f4), "secondary": (color: white, background-color: #666666, border: #666666), "primary": (color: white, background-color: #ff6358, border: #ff6358))
Description
The generated theme colors map for the Notification.
+
Description
Box shadow of the popup.
-### Pager +### Progressbar @@ -11535,471 +14317,449 @@ The following table lists the available variables for customizing the Default th - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - + - - + - + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - + +
$kendo-pager-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the Pager.
-
$kendo-pager-sm-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the small Pager.
-
$kendo-pager-md-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the medium Pager.
-
$kendo-pager-lg-padding-x$kendo-progressbar-height Numberk-map-get( $kendo-spacing, 2.5 )10px22px22px
Description
The horizontal padding of the large Pager.
+
Description
The height of the ProgressBar.
$kendo-pager-padding-y$kendo-progressbar-horizontal-width Number$kendo-pager-padding-x8px100%100%
Description
The vertical padding of the Pager.
+
Description
The horizontal width of the ProgressBar.
$kendo-pager-sm-padding-yNumber$kendo-pager-sm-padding-x4px$kendo-progressbar-animation-timingList1s linear infinite1s linear infinite
Description
The vertical padding of the small Pager.
+
Description
The animation timing of the ProgressBar.
$kendo-pager-md-padding-y$kendo-progressbar-border-width Number$kendo-pager-md-padding-x8px0px0px
Description
The vertical padding of the medium Pager.
+
Description
The width of the border around the ProgressBar.
$kendo-pager-lg-padding-yNumber$kendo-pager-lg-padding-x10px
$kendo-progressbar-font-familyString$kendo-font-familyinherit
Description
The vertical padding of the large Pager.
+
Description
The font family of the ProgressBar.
$kendo-pager-sm-item-min-widthCalculation$kendo-button-sm-calc-sizecalc(1.4285714286em + 4px + 2px)$kendo-progressbar-font-sizeNumber$kendo-font-size-sm12px
Description
The minimum width of the items in the small Pager.
+
Description
The font size of the ProgressBar.
$kendo-pager-md-item-min-widthCalculation$kendo-button-md-calc-sizecalc(1.4285714286em + 8px + 2px)$kendo-progressbar-line-heightNumber11
Description
The minimum width of the items in the medium Pagers.
+
Description
The line height of the ProgressBar.
$kendo-pager-lg-item-min-widthCalculation$kendo-button-lg-calc-sizecalc(1.5em + 16px + 2px)$kendo-progressbar-bgColorif($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-component-bg, 1 ))#ebebeb
Description
The minimum width of the items in the large Pagers.
+
Description
The background color of the ProgressBar.
$kendo-pager-sm-item-group-spacingNumberk-map-get( $kendo-spacing, 3 )12px$kendo-progressbar-textColor$kendo-component-text#424242
Description
The margin between the item groups in the small Pager.
+
Description
The text color of the ProgressBar.
$kendo-pager-md-item-group-spacingNumberk-map-get( $kendo-spacing, 3.5 )14px$kendo-progressbar-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The margin between the item groups in the medium Pager.
+
Description
The border color of the ProgressBar.
$kendo-pager-lg-item-group-spacingNumberk-map-get( $kendo-spacing, 4 )16px$kendo-progressbar-gradientNullnullnull
Description
The margin between the item groups in the large Pager.
+
Description
The background gradient of the ProgressBar.
$kendo-pager-border-widthNumber1px1px$kendo-progressbar-value-bgColor$kendo-color-primary#ff6358
Description
The border width of the Pager.
+
Description
The progress background color of the ProgressBar.
$kendo-pager-font-familyString$kendo-font-familyinherit$kendo-progressbar-value-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-progressbar-value-bg ))white
Description
The font family of the Pager.
+
Description
The progress text color of the ProgressBar.
$kendo-pager-font-sizeNumber$kendo-font-size-md14px$kendo-progressbar-value-borderColorif($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-progressbar-value-bg ))#eb5b51
Description
The font size of the Pager.
+
Description
The progress border color of the ProgressBar.
$kendo-pager-line-heightNumber$kendo-line-height-md1.4285714286$kendo-progressbar-value-gradientNullnullnull
Description
The line height of the Pager.
+
Description
The progress background gradient of the ProgressBar.
$kendo-pager-bg$kendo-progressbar-indeterminate-bg Color$kendo-component-header-bg#fafafa$kendo-progressbar-bg#ebebeb
Description
The background color of the Pager.
+
Description
The background color of the indeterminate ProgressBar.
$kendo-pager-text$kendo-progressbar-indeterminate-text Color$kendo-component-header-text$kendo-progressbar-text #424242
Description
The text color of the Pager.
+
Description
The text color of the indeterminate ProgressBar.
$kendo-pager-border$kendo-progressbar-indeterminate-border Color$kendo-component-border$kendo-progressbar-border rgba(0, 0, 0, 0.08)
Description
The border color of the Pager.
+
Description
The border color of the indeterminate ProgressBar.
$kendo-pager-focus-bg$kendo-progressbar-indeterminate-gradient Null null null
Description
The background color of the focused Pager.
+
Description
The background gradient of the indeterminate ProgressBar.
$kendo-pager-focus-shadowList$kendo-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.13)$kendo-progressbar-chunk-borderColor$kendo-body-bg#ffffff
Description
The box shadow of the focused Pager.
+
Description
The border color of the chunk ProgressBar.
$kendo-pager-item-border-widthNumber0px0px$kendo-circular-progressbar-arc-strokeColor$kendo-color-primary#ff6358
Description
The border width of the Pager items.
+
Description
The arc stroke color of the circular ProgressBar.
$kendo-pager-item-border-radiusNullnullnull$kendo-circular-progressbar-scale-strokeColor$kendo-progressbar-bg#ebebeb
Description
The border radius of the Pager items.
+
Description
The scale stroke background color of the circular ProgressBar.
$kendo-pager-item-spacingNullnullnull
+ +### Prompt + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + + + + + + + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-prompt-textColor$kendo-component-text#424242
Description
The spacing around the Pager items.
+
Description
The text color of the Prompt.
$kendo-pager-item-bgNullnullnull$kendo-prompt-bgColor$kendo-component-bg#ffffff
Description
The background color of the Pager items.
+
Description
The background color of the Prompt.
$kendo-pager-item-textNullnullnull$kendo-prompt-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The text color of the Pager items.
+
Description
The border color of the Prompt.
$kendo-pager-item-borderNullnullnull$kendo-prompt-header-textColor$kendo-component-header-text#424242
Description
The border color of the Pager items.
+
Description
The text color of the Prompt header.
$kendo-pager-item-hover-bg$kendo-prompt-header-bg Color$kendo-list-item-hover-bg#f0f0f0$kendo-component-bg#ffffff
Description
The background color of the hovered Pager items.
+
Description
The background color of the Prompt header.
$kendo-pager-item-hover-text$kendo-prompt-header-border Color$kendo-list-item-hover-text#424242$kendo-component-header-borderrgba(0, 0, 0, 0.08)
Description
The text color of the hovered Pager items.
+
Description
The border color of the Prompt header.
$kendo-pager-item-hover-borderNullnullnull$kendo-prompt-content-padding-yNumberk-map-get( $kendo-spacing, 4 )16px
Description
The vertical padding of the Prompt content.
+
$kendo-prompt-content-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The border color of the hovered Pager items.
+
Description
The horizontal padding of the Prompt content.
$kendo-pager-item-selected-bgColor$kendo-list-item-selected-bg#ff6358$kendo-prompt-content-spacingNumberk-map-get( $kendo-spacing, 4 )16px
Description
The background color of the selected Pager items.
+
Description
The spacing between the items of the Prompt content.
$kendo-pager-item-selected-text$kendo-prompt-content-text Color$kendo-list-item-selected-textwhite$kendo-component-header-text#424242
Description
The text color of the selected Pager items.
+
Description
The text color of the Prompt content.
$kendo-pager-item-selected-borderNullnullnull$kendo-prompt-content-bgColor$kendo-component-header-bg#fafafa
Description
The border color of the selected Pager items.
+
Description
The background color of the Prompt content.
$kendo-pager-item-focus-opacityNullnullnull$kendo-prompt-content-borderColor$kendo-component-header-borderrgba(0, 0, 0, 0.08)
Description
The opacity of the focused Pager items.
+
Description
The text border of the Prompt content.
$kendo-pager-item-focus-bgColortransparenttransparent$kendo-prompt-expander-spacingNumberk-map-get( $kendo-spacing, 2 )8px
Description
The background color of the focused Pager items.
+
Description
The spacing between the items of the Prompt content expander.
$kendo-pager-item-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)$kendo-prompt-suggestion-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The box shadow of the focused Pager items.
+
Description
The vertical padding of the Prompt suggestion container.
$kendo-pager-number-border-radiusNullnullnull$kendo-prompt-suggestion-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The border radius of the Pager numbers.
+
Description
The horizontal padding of the Prompt suggestion container.
$kendo-pager-input-width$kendo-prompt-suggestion-border-radius Number5em5em$kendo-border-radius-md4px
Description
The width of the Inputs in the Pager.
+
Description
The border radius of the Prompt suggestion container.
$kendo-pager-sm-dropdown-widthNumber5em5em$kendo-prompt-suggestion-textColor$kendo-component-text#424242
Description
The width of the DropDowns in the small Pager.
+
Description
The text color of the Prompt suggestion container.
$kendo-pager-md-dropdown-widthNumber5em5em$kendo-prompt-suggestion-bgColor$kendo-body-bg#ffffff
Description
The width of the DropDowns in the medium Pager.
+
Description
The background color of the Prompt suggestion container.
$kendo-pager-lg-dropdown-widthNumber5em5em$kendo-prompt-suggestion-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The width of the DropDowns in the large Pager.
+
Description
The border color of the Prompt suggestion container.
$kendo-pager-sizesMap( - sm: ( - padding-x: $kendo-pager-sm-padding-x, - padding-y: $kendo-pager-sm-padding-y, - item-group-spacing: $kendo-pager-sm-item-group-spacing, - item-min-width: $kendo-pager-sm-item-min-width, - pager-dropdown-width: $kendo-pager-sm-dropdown-width - ), - md: ( - padding-x: $kendo-pager-md-padding-x, - padding-y: $kendo-pager-md-padding-y, - item-group-spacing: $kendo-pager-md-item-group-spacing, - item-min-width: $kendo-pager-md-item-min-width, - pager-dropdown-width: $kendo-pager-md-dropdown-width - ), - lg: ( - padding-x: $kendo-pager-lg-padding-x, - padding-y: $kendo-pager-lg-padding-y, - item-group-spacing: $kendo-pager-lg-item-group-spacing, - item-min-width: $kendo-pager-lg-item-min-width, - pager-dropdown-width: $kendo-pager-lg-dropdown-width - ) -)(sm: (padding-x: 4px, padding-y: 4px, item-group-spacing: 12px, item-min-width: calc(1.4285714286em + 4px + 2px), pager-dropdown-width: 5em), md: (padding-x: 8px, padding-y: 8px, item-group-spacing: 14px, item-min-width: calc(1.4285714286em + 8px + 2px), pager-dropdown-width: 5em), lg: (padding-x: 10px, padding-y: 10px, item-group-spacing: 16px, item-min-width: calc(1.5em + 16px + 2px), pager-dropdown-width: 5em))$kendo-prompt-suggestion-shadowStringk-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The sizes map of the Pager.
+
Description
The elevation of the Prompt suggestion container.
-### Pdf-viewer +### Radio @@ -12017,1099 +14777,1125 @@ The following table lists the available variables for customizing the Default th - + - - - - - - - - - - - + + - - + - - + + - - + - - - - - - - - - - - - - - - - - - - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
$kendo-pdf-viewer-border-width$kendo-radio-radius Number1px1px
Description
The border width of the PDFViewer.
-
$kendo-pdf-viewer-font-familyString$kendo-font-familyinherit50%50%
Description
The font family of the PDFViewer.
+
Description
The border radius of the RadioButton.
$kendo-pdf-viewer-font-size$kendo-radio-border-width Number$kendo-font-size-md14px1px1px
Description
The font size of the PDFViewer.
+
Description
The border width of the RadioButton.
$kendo-pdf-viewer-line-height$kendo-radio-sm-size Number$kendo-line-height-md1.4285714286
Description
The line height of the PDFViewer.
-
$kendo-pdf-viewer-bgColor$kendo-component-bg#ffffff
Description
The background color of the PDFViewer.
-
$kendo-pdf-viewer-textColor$kendo-component-text#424242k-map-get( $kendo-spacing, 3 )12px
Description
The text color of the PDFViewer.
+
Description
The size of a small RadioButton.
$kendo-pdf-viewer-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)$kendo-radio-md-sizeNumberk-map-get( $kendo-spacing, 4 )16px
Description
The border color of the PDFViewer.
+
Description
The size of a medium RadioButton.
$kendo-pdf-viewer-toolbar-bgNullnullnull$kendo-radio-lg-sizeNumberk-map-get( $kendo-spacing, 5 )20px
Description
The background color of the PDFViewer Toolbar.
+
Description
The size of a large RadioButton.
$kendo-pdf-viewer-toolbar-textNullnullnull$kendo-radio-sm-glyph-sizeNumberk-map-get( $kendo-spacing, 2.5 )10px
Description
The text color of the PDFViewer Toolbar.
+
Description
The glyph size of a small RadioButton.
$kendo-pdf-viewer-toolbar-borderNullnullnull$kendo-radio-md-glyph-sizeNumberk-map-get( $kendo-spacing, 3.5 )14px
Description
The border color of the PDFViewer Toolbar.
+
Description
The glyph size of a medium RadioButton.
$kendo-pdf-viewer-toolbar-gradientNullnullnull$kendo-radio-lg-glyph-sizeNumberk-map-get( $kendo-spacing, 4.5 )18px
Description
The gradient of the PDFViewer Toolbar.
+
Description
The glyph size of a large RadioButton.
$kendo-pdf-viewer-canvas-bgColor$kendo-app-bg#fafafa$kendo-radio-sm-ripple-sizeNumber300%300%
Description
The background color of the PDFViewer canvas.
+
Description
The ripple size of a small RadioButton.
$kendo-pdf-viewer-canvas-textNullnullnull$kendo-radio-md-ripple-sizeNumber300%300%
Description
The text color of the PDFViewer canvas.
+
Description
The ripple size of a medium RadioButton.
$kendo-pdf-viewer-canvas-borderNullnullnull$kendo-radio-lg-ripple-sizeNumber300%300%
Description
The border color of the PDFViewer canvas.
+
Description
The ripple size of a large RadioButton.
$kendo-pdf-viewer-page-spacingNumber30px30px$kendo-radio-sizesMap( + sm: ( + size: $kendo-radio-sm-size, + glyph-size: $kendo-radio-sm-glyph-size, + ripple-size: $kendo-radio-sm-ripple-size + ), + md: ( + size: $kendo-radio-md-size, + glyph-size: $kendo-radio-md-glyph-size, + ripple-size: $kendo-radio-md-ripple-size + ), + lg: ( + size: $kendo-radio-lg-size, + glyph-size: $kendo-radio-lg-glyph-size, + ripple-size: $kendo-radio-lg-ripple-size + ) +)(sm: (size: 12px, glyph-size: 10px, ripple-size: 300%), md: (size: 16px, glyph-size: 14px, ripple-size: 300%), lg: (size: 20px, glyph-size: 18px, ripple-size: 300%))
Description
The spacing of the PDFViewer page.
+
Description
The map with the different RadioButton sizes.
$kendo-pdf-viewer-page-bg$kendo-radio-bg Colorwhitewhite$kendo-checkbox-bg#ffffff
Description
The background color of the PDFViewer page.
+
Description
The background color of the RadioButton.
$kendo-pdf-viewer-page-textColor$kendo-component-text#424242$kendo-radio-textNull$kendo-checkbox-textnull
Description
The text color of the PDFViewer page.
+
Description
The color of the RadioButton.
$kendo-pdf-viewer-page-border$kendo-radio-border Color$kendo-component-border$kendo-checkbox-border rgba(0, 0, 0, 0.08)
Description
The border color of the PDFViewer page.
+
Description
The border color of the RadioButton.
$kendo-pdf-viewer-page-shadowStringk-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-radio-hover-bgNull$kendo-checkbox-hover-bgnull
Description
The shadow of the PDFViewer page.
+
Description
The background color of the hovered RadioButton.
$kendo-pdf-viewer-search-panel-padding-xNumber$kendo-toolbar-md-padding-x8px$kendo-radio-hover-textNull$kendo-checkbox-hover-textnull
Description
The horizontal padding of the PDFViewer search panel.
+
Description
The color of the hovered RadioButton.
$kendo-pdf-viewer-search-panel-padding-yCalculationcalc( #{$kendo-toolbar-md-padding-x} * 2 )calc(8px * 2)$kendo-radio-hover-borderNull$kendo-checkbox-hover-bordernull
Description
The vertical padding of the PDFViewer search panel.
+
Description
The border color of the hovered RadioButton.
$kendo-pdf-viewer-search-panel-spacingNumber$kendo-toolbar-md-spacing8px$kendo-radio-checked-bgColor$kendo-checkbox-checked-bg#ff6358
Description
The spacing of the PDFViewer search panel.
+
Description
The background color of the checked RadioButton.
$kendo-pdf-viewer-search-panel-border-widthNumber1px1px$kendo-radio-checked-textColor$kendo-checkbox-checked-textwhite
Description
The border width of the PDFViewer search panel.
+
Description
The color of the checked RadioButton.
$kendo-pdf-viewer-search-panel-border-radiusNumber00$kendo-radio-checked-borderColor$kendo-checkbox-checked-border#ff6358
Description
The border radius of the PDFViewer search panel.
+
Description
The border color of the checked RadioButton.
$kendo-pdf-viewer-search-panel-bgColor$kendo-component-bg#ffffff$kendo-radio-focus-borderNull$kendo-checkbox-focus-bordernull
Description
The background color of the PDFViewer search panel.
+
Description
The border color of the focused RadioButton.
$kendo-pdf-viewer-search-panel-textColor$kendo-component-text#424242$kendo-radio-focus-shadowList$kendo-checkbox-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.06)
Description
The text color of the PDFViewer search panel.
+
Description
The box shadow of the focused RadioButton.
$kendo-pdf-viewer-search-panel-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)$kendo-radio-focus-checked-borderNull$kendo-checkbox-focus-checked-bordernull
Description
The border color of the PDFViewer search panel.
+
Description
The border color of the focused and checked RadioButton.
$kendo-pdf-viewer-search-panel-shadowString$kendo-window-shadowvar(--kendo-elevation-8, 0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-radio-focus-checked-shadowList$kendo-checkbox-focus-checked-shadow0 0 0 2px rgba(255, 99, 88, 0.3)
Description
The shadow of the PDFViewer search panel.
+
Description
The box shadow of the focused and checked RadioButton.
$kendo-pdf-viewer-search-panel-matches-spacingNumber$kendo-padding-sm-x4px$kendo-radio-disabled-bgNull$kendo-checkbox-disabled-bgnull
Description
The spacing of the matches container in the PDFViewer search panel.
+
Description
The background color of the disabled RadioButton.
$kendo-pdf-viewer-selection-line-heightNumber$kendo-line-height-sm1.25$kendo-radio-disabled-textNull$kendo-checkbox-disabled-textnull
Description
The line height of the PDFViewer selection.
+
Description
The color of the disabled RadioButton.
$kendo-pdf-viewer-search-highlight-bgColor$kendo-body-text#424242$kendo-radio-disabled-borderNull$kendo-checkbox-disabled-bordernull
Description
The background color of the PDFViewer highlight.
+
Description
The border color of the disabled RadioButton.
$kendo-pdf-viewer-search-highlight-mark-bgColoryellowyellow$kendo-radio-disabled-checked-bgNull$kendo-checkbox-disabled-checked-bgnull
Description
The background color of the PDFViewer highlight mark.
+
Description
The background color of the disabled and checked RadioButton.
$kendo-pdf-viewer-icon-textColor$kendo-dropzone-icon-text#7e7e7e$kendo-radio-disabled-checked-textNull$kendo-checkbox-disabled-checked-textnull
Description
The text color of the PDFViewer icon.
+
Description
The color of the disabled and checked RadioButton.
- -### Picker - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-picker-bgColor$kendo-button-bg#f5f5f5
$kendo-radio-disabled-checked-borderNull$kendo-checkbox-disabled-checked-bordernull
Description
The border color of disabled and checked RadioButton.
+
$kendo-radio-invalid-bgNull$kendo-checkbox-invalid-bgnull
Description
The background color of the Picker components.
+
Description
The background color of the invalid RadioButton.
$kendo-picker-text$kendo-radio-invalid-text Color$kendo-button-text#424242$kendo-checkbox-invalid-text#f31700
Description
The text color of the Picker components.
+
Description
The color of the invalid RadioButton.
$kendo-picker-border$kendo-radio-invalid-border Color$kendo-button-borderrgba(0, 0, 0, 0.08)$kendo-checkbox-invalid-border#f31700
Description
The border color of the Picker components.
+
Description
The border color of the invalid RadioButton.
$kendo-picker-gradientList$kendo-button-gradientrgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)$kendo-radio-indicator-typeStringimageimage
Description
The gradient of the Picker components.
+
Description
The type of the RadioButton indicator.
$kendo-picker-shadowNull$kendo-button-shadownull$kendo-radio-glyph-font-familyList"WebComponentsIcons", monospace"WebComponentsIcons", monospace
Description
The shadow of the Picker components.
+
Description
The font family of the RadioButton indicator glyph.
$kendo-picker-hover-bgColor$kendo-button-hover-bg#ebebeb$kendo-radio-checked-glyphString"\e308""\e308"
Description
The background color of the hovered Picker components.
+
Description
The glyph of the RadioButton indicator.
$kendo-picker-hover-textNull$kendo-button-hover-textnull$kendo-radio-checked-imageStringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='white'/%3e%3c/svg%3e")
Description
The text color of the hovered Picker components.
+
Description
The image of the checked RadioButton indicator.
$kendo-picker-hover-border$kendo-radio-disabled-checked-image Null$kendo-button-hover-bordernull null
Description
The border color of the hovered Picker components.
+
Description
The image of the disabled and checked RadioButton indicator.
$kendo-picker-hover-gradientNull$kendo-button-hover-gradientnull$kendo-radio-label-margin-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The gradient of the hovered Picker components.
+
Description
The horizontal margin of the RadioButton inside of a label.
$kendo-picker-hover-shadowNull$kendo-button-hover-shadownull$kendo-radio-list-spacingNumberk-map-get( $kendo-spacing, 4 )16px
Description
The shadow of the hovered Picker components.
+
Description
The horizontal list item margin of the RadioButton.
$kendo-picker-focus-bgNull$kendo-button-focus-bgnull$kendo-radio-list-item-padding-xNumber0px0px
Description
The background color of the focused Picker components.
+
Description
The horizontal list item padding of the RadioButton.
$kendo-picker-focus-textNull$kendo-button-focus-textnull$kendo-radio-list-item-padding-yNumber$kendo-list-md-item-padding-y4px
Description
The text color of the focused Picker components.
+
Description
The vertical list item padding of the RadioButton.
$kendo-picker-focus-borderNull$kendo-button-focus-bordernull$kendo-radio-ripple-bgColor$kendo-radio-checked-bg#ff6358
Description
The border color of the focused Picker components.
+
Description
The background color of the RadioButton ripple.
$kendo-picker-focus-gradientNull$kendo-button-focus-gradientnull$kendo-radio-ripple-opacityNumber.250.25
Description
The gradient of the focused Picker components.
+
Description
The opacity of the RadioButton ripple.
$kendo-picker-focus-shadowList$kendo-button-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)
+ +### Rating + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-rating-font-familyString$kendo-font-familyinherit
Description
The shadow of the focused Picker components.
+
Description
The font family of the Rating.
$kendo-picker-disabled-bgNullnullnull$kendo-rating-font-sizeNumber$kendo-font-size-md14px
Description
The background color of the disabled Picker components.
+
Description
The font size of the Rating.
$kendo-picker-disabled-textNullnullnull$kendo-rating-line-heightNumber$kendo-line-height-md1.4285714286
Description
The text color of the disabled Picker components.
+
Description
The line height of the Rating.
$kendo-picker-disabled-borderNullnullnull$kendo-rating-container-margin-xNumber$kendo-padding-sm-x4px
Description
The border color of the disabled Picker components.
+
Description
The horizontal margin of the Rating container.
$kendo-picker-disabled-gradientNullnullnull$kendo-rating-item-padding-xNumber$kendo-padding-sm-x4px
Description
The gradient of the disabled Picker components.
+
Description
The horizontal padding of the Rating item.
$kendo-picker-disabled-shadowNullnullnull$kendo-rating-item-padding-yNumber$kendo-padding-md-y4px
Description
The shadow of the disabled Picker components.
+
Description
The vertical padding of the Rating item.
$kendo-picker-outline-bgNullnullnull$kendo-rating-label-margin-xNumber$kendo-padding-md-x8px
Description
The background color of the outline Picker components.
+
Description
The horizontal margin of the Rating label.
$kendo-picker-outline-textColor$kendo-button-text#424242$kendo-rating-label-margin-yNumber$kendo-padding-md-y4px
Description
The text color of the outline Picker components.
+
Description
The vertical margin of the Rating label.
$kendo-picker-outline-borderColorif($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $kendo-picker-outline-text, .5))rgba(66, 66, 66, 0.5)$kendo-rating-label-line-heightNumber$kendo-line-height-lg1.5
Description
The border color of the outline Picker components.
+
Description
The line height of the Rating label.
$kendo-picker-outline-hover-bgColor$kendo-picker-outline-text#424242$kendo-rating-icon-sizeNumber($kendo-icon-size * 1.5)24px
Description
The background color of the outline hovered Picker components.
+
Description
The size of the Rating icon.
$kendo-picker-outline-hover-textColorif($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg ))white$kendo-rating-icon-textColor$kendo-component-text#424242
Description
The text color of the outline hovered Picker components.
+
Description
The text color of the Rating icon.
$kendo-picker-outline-hover-border$kendo-rating-icon-selected-text Color$kendo-picker-outline-hover-bg#424242$kendo-selected-bg#ff6358
Description
The border color of the outline hovered Picker components.
+
Description
The text color of the selected Rating icon.
$kendo-picker-outline-focus-bgNullnullnull$kendo-rating-icon-hover-textColor$kendo-selected-bg#ff6358
Description
The background color of the outline focused Picker components.
+
Description
The text color of the hovered Rating icon.
$kendo-picker-outline-focus-textNullnullnull$kendo-rating-icon-focus-textColor$kendo-selected-bg#ff6358
Description
The text color of the outline focused Picker components.
+
Description
The text color of the focused Rating icon.
$kendo-picker-outline-focus-borderNullnullnull$kendo-rating-icon-focus-shadowStringk-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The border color of the outline focused Picker components.
+
Description
The shadow of the focused Rating icon.
$kendo-picker-outline-focus-shadowList$kendo-picker-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)$kendo-rating-icon-focus-selected-shadowStringk-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the outline focused Picker components.
+
Description
The shadow of the focused and selected Rating icon.
$kendo-picker-outline-hover-focus-bgNullnullnull
+ +### Scrollview + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - - - - - - - + + - - - - - + + + + - - - - - - - - - - -
NameTypeDefault valueComputed value
$kendo-scrollview-border-widthNumber1px1px
Description
The background color of the outline hovered and focused Picker components.
+
Description
The width of the border around the ScrollView.
$kendo-picker-outline-hover-focus-textNullnullnull$kendo-scrollview-font-familyString$kendo-font-familyinherit
Description
The text color of the outline hovered and focused Picker components.
+
Description
The font family of the ScrollView.
$kendo-picker-outline-hover-focus-borderNullnullnull$kendo-scrollview-font-sizeNumber$kendo-font-size-md14px
Description
The border color of the outline hovered and focused Picker components.
+
Description
The font size of the ScrollView.
$kendo-picker-flat-bgNullnullnull$kendo-scrollview-line-heightNumber$kendo-line-height-md1.4285714286
Description
The background color of the flat Picker components.
+
Description
The line height of the ScrollView.
$kendo-picker-flat-text$kendo-scrollview-text Color$kendo-button-text$kendo-component-text #424242
Description
The text color of the flat Picker components.
+
Description
The text color of the ScrollView.
$kendo-picker-flat-border$kendo-scrollview-bg Color$kendo-button-borderrgba(0, 0, 0, 0.08)$kendo-component-bg#ffffff
Description
The border color of the flat Picker components.
+
Description
The background color of the ScrollView.
$kendo-picker-flat-hover-bg$kendo-scrollview-border Colorif($kendo-enable-color-system, rgba( k-color( on-base, true ), .04 ), rgba( $kendo-button-text, .04 ))rgba(66, 66, 66, 0.04)$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The background color of the flat hovered Picker components.
+
Description
The border color of the ScrollView.
$kendo-picker-flat-hover-textNullnullnull$kendo-scrollview-pagebutton-sizeNumber10px10px
Description
The text color of the flat hovered Picker components.
+
Description
The size of the ScrollView page button.
$kendo-picker-flat-hover-border$kendo-scrollview-pagebutton-bg Colorif($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 ))rgba(0, 0, 0, 0.16)$kendo-button-bg#f5f5f5
Description
The border color of the flat hovered Picker components.
+
Description
The background color of the ScrollView page button.
$kendo-picker-flat-focus-bgNullnullnull$kendo-scrollview-pagebutton-borderColor$kendo-button-borderrgba(0, 0, 0, 0.08)
Description
The background color of the flat focused Picker components.
+
Description
The border color of the ScrollView page button.
$kendo-picker-flat-focus-textNullnullnull$kendo-scrollview-pagebutton-primary-bgColor$kendo-color-primary#ff6358
Description
The text color of the flat focused Picker components.
+
Description
The primary background color of the ScrollView page button.
$kendo-picker-flat-focus-borderNullnullnull$kendo-scrollview-pagebutton-primary-borderColor$kendo-color-primary#ff6358
Description
The border color of the flat focused Picker components.
+
Description
The primary border color of the ScrollView page button.
$kendo-picker-flat-focus-shadow$kendo-scrollview-pagebutton-shadow List$kendo-picker-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The shadow of the flat focused Picker components.
-
$kendo-picker-flat-hover-focus-bgNullnullnull0 0 0 2px rgba(0, 0, 0, .13)0 0 0 2px rgba(0, 0, 0, 0.13)
Description
The background color of the flat hovered and focused Picker components.
+
Description
The box shadow of the ScrollView page button.
$kendo-picker-flat-hover-focus-textNullnullnull$kendo-scrollview-pager-offsetNumber00
Description
The text color of the flat hovered and focused Picker components.
+
Description
The offset of the ScrollView pager.
$kendo-picker-flat-hover-focus-borderNullnullnull
Description
The border color of the flat hovered and focused Picker components.
-
- -### Popover - - - - - - - - - - - - - - - - - - + - - + + - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-popover-border-width$kendo-scrollview-pager-item-spacing Number$kendo-card-border-width1px20px20px
Description
The width of the border around the Popover.
+
Description
The spacing between the ScrollView pager items.
$kendo-popover-border-styleStringsolidsolid
$kendo-scrollview-pager-item-border-widthNumber0px0px
Description
The style of the border around the Popover.
+
Description
The border width of the ScrollView pager items.
$kendo-popover-border-radiusNumber$kendo-card-border-radius6px$kendo-scrollview-pager-heightCalculationcalc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + #{$kendo-scrollview-pager-item-spacing * 2} )calc(10px + 0px + 40px)
Description
The radius of the border around the Popover.
+
Description
The height of the ScrollView pager.
$kendo-popover-font-familyString$kendo-card-font-familyinherit$kendo-scrollview-arrow-tap-highlight-colorColor$kendo-color-rgba-transparentrgba(0, 0, 0, 0)
Description
The font family of the Popover.
+
Description
The text color of the highlight over the tapped ScrollView navigation arrows.
$kendo-popover-font-sizeNumber$kendo-card-font-size14px$kendo-scrollview-navigation-colorColorwhitewhite
Description
The font size of the Popover.
+
Description
The color of the ScrollView navigation arrows.
$kendo-popover-line-heightNumber$kendo-card-line-height1.4285714286$kendo-scrollview-navigation-icon-shadowListrgba(0, 0, 0, .3) 0 0 15pxrgba(0, 0, 0, 0.3) 0 0 15px
Description
The line height of the Popover.
+
Description
The box shadow of the ScrollView navigation arrows.
$kendo-popover-text$kendo-scrollview-navigation-bg Color$kendo-component-text#424242rgba(0, 0, 0, 0)rgba(0, 0, 0, 0)
Description
The text color of the Popover.
+
Description
The background color of the ScrollView navigation.
$kendo-popover-bgColor$kendo-component-bg#ffffff$kendo-scrollview-navigation-default-opacityNumber.70.7
Description
The background color of the Popover.
+
Description
The opacity of the ScrollView navigation.
$kendo-popover-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)$kendo-scrollview-navigation-hover-opacityNumber11
Description
The border color of the Popover.
+
Description
The hover opacity of the ScrollView navigation.
$kendo-popover-shadowString$kendo-popup-shadowvar(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-scrollview-navigation-hover-span-bgNullnullnull
Description
The box shadow of the Popover.
+
Description
The hover background color of the ScrollView navigation arrows.
$kendo-popover-header-padding-xNumber$kendo-card-header-padding-x16px$kendo-scrollview-light-bgColorrgba(255, 255, 255, .4)rgba(255, 255, 255, 0.4)
Description
The horizontal padding of the Popover header.
+
Description
The background color of the ScrollView pager in light mode.
$kendo-popover-header-padding-yNumber$kendo-card-header-padding-y12px$kendo-scrollview-dark-bgColorrgba(0, 0, 0, .4)rgba(0, 0, 0, 0.4)
Description
The vertical padding of the Popover header.
+
Description
The background color of the ScrollView pager in dark mode.
$kendo-popover-header-border-width$kendo-scrollview-transition-duration Number$kendo-card-header-border-width1px.3s0.3s
Description
The border width of the Popover header.
+
Description
The duration of the ScrollView transition.
$kendo-popover-header-border-style$kendo-scrollview-transition-timing-function String$kendo-popover-border-stylesolidease-in-outease-in-out
Description
The border style of the Popover header.
+
Description
The timing function of the ScrollView transition.
$kendo-popover-header-textColor$kendo-card-header-text#424242
+ +### Skeleton + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - + + +
NameTypeDefault valueComputed value
$kendo-skeleton-text-transformStringscale( 1, .6 )scale(1, 0.6)
Description
The text color of the Popover header.
+
Description
The transform scale of the Skeleton text.
$kendo-popover-header-bgNull$kendo-card-header-bgnull$kendo-skeleton-text-border-radiusNumber$kendo-border-radius-md4px
Description
The background color of the Popover header.
+
Description
The border radius of the Skeleton text.
$kendo-popover-header-borderColor$kendo-card-header-borderrgba(0, 0, 0, 0.08)$kendo-skeleton-rect-border-radiusNumber00
Description
The border color of the Popover header.
+
Description
The border radius of the rectangular Skeleton.
$kendo-popover-body-padding-x$kendo-skeleton-circle-border-radius Number$kendo-card-body-padding-x16px9999px9999px
Description
The horizontal padding of the Popover body.
+
Description
The border radius of the circular Skeleton.
+
+ +### Split-button + + + + + + + + + + + + + + + + + + + + + + + + - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - - + + + + + - - - - - + + + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-split-button-focus-shadowList$kendo-button-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The focus shadow of the SplitButton.
$kendo-popover-body-padding-y$kendo-split-button-arrow-padding-x Number$kendo-card-body-padding-y16px$kendo-button-padding-y4px
Description
The vertical padding of the Popover body.
+
Description
The horizontal padding of the arrow Button.
$kendo-popover-actions-border-width$kendo-split-button-sm-arrow-padding-x Number$kendo-popover-border-width1px$kendo-button-sm-padding-y2px
Description
The border width of the Popover actions.
+
Description
The horizontal padding of the small arrow Button.
$kendo-popover-callout-width$kendo-split-button-md-arrow-padding-x Number$kendo-card-callout-width20px$kendo-button-md-padding-y4px
Description
The width of the Popover callout.
+
Description
The horizontal padding of the medium arrow Button.
$kendo-popover-callout-height$kendo-split-button-lg-arrow-padding-x Number$kendo-card-callout-height20px$kendo-button-lg-padding-y8px
Description
The height of the Popover callout.
+
Description
The horizontal padding of the large arrow Button.
$kendo-popover-callout-border-width$kendo-split-button-arrow-padding-y Number$kendo-popover-border-width1px$kendo-button-padding-y4px
Description
The border width of the Popover callout.
+
Description
The vertical padding of the arrow Button.
$kendo-popover-callout-border-styleString$kendo-popover-border-stylesolid
$kendo-split-button-sm-arrow-padding-yNumber$kendo-button-sm-padding-y2px
Description
The border style of the Popover callout.
+
Description
The vertical padding of the small arrow Button.
$kendo-popover-callout-bgColor$kendo-popover-bg#ffffff$kendo-split-button-md-arrow-padding-yNumber$kendo-button-md-padding-y4px
Description
The background color of the Popover callout.
+
Description
The vertical padding of the medium arrow Button.
$kendo-popover-callout-borderColor$kendo-popover-borderrgba(0, 0, 0, 0.08)$kendo-split-button-lg-arrow-padding-yNumber$kendo-button-lg-padding-y8px
Description
The border color of the Popover callout.
+
Description
The vertical padding of the large arrow Button.
-### Popup +### Splitter @@ -13127,1555 +15913,1483 @@ The following table lists the available variables for customizing the Default th - - - - - - - - - - - - - - - - - - - + - - - - - + + + + - - + - - + - - - - - - - - - - - - - - - - - - - - + - - + - - + - - - - - + + + + - - -
$kendo-popup-padding-xNullnullnull
Description
Horizontal padding of the popup.
-
$kendo-popup-padding-yNullnullnull
Description
Vertical padding of the popup.
-
$kendo-popup-border-width$kendo-splitter-border-width Number 1px 1px
Description
Width of the border around the popup.
+
Description
The width of the border around the Splitter.
$kendo-popup-border-radiusNullnullnull$kendo-splitter-font-familyString$kendo-font-familyinherit
Description
Border radius of the popup.
+
Description
The font family of the Splitter.
$kendo-popup-font-size$kendo-splitter-font-size Number $kendo-font-size-md 14px
Description
Font size of the popup.
+
Description
The font size of the Splitter.
$kendo-popup-line-height$kendo-splitter-line-height Number $kendo-line-height-md 1.4285714286
Description
Line height of the popup.
-
$kendo-popup-content-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
Horizontal padding of the popup content.
-
$kendo-popup-content-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
Vertical padding of the popup content.
+
Description
The line height of the Splitter.
$kendo-popup-bg$kendo-splitter-bg Color $kendo-component-bg #ffffff
Description
Background color of the popup.
+
Description
The background color of the Splitter.
$kendo-popup-text$kendo-splitter-text Color $kendo-component-text #424242
Description
Text color of the popup.
+
Description
The text color of the Splitter.
$kendo-popup-border$kendo-splitter-border Color $kendo-component-border rgba(0, 0, 0, 0.08)
Description
Border color of the popup.
+
Description
The border color of the Splitter.
$kendo-popup-shadowStringk-elevation(4)var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-splitter-splitbar-sizeNumberk-map-get( $kendo-spacing, 3 )12px
Description
Box shadow of the popup.
+
Description
The size of the Splitter splitbar.
- -### Progressbar - - - - - - - - - - - - - - - - - - + + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - + - - + - - + + - - + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-progressbar-height
$kendo-splitter-drag-handle-length Number22px22px20px20px
Description
The height of the ProgressBar.
+
Description
The length of the Splitter drag handle.
$kendo-progressbar-horizontal-width$kendo-splitter-drag-handle-thickness Number100%100%2px2px
Description
The horizontal width of the ProgressBar.
+
Description
The thickness of the Splitter drag handle.
$kendo-progressbar-animation-timingList1s linear infinite1s linear infinite$kendo-splitter-drag-icon-marginNumber7px7px
Description
The animation timing of the ProgressBar.
+
Description
The margin of the Splitter drag handle icon.
$kendo-progressbar-border-widthNumber0px0px$kendo-splitter-collapse-icon-padding-xNullnullnull
Description
The width of the border around the ProgressBar.
+
Description
The horizontal padding of the collapse icon in the Splitter.
$kendo-progressbar-font-familyString$kendo-font-familyinherit$kendo-splitter-collapse-icon-padding-yNumberk-map-get( $kendo-spacing, .5 )2px
Description
The font family of the ProgressBar.
+
Description
The vertical padding of the collapse icon in the Splitter.
$kendo-progressbar-font-sizeNumber$kendo-font-size-sm12px$kendo-splitbar-bgColor$kendo-base-bg#fafafa
Description
The font size of the ProgressBar.
+
Description
The background color of the Splitter splitbar.
$kendo-progressbar-line-heightNumber11$kendo-splitbar-textColor$kendo-base-text#424242
Description
The line height of the ProgressBar.
+
Description
The text color of the Splitter splitbar.
$kendo-progressbar-bg$kendo-splitbar-hover-bg Colorif($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-component-bg, 1 ))#ebebebif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-splitbar-bg, .5 ))#f0f0f0
Description
The background color of the ProgressBar.
+
Description
The hover background color of the Splitter splitbar.
$kendo-progressbar-text$kendo-splitbar-hover-text Color$kendo-component-text$kendo-splitbar-text #424242
Description
The text color of the ProgressBar.
+
Description
The hover text color of the Splitter splitbar.
$kendo-progressbar-border$kendo-splitbar-selected-bg Color$kendo-component-borderrgba(0, 0, 0, 0.08)$kendo-selected-bg#ff6358
Description
The border color of the ProgressBar.
+
Description
The selected background color of the Splitter splitbar.
$kendo-progressbar-gradient$kendo-splitbar-selected-textColor$kendo-selected-textwhite
Description
The selected text color of the Splitter splitbar.
+
+ +### Stepper + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-stepper-margin-x Null null null
Description
The background gradient of the ProgressBar.
+
Description
The horizontal margin the Stepper.
$kendo-progressbar-value-bgColor$kendo-color-primary#ff6358$kendo-stepper-margin-yNullnullnull
Description
The progress background color of the ProgressBar.
+
Description
The vertical margin the Stepper.
$kendo-progressbar-value-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-progressbar-value-bg ))white$kendo-stepper-padding-xNullnullnull
Description
The progress text color of the ProgressBar.
+
Description
The horizontal padding the Stepper.
$kendo-progressbar-value-borderColorif($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-progressbar-value-bg ))#eb5b51$kendo-stepper-padding-yNullnullnull
Description
The progress border color of the ProgressBar.
+
Description
The vertical padding the Stepper.
$kendo-progressbar-value-gradientNullnullnull$kendo-stepper-label-margin-xNumber12px12px
Description
The horizontal margin the Stepper label.
+
$kendo-stepper-label-padding-xNumber12px12px
Description
The horizontal padding the Stepper label.
+
$kendo-stepper-label-padding-yNumber5px5px
Description
The progress background gradient of the ProgressBar.
+
Description
The vertical padding the Stepper label.
$kendo-progressbar-indeterminate-bgColor$kendo-progressbar-bg#ebebeb$kendo-stepper-border-widthNumber0px0px
Description
The background color of the indeterminate ProgressBar.
+
Description
The width of the border around the Stepper.
$kendo-progressbar-indeterminate-textColor$kendo-progressbar-text#424242$kendo-stepper-inline-content-padding-xNumber20px20px
Description
The text color of the indeterminate ProgressBar.
+
Description
The horizontal padding the Stepper content.
$kendo-progressbar-indeterminate-borderColor$kendo-progressbar-borderrgba(0, 0, 0, 0.08)$kendo-stepper-inline-content-padding-yNumber10px10px
Description
The border color of the indeterminate ProgressBar.
+
Description
The vertical padding the Stepper content.
$kendo-progressbar-indeterminate-gradientNullnullnull$kendo-stepper-font-sizeNumber$kendo-font-size-md14px
Description
The background gradient of the indeterminate ProgressBar.
+
$kendo-progressbar-chunk-borderColor$kendo-body-bg#ffffff$kendo-stepper-line-heightNumber$kendo-line-height-md1.4285714286
Description
The border color of the chunk ProgressBar.
+
$kendo-circular-progressbar-arc-strokeColor$kendo-color-primary#ff6358$kendo-stepper-font-familyString$kendo-font-familyinherit
Description
The arc stroke color of the circular ProgressBar.
+
$kendo-circular-progressbar-scale-strokeColor$kendo-progressbar-bg#ebebeb$kendo-stepper-bgNullnullnull
Description
The scale stroke background color of the circular ProgressBar.
+
Description
The background color of the Stepper.
- -### Prompt - - - - - - - - - - - - - - - - - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - - - - - - -
NameTypeDefault valueComputed value
$kendo-prompt-text
$kendo-stepper-text Color $kendo-component-text #424242
Description
The text color of the Prompt.
+
Description
The text color of the Stepper.
$kendo-prompt-bgColor$kendo-component-bg#ffffff$kendo-stepper-borderNullnullnull
Description
The background color of the Prompt.
+
Description
The border color of the Stepper.
$kendo-prompt-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)$kendo-stepper-indicator-widthNumber28px28px
Description
The border color of the Prompt.
+
Description
The width of the Stepper indicator.
$kendo-prompt-header-textColor$kendo-component-header-text#424242$kendo-stepper-indicator-heightNumber$kendo-stepper-indicator-width28px
Description
The text color of the Prompt header.
+
Description
The height of the Stepper indicator.
$kendo-prompt-header-bgColor$kendo-component-bg#ffffff$kendo-stepper-indicator-border-widthNumber1px1px
Description
The background color of the Prompt header.
+
Description
The border width of the Stepper indicator.
$kendo-prompt-header-borderColor$kendo-component-header-borderrgba(0, 0, 0, 0.08)$kendo-stepper-indicator-border-radiusNumber50%50%
Description
The border color of the Prompt header.
+
Description
The border radius of the Stepper indicator.
$kendo-prompt-content-padding-y$kendo-stepper-indicator-focus-border-width Numberk-map-get( $kendo-spacing, 4 )16px1px1px
Description
The vertical padding of the Prompt content.
+
Description
The border width of the focused Stepper indicator.
$kendo-prompt-content-padding-x$kendo-stepper-indicator-focus-size Numberk-map-get( $kendo-spacing, 4 )16px2px2px
Description
The horizontal padding of the Prompt content.
+
Description
The size of the focused Stepper indicator.
$kendo-prompt-content-spacing$kendo-stepper-indicator-focus-offset Numberk-map-get( $kendo-spacing, 4 )16px3px3px
Description
The spacing between the items of the Prompt content.
+
Description
The offset of the Stepper focused indicator.
$kendo-prompt-content-textColor$kendo-component-header-text#424242$kendo-stepper-indicator-focus-calc-offsetCalculationcalc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} )calc(1px + 3px)
Description
The text color of the Prompt content.
+
Description
The calculated offset of the focused Stepper indicator.
$kendo-prompt-content-bg$kendo-stepper-indicator-bg Color$kendo-component-header-bg#fafafa$kendo-component-bg#ffffff
Description
The background color of the Prompt content.
+
Description
The background color of the Stepper indicator.
$kendo-prompt-content-border$kendo-stepper-indicator-text Color$kendo-component-header-borderrgba(0, 0, 0, 0.08)$kendo-component-text#424242
Description
The text border of the Prompt content.
+
Description
The text color of the Stepper indicator.
$kendo-prompt-expander-spacingNumberk-map-get( $kendo-spacing, 2 )8px$kendo-stepper-indicator-borderColor#cccccc#cccccc
Description
The spacing between the items of the Prompt content expander.
+
Description
The border color of the Stepper indicator.
$kendo-prompt-suggestion-padding-yNumberk-map-get( $kendo-spacing, 2 )8px$kendo-stepper-indicator-hover-bgColorif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-stepper-indicator-bg ))#ebebeb
Description
The vertical padding of the Prompt suggestion container.
+
Description
The background color of the hovered Stepper indicator.
$kendo-prompt-suggestion-padding-xNumberk-map-get( $kendo-spacing, 2 )8px$kendo-stepper-indicator-hover-textNullnullnull
Description
The horizontal padding of the Prompt suggestion container.
+
Description
The text color of the hovered Stepper indicator.
$kendo-prompt-suggestion-border-radiusNumber$kendo-border-radius-md4px$kendo-stepper-indicator-hover-borderNullnullnull
Description
The border radius of the Prompt suggestion container.
+
Description
The border color of the hovered Stepper indicator.
$kendo-prompt-suggestion-textColor$kendo-component-text#424242$kendo-stepper-indicator-disabled-bgNullnullnull
Description
The text color of the Prompt suggestion container.
+
Description
The background color of the disabled Stepper indicator.
$kendo-prompt-suggestion-bg$kendo-stepper-indicator-disabled-text Color$kendo-body-bg#ffffffif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text)#8f8f8f
Description
The background color of the Prompt suggestion container.
+
Description
The text color of the disabled Stepper indicator.
$kendo-prompt-suggestion-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)$kendo-stepper-indicator-disabled-borderNullnullnull
Description
The border color of the Prompt suggestion container.
+
Description
The border color of the disabled Stepper indicator.
$kendo-prompt-suggestion-shadowStringk-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The elevation of the Prompt suggestion container.
-
- -### Radio - - - - - - - - - - - - - - - - - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - + - - + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - + - + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - + - + - - + - + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - + + +
NameTypeDefault valueComputed value
$kendo-radio-radiusNumber50%50%$kendo-stepper-indicator-done-bgColor$kendo-color-primary#ff6358
Description
The border radius of the RadioButton.
+
Description
The background color of the Stepper done indicator.
$kendo-radio-border-widthNumber1px1px$kendo-stepper-indicator-done-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg ))white
Description
The border width of the RadioButton.
+
Description
The text color of the Stepper done indicator.
$kendo-radio-sm-sizeNumberk-map-get( $kendo-spacing, 3 )12px$kendo-stepper-indicator-done-borderColor$kendo-stepper-indicator-done-bg#ff6358
Description
The size of a small RadioButton.
+
Description
The border color of the Stepper done indicator.
$kendo-radio-md-sizeNumberk-map-get( $kendo-spacing, 4 )16px$kendo-stepper-indicator-done-hover-bgColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg ))#eb5b51
Description
The size of a medium RadioButton.
+
Description
The background color of the hovered Stepper done indicator.
$kendo-radio-lg-sizeNumberk-map-get( $kendo-spacing, 5 )20px$kendo-stepper-indicator-done-hover-textNullnullnull
Description
The size of a large RadioButton.
+
Description
The text color of the hovered Stepper done indicator.
$kendo-radio-sm-glyph-sizeNumberk-map-get( $kendo-spacing, 2.5 )10px$kendo-stepper-indicator-done-hover-borderNullnullnull
Description
The glyph size of a small RadioButton.
+
Description
The border color of the hovered Stepper done indicator.
$kendo-radio-md-glyph-sizeNumberk-map-get( $kendo-spacing, 3.5 )14px$kendo-stepper-indicator-done-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .6 ), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%))#ffa19b
Description
The glyph size of a medium RadioButton.
+
Description
The background color of the disabled Stepper done indicator.
$kendo-radio-lg-glyph-sizeNumberk-map-get( $kendo-spacing, 4.5 )18px$kendo-stepper-indicator-done-disabled-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg ))white
Description
The glyph size of a large RadioButton.
+
Description
The text color of the disabled Stepper done indicator.
$kendo-radio-sm-ripple-sizeNumber300%300%$kendo-stepper-indicator-done-disabled-borderColor$kendo-stepper-indicator-done-disabled-bg#ffa19b
Description
The ripple size of a small RadioButton.
+
Description
The border color of the disabled Stepper done indicator.
$kendo-radio-md-ripple-sizeNumber300%300%$kendo-stepper-indicator-current-bgColor$kendo-stepper-indicator-done-bg#ff6358
Description
The ripple size of a medium RadioButton.
+
Description
The background color of the Stepper current indicator.
$kendo-radio-lg-ripple-sizeNumber300%300%$kendo-stepper-indicator-current-textColor$kendo-stepper-indicator-done-textwhite
Description
The ripple size of a large RadioButton.
+
Description
The text color of the Stepper current indicator.
$kendo-radio-sizesMap( - sm: ( - size: $kendo-radio-sm-size, - glyph-size: $kendo-radio-sm-glyph-size, - ripple-size: $kendo-radio-sm-ripple-size - ), - md: ( - size: $kendo-radio-md-size, - glyph-size: $kendo-radio-md-glyph-size, - ripple-size: $kendo-radio-md-ripple-size - ), - lg: ( - size: $kendo-radio-lg-size, - glyph-size: $kendo-radio-lg-glyph-size, - ripple-size: $kendo-radio-lg-ripple-size - ) -)(sm: (size: 12px, glyph-size: 10px, ripple-size: 300%), md: (size: 16px, glyph-size: 14px, ripple-size: 300%), lg: (size: 20px, glyph-size: 18px, ripple-size: 300%))$kendo-stepper-indicator-current-borderColor$kendo-stepper-indicator-done-border#ff6358
Description
The map with the different RadioButton sizes.
+
Description
The border color of the Stepper current indicator.
$kendo-radio-bg$kendo-stepper-indicator-current-hover-bg Color$kendo-checkbox-bg#ffffff$kendo-stepper-indicator-done-hover-bg#eb5b51
Description
The background color of the RadioButton.
+
Description
The background color of the hovered Stepper current indicator.
$kendo-radio-text$kendo-stepper-indicator-current-hover-text Null$kendo-checkbox-text$kendo-stepper-indicator-done-hover-text null
Description
The color of the RadioButton.
+
Description
The text color of the hovered Stepper current indicator.
$kendo-radio-border$kendo-stepper-indicator-current-hover-borderNull$kendo-stepper-indicator-done-hover-bordernull
Description
The border color of the hovered Stepper current indicator.
+
$kendo-stepper-indicator-current-disabled-bg Color$kendo-checkbox-borderrgba(0, 0, 0, 0.08)$kendo-stepper-indicator-done-disabled-bg#ffa19b
Description
The border color of the RadioButton.
+
Description
The background color of the disabled Stepper current indicator.
$kendo-radio-hover-bgNull$kendo-checkbox-hover-bgnull$kendo-stepper-indicator-current-disabled-textColor$kendo-stepper-indicator-done-disabled-textwhite
Description
The background color of the hovered RadioButton.
+
Description
The text color of the disabled Stepper current indicator.
$kendo-radio-hover-textNull$kendo-checkbox-hover-textnull$kendo-stepper-indicator-current-disabled-borderColor$kendo-stepper-indicator-done-disabled-border#ffa19b
Description
The color of the hovered RadioButton.
+
Description
The border color of the disabled Stepper current indicator.
$kendo-radio-hover-border$kendo-stepper-label-text Null$kendo-checkbox-hover-bordernull null
Description
The border color of the hovered RadioButton.
+
Description
The text color of the Stepper label.
$kendo-radio-checked-bg$kendo-stepper-label-success-text Color$kendo-checkbox-checked-bg#ff6358$kendo-color-success#37b400
Description
The background color of the checked RadioButton.
+
Description
The success text color of the Stepper label.
$kendo-radio-checked-text$kendo-stepper-label-error-text Color$kendo-checkbox-checked-textwhite$kendo-color-error#f31700
Description
The color of the checked RadioButton.
+
Description
The error text color of the Stepper label.
$kendo-radio-checked-border$kendo-stepper-label-hover-text Color$kendo-checkbox-checked-border#ff6358if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-stepper-text, 2 ))#373737
Description
The border color of the checked RadioButton.
+
Description
The text color of the hovered Stepper label.
$kendo-radio-focus-borderNull$kendo-checkbox-focus-bordernull$kendo-stepper-label-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text)#8f8f8f
Description
The border color of the focused RadioButton.
+
Description
The text color of the disabled Stepper label.
$kendo-radio-focus-shadowList$kendo-checkbox-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.06)$kendo-stepper-optional-label-textColor$kendo-subtle-text#666666
Description
The box shadow of the focused RadioButton.
+
Description
The text color of the Stepper optional label.
$kendo-radio-focus-checked-border$kendo-stepper-optional-label-opacity Null$kendo-checkbox-focus-checked-bordernull null
Description
The border color of the focused and checked RadioButton.
+
Description
The opacity of the Stepper optional label.
$kendo-radio-focus-checked-shadowList$kendo-checkbox-focus-checked-shadow0 0 0 2px rgba(255, 99, 88, 0.3)$kendo-stepper-optional-label-font-sizeNullnullnull
Description
The box shadow of the focused and checked RadioButton.
+
Description
The font size of the Stepper optional label.
$kendo-radio-disabled-bgNull$kendo-checkbox-disabled-bgnull$kendo-stepper-optional-label-font-styleStringitalicitalic
Description
The background color of the disabled RadioButton.
+
Description
The font style of the Stepper optional label.
$kendo-radio-disabled-textNull$kendo-checkbox-disabled-textnull$kendo-stepper-progressbar-sizeNumber2px2px
Description
The color of the disabled RadioButton.
+
Description
The size of the Stepper ProgressBar.
$kendo-radio-disabled-border$kendo-stepper-progressbar-bg Null$kendo-checkbox-disabled-bordernull null
Description
The border color of the disabled RadioButton.
+
Description
The background color of the Stepper ProgressBar.
$kendo-radio-disabled-checked-bg$kendo-stepper-progressbar-text Null$kendo-checkbox-disabled-checked-bgnull null
Description
The background color of the disabled and checked RadioButton.
+
Description
The text color of the Stepper ProgressBar.
$kendo-radio-disabled-checked-text$kendo-stepper-progressbar-fill-bg Null$kendo-checkbox-disabled-checked-textnull null
Description
The color of the disabled and checked RadioButton.
+
Description
The background color of the selected Stepper ProgressBar.
$kendo-radio-disabled-checked-border$kendo-stepper-progressbar-fill-text Null$kendo-checkbox-disabled-checked-bordernull null
Description
The border color of disabled and checked RadioButton.
+
Description
The text color of the selected Stepper ProgressBar.
$kendo-radio-invalid-bgNull$kendo-checkbox-invalid-bgnull$kendo-stepper-content-transition-propertyStringheightheight
Description
The background color of the invalid RadioButton.
+
Description
The property name of the Stepper transition.
$kendo-radio-invalid-textColor$kendo-checkbox-invalid-text#f31700$kendo-stepper-content-transition-durationNumber300ms300ms
Description
The color of the invalid RadioButton.
+
Description
The duration of the Stepper transition.
$kendo-radio-invalid-borderColor$kendo-checkbox-invalid-border#f31700$kendo-stepper-content-transition-timing-functionListcubic-bezier(.4, 0, .2, 1) 0mscubic-bezier(0.4, 0, 0.2, 1) 0ms
Description
The border color of the invalid RadioButton.
+
Description
The timing function of the Stepper transition.
+
+ +### Switch + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-switch-font-familyNullnullnull
Description
The font family of the Switch.
$kendo-radio-indicator-typeStringimageimage$kendo-switch-track-border-widthNumber1px1px
Description
The type of the RadioButton indicator.
+
Description
The border width of the Switch track.
$kendo-radio-glyph-font-familyList"WebComponentsIcons", monospace"WebComponentsIcons", monospace$kendo-switch-thumb-border-widthNumber1px1px
Description
The font family of the RadioButton indicator glyph.
+
Description
The border width of the Switch thumb.
$kendo-radio-checked-glyph$kendo-switch-label-text-transform String"\e308""\e308"uppercaseuppercase
Description
The glyph of the RadioButton indicator.
+
Description
The text transform of the Switch label.
$kendo-radio-checked-image$kendo-switch-label-display Stringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='white'/%3e%3c/svg%3e")inlineinline
Description
The image of the checked RadioButton indicator.
+
Description
The display of the Switch label.
$kendo-radio-disabled-checked-imageNullnullnull$kendo-switch-sizesMap( + sm: ( font-size: 10px, track-width: 52px, track-height: 26px, thumb-width: 26px, thumb-height: 26px, thumb-offset: 0px, label-offset: 4px ), + md: ( font-size: 10px, track-width: 60px, track-height: 30px, thumb-width: 30px, thumb-height: 30px, thumb-offset: 0px, label-offset: 6px ), + lg: ( font-size: 10px, track-width: 68px, track-height: 34px, thumb-width: 34px, thumb-height: 34px, thumb-offset: 0px, label-offset: 8px ) +)(sm: (font-size: 10px, track-width: 52px, track-height: 26px, thumb-width: 26px, thumb-height: 26px, thumb-offset: 0px, label-offset: 4px), md: (font-size: 10px, track-width: 60px, track-height: 30px, thumb-width: 30px, thumb-height: 30px, thumb-offset: 0px, label-offset: 6px), lg: (font-size: 10px, track-width: 68px, track-height: 34px, thumb-width: 34px, thumb-height: 34px, thumb-offset: 0px, label-offset: 8px))
Description
The image of the disabled and checked RadioButton indicator.
+
Description
The map with the different Switch sizes.
$kendo-radio-label-margin-xNumberk-map-get( $kendo-spacing, 1 )4px$kendo-switch-off-track-bgColor$kendo-component-bg#ffffff
Description
The horizontal margin of the RadioButton inside of a label.
+
Description
The background of the track when the Switch is not checked.
$kendo-radio-list-spacingNumberk-map-get( $kendo-spacing, 4 )16px$kendo-switch-off-track-textColor$kendo-component-text#424242
Description
The horizontal list item margin of the RadioButton.
+
Description
The text color of the track when the Switch is not checked.
$kendo-radio-list-item-padding-xNumber0px0px$kendo-switch-off-track-borderColorif($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-switch-off-track-bg, 8% ))#ebebeb
Description
The horizontal list item padding of the RadioButton.
+
Description
The border color of the track when the Switch is not checked.
$kendo-radio-list-item-padding-yNumber$kendo-list-md-item-padding-y4px$kendo-switch-off-track-gradientNullnullnull
Description
The vertical list item padding of the RadioButton.
+
Description
The background gradient of the track when the Switch is not checked.
$kendo-radio-ripple-bgColor$kendo-radio-checked-bg#ff6358$kendo-switch-off-track-hover-bgNullnullnull
Description
The background color of the RadioButton ripple.
+
Description
The background of the track when the hovered Switch is not checked.
$kendo-radio-ripple-opacityNumber.250.25$kendo-switch-off-track-hover-textNullnullnull
Description
The opacity of the RadioButton ripple.
+
Description
The text color of the track when the hovered Switch is not checked.
- -### Rating - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-rating-font-familyString$kendo-font-familyinherit
$kendo-switch-off-track-hover-borderNullnullnull
Description
The font family of the Rating.
+
Description
The border color of the track when the hovered Switch is not checked.
$kendo-rating-font-sizeNumber$kendo-font-size-md14px$kendo-switch-off-track-hover-gradientNullnullnull
Description
The font size of the Rating.
+
Description
The background gradient of the track when the hovered Switch is not checked.
$kendo-rating-line-heightNumber$kendo-line-height-md1.4285714286$kendo-switch-off-track-focus-bgNullnullnull
Description
The line height of the Rating.
+
Description
The background of the track when the focused Switch is not checked.
$kendo-rating-container-margin-xNumber$kendo-padding-sm-x4px$kendo-switch-off-track-focus-textNullnullnull
Description
The horizontal margin of the Rating container.
+
Description
The text color of the track when the focused Switch is not checked.
$kendo-rating-item-padding-xNumber$kendo-padding-sm-x4px$kendo-switch-off-track-focus-borderNullnullnull
Description
The horizontal padding of the Rating item.
+
Description
The border color of the track when the focused Switch is not checked.
$kendo-rating-item-padding-yNumber$kendo-padding-md-y4px$kendo-switch-off-track-focus-gradientNullnullnull
Description
The vertical padding of the Rating item.
+
Description
The background gradient of the track when the focused Switch is not checked.
$kendo-rating-label-margin-xNumber$kendo-padding-md-x8px$kendo-switch-off-track-focus-ringList2px solid if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 ))2px solid rgba(0, 0, 0, 0.08)
Description
The horizontal margin of the Rating label.
+
Description
The ring around the track when the focused Switch is not checked.
$kendo-rating-label-margin-yNumber$kendo-padding-md-y4px$kendo-switch-off-track-disabled-bgNullnullnull
Description
The vertical margin of the Rating label.
+
Description
The background of the track when the disabled Switch is not checked.
$kendo-rating-label-line-heightNumber$kendo-line-height-lg1.5$kendo-switch-off-track-disabled-textNullnullnull
Description
The line height of the Rating label.
+
Description
The text color of the track when the disabled Switch is not checked.
$kendo-rating-icon-sizeNumber($kendo-icon-size * 1.5)24px$kendo-switch-off-track-disabled-borderNullnullnull
Description
The size of the Rating icon.
+
Description
The border color of the track when the disabled Switch is not checked.
$kendo-rating-icon-textColor$kendo-component-text#424242$kendo-switch-off-track-disabled-gradientNullnullnull
Description
The text color of the Rating icon.
+
Description
The background gradient of the track when the disabled Switch is not checked.
$kendo-rating-icon-selected-text$kendo-switch-off-thumb-bg Color$kendo-selected-bg#ff6358$kendo-base-bg#fafafa
Description
The text color of the selected Rating icon.
+
Description
The background of the thumb when the Switch is not checked.
$kendo-rating-icon-hover-text$kendo-switch-off-thumb-text Color$kendo-selected-bg#ff6358$kendo-base-text#424242
Description
The text color of the hovered Rating icon.
+
Description
The text color of the thumb when the Switch is not checked.
$kendo-rating-icon-focus-text$kendo-switch-off-thumb-border Color$kendo-selected-bg#ff6358$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The text color of the focused Rating icon.
+
Description
The border color of the thumb when the Switch is not checked.
$kendo-rating-icon-focus-shadowStringk-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-switch-off-thumb-gradientNullnullnull
Description
The shadow of the focused Rating icon.
+
Description
The background gradient of the thumb when the Switch is not checked.
$kendo-rating-icon-focus-selected-shadowStringk-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-switch-off-thumb-hover-bgNullnullnull
Description
The shadow of the focused and selected Rating icon.
+
Description
The background of the thumb when the hovered Switch is not checked.
- -### Scrollview - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - - - - + + + + + + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-scrollview-border-widthNumber1px1px
$kendo-switch-off-thumb-hover-textNullnullnull
Description
The width of the border around the ScrollView.
+
Description
The text color of the thumb when the hovered Switch is not checked.
$kendo-scrollview-font-familyString$kendo-font-familyinherit$kendo-switch-off-thumb-hover-borderNullnullnull
Description
The font family of the ScrollView.
+
Description
The border color of the thumb when the hovered Switch is not checked.
$kendo-scrollview-font-sizeNumber$kendo-font-size-md14px$kendo-switch-off-thumb-hover-gradientNullnullnull
Description
The font size of the ScrollView.
+
Description
The background gradient of the thumb when the hovered Switch is not checked.
$kendo-scrollview-line-heightNumber$kendo-line-height-md1.4285714286$kendo-switch-on-track-bgColor$kendo-color-primary#ff6358
Description
The line height of the ScrollView.
+
Description
The background of the track when the Switch is checked.
$kendo-scrollview-text$kendo-switch-on-track-text Color$kendo-component-text#424242if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-switch-on-track-bg ))white
Description
The text color of the ScrollView.
+
Description
The text color of the track when the Switch is checked.
$kendo-scrollview-bg$kendo-switch-on-track-border Color$kendo-component-bg#ffffff$kendo-switch-on-track-bg#ff6358
Description
The background color of the ScrollView.
+
Description
The border color of the track when the Switch is checked.
$kendo-scrollview-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)$kendo-switch-on-track-gradientNullnullnull
Description
The border color of the ScrollView.
+
Description
The background gradient of the track when the Switch is checked.
$kendo-scrollview-pagebutton-sizeNumber10px10px$kendo-switch-on-track-hover-bgNullnullnull
Description
The size of the ScrollView page button.
+
Description
The background of the track when the hovered Switch is checked.
$kendo-scrollview-pagebutton-bgColor$kendo-button-bg#f5f5f5$kendo-switch-on-track-hover-textNullnullnull
Description
The background color of the ScrollView page button.
+
Description
The text color of the track when the hovered Switch is checked.
$kendo-scrollview-pagebutton-borderColor$kendo-button-borderrgba(0, 0, 0, 0.08)$kendo-switch-on-track-hover-borderNullnullnull
Description
The border color of the ScrollView page button.
+
Description
The border color of the track when the hovered Switch is checked.
$kendo-scrollview-pagebutton-primary-bgColor$kendo-color-primary#ff6358$kendo-switch-on-track-hover-gradientNullnullnull
Description
The primary background color of the ScrollView page button.
+
Description
The background gradient of the track when the hovered Switch is checked.
$kendo-scrollview-pagebutton-primary-borderColor$kendo-color-primary#ff6358$kendo-switch-on-track-focus-bgNullnullnull
Description
The primary border color of the ScrollView page button.
+
Description
The background of the track when the focused Switch is checked.
$kendo-scrollview-pagebutton-shadowList0 0 0 2px rgba(0, 0, 0, .13)0 0 0 2px rgba(0, 0, 0, 0.13)$kendo-switch-on-track-focus-textNullnullnull
Description
The box shadow of the ScrollView page button.
+
Description
The text color of the track when the focused Switch is checked.
$kendo-scrollview-pager-offsetNumber00$kendo-switch-on-track-focus-borderNullnullnull
Description
The offset of the ScrollView pager.
+
Description
The border color of the track when the focused Switch is checked.
$kendo-scrollview-pager-item-spacingNumber20px20px$kendo-switch-on-track-focus-gradientNullnullnull
Description
The spacing between the ScrollView pager items.
+
Description
The background gradient of the track when the focused Switch is checked.
$kendo-scrollview-pager-item-border-widthNumber0px0px$kendo-switch-on-track-focus-ringList2px solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-switch-on-track-border, .25 ))2px solid rgba(255, 99, 88, 0.25)
Description
The border width of the ScrollView pager items.
+
Description
The ring around the track when the focused Switch is checked.
$kendo-scrollview-pager-heightCalculationcalc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + #{$kendo-scrollview-pager-item-spacing * 2} )calc(10px + 0px + 40px)$kendo-switch-on-track-disabled-bgNullnullnull
Description
The height of the ScrollView pager.
+
Description
The background of the track when the disabled Switch is checked.
$kendo-scrollview-arrow-tap-highlight-colorColor$kendo-color-rgba-transparentrgba(0, 0, 0, 0)$kendo-switch-on-track-disabled-textNullnullnull
Description
The text color of the highlight over the tapped ScrollView navigation arrows.
+
Description
The text color of the track when the disabled Switch is checked.
$kendo-scrollview-navigation-colorColorwhitewhite$kendo-switch-on-track-disabled-borderNullnullnull
Description
The color of the ScrollView navigation arrows.
+
Description
The border color of the track when the disabled Switch is checked.
$kendo-scrollview-navigation-icon-shadowListrgba(0, 0, 0, .3) 0 0 15pxrgba(0, 0, 0, 0.3) 0 0 15px$kendo-switch-on-track-disabled-gradientNullnullnull
Description
The box shadow of the ScrollView navigation arrows.
+
Description
The background gradient of the track when the disabled Switch is checked.
$kendo-scrollview-navigation-bg$kendo-switch-on-thumb-bg Colorrgba(0, 0, 0, 0)rgba(0, 0, 0, 0)$kendo-base-bg#fafafa
Description
The background color of the ScrollView navigation.
+
Description
The background of the thumb when the Switch is checked.
$kendo-scrollview-navigation-default-opacityNumber.70.7$kendo-switch-on-thumb-textColor$kendo-base-text#424242
Description
The opacity of the ScrollView navigation.
+
Description
The text color of the thumb when the Switch is checked.
$kendo-scrollview-navigation-hover-opacityNumber11
Description
The hover opacity of the ScrollView navigation.
+ 		$kendo-switch-on-thumb-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The border color of the thumb when the Switch is checked.
$kendo-scrollview-navigation-hover-span-bg$kendo-switch-on-thumb-gradient Null null null
Description
The hover background color of the ScrollView navigation arrows.
+
Description
The background gradient of the thumb when the Switch is checked.
$kendo-scrollview-light-bgColorrgba(255, 255, 255, .4)rgba(255, 255, 255, 0.4)$kendo-switch-on-thumb-hover-bgNullnullnull
Description
The background color of the ScrollView pager in light mode.
+
Description
The background of the thumb when the hovered Switch is checked.
$kendo-scrollview-dark-bgColorrgba(0, 0, 0, .4)rgba(0, 0, 0, 0.4)$kendo-switch-on-thumb-hover-textNullnullnull
Description
The background color of the ScrollView pager in dark mode.
+
Description
The text color of the thumb when the hovered Switch is checked.
$kendo-scrollview-transition-durationNumber.3s0.3s$kendo-switch-on-thumb-hover-borderNullnullnull
Description
The duration of the ScrollView transition.
+
Description
The border color of the thumb when the hovered Switch is checked.
$kendo-scrollview-transition-timing-functionStringease-in-outease-in-out$kendo-switch-on-thumb-hover-gradientNullnullnull
Description
The timing function of the ScrollView transition.
+
Description
The background gradient of the thumb when the hovered Switch is checked.
-### Skeleton +### Table @@ -14693,1406 +17407,1422 @@ The following table lists the available variables for customizing the Default th - - - - - - - - - - + - - + + - - + - - + + - - + - - + + - - -
$kendo-skeleton-text-transformStringscale( 1, .6 )scale(1, 0.6)
Description
The transform scale of the Skeleton text.
-
$kendo-skeleton-text-border-radius$kendo-table-border-width Number$kendo-border-radius-md4px1px1px
Description
The border radius of the Skeleton text.
+
Description
The width of the table border.
$kendo-skeleton-rect-border-radius$kendo-table-cell-vertical-border-width Number001px1px
Description
The border radius of the rectangular Skeleton.
+
Description
The width of vertical border of table cells.
$kendo-skeleton-circle-border-radius$kendo-table-cell-horizontal-border-width Number9999px9999px0px0px
Description
The border radius of the circular Skeleton.
+
Description
The width of horizontal border of table cells.
- -### Split-button - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-split-button-focus-shadowList$kendo-button-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)
$kendo-table-font-sizeNullnullnull
Description
The focus shadow of the SplitButton.
+
Description
The font size of the table if no size is specified.
$kendo-split-button-arrow-padding-xNumber$kendo-button-padding-y4px$kendo-table-line-heightNullnullnull
Description
The horizontal padding of the arrow Button.
+
Description
The line-height of the table if no size is specified.
$kendo-split-button-sm-arrow-padding-xNumber$kendo-button-sm-padding-y2px$kendo-table-cell-padding-xNullnullnull
Description
The horizontal padding of the small arrow Button.
+
Description
The horizontal padding of the cells in the table if no size is specified.
$kendo-split-button-md-arrow-padding-xNumber$kendo-button-md-padding-y4px$kendo-table-cell-padding-yNullnullnull
Description
The horizontal padding of the medium arrow Button.
+
Description
The vertical padding of the cells in the table if no size is specified.
$kendo-split-button-lg-arrow-padding-xNumber$kendo-button-lg-padding-y8px$kendo-table-sizesMap( + sm: ( + font-size: $kendo-font-size-md, + line-height: $kendo-line-height-md, + cell-padding-x: $kendo-table-sm-cell-padding-x, + cell-padding-y: $kendo-table-sm-cell-padding-y + ), + md: ( + font-size: $kendo-font-size-md, + line-height: $kendo-line-height-md, + cell-padding-x: $kendo-table-md-cell-padding-x, + cell-padding-y: $kendo-table-md-cell-padding-y + ), + lg: ( + font-size: $kendo-font-size-md, + line-height: $kendo-line-height-md, + cell-padding-x: $kendo-table-lg-cell-padding-x, + cell-padding-y: $kendo-table-lg-cell-padding-y + ) +)(sm: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 8px, cell-padding-y: 4px), md: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 12px, cell-padding-y: 8px), lg: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 8px, cell-padding-y: 10px))
Description
The horizontal padding of the large arrow Button.
+
Description
The sizes of the table.
$kendo-split-button-arrow-padding-yNumber$kendo-button-padding-y4px$kendo-table-bgColor$kendo-component-bg#ffffff
Description
The vertical padding of the arrow Button.
+
Description
Background color of tables.
$kendo-split-button-sm-arrow-padding-yNumber$kendo-button-sm-padding-y2px$kendo-table-textColor$kendo-component-text#424242
Description
The vertical padding of the small arrow Button.
+
Description
Text color of tables.
$kendo-split-button-md-arrow-padding-yNumber$kendo-button-md-padding-y4px$kendo-table-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The vertical padding of the medium arrow Button.
+
Description
Border color of tables.
$kendo-split-button-lg-arrow-padding-yNumber$kendo-button-lg-padding-y8px$kendo-table-header-bgColor$kendo-component-header-bg#fafafa
Description
The vertical padding of the large arrow Button.
+
Description
Background color of table headers.
- -### Switch - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - + - - + - - + + - - - - - + + + + - - + - - + - - - - - + + + + - - + - - + - - + - - + - - + - - + - - + + - - - - - + + + + - - + - - + - - - + +
NameTypeDefault valueComputed value
$kendo-switch-font-familyNullnullnull
$kendo-table-header-textColor$kendo-component-header-text#424242
Description
The font family of the Switch.
+
Description
Text color of table headers.
$kendo-switch-track-border-widthNumber1px1px$kendo-table-header-borderColor$kendo-component-header-borderrgba(0, 0, 0, 0.08)
Description
The border width of the Switch track.
+
Description
Border color of table headers.
$kendo-switch-thumb-border-widthNumber1px1px$kendo-table-header-gradientNull$kendo-component-header-gradientnull
Description
The border width of the Switch thumb.
+
Description
Gradient of table headers.
$kendo-switch-label-text-transformStringuppercaseuppercase$kendo-table-footer-bgColor$kendo-table-header-bg#fafafa
Description
The text transform of the Switch label.
+
Description
Background color of table footers.
$kendo-switch-label-displayStringinlineinline$kendo-table-footer-textColor$kendo-table-header-text#424242
Description
The display of the Switch label.
+
Description
Text color of table footers.
$kendo-switch-sizesMap( - sm: ( font-size: 10px, track-width: 52px, track-height: 26px, thumb-width: 26px, thumb-height: 26px, thumb-offset: 0px, label-offset: 4px ), - md: ( font-size: 10px, track-width: 60px, track-height: 30px, thumb-width: 30px, thumb-height: 30px, thumb-offset: 0px, label-offset: 6px ), - lg: ( font-size: 10px, track-width: 68px, track-height: 34px, thumb-width: 34px, thumb-height: 34px, thumb-offset: 0px, label-offset: 8px ) -)(sm: (font-size: 10px, track-width: 52px, track-height: 26px, thumb-width: 26px, thumb-height: 26px, thumb-offset: 0px, label-offset: 4px), md: (font-size: 10px, track-width: 60px, track-height: 30px, thumb-width: 30px, thumb-height: 30px, thumb-offset: 0px, label-offset: 6px), lg: (font-size: 10px, track-width: 68px, track-height: 34px, thumb-width: 34px, thumb-height: 34px, thumb-offset: 0px, label-offset: 8px))$kendo-table-footer-borderColor$kendo-table-header-borderrgba(0, 0, 0, 0.08)
Description
The map with the different Switch sizes.
+
Description
Border color of table footers.
$kendo-switch-off-track-bg$kendo-table-group-row-bg Color$kendo-component-bg#ffffff$kendo-table-header-bg#fafafa
Description
The background of the track when the Switch is not checked.
+
Description
Background color of group rows in table.
$kendo-switch-off-track-text$kendo-table-group-row-text Color$kendo-component-text$kendo-table-header-text #424242
Description
The text color of the track when the Switch is not checked.
+
Description
Text color of group rows in table.
$kendo-switch-off-track-border$kendo-table-group-row-border Colorif($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-switch-off-track-bg, 8% ))#ebebeb$kendo-table-header-borderrgba(0, 0, 0, 0.08)
Description
The border color of the track when the Switch is not checked.
+
Description
Border color of group rows in table.
$kendo-switch-off-track-gradientNullnullnull$kendo-table-alt-row-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-legacy( $kendo-table-bg ), .04 ))rgba(0, 0, 0, 0.04)
Description
The background gradient of the track when the Switch is not checked.
+
Description
Background color of alternating rows in table.
$kendo-switch-off-track-hover-bg$kendo-table-alt-row-text Null null null
Description
The background of the track when the hovered Switch is not checked.
+
Description
Text color of alternating rows in table.
$kendo-switch-off-track-hover-text$kendo-table-alt-row-border Null null null
Description
The text color of the track when the hovered Switch is not checked.
+
Description
Border color of alternating rows in table.
$kendo-switch-off-track-hover-borderNullnullnull$kendo-table-hover-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .11 ), k-color-darken($kendo-table-bg, 7%))#ededed
Description
The border color of the track when the hovered Switch is not checked.
+
Description
Background color of hovered rows in table.
$kendo-switch-off-track-hover-gradient$kendo-table-hover-text Null null null
Description
The background gradient of the track when the hovered Switch is not checked.
+
Description
Text color of hovered rows in table.
$kendo-switch-off-track-focus-bg$kendo-table-hover-border Null null null
Description
The background of the track when the focused Switch is not checked.
+
Description
Border color of hovered rows in table.
$kendo-switch-off-track-focus-text$kendo-table-focus-bg Null null null
Description
The text color of the track when the focused Switch is not checked.
+
Description
Background color of focused rows in table.
$kendo-switch-off-track-focus-border$kendo-table-focus-text Null null null
Description
The border color of the track when the focused Switch is not checked.
+
Description
Text color of focused rows in table.
$kendo-switch-off-track-focus-gradient$kendo-table-focus-border Null null null
Description
The background gradient of the track when the focused Switch is not checked.
+
Description
Border color of focused rows in table.
$kendo-switch-off-track-focus-ring$kendo-table-focus-shadow List2px solid if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 ))2px solid rgba(0, 0, 0, 0.08)$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The ring around the track when the focused Switch is not checked.
+
Description
Box shadow of focused rows in table.
$kendo-switch-off-track-disabled-bgNullnullnull$kendo-table-selected-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25))rgba(255, 99, 88, 0.25)
Description
The background of the track when the disabled Switch is not checked.
+
Description
Background color of selected rows in table.
$kendo-switch-off-track-disabled-text$kendo-table-selected-text Null null null
Description
The text color of the track when the disabled Switch is not checked.
+
Description
Text color of selected rows in table.
$kendo-switch-off-track-disabled-border$kendo-table-selected-border Null null null
Description
The border color of the track when the disabled Switch is not checked.
+
Description
Border color of selected rows in table.
$kendo-switch-off-track-disabled-gradient
+ +### Tabstrip + + + + + + + + + + + + + + + + + + - - + - - + + - - + - - + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - + - - + - - + - - - - - + + + + - - + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-tabstrip-bg Null null null
Description
The background gradient of the track when the disabled Switch is not checked.
+
Description
Background color of tabstrip component
$kendo-switch-off-thumb-bg$kendo-tabstrip-text Color$kendo-base-bg#fafafa$kendo-component-text#424242
Description
The background of the thumb when the Switch is not checked.
+
Description
Text color of tabstrip component
$kendo-switch-off-thumb-text$kendo-tabstrip-border Color$kendo-base-text#424242$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The text color of the thumb when the Switch is not checked.
+
Description
Border color of tabstrip component
$kendo-switch-off-thumb-border$kendo-tabstrip-item-padding-xNumberk-map-get( $kendo-spacing, 3 )12px
Description
Horizontal padding of tabs
+
$kendo-tabstrip-item-padding-yNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
Vertical padding of tabs
+
$kendo-tabstrip-item-border-widthNumber1px1px
Description
Width of border around tabs
+
$kendo-tabstrip-item-border-radiusNumber$kendo-border-radius-md4px
Description
Border radius of tabs
+
$kendo-tabstrip-item-gapNumber00
Description
Spacing between tabs
+
$kendo-tabstrip-item-bgNullnullnull
Description
Background color of tabs
+
$kendo-tabstrip-item-text Color$kendo-base-borderrgba(0, 0, 0, 0.08)$kendo-link-text#ff6358
Description
The border color of the thumb when the Switch is not checked.
+
Description
Text color of tabs
$kendo-switch-off-thumb-gradient$kendo-tabstrip-item-border Null null null
Description
The background gradient of the thumb when the Switch is not checked.
+
Description
Border color of tabs
$kendo-switch-off-thumb-hover-bg$kendo-tabstrip-item-gradient Null null null
Description
The background of the thumb when the hovered Switch is not checked.
+
Description
Background gradient of tabs
$kendo-switch-off-thumb-hover-text$kendo-tabstrip-item-hover-bg Null null null
Description
The text color of the thumb when the hovered Switch is not checked.
+
Description
Background color of hovered tabs
$kendo-switch-off-thumb-hover-borderNullnullnull$kendo-tabstrip-item-hover-textColor$kendo-link-hover-text#d6534a
Description
The border color of the thumb when the hovered Switch is not checked.
+
Description
Text color of hovered tabs
$kendo-switch-off-thumb-hover-gradient$kendo-tabstrip-item-hover-border Null null null
Description
The background gradient of the thumb when the hovered Switch is not checked.
+
Description
Border color of hovered tabs
$kendo-switch-on-track-bgColor$kendo-color-primary#ff6358$kendo-tabstrip-item-hover-gradientNullnullnull
Description
The background of the track when the Switch is checked.
+
Description
Background gradient of hovered tabs
$kendo-switch-on-track-text$kendo-tabstrip-item-selected-bg Colorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-switch-on-track-bg ))white$kendo-component-bg#ffffff
Description
The text color of the track when the Switch is checked.
+
Description
Background color of selected tabs
$kendo-switch-on-track-border$kendo-tabstrip-item-selected-text Color$kendo-switch-on-track-bg#ff6358$kendo-component-text#424242
Description
The border color of the track when the Switch is checked.
+
Description
Text color of selected tabs
$kendo-switch-on-track-gradientNullnullnull$kendo-tabstrip-item-selected-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The background gradient of the track when the Switch is checked.
+
Description
Border color of selected tabs
$kendo-switch-on-track-hover-bg$kendo-tabstrip-item-selected-gradient Null null null
Description
The background of the track when the hovered Switch is checked.
+
Description
Background gradient of selected tabs
$kendo-switch-on-track-hover-textNullnullnull$kendo-tabstrip-content-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The text color of the track when the hovered Switch is checked.
+
Description
Horizontal padding of tabstrip content
$kendo-switch-on-track-hover-borderNullnullnull$kendo-tabstrip-content-padding-yNumberk-map-get( $kendo-spacing, 4 )16px
Description
The border color of the track when the hovered Switch is checked.
+
Description
Vertical padding of tabstrip content
$kendo-switch-on-track-hover-gradientNullnullnull$kendo-tabstrip-content-border-widthNumber1px1px
Description
The background gradient of the track when the hovered Switch is checked.
+
Description
Width of border around tabstrip content
$kendo-switch-on-track-focus-bgNullnullnull$kendo-tabstrip-content-bgColor$kendo-component-bg#ffffff
Description
The background of the track when the focused Switch is checked.
+
Description
Background color of tabstrip content
$kendo-switch-on-track-focus-textNullnullnull$kendo-tabstrip-content-textColor$kendo-component-text#424242
Description
The text color of the track when the focused Switch is checked.
+
Description
Text color of tabstrip content
$kendo-switch-on-track-focus-borderNullnullnull$kendo-tabstrip-content-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the track when the focused Switch is checked.
+
Description
Border color of tabstrip content
$kendo-switch-on-track-focus-gradientNullnullnull$kendo-tabstrip-content-focus-borderColor$kendo-component-text#424242
Description
The background gradient of the track when the focused Switch is checked.
+
Description
Border color of tabstrip focused content
$kendo-switch-on-track-focus-ringList2px solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-switch-on-track-border, .25 ))2px solid rgba(255, 99, 88, 0.25)
+ +### Taskboard + + + + + + + + + + + + + + + + + + + + + - - + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + + + + + + + + + + - - + - - + - - -
NameTypeDefault valueComputed value
$kendo-taskboard-spacerNumberk-map-get( $kendo-spacing, 4 )16px
Description
The ring around the track when the focused Switch is checked.
+
Description
The spacing index of the TaskBoard.
$kendo-switch-on-track-disabled-bg$kendo-taskboard-padding-y Null null null
Description
The background of the track when the disabled Switch is checked.
+
Description
The vertical padding of the TaskBoard.
$kendo-switch-on-track-disabled-text$kendo-taskboard-padding-x Null null null
Description
The text color of the track when the disabled Switch is checked.
+
Description
The horizontal of the TaskBoard.
$kendo-switch-on-track-disabled-borderNullnullnull$kendo-taskboard-font-familyString$kendo-font-familyinherit
Description
The border color of the track when the disabled Switch is checked.
+
Description
The font family of the TaskBoard.
$kendo-switch-on-track-disabled-gradientNullnullnull$kendo-taskboard-font-sizeNumber$kendo-font-size-md14px
Description
The background gradient of the track when the disabled Switch is checked.
+
Description
The font size of the TaskBoard.
$kendo-switch-on-thumb-bgColor$kendo-base-bg#fafafa$kendo-taskboard-line-heightNumber$kendo-line-height-md1.4285714286
Description
The background of the thumb when the Switch is checked.
+
Description
The line height of the TaskBoard.
$kendo-switch-on-thumb-textColor$kendo-base-text#424242$kendo-taskboard-bgNullnullnull
Description
The text color of the thumb when the Switch is checked.
+
Description
The background color of the TaskBoard.
$kendo-switch-on-thumb-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)$kendo-taskboard-textNullnullnull
Description
The border color of the thumb when the Switch is checked.
+
Description
The text color of the TaskBoard.
$kendo-switch-on-thumb-gradient$kendo-taskboard-border Null null null
Description
The background gradient of the thumb when the Switch is checked.
+
Description
The border color of the TaskBoard.
$kendo-switch-on-thumb-hover-bgNullnullnull$kendo-taskboard-toolbar-padding-yNumber$kendo-taskboard-spacer16px
Description
The background of the thumb when the hovered Switch is checked.
+
Description
The vertical padding of the TaskBoard Toolbar.
$kendo-switch-on-thumb-hover-text$kendo-taskboard-toolbar-padding-xNumber$kendo-taskboard-toolbar-padding-y16px
Description
The horizontal padding of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-bg Null null null
Description
The text color of the thumb when the hovered Switch is checked.
+
Description
The background color of the TaskBoard Toolbar.
$kendo-switch-on-thumb-hover-border$kendo-taskboard-toolbar-text Null null null
Description
The border color of the thumb when the hovered Switch is checked.
+
Description
The text color of the TaskBoard Toolbar.
$kendo-switch-on-thumb-hover-gradient$kendo-taskboard-toolbar-border Null null null
Description
The background gradient of the thumb when the hovered Switch is checked.
+
Description
The border color of the TaskBoard Toolbar.
- -### Table - - - - - - - - - - - - - - - - - - - - - - - + + + + + + - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + - - - - - + + + + - - - - - + + + + - - + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-table-border-widthNumber1px1px
Description
The width of the table border.
+ 		$kendo-taskboard-toolbar-gradientNullnullnull
Description
The gradient of the TaskBoard Toolbar.
$kendo-table-cell-vertical-border-width$kendo-taskboard-content-padding-y Number1px1px$kendo-taskboard-spacer16px
Description
The width of vertical border of table cells.
+
Description
The vertical padding of the TaskBoard content.
$kendo-table-cell-horizontal-border-width$kendo-taskboard-content-padding-x Number0px0px$kendo-taskboard-content-padding-y16px
Description
The width of horizontal border of table cells.
+
Description
The horizontal padding of the TaskBoard content.
$kendo-table-font-sizeNullnullnull$kendo-taskboard-column-container-spacing-yNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The font size of the table if no size is specified.
+
Description
The vertical spacing of the TaskBoard column container.
$kendo-table-line-heightNullnullnull$kendo-taskboard-column-container-padding-yNumber0px0px
Description
The line-height of the table if no size is specified.
+
Description
The vertical padding of the TaskBoard column container.
$kendo-table-cell-padding-xNullnullnull$kendo-taskboard-column-container-padding-xNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The horizontal padding of the cells in the table if no size is specified.
+
Description
The horizontal padding of the TaskBoard column container.
$kendo-table-cell-padding-yNullnullnull$kendo-taskboard-columns-container-gapNumber$kendo-taskboard-spacer16px
Description
The vertical padding of the cells in the table if no size is specified.
+
Description
The spacing of the TaskBoard columns container.
$kendo-table-sizesMap( - sm: ( - font-size: $kendo-font-size-md, - line-height: $kendo-line-height-md, - cell-padding-x: $kendo-table-sm-cell-padding-x, - cell-padding-y: $kendo-table-sm-cell-padding-y - ), - md: ( - font-size: $kendo-font-size-md, - line-height: $kendo-line-height-md, - cell-padding-x: $kendo-table-md-cell-padding-x, - cell-padding-y: $kendo-table-md-cell-padding-y - ), - lg: ( - font-size: $kendo-font-size-md, - line-height: $kendo-line-height-md, - cell-padding-x: $kendo-table-lg-cell-padding-x, - cell-padding-y: $kendo-table-lg-cell-padding-y - ) -)(sm: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 8px, cell-padding-y: 4px), md: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 12px, cell-padding-y: 8px), lg: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 8px, cell-padding-y: 10px))$kendo-taskboard-column-widthNumber320px320px
Description
The sizes of the table.
+
Description
The default width of the TaskBoard column.
$kendo-table-bgColor$kendo-component-bg#ffffff$kendo-taskboard-column-border-widthNumber1px1px
Description
Background color of tables.
+
Description
The border width of the TaskBoard column.
$kendo-table-textColor$kendo-component-text#424242$kendo-taskboard-column-border-radiusNumber$kendo-border-radius-md4px
Description
Text color of tables.
+
Description
The border radius of the TaskBoard column.
$kendo-table-border$kendo-taskboard-column-bg Color$kendo-component-borderrgba(0, 0, 0, 0.08)$kendo-base-bg#fafafa
Description
Border color of tables.
+
Description
The background color of the TaskBoard column.
$kendo-table-header-bgColor$kendo-component-header-bg#fafafa$kendo-taskboard-column-textNullnullnull
Description
Background color of table headers.
+
Description
The text color of the TaskBoard column.
$kendo-table-header-text$kendo-taskboard-column-border Color$kendo-component-header-text#424242transparenttransparent
Description
Text color of table headers.
+
Description
The border color of the TaskBoard column.
$kendo-table-header-borderColor$kendo-component-header-borderrgba(0, 0, 0, 0.08)$kendo-taskboard-column-focus-bgNullnullnull
Description
Border color of table headers.
+
Description
The background color of the focused TaskBoard column.
$kendo-table-header-gradient$kendo-taskboard-column-focus-text Null$kendo-component-header-gradientnull null
Description
Gradient of table headers.
+
Description
The text color of the focused TaskBoard column.
$kendo-table-footer-bg$kendo-taskboard-column-focus-border Color$kendo-table-header-bg#fafafaif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 ))rgba(0, 0, 0, 0.264)
Description
Background color of table footers.
+
Description
The border color of the focused TaskBoard column.
$kendo-table-footer-textColor$kendo-table-header-text#424242$kendo-taskboard-column-header-padding-yNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
Text color of table footers.
+
Description
The vertical padding of the TaskBoard column header.
$kendo-table-footer-borderColor$kendo-table-header-borderrgba(0, 0, 0, 0.08)$kendo-taskboard-column-header-padding-xNumber$kendo-taskboard-column-header-padding-y8px
Description
Border color of table footers.
+
Description
The horizontal padding of the TaskBoard column header.
$kendo-table-group-row-bgColor$kendo-table-header-bg#fafafa$kendo-taskboard-column-header-gapNumberk-math-div( $kendo-taskboard-spacer, 4 )4px
Description
Background color of group rows in table.
+
Description
The spacing of the TaskBoard column header.
$kendo-table-group-row-textColor$kendo-table-header-text#424242$kendo-taskboard-column-header-actions-gapNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
Text color of group rows in table.
+
Description
The spacing of the TaskBoard column header actions.
$kendo-table-group-row-borderColor$kendo-table-header-borderrgba(0, 0, 0, 0.08)$kendo-taskboard-column-header-font-weightNumber500500
Description
Border color of group rows in table.
+
Description
The font weight of the TaskBoard column header.
$kendo-table-alt-row-bg$kendo-taskboard-column-header-text Colorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-legacy( $kendo-table-bg ), .04 ))rgba(0, 0, 0, 0.04)$kendo-component-header-text#424242
Description
Background color of alternating rows in table.
+
Description
The text color of the TaskBoard column header.
$kendo-table-alt-row-text$kendo-taskboard-column-cards-padding-y Null null null
Description
Text color of alternating rows in table.
+
Description
The vertical padding of the TaskBoard column Card wrapper.
$kendo-table-alt-row-border$kendo-taskboard-column-cards-padding-x Null null null
Description
Border color of alternating rows in table.
+
Description
The horizontal padding of the TaskBoard column Card wrapper.
$kendo-table-hover-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .11 ), k-color-darken($kendo-table-bg, 7%))#ededed$kendo-taskboard-column-cards-gapNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
Background color of hovered rows in table.
+
Description
The spacing of the TaskBoard column Card wrapper.
$kendo-table-hover-textNullnullnull$kendo-taskboard-pane-widthNumber$kendo-taskboard-column-width320px
Description
Text color of hovered rows in table.
+
Description
The default width of the TaskBoard pane.
$kendo-table-hover-border$kendo-taskboard-pane-padding-y Null null null
Description
Border color of hovered rows in table.
+
Description
The vertical padding of the TaskBoard pane.
$kendo-table-focus-bg$kendo-taskboard-pane-padding-x Null null null
Description
Background color of focused rows in table.
+
Description
The horizontal padding of the TaskBoard pane.
$kendo-table-focus-textNullnullnull$kendo-taskboard-pane-border-widthNumber1px1px
Description
Text color of focused rows in table.
+
Description
The border width of the TaskBoard pane.
$kendo-table-focus-borderNullnullnull$kendo-taskboard-pane-bgColor$kendo-component-bg#ffffff
Description
Border color of focused rows in table.
+
Description
The background color of the TaskBoard pane.
$kendo-table-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)$kendo-taskboard-pane-textColor$kendo-component-text#424242
Description
Box shadow of focused rows in table.
+
Description
The text color of the TaskBoard pane.
$kendo-table-selected-bg$kendo-taskboard-pane-border Colorif($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25))rgba(255, 99, 88, 0.25)$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
Background color of selected rows in table.
+
Description
The border color of the TaskBoard pane.
$kendo-table-selected-textNullnullnull$kendo-taskboard-pane-header-padding-yNumber( $kendo-taskboard-spacer * .75 )12px
Description
Text color of selected rows in table.
+
Description
The vertical padding of the TaskBoard pane header.
$kendo-table-selected-borderNullnullnull$kendo-taskboard-pane-header-padding-xNumber$kendo-taskboard-spacer16px
Description
Border color of selected rows in table.
+
Description
The horizontal padding of the TaskBoard pane header.
- -### Tabstrip - - - - - - - - - - - - - - - - - - - - - + + + + + - - + - + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - @@ -18097,6 +20827,126 @@ The following table lists the available variables for customizing the Default th
NameTypeDefault valueComputed value
$kendo-tabstrip-bgNullnullnull
$kendo-taskboard-pane-header-font-weightNumber500500
Description
Background color of tabstrip component
+
Description
The font weight of the TaskBoard pane header.
$kendo-tabstrip-text$kendo-taskboard-pane-header-text Color$kendo-component-text$kendo-component-header-text #424242
Description
Text color of tabstrip component
+
Description
The text color of the TaskBoard pane header.
$kendo-tabstrip-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)$kendo-taskboard-pane-content-padding-yNumber0px0px
Description
Border color of tabstrip component
+
Description
The vertical padding of the TaskBoard pane content.
$kendo-tabstrip-item-padding-x$kendo-taskboard-pane-content-padding-x Numberk-map-get( $kendo-spacing, 3 )12px$kendo-taskboard-spacer16px
Description
Horizontal padding of tabs
+
Description
The horizontal padding of the TaskBoard pane content.
$kendo-tabstrip-item-padding-y$kendo-taskboard-pane-actions-padding-y Numberk-map-get( $kendo-spacing, 1.5 )6px( $kendo-taskboard-spacer * .75 )12px
Description
Vertical padding of tabs
+
Description
The vertical padding of the TaskBoard pane actions.
$kendo-tabstrip-item-border-width$kendo-taskboard-pane-actions-padding-x Number1px1px$kendo-taskboard-spacer16px
Description
Width of border around tabs
+
Description
The horizontal padding of the TaskBoard pane actions.
$kendo-tabstrip-item-border-radius$kendo-taskboard-card-padding-y Number$kendo-border-radius-md4px$kendo-taskboard-spacer16px
Description
Border radius of tabs
+
Description
The vertical padding of the TaskBoard Card.
$kendo-tabstrip-item-gap$kendo-taskboard-card-padding-x Number00$kendo-taskboard-card-padding-y16px
Description
Spacing between tabs
+
Description
The horizontal padding of the TaskBoard Card.
$kendo-tabstrip-item-bgNullnullnull$kendo-taskboard-card-border-widthNumber$kendo-card-border-width1px
Description
Background color of tabs
+
Description
The border width of the TaskBoard Card.
$kendo-tabstrip-item-textColor$kendo-link-text#ff6358$kendo-taskboard-card-border-radiusNumber$kendo-border-radius-md4px
Description
Text color of tabs
+
Description
The border radius of the TaskBoard Card.
$kendo-tabstrip-item-border$kendo-taskboard-card-shadow Nullnull$kendo-card-shadow null
Description
Border color of tabs
+
Description
The shadow of the TaskBoard Card.
$kendo-tabstrip-item-gradientNullnullnull$kendo-taskboard-card-bgColor$kendo-card-bg#ffffff
Description
Background gradient of tabs
+
Description
The background color of the TaskBoard Card.
$kendo-tabstrip-item-hover-bgNullnullnull$kendo-taskboard-card-textColor$kendo-card-text#424242
Description
Background color of hovered tabs
+
Description
The text color of the TaskBoard Card.
$kendo-tabstrip-item-hover-text$kendo-taskboard-card-border Color$kendo-link-hover-text#d6534a$kendo-card-borderrgba(0, 0, 0, 0.08)
Description
Text color of hovered tabs
+
Description
The border color of the TaskBoard Card.
$kendo-tabstrip-item-hover-borderNullnullnull$kendo-taskboard-card-category-border-widthNumber4px4px
Description
Border color of hovered tabs
+
Description
The border width of the TaskBoard Card category.
$kendo-tabstrip-item-hover-gradientNullnullnull$kendo-taskboard-card-hover-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% ))rgba(0, 0, 0, 0.172)
Description
Background gradient of hovered tabs
+
Description
The border color of the hovered TaskBoard Card.
$kendo-tabstrip-item-selected-bg$kendo-taskboard-card-focus-border Color$kendo-component-bg#ffffffif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% ))rgba(0, 0, 0, 0.2456)
Description
Background color of selected tabs
+
Description
The border color of the focused TaskBoard Card.
$kendo-tabstrip-item-selected-textColor$kendo-component-text#424242$kendo-taskboard-card-focus-shadowStringnonenone
Description
Text color of selected tabs
+
Description
The shadow of the focused TaskBoard Card.
$kendo-tabstrip-item-selected-border$kendo-taskboard-card-selected-border Color$kendo-component-borderrgba(0, 0, 0, 0.08)if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary-lighter, 5 ))#ffb0ab
Description
Border color of selected tabs
+
Description
The border of the selected TaskBoard Card.
$kendo-tabstrip-item-selected-gradientNullnullnull$kendo-taskboard-card-selected-shadowStringnonenone
Description
Background gradient of selected tabs
+
Description
The shadow of the selected TaskBoard Card.
$kendo-tabstrip-content-padding-xNumberk-map-get( $kendo-spacing, 4 )16px$kendo-taskboard-card-header-textColor$kendo-color-primary#ff6358
Description
Horizontal padding of tabstrip content
+
Description
The text color of the TaskBoard Card header text.
$kendo-tabstrip-content-padding-yNumberk-map-get( $kendo-spacing, 4 )16px$kendo-taskboard-card-header-hover-textColorif($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker)#d6534a
Description
Vertical padding of tabstrip content
+
Description
The text color of the hovered TaskBoard Card header text.
$kendo-tabstrip-content-border-widthNumber1px1px$kendo-taskboard-card-header-focus-textColorif($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker)#d6534a
Description
Width of border around tabstrip content
+
Description
The text color of the focused TaskBoard Card header text.
$kendo-tabstrip-content-bgColor$kendo-component-bg#ffffff$kendo-taskboard-drag-placeholder-border-widthNumber1px1px
Description
Background color of tabstrip content
+
Description
The border width of the TaskBoard Card placeholder.
$kendo-tabstrip-content-textColor$kendo-component-text#424242$kendo-taskboard-drag-placeholder-border-radiusNumber$kendo-taskboard-card-border-radius4px
Description
Text color of tabstrip content
+
Description
The border radius of the TaskBoard Card placeholder.
$kendo-tabstrip-content-border$kendo-taskboard-drag-placeholder-bg Color$kendo-component-borderrgba(0, 0, 0, 0.08)rgba(255, 255, 255, .2)rgba(255, 255, 255, 0.2)
Description
Border color of tabstrip content
+
Description
The background color of the TaskBoard Card placeholder.
$kendo-tabstrip-content-focus-border$kendo-taskboard-drag-placeholder-border Color$kendo-component-text#424242$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
Border color of tabstrip focused content
+
Description
The border color of the TaskBoard Card placeholder.
+### Wizard + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-wizard-padding-xNumber$kendo-padding-md-x * 2.520px
Description
The horizontal padding of the Wizard.
+
$kendo-wizard-padding-yNumber$kendo-wizard-padding-x20px
Description
The vertical padding of the Wizard.
+
$kendo-wizard-content-padding-xNumber$kendo-padding-md-x * 432px
Description
The horizontal padding of the Wizard content.
+
$kendo-wizard-content-padding-yNumber$kendo-padding-md-y * 832px
Description
The vertical padding of the Wizard content.
+
$kendo-wizard-buttons-margin-xNumber10px10px
Description
The horizontal margin of the Wizard Button container.
+
$kendo-wizard-border-widthNumber0px0px
Description
The border width of the Wizard.
+
$kendo-wizard-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Wizard.
+
$kendo-wizard-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the Wizard.
+
$kendo-wizard-font-familyString$kendo-font-familyinherit
Description
The font family of the Wizard.
+
$kendo-wizard-step-focus-borderColor#656565#656565
Description
The outline of the focused Wizard step.
+
+ diff --git a/packages/fluent/docs/customization-chat.md b/packages/fluent/docs/customization-chat.md index 74f7ab854b0..7a191b37723 100644 --- a/packages/fluent/docs/customization-chat.md +++ b/packages/fluent/docs/customization-chat.md @@ -34,7 +34,7 @@ The following table lists the available variables for customization. -
Description
The box shadow transition of the chat.
+
Description
The box shadow transition of the Chat.
@@ -44,7 +44,7 @@ The following table lists the available variables for customization. -
Description
The hover text of links in the bubble of the chat.
+
Description
The hover text color of the Chat bubble links.
@@ -54,7 +54,7 @@ The following table lists the available variables for customization. -
Description
The text of links in the bubble of the chat.
+
Description
The text color of the Chat bubble links.
@@ -64,7 +64,7 @@ The following table lists the available variables for customization. -
Description
The horizontal padding of the chat.
+
Description
The horizontal padding of the Chat.
@@ -74,7 +74,7 @@ The following table lists the available variables for customization. -
Description
The vertical padding of the chat.
+
Description
The vertical padding of the Chat.
@@ -84,7 +84,7 @@ The following table lists the available variables for customization. -
Description
the width of the chat.
+
Description
The width of the Chat.
@@ -94,7 +94,7 @@ The following table lists the available variables for customization. -
Description
The height of the chat.
+
Description
The height of the Chat.
@@ -104,7 +104,7 @@ The following table lists the available variables for customization. -
Description
The border width of the chat.
+
Description
The border width of the Chat.
@@ -114,7 +114,7 @@ The following table lists the available variables for customization. -
Description
The font family of the chat.
+
Description
The font family of the Chat.
@@ -124,7 +124,7 @@ The following table lists the available variables for customization. -
Description
The font size of the chat.
+
Description
The font size of the Chat.
@@ -134,7 +134,7 @@ The following table lists the available variables for customization. -
Description
The line height of the chat.
+
Description
The line height of the Chat.
@@ -144,7 +144,7 @@ The following table lists the available variables for customization. -
Description
The size of the chat typeing indicator dot in the chat.
+
Description
The size of the Chat typing indicator dot.
@@ -154,7 +154,7 @@ The following table lists the available variables for customization. -
Description
The spacing of the chat typeing indicator dot in the chat.
+
Description
The spacing of the Chat typing indicator dot.
@@ -164,7 +164,7 @@ The following table lists the available variables for customization. -
Description
The horizontal spacing between items of the chat.
+
Description
The horizontal spacing between items of the Chat.
@@ -174,7 +174,7 @@ The following table lists the available variables for customization. -
Description
The vertical spacing between items of the chat.
+
Description
The vertical spacing between items of the Chat.
@@ -184,7 +184,7 @@ The following table lists the available variables for customization. -
Description
The horizontal padding of message list of the chat.
+
Description
The horizontal padding of the Chat message list.
@@ -194,7 +194,7 @@ The following table lists the available variables for customization. -
Description
The vertical padding of message list of the chat.
+
Description
The vertical padding of the Chat message list.
@@ -204,7 +204,7 @@ The following table lists the available variables for customization. -
Description
The spacing of message list of the chat.
+
Description
The spacing of the Chat message list.
@@ -214,7 +214,7 @@ The following table lists the available variables for customization. -
Description
The font size of the timestap.
+
Description
The font size of the Chat timestamp.
@@ -224,7 +224,7 @@ The following table lists the available variables for customization. -
Description
The line height of the timestamp.
+
Description
The line height of the Chat timestamp.
@@ -234,7 +234,7 @@ The following table lists the available variables for customization. -
Description
the text transform of the timestamp.
+
Description
The text transform of the Chat timestamp.
@@ -244,7 +244,7 @@ The following table lists the available variables for customization. -
Description
The text of the timestamp.
+
Description
The text color of the Chat timestamp.
@@ -254,7 +254,7 @@ The following table lists the available variables for customization. -
Description
the background of the timestamp.
+
Description
The background color of the Chat timestamp.
@@ -264,7 +264,7 @@ The following table lists the available variables for customization. -
Description
The horizontal padding of the bubble message.
+
Description
The horizontal padding of the Chat bubble message.
@@ -274,7 +274,7 @@ The following table lists the available variables for customization. -
Description
The vertical padding of the bubble message.
+
Description
The vertical padding of the Chat bubble message.
@@ -284,7 +284,7 @@ The following table lists the available variables for customization. -
Description
The spacing of the bubble message.
+
Description
The spacing of the Chat bubble message.
@@ -294,7 +294,7 @@ The following table lists the available variables for customization. -
Description
The line height of the bubble message.
+
Description
The line height of the Chat bubble message.
@@ -304,7 +304,7 @@ The following table lists the available variables for customization. -
Description
The padding of the scroll button in the chat.
+
Description
The spacing of the Chat scroll button.
@@ -314,7 +314,7 @@ The following table lists the available variables for customization. -
Description
The size of the card deck scrollbar in the chat.
+
Description
The size of the Chat Card deck scrollbar.
@@ -324,7 +324,7 @@ The following table lists the available variables for customization. -
Description
The border radius of the bubble message.
+
Description
The border radius of the Chat bubble message.
@@ -334,7 +334,7 @@ The following table lists the available variables for customization. -
Description
The border radius of the small bubble message
+
Description
The border radius of the Chat small bubble message
@@ -344,7 +344,7 @@ The following table lists the available variables for customization. -
Description
The size of the avatar.
+
Description
The size of the Chat Avatar.
@@ -354,7 +354,7 @@ The following table lists the available variables for customization. -
Description
The spacing of the avatar.
+
Description
The spacing of the Chat Avatar.
@@ -364,7 +364,7 @@ The following table lists the available variables for customization. -
Description
The horizontal padding of the toolbar in the chat.
+
Description
The horizontal padding of the Chat Toolbar.
@@ -374,7 +374,7 @@ The following table lists the available variables for customization. -
Description
The vertical padding of the toolbar in the chat.
+
Description
The vertical padding of the Chat Toolbar.
@@ -384,7 +384,7 @@ The following table lists the available variables for customization. -
Description
The spacing of the toolbar in the chat.
+
Description
The spacing of the Chat Toolbar.
@@ -394,7 +394,7 @@ The following table lists the available variables for customization. -
Description
The background of the toolbar in the chat.
+
Description
The background color of the Chat Toolbar.
@@ -404,7 +404,7 @@ The following table lists the available variables for customization. -
Description
The text of the toolbar in the chat.
+
Description
The text color of the Chat Toolbar.
@@ -414,7 +414,7 @@ The following table lists the available variables for customization. -
Description
The border of the toolbar in the chat.
+
Description
The border color of the Chat Toolbar.
@@ -424,7 +424,7 @@ The following table lists the available variables for customization. -
Description
The horizontal padding of the quick reply in the chat.
+
Description
The horizontal padding of the Chat quick reply.
@@ -434,7 +434,7 @@ The following table lists the available variables for customization. -
Description
The vertical padding of the quick reply in the chat.
+
Description
The vertical padding of the Chat quick reply.
@@ -444,7 +444,7 @@ The following table lists the available variables for customization. -
Description
The spacing of the quick reply in the chat.
+
Description
The spacing of the Chat quick reply.
@@ -454,7 +454,7 @@ The following table lists the available variables for customization. -
Description
The line height of the quick reply in the chat.
+
Description
The line height of the Chat quick reply.
@@ -464,7 +464,7 @@ The following table lists the available variables for customization. -
Description
The background of the chat.
+
Description
The background color of the Chat.
@@ -474,7 +474,7 @@ The following table lists the available variables for customization. -
Description
The text of the chat.
+
Description
The text color of the Chat.
@@ -484,7 +484,7 @@ The following table lists the available variables for customization. -
Description
The border of the chat.
+
Description
The border color of the Chat.
@@ -494,7 +494,7 @@ The following table lists the available variables for customization. -
Description
The background of the bubble in the chat.
+
Description
The background color of the Chat bubble.
@@ -504,7 +504,7 @@ The following table lists the available variables for customization. -
Description
The text of the bubble in the chat.
+
Description
The text color of the Chat bubble.
@@ -514,7 +514,7 @@ The following table lists the available variables for customization. -
Description
The border of the bubble in the chat.
+
Description
The border color of the Chat bubble.
@@ -524,7 +524,7 @@ The following table lists the available variables for customization. -
Description
The box shadow of the bubble in the chat.
+
Description
The box shadow of the Chat bubble.
@@ -534,7 +534,7 @@ The following table lists the available variables for customization. -
Description
The hover shadow of the bubble in the chat.
+
Description
The shadow of the hovered Chat bubble.
@@ -544,7 +544,7 @@ The following table lists the available variables for customization. -
Description
The selected shadow of the bubble in the chat.
+
Description
The shadow of the selected Chat bubble.
@@ -554,7 +554,7 @@ The following table lists the available variables for customization. -
Description
The background of the alt bubble in the chat.
+
Description
The background color of the Chat alt bubble.
@@ -564,7 +564,7 @@ The following table lists the available variables for customization. -
Description
The text of the alt bubble in the chat.
+
Description
The text color of the Chat alt bubble.
@@ -574,7 +574,7 @@ The following table lists the available variables for customization. -
Description
The border of the alt bubble in the chat.
+
Description
The border color of the Chat alt bubble.
@@ -584,7 +584,7 @@ The following table lists the available variables for customization. -
Description
The shadow of the alt bubble in the chat.
+
Description
The shadow of the Chat alt bubble.
@@ -594,7 +594,7 @@ The following table lists the available variables for customization. -
Description
The hover shadow of the alt bubble in the chat.
+
Description
The shadow of the hovered Chat alt bubble.
@@ -604,7 +604,7 @@ The following table lists the available variables for customization. -
Description
The selected shadow of the alt bubble in the chat.
+
Description
The shadow of the selected Chat alt bubble.
@@ -614,7 +614,7 @@ The following table lists the available variables for customization. -
Description
The background of quick reply in the chat.
+
Description
The background color of Chat quick reply.
@@ -624,7 +624,7 @@ The following table lists the available variables for customization. -
Description
The text of quick reply in the chat.
+
Description
The text color of Chat quick reply.
@@ -634,7 +634,7 @@ The following table lists the available variables for customization. -
Description
The border of quick reply in the chat.
+
Description
The border color of Chat quick reply.
@@ -644,7 +644,7 @@ The following table lists the available variables for customization. -
Description
The hover background of quick reply in the chat.
+
Description
The background color of the hovered Chat quick reply.
@@ -654,7 +654,7 @@ The following table lists the available variables for customization. -
Description
The text of quick reply in the chat.
+
Description
The text color of the Chat quick reply.
@@ -664,7 +664,7 @@ The following table lists the available variables for customization. -
Description
The hover border of quick reply in the chat.
+
Description
The border color of the hovered Chat quick reply.
diff --git a/packages/fluent/docs/customization-orgchart.md b/packages/fluent/docs/customization-orgchart.md index c8a449b3269..368e828dff4 100644 --- a/packages/fluent/docs/customization-orgchart.md +++ b/packages/fluent/docs/customization-orgchart.md @@ -34,7 +34,7 @@ The following table lists the available variables for customization. -
Description
Spacing index of the orgchart.
+
Description
The spacing index of the OrgChart.
@@ -44,7 +44,7 @@ The following table lists the available variables for customization. -
Description
Vertical padding of the orgchart.
+
Description
The vertical padding of the OrgChart.
@@ -54,7 +54,7 @@ The following table lists the available variables for customization. -
Description
Horizontal padding of the orgchart.
+
Description
The horizontal padding of the OrgChart.
@@ -64,7 +64,7 @@ The following table lists the available variables for customization. -
Description
Font family of the orgchart.
+
Description
The font family of the OrgChart.
@@ -74,7 +74,7 @@ The following table lists the available variables for customization. -
Description
Font size of the orgchart.
+
Description
The font size of the OrgChart.
@@ -84,7 +84,7 @@ The following table lists the available variables for customization. -
Description
Line height of the orgchart.
+
Description
The line height of the OrgChart.
@@ -94,7 +94,7 @@ The following table lists the available variables for customization. -
Description
Background color of the orgchart.
+
Description
The background color of the OrgChart.
@@ -104,7 +104,7 @@ The following table lists the available variables for customization. -
Description
Text color of the orgchart.
+
Description
The text color of the OrgChart.
@@ -114,7 +114,7 @@ The following table lists the available variables for customization. -
Description
Border color of the orgchart.
+
Description
The border color of the OrgChart.
@@ -124,7 +124,7 @@ The following table lists the available variables for customization. -
Description
Spacing of the orgchart node.
+
Description
The spacing of the OrgChart node.
@@ -134,7 +134,7 @@ The following table lists the available variables for customization. -
Description
Spacing of the orgchart group.
+
Description
The spacing of the OrgChart group.
@@ -144,7 +144,7 @@ The following table lists the available variables for customization. -
Description
Spacing of the orgchart node container.
+
Description
The spacing of the OrgChart node container.
@@ -154,7 +154,7 @@ The following table lists the available variables for customization. -
Description
Vertical padding of the orgchart node group.
+
Description
The vertical padding of the OrgChart node group.
@@ -164,7 +164,7 @@ The following table lists the available variables for customization. -
Description
Horizontal padding of the orgchart node group.
+
Description
The horizontal padding of the OrgChart node group.
@@ -174,7 +174,7 @@ The following table lists the available variables for customization. -
Description
Border width of the orgchart node group.
+
Description
The border width of the OrgChart node group.
@@ -184,7 +184,7 @@ The following table lists the available variables for customization. -
Description
Border radius of the orgchart node group.
+
Description
The border radius of the OrgChart node group.
@@ -194,7 +194,7 @@ The following table lists the available variables for customization. -
Description
Background color of the orgchart node group.
+
Description
The background color of the OrgChart node group.
@@ -204,7 +204,7 @@ The following table lists the available variables for customization. -
Description
Text color of the orgchart node group.
+
Description
The text color of the OrgChart node group.
@@ -214,7 +214,7 @@ The following table lists the available variables for customization. -
Description
Border color of the orgchart node group.
+
Description
The border color of the OrgChart node group.
@@ -224,7 +224,7 @@ The following table lists the available variables for customization. -
Description
Focus border color of the orgchart node group.
+
Description
The border color of the focused OrgChart node group.
@@ -234,7 +234,7 @@ The following table lists the available variables for customization. -
Description
Focus shadow of the orgchart node group.
+
Description
The shadow of the focused OrgChart node group.
@@ -244,7 +244,7 @@ The following table lists the available variables for customization. -
Description
Vertical margin of the orgchart node group title.
+
Description
The vertical margin of the OrgChart node group title.
@@ -254,7 +254,7 @@ The following table lists the available variables for customization. -
Description
Font size of the orgchart node group title.
+
Description
The font size of the OrgChart node group title.
@@ -264,7 +264,7 @@ The following table lists the available variables for customization. -
Description
Line height of the orgchart node group title.
+
Description
The line height of the OrgChart node group title.
@@ -274,7 +274,7 @@ The following table lists the available variables for customization. -
Description
Vertical margin of the orgchart node group subtitle.
+
Description
The vertical margin of the OrgChart node group subtitle.
@@ -284,7 +284,7 @@ The following table lists the available variables for customization. -
Description
Font size of the orgchart node group subtitle.
+
Description
The font size of the OrgChart node group subtitle.
@@ -294,7 +294,7 @@ The following table lists the available variables for customization. -
Description
Line height of the orgchart node group subtitle.
+
Description
The line height of the OrgChart node group subtitle.
@@ -304,7 +304,7 @@ The following table lists the available variables for customization. -
Description
Width of the orgchart card.
+
Description
The width of the OrgChart Card.
@@ -314,7 +314,7 @@ The following table lists the available variables for customization. -
Description
Border width of the orgchart card.
+
Description
The border width of the OrgChart Card.
@@ -324,7 +324,7 @@ The following table lists the available variables for customization. -
Description
Shadow of the orgchart card.
+
Description
The shadow of the OrgChart Card.
@@ -334,7 +334,7 @@ The following table lists the available variables for customization. -
Description
Focus shadow of the orgchart card.
+
Description
The shadow of the focused OrgChart Card.
@@ -344,7 +344,7 @@ The following table lists the available variables for customization. -
Description
Vertical margin of the orgchart card title.
+
Description
The vertical margin of the OrgChart Card title.
@@ -354,7 +354,7 @@ The following table lists the available variables for customization. -
Description
Font size of the orgchart card title.
+
Description
The font size of the OrgChart Card title.
@@ -364,7 +364,7 @@ The following table lists the available variables for customization. -
Description
Line height of the orgchart card title.
+
Description
The line height of the OrgChart Card title.
@@ -374,7 +374,7 @@ The following table lists the available variables for customization. -
Description
Vertical margin of the orgchart card subtitle.
+
Description
The vertical margin of the OrgChart Card subtitle.
@@ -384,7 +384,7 @@ The following table lists the available variables for customization. -
Description
Font size of the orgchart card subtitle.
+
Description
The font size of the OrgChart Card subtitle.
@@ -394,7 +394,7 @@ The following table lists the available variables for customization. -
Description
Line height of the orgchart card subtitle.
+
Description
The line height of the OrgChart Card subtitle.
@@ -404,7 +404,7 @@ The following table lists the available variables for customization. -
Description
Vertical padding of the orgchart card body.
+
Description
The vertical padding of the OrgChart Card body.
@@ -414,7 +414,7 @@ The following table lists the available variables for customization. -
Description
Horizontal padding of the orgchart card body.
+
Description
The horizontal padding of the OrgChart Card body.
@@ -424,7 +424,7 @@ The following table lists the available variables for customization. -
Description
Top border width of the orgchart card body.
+
Description
The top border width of the OrgChart Card body.
@@ -434,7 +434,7 @@ The following table lists the available variables for customization. -
Description
Border color of the orgchart card body.
+
Description
The border color of the OrgChart Card body.
@@ -444,7 +444,7 @@ The following table lists the available variables for customization. -
Description
Horizontal margin of the orgchart card body title wrap.
+
Description
The horizontal margin of the OrgChart Card body title wrap.
@@ -454,7 +454,7 @@ The following table lists the available variables for customization. -
Description
Min height of the orgchart card body title wrap.
+
Description
The min height of the OrgChart Card body title wrap.
@@ -464,7 +464,7 @@ The following table lists the available variables for customization. -
Description
Size of the orgchart connecting line.
+
Description
The size of the OrgChart connecting line.
@@ -474,7 +474,7 @@ The following table lists the available variables for customization. -
Description
Fill color of the orgchart connecting line.
+
Description
The fill color of the OrgChart connecting line.
@@ -484,7 +484,7 @@ The following table lists the available variables for customization. -
Description
Height of the orgchart connecting line.
+
Description
The height of the OrgChart connecting line.
diff --git a/packages/fluent/docs/customization-splitter.md b/packages/fluent/docs/customization-splitter.md index 1a79404d617..02f90a98c86 100644 --- a/packages/fluent/docs/customization-splitter.md +++ b/packages/fluent/docs/customization-splitter.md @@ -34,7 +34,7 @@ The following table lists the available variables for customization. -
Description
Width of the border around the splitter.
+
Description
The width of the border around the Splitter.
@@ -44,7 +44,7 @@ The following table lists the available variables for customization. -
Description
Font size of the splitter.
+
Description
The font size of the Splitter.
@@ -54,7 +54,7 @@ The following table lists the available variables for customization. -
Description
Line height of the splitter.
+
Description
The line height of the Splitter.
@@ -64,7 +64,7 @@ The following table lists the available variables for customization. -
Description
Font family of the splitter.
+
Description
The font family of the Splitter.
@@ -74,7 +74,7 @@ The following table lists the available variables for customization. -
Description
Background color of the splitter.
+
Description
The background color of the Splitter.
@@ -84,7 +84,7 @@ The following table lists the available variables for customization. -
Description
Text color of the splitter.
+
Description
The text color of the Splitter.
@@ -94,7 +94,7 @@ The following table lists the available variables for customization. -
Description
Border color of the splitter.
+
Description
The border color of the Splitter.
@@ -104,7 +104,7 @@ The following table lists the available variables for customization. -
Description
Size of the splitter splitbar.
+
Description
The size of the Splitter splitbar.
@@ -114,7 +114,7 @@ The following table lists the available variables for customization. -
Description
Length of the splitter drag handle.
+
Description
The length of the Splitter drag handle.
@@ -124,7 +124,7 @@ The following table lists the available variables for customization. -
Description
thickness of the splitter drag handle.
+
Description
The thickness of the Splitter drag handle.
@@ -134,7 +134,7 @@ The following table lists the available variables for customization. -
Description
Margin of the splitter drag handle icon.
+
Description
The margin of the Splitter drag handle icon.
@@ -144,7 +144,7 @@ The following table lists the available variables for customization. -
Description
Horizontal padding of the collapse icon in the splitter.
+
Description
The horizontal padding of the collapse icon in the Splitter.
@@ -154,7 +154,7 @@ The following table lists the available variables for customization. -
Description
Vertical padding of the collapse icon in the splitter.
+
Description
The vertical padding of the collapse icon in the Splitter.
@@ -164,7 +164,7 @@ The following table lists the available variables for customization. -
Description
Background color of the splitter splitbar.
+
Description
The background color of the Splitter splitbar.
@@ -174,7 +174,7 @@ The following table lists the available variables for customization. -
Description
Text color of the splitter splitbar.
+
Description
The text color of the Splitter splitbar.
@@ -184,7 +184,7 @@ The following table lists the available variables for customization. -
Description
Hover background color of the splitter splitbar.
+
Description
The hover background color of the Splitter splitbar.
@@ -194,7 +194,7 @@ The following table lists the available variables for customization. -
Description
Hover text color of the splitter splitbar.
+
Description
The hover text color of the Splitter splitbar.
@@ -204,7 +204,7 @@ The following table lists the available variables for customization. -
Description
Selected background color of the splitter splitbar.
+
Description
The selected background color of the Splitter splitbar.
@@ -214,7 +214,7 @@ The following table lists the available variables for customization. -
Description
Selected text color of the splitter splitbar.
+
Description
The selected text color of the Splitter splitbar.
@@ -224,7 +224,7 @@ The following table lists the available variables for customization. -
Description
Size of the splitter static splitbar.
+
Description
The size of the Splitter static splitbar.
diff --git a/packages/fluent/docs/customization-stepper.md b/packages/fluent/docs/customization-stepper.md index 37735d997e1..9125514164c 100644 --- a/packages/fluent/docs/customization-stepper.md +++ b/packages/fluent/docs/customization-stepper.md @@ -34,7 +34,7 @@ The following table lists the available variables for customization. -
Description
Width of the border around the stepper.
+
Description
The width of the border around the Stepper.
@@ -74,7 +74,7 @@ The following table lists the available variables for customization. -
Description
Background color of the stepper.
+
Description
The background color of the Stepper.
@@ -84,7 +84,7 @@ The following table lists the available variables for customization. -
Description
Text color of the stepper.
+
Description
The text color of the Stepper.
@@ -94,7 +94,7 @@ The following table lists the available variables for customization. -
Description
Border color of the stepper.
+
Description
The border color of the Stepper.
@@ -104,7 +104,7 @@ The following table lists the available variables for customization. -
Description
Horizontal margin the stepper label.
+
Description
The horizontal margin the Stepper label.
@@ -114,7 +114,7 @@ The following table lists the available variables for customization. -
Description
Horizontal padding the stepper label.
+
Description
The horizontal padding the Stepper label.
@@ -124,7 +124,7 @@ The following table lists the available variables for customization. -
Description
Vertical padding the stepper label.
+
Description
The vertical padding the Stepper label.
@@ -134,7 +134,7 @@ The following table lists the available variables for customization. -
Description
Horizontal padding the stepper content.
+
Description
The horizontal padding the Stepper content.
@@ -144,7 +144,7 @@ The following table lists the available variables for customization. -
Description
Vertical padding the stepper content.
+
Description
The vertical padding the Stepper content.
@@ -154,7 +154,7 @@ The following table lists the available variables for customization. -
Description
Width of the stepper indicator.
+
Description
The width of the Stepper indicator.
@@ -164,7 +164,7 @@ The following table lists the available variables for customization. -
Description
Height of the stepper indicator.
+
Description
The height of the Stepper indicator.
@@ -174,7 +174,7 @@ The following table lists the available variables for customization. -
Description
Border width of the stepper indicator.
+
Description
The border width of the Stepper indicator.
@@ -184,7 +184,7 @@ The following table lists the available variables for customization. -
Description
Border radius of the stepper indicator.
+
Description
The border radius of the Stepper indicator.
@@ -194,7 +194,7 @@ The following table lists the available variables for customization. -
Description
The focus border width of the stepper indicator.
+
Description
The border width of the focused Stepper indicator.
@@ -204,7 +204,7 @@ The following table lists the available variables for customization. -
Description
The focus size of the stepper indicator.
+
Description
The size of the focused Stepper indicator.
@@ -214,7 +214,7 @@ The following table lists the available variables for customization. -
Description
The focus offset of the stepper indicator.
+
Description
The offset of the Stepper focused indicator.
@@ -224,7 +224,7 @@ The following table lists the available variables for customization. -
Description
The focus calculated offset of the stepper indicator.
+
Description
The calculated offset of the focused Stepper indicator.
@@ -234,7 +234,7 @@ The following table lists the available variables for customization. -
Description
Background color of the stepper indicator.
+
Description
The background color of the Stepper indicator.
@@ -244,7 +244,7 @@ The following table lists the available variables for customization. -
Description
Text color of the stepper indicator.
+
Description
The text color of the Stepper indicator.
@@ -254,7 +254,7 @@ The following table lists the available variables for customization. -
Description
Border color of the stepper indicator.
+
Description
The border color of the Stepper indicator.
@@ -264,7 +264,7 @@ The following table lists the available variables for customization. -
Description
The hover background color of the stepper indicator.
+
Description
The background color of the hovered Stepper indicator.
@@ -274,7 +274,7 @@ The following table lists the available variables for customization. -
Description
The hover text color of the stepper indicator.
+
Description
The text color of the hovered Stepper indicator.
@@ -284,7 +284,7 @@ The following table lists the available variables for customization. -
Description
The hover border color of the stepper indicator.
+
Description
The border color of the hovered Stepper indicator.
@@ -294,7 +294,7 @@ The following table lists the available variables for customization. -
Description
The disabled background color of the stepper indicator.
+
Description
The background color of the disabled Stepper indicator.
@@ -304,7 +304,7 @@ The following table lists the available variables for customization. -
Description
The disabled text color of the stepper indicator.
+
Description
The text color of the disabled Stepper indicator.
@@ -314,7 +314,7 @@ The following table lists the available variables for customization. -
Description
The disabled border color of the stepper indicator.
+
Description
The border color of the disabled Stepper indicator.
@@ -324,7 +324,7 @@ The following table lists the available variables for customization. -
Description
Background color of the stepper done indicator.
+
Description
The background color of the Stepper done indicator.
@@ -334,7 +334,7 @@ The following table lists the available variables for customization. -
Description
Text color of the stepper done indicator.
+
Description
The text color of the Stepper done indicator.
@@ -344,7 +344,7 @@ The following table lists the available variables for customization. -
Description
Border color of the stepper done indicator.
+
Description
The border color of the Stepper done indicator.
@@ -354,7 +354,7 @@ The following table lists the available variables for customization. -
Description
The hover background color of the stepper done indicator.
+
Description
The background color of the hovered Stepper done indicator.
@@ -364,7 +364,7 @@ The following table lists the available variables for customization. -
Description
The hover text color of the stepper done indicator.
+
Description
The text color of the hovered Stepper done indicator.
@@ -374,7 +374,7 @@ The following table lists the available variables for customization. -
Description
The hover border color of the stepper done indicator.
+
Description
The border color of the hovered Stepper done indicator.
@@ -384,7 +384,7 @@ The following table lists the available variables for customization. -
Description
The disabled background color of the stepper done indicator.
+
Description
The background color of the disabled Stepper done indicator.
@@ -394,7 +394,7 @@ The following table lists the available variables for customization. -
Description
The disabled text color of the stepper done indicator.
+
Description
The text color of the disabled Stepper done indicator.
@@ -404,7 +404,7 @@ The following table lists the available variables for customization. -
Description
The disabled border color of the stepper done indicator.
+
Description
The border color of the disabled Stepper done indicator.
@@ -414,7 +414,7 @@ The following table lists the available variables for customization. -
Description
The background color of the stepper current indicator.
+
Description
The background color of the Stepper current indicator.
@@ -424,7 +424,7 @@ The following table lists the available variables for customization. -
Description
The text color of the stepper current indicator.
+
Description
The text color of the Stepper current indicator.
@@ -434,7 +434,7 @@ The following table lists the available variables for customization. -
Description
The border color of the stepper current indicator.
+
Description
The border color of the Stepper current indicator.
@@ -444,7 +444,7 @@ The following table lists the available variables for customization. -
Description
The Hover background color of the stepper current indicator.
+
Description
The background color of the hovered Stepper current indicator.
@@ -454,7 +454,7 @@ The following table lists the available variables for customization. -
Description
The Hover text color of the stepper current indicator.
+
Description
The text color of the hovered Stepper current indicator.
@@ -464,7 +464,7 @@ The following table lists the available variables for customization. -
Description
The Hover border color of the stepper current indicator.
+
Description
The border color of the hovered Stepper current indicator.
@@ -474,7 +474,7 @@ The following table lists the available variables for customization. -
Description
The Disabled background color of the stepper current indicator.
+
Description
The background color of the disabled Stepper current indicator.
@@ -484,7 +484,7 @@ The following table lists the available variables for customization. -
Description
The Disabled text color of the stepper current indicator.
+
Description
The text color of the disabled Stepper current indicator.
@@ -494,7 +494,7 @@ The following table lists the available variables for customization. -
Description
The Disabled border color of the stepper current indicator.
+
Description
The border color of the disabled Stepper current indicator.
@@ -504,7 +504,7 @@ The following table lists the available variables for customization. -
Description
The text color of the stepper label.
+
Description
The text color of the Stepper label.
@@ -514,7 +514,7 @@ The following table lists the available variables for customization. -
Description
The success text color of the stepper label.
+
Description
The success text color of the Stepper label.
@@ -524,7 +524,7 @@ The following table lists the available variables for customization. -
Description
The error text color of the stepper label.
+
Description
The error text color of the Stepper label.
@@ -534,7 +534,7 @@ The following table lists the available variables for customization. -
Description
The hover text color of the stepper label.
+
Description
The text color of the hovered Stepper label.
@@ -544,7 +544,7 @@ The following table lists the available variables for customization. -
Description
The disabled text color of the stepper label.
+
Description
The text color of the disabled Stepper label.
@@ -554,7 +554,7 @@ The following table lists the available variables for customization. -
Description
The disabled text color of the stepper label.
+
Description
The font weight of the disabled Stepper label.
@@ -564,7 +564,7 @@ The following table lists the available variables for customization. -
Description
The text color of the stepper optional label.
+
Description
The text color of the Stepper optional label.
@@ -574,7 +574,7 @@ The following table lists the available variables for customization. -
Description
The font size of the stepper optional label.
+
Description
The font size of the Stepper optional label.
@@ -584,7 +584,7 @@ The following table lists the available variables for customization. -
Description
The font style of the stepper optional label.
+
Description
The font style of the Stepper optional label.
@@ -594,7 +594,7 @@ The following table lists the available variables for customization. -
Description
The size of the stepper progress bar.
+
Description
The size of the Stepper ProgressBar.
@@ -604,7 +604,7 @@ The following table lists the available variables for customization. -
Description
The property name of the stepper transition.
+
Description
The property name of the Stepper transition.
@@ -614,7 +614,7 @@ The following table lists the available variables for customization. -
Description
The duration of the stepper transition.
+
Description
The duration of the Stepper transition.
@@ -624,7 +624,7 @@ The following table lists the available variables for customization. -
Description
The timing funtion of the stepper transition.
+
Description
The timing function of the Stepper transition.
diff --git a/packages/fluent/docs/customization-taskboard.md b/packages/fluent/docs/customization-taskboard.md index 76ed6915ec0..c072c8454a1 100644 --- a/packages/fluent/docs/customization-taskboard.md +++ b/packages/fluent/docs/customization-taskboard.md @@ -34,7 +34,7 @@ The following table lists the available variables for customization. -
Description
Spacing index of the task board.
+
Description
The spacing index of the TaskBoard.
@@ -44,7 +44,7 @@ The following table lists the available variables for customization. -
Description
Border width of the task board.
+
Description
The border width of the TaskBoard.
@@ -54,7 +54,7 @@ The following table lists the available variables for customization. -
Description
Border style of the task board.
+
Description
The border style of the TaskBoard.
@@ -64,7 +64,7 @@ The following table lists the available variables for customization. -
Description
Vertical padding of the task board.
+
Description
The vertical padding of the TaskBoard.
@@ -74,7 +74,7 @@ The following table lists the available variables for customization. -
Description
Horizontal of the task board.
+
Description
The horizontal of the TaskBoard.
@@ -84,7 +84,7 @@ The following table lists the available variables for customization. -
Description
Font family of the task board.
+
Description
The font family of the TaskBoard.
@@ -94,7 +94,7 @@ The following table lists the available variables for customization. -
Description
Font size of the task board.
+
Description
The font size of the TaskBoard.
@@ -104,7 +104,7 @@ The following table lists the available variables for customization. -
Description
Line height of the task board.
+
Description
The line height of the TaskBoard.
@@ -114,7 +114,7 @@ The following table lists the available variables for customization. -
Description
Background color of the task board.
+
Description
The background color of the TaskBoard.
@@ -124,7 +124,7 @@ The following table lists the available variables for customization. -
Description
Text color of the task board.
+
Description
The text color of the TaskBoard.
@@ -134,7 +134,7 @@ The following table lists the available variables for customization. -
Description
Border color of the task board.
+
Description
The border color of the TaskBoard.
@@ -144,7 +144,7 @@ The following table lists the available variables for customization. -
Description
Vertical padding of the task board content.
+
Description
The vertical padding of the TaskBoard content.
@@ -154,7 +154,7 @@ The following table lists the available variables for customization. -
Description
Horizontal padding of the task board content.
+
Description
The horizontal padding of the TaskBoard content.
@@ -164,7 +164,7 @@ The following table lists the available variables for customization. -
Description
Vertical spacing of the task board column container.
+
Description
The vertical spacing of the TaskBoard column container.
@@ -174,7 +174,7 @@ The following table lists the available variables for customization. -
Description
Vertical padding of the task board column container.
+
Description
The vertical padding of the TaskBoard column container.
@@ -184,7 +184,7 @@ The following table lists the available variables for customization. -
Description
Horizontal padding of the task board column container.
+
Description
The horizontal padding of the TaskBoard column container.
@@ -194,7 +194,7 @@ The following table lists the available variables for customization. -
Description
Spacing of the task board columns container.
+
Description
The spacing of the TaskBoard columns container.
@@ -204,7 +204,7 @@ The following table lists the available variables for customization. -
Description
Default width of the task board column.
+
Description
The default width of the TaskBoard column.
@@ -214,7 +214,7 @@ The following table lists the available variables for customization. -
Description
Border width of the task board column.
+
Description
The border width of the TaskBoard column.
@@ -224,7 +224,7 @@ The following table lists the available variables for customization. -
Description
Border radius of the task board column.
+
Description
The border radius of the TaskBoard column.
@@ -234,7 +234,7 @@ The following table lists the available variables for customization. -
Description
Background color of the task board column.
+
Description
The background color of the TaskBoard column.
@@ -244,7 +244,7 @@ The following table lists the available variables for customization. -
Description
Text color of the task board column.
+
Description
The text color of the TaskBoard column.
@@ -254,7 +254,7 @@ The following table lists the available variables for customization. -
Description
Border color of the task board column.
+
Description
The border color of the TaskBoard column.
@@ -264,7 +264,7 @@ The following table lists the available variables for customization. -
Description
Focus background color of the task board column.
+
Description
The background color of the focused TaskBoard column.
@@ -274,7 +274,7 @@ The following table lists the available variables for customization. -
Description
Focus text color of the task board column.
+
Description
The text color of the focused TaskBoard column.
@@ -284,7 +284,7 @@ The following table lists the available variables for customization. -
Description
Focus border color of the task board column.
+
Description
The border color of the focused TaskBoard column.
@@ -294,7 +294,7 @@ The following table lists the available variables for customization. -
Description
Vertical padding of the task board column header.
+
Description
The vertical padding of the TaskBoard column header.
@@ -304,7 +304,7 @@ The following table lists the available variables for customization. -
Description
Horizontal padding of the task board column header.
+
Description
The horizontal padding of the TaskBoard column header.
@@ -314,7 +314,7 @@ The following table lists the available variables for customization. -
Description
Spacing of the task board column header.
+
Description
The spacing of the TaskBoard column header.
@@ -324,7 +324,7 @@ The following table lists the available variables for customization. -
Description
Spacing of the task board column header actions.
+
Description
The spacing of the TaskBoard column header actions.
@@ -334,7 +334,7 @@ The following table lists the available variables for customization. -
Description
Font weight of the task board column header.
+
Description
The font weight of the TaskBoard column header.
@@ -344,7 +344,7 @@ The following table lists the available variables for customization. -
Description
Text color of the task board column header.
+
Description
The text color of the TaskBoard column header.
@@ -354,7 +354,7 @@ The following table lists the available variables for customization. -
Description
Vertical padding of the task board column cards wrapper.
+
Description
The vertical padding of the TaskBoard column Card wrapper.
@@ -364,7 +364,7 @@ The following table lists the available variables for customization. -
Description
Horizontal padding of the task board column cards wrapper.
+
Description
The horizontal padding of the TaskBoard column Card wrapper.
@@ -374,7 +374,7 @@ The following table lists the available variables for customization. -
Description
Spacing of the task board column cards wrapper.
+
Description
The spacing of the TaskBoard column Card wrapper.
@@ -384,7 +384,7 @@ The following table lists the available variables for customization. -
Description
Default width of the task board pane.
+
Description
The default width of the TaskBoard pane.
@@ -394,7 +394,7 @@ The following table lists the available variables for customization. -
Description
Vertical padding of the task board pane
+
Description
The vertical padding of the TaskBoard pane.
@@ -404,7 +404,7 @@ The following table lists the available variables for customization. -
Description
Horizontal padding of the task board pane.
+
Description
The horizontal padding of the TaskBoard pane.
@@ -414,7 +414,7 @@ The following table lists the available variables for customization. -
Description
Border width of the task board pane.
+
Description
The border width of the TaskBoard pane.
@@ -424,7 +424,7 @@ The following table lists the available variables for customization. -
Description
Background color of the task board pane.
+
Description
The background color of the TaskBoard pane.
@@ -434,7 +434,7 @@ The following table lists the available variables for customization. -
Description
Text color of the task board pane.
+
Description
The text color of the TaskBoard pane.
@@ -444,7 +444,7 @@ The following table lists the available variables for customization. -
Description
Border color of the task board pane.
+
Description
The border color of the TaskBoard pane.
@@ -454,7 +454,7 @@ The following table lists the available variables for customization. -
Description
Vertical padding of the task board pane header.
+
Description
The vertical padding of the TaskBoard pane header.
@@ -464,7 +464,7 @@ The following table lists the available variables for customization. -
Description
Horizontal padding of the task board pane header.
+
Description
The horizontal padding of the TaskBoard pane header.
@@ -474,7 +474,7 @@ The following table lists the available variables for customization. -
Description
Font size of the task board pane header.
+
Description
The font size of the TaskBoard pane header.
@@ -484,7 +484,7 @@ The following table lists the available variables for customization. -
Description
Font weight of the task board pane header.
+
Description
The font weight of the TaskBoard pane header.
@@ -494,7 +494,7 @@ The following table lists the available variables for customization. -
Description
Text color of the task board pane header.
+
Description
The text color of the TaskBoard pane header.
@@ -504,7 +504,7 @@ The following table lists the available variables for customization. -
Description
Vertical padding of the task board pane content.
+
Description
The vertical padding of the TaskBoard pane content.
@@ -514,7 +514,7 @@ The following table lists the available variables for customization. -
Description
Horizontal padding of the task board pane content.
+
Description
The horizontal padding of the TaskBoard pane content.
@@ -524,7 +524,7 @@ The following table lists the available variables for customization. -
Description
Vertical padding of the task board pane actions.
+
Description
The vertical padding of the TaskBoard pane actions.
@@ -534,7 +534,7 @@ The following table lists the available variables for customization. -
Description
Horizontal padding of the task board pane actions.
+
Description
The horizontal padding of the TaskBoard pane actions.
@@ -544,7 +544,7 @@ The following table lists the available variables for customization. -
Description
Vertical padding of the task board card.
+
Description
The vertical padding of the TaskBoard Card.
@@ -554,7 +554,7 @@ The following table lists the available variables for customization. -
Description
Horizontal padding of the task board card.
+
Description
The horizontal padding of the TaskBoard Card.
@@ -564,7 +564,7 @@ The following table lists the available variables for customization. -
Description
Border width of the task board card category.
+
Description
The border width of the TaskBoard Card category.
@@ -574,7 +574,7 @@ The following table lists the available variables for customization. -
Description
Focus shadow of the task board card.
+
Description
The shadow of the focused TaskBoard Card.
@@ -584,7 +584,7 @@ The following table lists the available variables for customization. -
Description
Selected border of the task board card.
+
Description
The border of the selected TaskBoard Card.
@@ -594,7 +594,7 @@ The following table lists the available variables for customization. -
Description
Selected shadow of the task board card.
+
Description
The shadow of the selected TaskBoard Card.
@@ -604,7 +604,7 @@ The following table lists the available variables for customization. -
Description
Font size of the task board card title.
+
Description
The font size of the TaskBoard Card title.
@@ -614,7 +614,7 @@ The following table lists the available variables for customization. -
Description
Font weight of the task board card title.
+
Description
The font weight of the TaskBoard Card title.
@@ -624,7 +624,7 @@ The following table lists the available variables for customization. -
Description
Border width of the task board card placeholder.
+
Description
The border width of the TaskBoard Card placeholder.
@@ -634,7 +634,7 @@ The following table lists the available variables for customization. -
Description
Border radius of the task board card placeholder.
+
Description
The border radius of the TaskBoard Card placeholder.
@@ -644,7 +644,7 @@ The following table lists the available variables for customization. -
Description
Background color of the task board card placeholder.
+
Description
The background color of the TaskBoard Card placeholder.
@@ -654,7 +654,7 @@ The following table lists the available variables for customization. -
Description
Border color of the task board card placeholder.
+
Description
The border color of the TaskBoard Card placeholder.
diff --git a/packages/fluent/docs/customization-wizard.md b/packages/fluent/docs/customization-wizard.md index 41010b818e4..e942e9c5080 100644 --- a/packages/fluent/docs/customization-wizard.md +++ b/packages/fluent/docs/customization-wizard.md @@ -34,7 +34,7 @@ The following table lists the available variables for customization. -
Description
Border width of the wizard.
+
Description
The border width of the Wizard.
@@ -44,7 +44,7 @@ The following table lists the available variables for customization. -
Description
Horizontal padding of the wizard.
+
Description
The horizontal padding of the Wizard.
@@ -54,7 +54,7 @@ The following table lists the available variables for customization. -
Description
Vertical padding of the wizard.
+
Description
The vertical padding of the Wizard.
@@ -64,7 +64,7 @@ The following table lists the available variables for customization. -
Description
Font size of the wizard.
+
Description
The font size of the Wizard.
@@ -74,7 +74,7 @@ The following table lists the available variables for customization. -
Description
Line height of the wizard.
+
Description
The line height of the Wizard.
@@ -84,7 +84,7 @@ The following table lists the available variables for customization. -
Description
Font family of the wizard.
+
Description
The font family of the Wizard.
@@ -94,7 +94,7 @@ The following table lists the available variables for customization. -
Description
Horizontal padding of the wizard steps.
+
Description
The horizontal padding of the Wizard steps.
@@ -104,7 +104,7 @@ The following table lists the available variables for customization. -
Description
Vertical padding of the wizard steps.
+
Description
The vertical padding of the Wizard steps.
@@ -114,7 +114,7 @@ The following table lists the available variables for customization. -
Description
Horizontal padding of the wizard content.
+
Description
The horizontal padding of the Wizard content.
@@ -124,7 +124,7 @@ The following table lists the available variables for customization. -
Description
Vertical padding of the wizard content.
+
Description
The vertical padding of the Wizard content.
@@ -134,7 +134,7 @@ The following table lists the available variables for customization. -
Description
Text color of the wizard content.
+
Description
The text color of the Wizard content.
@@ -144,7 +144,7 @@ The following table lists the available variables for customization. -
Description
Background color of the wizard content.
+
Description
The background color of the Wizard content.
@@ -154,7 +154,7 @@ The following table lists the available variables for customization. -
Description
Horizontal margin of the wizard buttons container.
+
Description
The horizontal margin of the Wizard Button container.
@@ -164,7 +164,7 @@ The following table lists the available variables for customization. -
Description
Vertical margin of the wizard buttons container.
+
Description
The vertical margin of the Wizard Button container.
@@ -174,7 +174,7 @@ The following table lists the available variables for customization. -
Description
Outline of the focused wizard step.
+
Description
The outline of the focused Wizard step.
diff --git a/packages/fluent/docs/customization.md b/packages/fluent/docs/customization.md index ab7e3900afa..179efca1b96 100644 --- a/packages/fluent/docs/customization.md +++ b/packages/fluent/docs/customization.md @@ -4935,7 +4935,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The box shadow transition of the chat.
+
Description
The box shadow transition of the Chat.
@@ -4945,7 +4945,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The hover text of links in the bubble of the chat.
+
Description
The hover text color of the Chat bubble links.
@@ -4955,7 +4955,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The text of links in the bubble of the chat.
+
Description
The text color of the Chat bubble links.
@@ -4965,7 +4965,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The horizontal padding of the chat.
+
Description
The horizontal padding of the Chat.
@@ -4975,7 +4975,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The vertical padding of the chat.
+
Description
The vertical padding of the Chat.
@@ -4985,7 +4985,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
the width of the chat.
+
Description
The width of the Chat.
@@ -4995,7 +4995,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The height of the chat.
+
Description
The height of the Chat.
@@ -5005,7 +5005,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The border width of the chat.
+
Description
The border width of the Chat.
@@ -5015,7 +5015,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The font family of the chat.
+
Description
The font family of the Chat.
@@ -5025,7 +5025,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The font size of the chat.
+
Description
The font size of the Chat.
@@ -5035,7 +5035,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The line height of the chat.
+
Description
The line height of the Chat.
@@ -5045,7 +5045,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The size of the chat typeing indicator dot in the chat.
+
Description
The size of the Chat typing indicator dot.
@@ -5055,7 +5055,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The spacing of the chat typeing indicator dot in the chat.
+
Description
The spacing of the Chat typing indicator dot.
@@ -5065,7 +5065,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The horizontal spacing between items of the chat.
+
Description
The horizontal spacing between items of the Chat.
@@ -5075,7 +5075,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The vertical spacing between items of the chat.
+
Description
The vertical spacing between items of the Chat.
@@ -5085,7 +5085,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The horizontal padding of message list of the chat.
+
Description
The horizontal padding of the Chat message list.
@@ -5095,7 +5095,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The vertical padding of message list of the chat.
+
Description
The vertical padding of the Chat message list.
@@ -5105,7 +5105,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The spacing of message list of the chat.
+
Description
The spacing of the Chat message list.
@@ -5115,7 +5115,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The font size of the timestap.
+
Description
The font size of the Chat timestamp.
@@ -5125,7 +5125,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The line height of the timestamp.
+
Description
The line height of the Chat timestamp.
@@ -5135,7 +5135,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
the text transform of the timestamp.
+
Description
The text transform of the Chat timestamp.
@@ -5145,7 +5145,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The text of the timestamp.
+
Description
The text color of the Chat timestamp.
@@ -5155,7 +5155,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
the background of the timestamp.
+
Description
The background color of the Chat timestamp.
@@ -5165,7 +5165,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The horizontal padding of the bubble message.
+
Description
The horizontal padding of the Chat bubble message.
@@ -5175,7 +5175,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The vertical padding of the bubble message.
+
Description
The vertical padding of the Chat bubble message.
@@ -5185,7 +5185,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The spacing of the bubble message.
+
Description
The spacing of the Chat bubble message.
@@ -5195,7 +5195,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The line height of the bubble message.
+
Description
The line height of the Chat bubble message.
@@ -5205,7 +5205,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The padding of the scroll button in the chat.
+
Description
The spacing of the Chat scroll button.
@@ -5215,7 +5215,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The size of the card deck scrollbar in the chat.
+
Description
The size of the Chat Card deck scrollbar.
@@ -5225,7 +5225,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The border radius of the bubble message.
+
Description
The border radius of the Chat bubble message.
@@ -5235,7 +5235,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The border radius of the small bubble message
+
Description
The border radius of the Chat small bubble message
@@ -5245,7 +5245,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The size of the avatar.
+
Description
The size of the Chat Avatar.
@@ -5255,7 +5255,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The spacing of the avatar.
+
Description
The spacing of the Chat Avatar.
@@ -5265,7 +5265,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The horizontal padding of the toolbar in the chat.
+
Description
The horizontal padding of the Chat Toolbar.
@@ -5275,7 +5275,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The vertical padding of the toolbar in the chat.
+
Description
The vertical padding of the Chat Toolbar.
@@ -5285,7 +5285,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The spacing of the toolbar in the chat.
+
Description
The spacing of the Chat Toolbar.
@@ -5295,7 +5295,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The background of the toolbar in the chat.
+
Description
The background color of the Chat Toolbar.
@@ -5305,7 +5305,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The text of the toolbar in the chat.
+
Description
The text color of the Chat Toolbar.
@@ -5315,7 +5315,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The border of the toolbar in the chat.
+
Description
The border color of the Chat Toolbar.
@@ -5325,7 +5325,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The horizontal padding of the quick reply in the chat.
+
Description
The horizontal padding of the Chat quick reply.
@@ -5335,7 +5335,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The vertical padding of the quick reply in the chat.
+
Description
The vertical padding of the Chat quick reply.
@@ -5345,7 +5345,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The spacing of the quick reply in the chat.
+
Description
The spacing of the Chat quick reply.
@@ -5355,7 +5355,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The line height of the quick reply in the chat.
+
Description
The line height of the Chat quick reply.
@@ -5365,7 +5365,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The background of the chat.
+
Description
The background color of the Chat.
@@ -5375,7 +5375,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The text of the chat.
+
Description
The text color of the Chat.
@@ -5385,7 +5385,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The border of the chat.
+
Description
The border color of the Chat.
@@ -5395,7 +5395,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The background of the bubble in the chat.
+
Description
The background color of the Chat bubble.
@@ -5405,7 +5405,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The text of the bubble in the chat.
+
Description
The text color of the Chat bubble.
@@ -5415,7 +5415,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The border of the bubble in the chat.
+
Description
The border color of the Chat bubble.
@@ -5425,7 +5425,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The box shadow of the bubble in the chat.
+
Description
The box shadow of the Chat bubble.
@@ -5435,7 +5435,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The hover shadow of the bubble in the chat.
+
Description
The shadow of the hovered Chat bubble.
@@ -5445,7 +5445,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The selected shadow of the bubble in the chat.
+
Description
The shadow of the selected Chat bubble.
@@ -5455,7 +5455,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The background of the alt bubble in the chat.
+
Description
The background color of the Chat alt bubble.
@@ -5465,7 +5465,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The text of the alt bubble in the chat.
+
Description
The text color of the Chat alt bubble.
@@ -5475,7 +5475,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The border of the alt bubble in the chat.
+
Description
The border color of the Chat alt bubble.
@@ -5485,7 +5485,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The shadow of the alt bubble in the chat.
+
Description
The shadow of the Chat alt bubble.
@@ -5495,7 +5495,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The hover shadow of the alt bubble in the chat.
+
Description
The shadow of the hovered Chat alt bubble.
@@ -5505,7 +5505,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The selected shadow of the alt bubble in the chat.
+
Description
The shadow of the selected Chat alt bubble.
@@ -5515,7 +5515,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The background of quick reply in the chat.
+
Description
The background color of Chat quick reply.
@@ -5525,7 +5525,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The text of quick reply in the chat.
+
Description
The text color of Chat quick reply.
@@ -5535,7 +5535,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The border of quick reply in the chat.
+
Description
The border color of Chat quick reply.
@@ -5545,7 +5545,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The hover background of quick reply in the chat.
+
Description
The background color of the hovered Chat quick reply.
@@ -5555,7 +5555,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The text of quick reply in the chat.
+
Description
The text color of the Chat quick reply.
@@ -5565,7 +5565,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The hover border of quick reply in the chat.
+
Description
The border color of the hovered Chat quick reply.
@@ -18818,7 +18818,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Spacing index of the orgchart.
+
Description
The spacing index of the OrgChart.
@@ -18828,7 +18828,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical padding of the orgchart.
+
Description
The vertical padding of the OrgChart.
@@ -18838,7 +18838,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Horizontal padding of the orgchart.
+
Description
The horizontal padding of the OrgChart.
@@ -18848,7 +18848,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Font family of the orgchart.
+
Description
The font family of the OrgChart.
@@ -18858,7 +18858,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Font size of the orgchart.
+
Description
The font size of the OrgChart.
@@ -18868,7 +18868,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Line height of the orgchart.
+
Description
The line height of the OrgChart.
@@ -18878,7 +18878,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Background color of the orgchart.
+
Description
The background color of the OrgChart.
@@ -18888,7 +18888,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Text color of the orgchart.
+
Description
The text color of the OrgChart.
@@ -18898,7 +18898,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border color of the orgchart.
+
Description
The border color of the OrgChart.
@@ -18908,7 +18908,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Spacing of the orgchart node.
+
Description
The spacing of the OrgChart node.
@@ -18918,7 +18918,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Spacing of the orgchart group.
+
Description
The spacing of the OrgChart group.
@@ -18928,7 +18928,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Spacing of the orgchart node container.
+
Description
The spacing of the OrgChart node container.
@@ -18938,7 +18938,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical padding of the orgchart node group.
+
Description
The vertical padding of the OrgChart node group.
@@ -18948,7 +18948,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Horizontal padding of the orgchart node group.
+
Description
The horizontal padding of the OrgChart node group.
@@ -18958,7 +18958,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border width of the orgchart node group.
+
Description
The border width of the OrgChart node group.
@@ -18968,7 +18968,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border radius of the orgchart node group.
+
Description
The border radius of the OrgChart node group.
@@ -18978,7 +18978,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Background color of the orgchart node group.
+
Description
The background color of the OrgChart node group.
@@ -18988,7 +18988,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Text color of the orgchart node group.
+
Description
The text color of the OrgChart node group.
@@ -18998,7 +18998,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border color of the orgchart node group.
+
Description
The border color of the OrgChart node group.
@@ -19008,7 +19008,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Focus border color of the orgchart node group.
+
Description
The border color of the focused OrgChart node group.
@@ -19018,7 +19018,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Focus shadow of the orgchart node group.
+
Description
The shadow of the focused OrgChart node group.
@@ -19028,7 +19028,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical margin of the orgchart node group title.
+
Description
The vertical margin of the OrgChart node group title.
@@ -19038,7 +19038,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Font size of the orgchart node group title.
+
Description
The font size of the OrgChart node group title.
@@ -19048,7 +19048,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Line height of the orgchart node group title.
+
Description
The line height of the OrgChart node group title.
@@ -19058,7 +19058,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical margin of the orgchart node group subtitle.
+
Description
The vertical margin of the OrgChart node group subtitle.
@@ -19068,7 +19068,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Font size of the orgchart node group subtitle.
+
Description
The font size of the OrgChart node group subtitle.
@@ -19078,7 +19078,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Line height of the orgchart node group subtitle.
+
Description
The line height of the OrgChart node group subtitle.
@@ -19088,7 +19088,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Width of the orgchart card.
+
Description
The width of the OrgChart Card.
@@ -19098,7 +19098,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border width of the orgchart card.
+
Description
The border width of the OrgChart Card.
@@ -19108,7 +19108,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Shadow of the orgchart card.
+
Description
The shadow of the OrgChart Card.
@@ -19118,7 +19118,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Focus shadow of the orgchart card.
+
Description
The shadow of the focused OrgChart Card.
@@ -19128,7 +19128,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical margin of the orgchart card title.
+
Description
The vertical margin of the OrgChart Card title.
@@ -19138,7 +19138,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Font size of the orgchart card title.
+
Description
The font size of the OrgChart Card title.
@@ -19148,7 +19148,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Line height of the orgchart card title.
+
Description
The line height of the OrgChart Card title.
@@ -19158,7 +19158,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical margin of the orgchart card subtitle.
+
Description
The vertical margin of the OrgChart Card subtitle.
@@ -19168,7 +19168,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Font size of the orgchart card subtitle.
+
Description
The font size of the OrgChart Card subtitle.
@@ -19178,7 +19178,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Line height of the orgchart card subtitle.
+
Description
The line height of the OrgChart Card subtitle.
@@ -19188,7 +19188,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical padding of the orgchart card body.
+
Description
The vertical padding of the OrgChart Card body.
@@ -19198,7 +19198,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Horizontal padding of the orgchart card body.
+
Description
The horizontal padding of the OrgChart Card body.
@@ -19208,7 +19208,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Top border width of the orgchart card body.
+
Description
The top border width of the OrgChart Card body.
@@ -19218,7 +19218,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border color of the orgchart card body.
+
Description
The border color of the OrgChart Card body.
@@ -19228,7 +19228,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Horizontal margin of the orgchart card body title wrap.
+
Description
The horizontal margin of the OrgChart Card body title wrap.
@@ -19238,7 +19238,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Min height of the orgchart card body title wrap.
+
Description
The min height of the OrgChart Card body title wrap.
@@ -19248,7 +19248,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Size of the orgchart connecting line.
+
Description
The size of the OrgChart connecting line.
@@ -19258,7 +19258,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Fill color of the orgchart connecting line.
+
Description
The fill color of the OrgChart connecting line.
@@ -19268,7 +19268,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Height of the orgchart connecting line.
+
Description
The height of the OrgChart connecting line.
@@ -25043,7 +25043,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Width of the border around the splitter.
+
Description
The width of the border around the Splitter.
@@ -25053,7 +25053,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Font size of the splitter.
+
Description
The font size of the Splitter.
@@ -25063,7 +25063,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Line height of the splitter.
+
Description
The line height of the Splitter.
@@ -25073,7 +25073,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Font family of the splitter.
+
Description
The font family of the Splitter.
@@ -25083,7 +25083,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Background color of the splitter.
+
Description
The background color of the Splitter.
@@ -25093,7 +25093,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Text color of the splitter.
+
Description
The text color of the Splitter.
@@ -25103,7 +25103,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border color of the splitter.
+
Description
The border color of the Splitter.
@@ -25113,7 +25113,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Size of the splitter splitbar.
+
Description
The size of the Splitter splitbar.
@@ -25123,7 +25123,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Length of the splitter drag handle.
+
Description
The length of the Splitter drag handle.
@@ -25133,7 +25133,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
thickness of the splitter drag handle.
+
Description
The thickness of the Splitter drag handle.
@@ -25143,7 +25143,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Margin of the splitter drag handle icon.
+
Description
The margin of the Splitter drag handle icon.
@@ -25153,7 +25153,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Horizontal padding of the collapse icon in the splitter.
+
Description
The horizontal padding of the collapse icon in the Splitter.
@@ -25163,7 +25163,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical padding of the collapse icon in the splitter.
+
Description
The vertical padding of the collapse icon in the Splitter.
@@ -25173,7 +25173,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Background color of the splitter splitbar.
+
Description
The background color of the Splitter splitbar.
@@ -25183,7 +25183,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Text color of the splitter splitbar.
+
Description
The text color of the Splitter splitbar.
@@ -25193,7 +25193,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Hover background color of the splitter splitbar.
+
Description
The hover background color of the Splitter splitbar.
@@ -25203,7 +25203,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Hover text color of the splitter splitbar.
+
Description
The hover text color of the Splitter splitbar.
@@ -25213,7 +25213,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Selected background color of the splitter splitbar.
+
Description
The selected background color of the Splitter splitbar.
@@ -25223,7 +25223,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Selected text color of the splitter splitbar.
+
Description
The selected text color of the Splitter splitbar.
@@ -25233,7 +25233,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Size of the splitter static splitbar.
+
Description
The size of the Splitter static splitbar.
@@ -26273,7 +26273,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Width of the border around the stepper.
+
Description
The width of the border around the Stepper.
@@ -26313,7 +26313,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Background color of the stepper.
+
Description
The background color of the Stepper.
@@ -26323,7 +26323,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Text color of the stepper.
+
Description
The text color of the Stepper.
@@ -26333,7 +26333,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border color of the stepper.
+
Description
The border color of the Stepper.
@@ -26343,7 +26343,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Horizontal margin the stepper label.
+
Description
The horizontal margin the Stepper label.
@@ -26353,7 +26353,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Horizontal padding the stepper label.
+
Description
The horizontal padding the Stepper label.
@@ -26363,7 +26363,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical padding the stepper label.
+
Description
The vertical padding the Stepper label.
@@ -26373,7 +26373,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Horizontal padding the stepper content.
+
Description
The horizontal padding the Stepper content.
@@ -26383,7 +26383,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical padding the stepper content.
+
Description
The vertical padding the Stepper content.
@@ -26393,7 +26393,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Width of the stepper indicator.
+
Description
The width of the Stepper indicator.
@@ -26403,7 +26403,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Height of the stepper indicator.
+
Description
The height of the Stepper indicator.
@@ -26413,7 +26413,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border width of the stepper indicator.
+
Description
The border width of the Stepper indicator.
@@ -26423,7 +26423,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border radius of the stepper indicator.
+
Description
The border radius of the Stepper indicator.
@@ -26433,7 +26433,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The focus border width of the stepper indicator.
+
Description
The border width of the focused Stepper indicator.
@@ -26443,7 +26443,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The focus size of the stepper indicator.
+
Description
The size of the focused Stepper indicator.
@@ -26453,7 +26453,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The focus offset of the stepper indicator.
+
Description
The offset of the Stepper focused indicator.
@@ -26463,7 +26463,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The focus calculated offset of the stepper indicator.
+
Description
The calculated offset of the focused Stepper indicator.
@@ -26473,7 +26473,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Background color of the stepper indicator.
+
Description
The background color of the Stepper indicator.
@@ -26483,7 +26483,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Text color of the stepper indicator.
+
Description
The text color of the Stepper indicator.
@@ -26493,7 +26493,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border color of the stepper indicator.
+
Description
The border color of the Stepper indicator.
@@ -26503,7 +26503,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The hover background color of the stepper indicator.
+
Description
The background color of the hovered Stepper indicator.
@@ -26513,7 +26513,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The hover text color of the stepper indicator.
+
Description
The text color of the hovered Stepper indicator.
@@ -26523,7 +26523,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The hover border color of the stepper indicator.
+
Description
The border color of the hovered Stepper indicator.
@@ -26533,7 +26533,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The disabled background color of the stepper indicator.
+
Description
The background color of the disabled Stepper indicator.
@@ -26543,7 +26543,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The disabled text color of the stepper indicator.
+
Description
The text color of the disabled Stepper indicator.
@@ -26553,7 +26553,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The disabled border color of the stepper indicator.
+
Description
The border color of the disabled Stepper indicator.
@@ -26563,7 +26563,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Background color of the stepper done indicator.
+
Description
The background color of the Stepper done indicator.
@@ -26573,7 +26573,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Text color of the stepper done indicator.
+
Description
The text color of the Stepper done indicator.
@@ -26583,7 +26583,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border color of the stepper done indicator.
+
Description
The border color of the Stepper done indicator.
@@ -26593,7 +26593,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The hover background color of the stepper done indicator.
+
Description
The background color of the hovered Stepper done indicator.
@@ -26603,7 +26603,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The hover text color of the stepper done indicator.
+
Description
The text color of the hovered Stepper done indicator.
@@ -26613,7 +26613,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The hover border color of the stepper done indicator.
+
Description
The border color of the hovered Stepper done indicator.
@@ -26623,7 +26623,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The disabled background color of the stepper done indicator.
+
Description
The background color of the disabled Stepper done indicator.
@@ -26633,7 +26633,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The disabled text color of the stepper done indicator.
+
Description
The text color of the disabled Stepper done indicator.
@@ -26643,7 +26643,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The disabled border color of the stepper done indicator.
+
Description
The border color of the disabled Stepper done indicator.
@@ -26653,7 +26653,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The background color of the stepper current indicator.
+
Description
The background color of the Stepper current indicator.
@@ -26663,7 +26663,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The text color of the stepper current indicator.
+
Description
The text color of the Stepper current indicator.
@@ -26673,7 +26673,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The border color of the stepper current indicator.
+
Description
The border color of the Stepper current indicator.
@@ -26683,7 +26683,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The Hover background color of the stepper current indicator.
+
Description
The background color of the hovered Stepper current indicator.
@@ -26693,7 +26693,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The Hover text color of the stepper current indicator.
+
Description
The text color of the hovered Stepper current indicator.
@@ -26703,7 +26703,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The Hover border color of the stepper current indicator.
+
Description
The border color of the hovered Stepper current indicator.
@@ -26713,7 +26713,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The Disabled background color of the stepper current indicator.
+
Description
The background color of the disabled Stepper current indicator.
@@ -26723,7 +26723,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The Disabled text color of the stepper current indicator.
+
Description
The text color of the disabled Stepper current indicator.
@@ -26733,7 +26733,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The Disabled border color of the stepper current indicator.
+
Description
The border color of the disabled Stepper current indicator.
@@ -26743,7 +26743,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The text color of the stepper label.
+
Description
The text color of the Stepper label.
@@ -26753,7 +26753,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The success text color of the stepper label.
+
Description
The success text color of the Stepper label.
@@ -26763,7 +26763,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The error text color of the stepper label.
+
Description
The error text color of the Stepper label.
@@ -26773,7 +26773,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The hover text color of the stepper label.
+
Description
The text color of the hovered Stepper label.
@@ -26783,7 +26783,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The disabled text color of the stepper label.
+
Description
The text color of the disabled Stepper label.
@@ -26793,7 +26793,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The disabled text color of the stepper label.
+
Description
The font weight of the disabled Stepper label.
@@ -26803,7 +26803,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The text color of the stepper optional label.
+
Description
The text color of the Stepper optional label.
@@ -26813,7 +26813,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The font size of the stepper optional label.
+
Description
The font size of the Stepper optional label.
@@ -26823,7 +26823,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The font style of the stepper optional label.
+
Description
The font style of the Stepper optional label.
@@ -26833,7 +26833,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The size of the stepper progress bar.
+
Description
The size of the Stepper ProgressBar.
@@ -26843,7 +26843,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The property name of the stepper transition.
+
Description
The property name of the Stepper transition.
@@ -26853,7 +26853,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The duration of the stepper transition.
+
Description
The duration of the Stepper transition.
@@ -26863,7 +26863,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
The timing funtion of the stepper transition.
+
Description
The timing function of the Stepper transition.
@@ -28325,7 +28325,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Spacing index of the task board.
+
Description
The spacing index of the TaskBoard.
@@ -28335,7 +28335,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border width of the task board.
+
Description
The border width of the TaskBoard.
@@ -28345,7 +28345,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border style of the task board.
+
Description
The border style of the TaskBoard.
@@ -28355,7 +28355,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical padding of the task board.
+
Description
The vertical padding of the TaskBoard.
@@ -28365,7 +28365,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Horizontal of the task board.
+
Description
The horizontal of the TaskBoard.
@@ -28375,7 +28375,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Font family of the task board.
+
Description
The font family of the TaskBoard.
@@ -28385,7 +28385,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Font size of the task board.
+
Description
The font size of the TaskBoard.
@@ -28395,7 +28395,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Line height of the task board.
+
Description
The line height of the TaskBoard.
@@ -28405,7 +28405,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Background color of the task board.
+
Description
The background color of the TaskBoard.
@@ -28415,7 +28415,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Text color of the task board.
+
Description
The text color of the TaskBoard.
@@ -28425,7 +28425,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border color of the task board.
+
Description
The border color of the TaskBoard.
@@ -28435,7 +28435,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical padding of the task board content.
+
Description
The vertical padding of the TaskBoard content.
@@ -28445,7 +28445,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Horizontal padding of the task board content.
+
Description
The horizontal padding of the TaskBoard content.
@@ -28455,7 +28455,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical spacing of the task board column container.
+
Description
The vertical spacing of the TaskBoard column container.
@@ -28465,7 +28465,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical padding of the task board column container.
+
Description
The vertical padding of the TaskBoard column container.
@@ -28475,7 +28475,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Horizontal padding of the task board column container.
+
Description
The horizontal padding of the TaskBoard column container.
@@ -28485,7 +28485,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Spacing of the task board columns container.
+
Description
The spacing of the TaskBoard columns container.
@@ -28495,7 +28495,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Default width of the task board column.
+
Description
The default width of the TaskBoard column.
@@ -28505,7 +28505,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border width of the task board column.
+
Description
The border width of the TaskBoard column.
@@ -28515,7 +28515,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border radius of the task board column.
+
Description
The border radius of the TaskBoard column.
@@ -28525,7 +28525,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Background color of the task board column.
+
Description
The background color of the TaskBoard column.
@@ -28535,7 +28535,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Text color of the task board column.
+
Description
The text color of the TaskBoard column.
@@ -28545,7 +28545,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border color of the task board column.
+
Description
The border color of the TaskBoard column.
@@ -28555,7 +28555,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Focus background color of the task board column.
+
Description
The background color of the focused TaskBoard column.
@@ -28565,7 +28565,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Focus text color of the task board column.
+
Description
The text color of the focused TaskBoard column.
@@ -28575,7 +28575,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Focus border color of the task board column.
+
Description
The border color of the focused TaskBoard column.
@@ -28585,7 +28585,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical padding of the task board column header.
+
Description
The vertical padding of the TaskBoard column header.
@@ -28595,7 +28595,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Horizontal padding of the task board column header.
+
Description
The horizontal padding of the TaskBoard column header.
@@ -28605,7 +28605,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Spacing of the task board column header.
+
Description
The spacing of the TaskBoard column header.
@@ -28615,7 +28615,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Spacing of the task board column header actions.
+
Description
The spacing of the TaskBoard column header actions.
@@ -28625,7 +28625,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Font weight of the task board column header.
+
Description
The font weight of the TaskBoard column header.
@@ -28635,7 +28635,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Text color of the task board column header.
+
Description
The text color of the TaskBoard column header.
@@ -28645,7 +28645,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical padding of the task board column cards wrapper.
+
Description
The vertical padding of the TaskBoard column Card wrapper.
@@ -28655,7 +28655,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Horizontal padding of the task board column cards wrapper.
+
Description
The horizontal padding of the TaskBoard column Card wrapper.
@@ -28665,7 +28665,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Spacing of the task board column cards wrapper.
+
Description
The spacing of the TaskBoard column Card wrapper.
@@ -28675,7 +28675,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Default width of the task board pane.
+
Description
The default width of the TaskBoard pane.
@@ -28685,7 +28685,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical padding of the task board pane
+
Description
The vertical padding of the TaskBoard pane.
@@ -28695,7 +28695,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Horizontal padding of the task board pane.
+
Description
The horizontal padding of the TaskBoard pane.
@@ -28705,7 +28705,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border width of the task board pane.
+
Description
The border width of the TaskBoard pane.
@@ -28715,7 +28715,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Background color of the task board pane.
+
Description
The background color of the TaskBoard pane.
@@ -28725,7 +28725,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Text color of the task board pane.
+
Description
The text color of the TaskBoard pane.
@@ -28735,7 +28735,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border color of the task board pane.
+
Description
The border color of the TaskBoard pane.
@@ -28745,7 +28745,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical padding of the task board pane header.
+
Description
The vertical padding of the TaskBoard pane header.
@@ -28755,7 +28755,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Horizontal padding of the task board pane header.
+
Description
The horizontal padding of the TaskBoard pane header.
@@ -28765,7 +28765,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Font size of the task board pane header.
+
Description
The font size of the TaskBoard pane header.
@@ -28775,7 +28775,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Font weight of the task board pane header.
+
Description
The font weight of the TaskBoard pane header.
@@ -28785,7 +28785,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Text color of the task board pane header.
+
Description
The text color of the TaskBoard pane header.
@@ -28795,7 +28795,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical padding of the task board pane content.
+
Description
The vertical padding of the TaskBoard pane content.
@@ -28805,7 +28805,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Horizontal padding of the task board pane content.
+
Description
The horizontal padding of the TaskBoard pane content.
@@ -28815,7 +28815,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical padding of the task board pane actions.
+
Description
The vertical padding of the TaskBoard pane actions.
@@ -28825,7 +28825,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Horizontal padding of the task board pane actions.
+
Description
The horizontal padding of the TaskBoard pane actions.
@@ -28835,7 +28835,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical padding of the task board card.
+
Description
The vertical padding of the TaskBoard Card.
@@ -28845,7 +28845,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Horizontal padding of the task board card.
+
Description
The horizontal padding of the TaskBoard Card.
@@ -28855,7 +28855,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border width of the task board card category.
+
Description
The border width of the TaskBoard Card category.
@@ -28865,7 +28865,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Focus shadow of the task board card.
+
Description
The shadow of the focused TaskBoard Card.
@@ -28875,7 +28875,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Selected border of the task board card.
+
Description
The border of the selected TaskBoard Card.
@@ -28885,7 +28885,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Selected shadow of the task board card.
+
Description
The shadow of the selected TaskBoard Card.
@@ -28895,7 +28895,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Font size of the task board card title.
+
Description
The font size of the TaskBoard Card title.
@@ -28905,7 +28905,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Font weight of the task board card title.
+
Description
The font weight of the TaskBoard Card title.
@@ -28915,7 +28915,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border width of the task board card placeholder.
+
Description
The border width of the TaskBoard Card placeholder.
@@ -28925,7 +28925,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border radius of the task board card placeholder.
+
Description
The border radius of the TaskBoard Card placeholder.
@@ -28935,7 +28935,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Background color of the task board card placeholder.
+
Description
The background color of the TaskBoard Card placeholder.
@@ -28945,7 +28945,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border color of the task board card placeholder.
+
Description
The border color of the TaskBoard Card placeholder.
@@ -31745,7 +31745,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Border width of the wizard.
+
Description
The border width of the Wizard.
@@ -31755,7 +31755,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Horizontal padding of the wizard.
+
Description
The horizontal padding of the Wizard.
@@ -31765,7 +31765,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical padding of the wizard.
+
Description
The vertical padding of the Wizard.
@@ -31775,7 +31775,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Font size of the wizard.
+
Description
The font size of the Wizard.
@@ -31785,7 +31785,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Line height of the wizard.
+
Description
The line height of the Wizard.
@@ -31795,7 +31795,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Font family of the wizard.
+
Description
The font family of the Wizard.
@@ -31805,7 +31805,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Horizontal padding of the wizard steps.
+
Description
The horizontal padding of the Wizard steps.
@@ -31815,7 +31815,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical padding of the wizard steps.
+
Description
The vertical padding of the Wizard steps.
@@ -31825,7 +31825,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Horizontal padding of the wizard content.
+
Description
The horizontal padding of the Wizard content.
@@ -31835,7 +31835,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical padding of the wizard content.
+
Description
The vertical padding of the Wizard content.
@@ -31845,7 +31845,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Text color of the wizard content.
+
Description
The text color of the Wizard content.
@@ -31855,7 +31855,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Background color of the wizard content.
+
Description
The background color of the Wizard content.
@@ -31865,7 +31865,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Horizontal margin of the wizard buttons container.
+
Description
The horizontal margin of the Wizard Button container.
@@ -31875,7 +31875,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Vertical margin of the wizard buttons container.
+
Description
The vertical margin of the Wizard Button container.
@@ -31885,7 +31885,7 @@ The following table lists the available variables for customizing the Fluent the -
Description
Outline of the focused wizard step.
+
Description
The outline of the focused Wizard step.
diff --git a/packages/material/docs/customization-chat.md b/packages/material/docs/customization-chat.md new file mode 100644 index 00000000000..48f16879b55 --- /dev/null +++ b/packages/material/docs/customization-chat.md @@ -0,0 +1,608 @@ +--- +title: Customizing Chat +description: "Refer to the list of the Kendo UI Material theme variables available for customization." +slug: variables_kendothemematerial_chat +position: 9 +--- + +# Customizing Chat + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-chat-padding-xNumber16px16px
Description
The horizontal padding of the Chat.
+
$kendo-chat-padding-yNumber16px16px
Description
The vertical padding of the Chat.
+
$kendo-chat-widthNumber500px500px
Description
The width of the Chat.
+
$kendo-chat-heightNumber600px600px
Description
The height of the Chat.
+
$kendo-chat-border-widthNumber1px1px
Description
The border width of the Chat.
+
$kendo-chat-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the Chat.
+
$kendo-chat-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Chat.
+
$kendo-chat-line-heightNumber$kendo-line-height-md2
Description
The line height of the Chat.
+
$kendo-chat-item-spacing-xNumber8px8px
Description
The horizontal spacing between items of the Chat.
+
$kendo-chat-item-spacing-yNumber16px16px
Description
The vertical spacing between items of the Chat.
+
$kendo-chat-message-list-padding-xNumber$kendo-chat-padding-x16px
Description
The horizontal padding of the Chat message list.
+
$kendo-chat-message-list-padding-yNumber$kendo-chat-padding-y16px
Description
The vertical padding of the Chat message list.
+
$kendo-chat-message-list-spacingNumber$kendo-chat-item-spacing-y16px
Description
The spacing of the Chat message list.
+
$kendo-chat-timestamp-font-sizeStringsmallersmaller
Description
The font size of the Chat timestamp.
+
$kendo-chat-timestamp-line-heightNullnullnull
Description
The line height of the Chat timestamp.
+
$kendo-chat-timestamp-transformStringuppercaseuppercase
Description
The text transform of the Chat timestamp.
+
$kendo-chat-timestamp-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
The text color of the Chat timestamp.
+
$kendo-chat-timestamp-bgNullnullnull
Description
The background color of the Chat timestamp.
+
$kendo-chat-bubble-padding-xNumber12px12px
Description
The horizontal padding of the Chat bubble message.
+
$kendo-chat-bubble-padding-yNumber8px8px
Description
The vertical padding of the Chat bubble message.
+
$kendo-chat-bubble-spacingNumber2px2px
Description
The spacing of the Chat bubble message.
+
$kendo-chat-bubble-line-heightNumber1.251.25
Description
The line height of the Chat bubble message.
+
$kendo-chat-bubble-border-radiusNumber12px12px
Description
The border radius of the Chat bubble message.
+
$kendo-chat-bubble-border-radius-smNumber2px2px
Description
The border radius of the Chat small bubble message
+
$kendo-chat-avatar-sizeNumber32px32px
Description
The size of the Chat Avatar.
+
$kendo-chat-avatar-spacingNumber$kendo-chat-item-spacing-x8px
Description
The spacing of the Chat Avatar.
+
$kendo-chat-toolbar-padding-xNumber$kendo-toolbar-md-padding-x8px
Description
The horizontal padding of the Chat Toolbar.
+
$kendo-chat-toolbar-padding-yNumber$kendo-toolbar-md-padding-y8px
Description
The vertical padding of the Chat Toolbar.
+
$kendo-chat-toolbar-spacingNumber$kendo-toolbar-md-spacing8px
Description
The spacing of the Chat Toolbar.
+
$kendo-chat-toolbar-bgColorif($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .5 ))whitesmoke
Description
The background color of the Chat Toolbar.
+
$kendo-chat-toolbar-textColor$kendo-toolbar-textrgba(0, 0, 0, 0.87)
Description
The text color of the Chat Toolbar.
+
$kendo-chat-toolbar-borderStringinheritinherit
Description
The border color of the Chat Toolbar.
+
$kendo-chat-quick-reply-padding-xNumber12px12px
Description
The horizontal padding of the Chat quick reply.
+
$kendo-chat-quick-reply-padding-yNumber8px8px
Description
The vertical padding of the Chat quick reply.
+
$kendo-chat-quick-reply-spacingNumber8px8px
Description
The spacing of the Chat quick reply.
+
$kendo-chat-quick-reply-line-heightNumber$kendo-chat-bubble-line-height1.25
Description
The line height of the Chat quick reply.
+
$kendo-chat-bgColor$kendo-app-bg#ffffff
Description
The background color of the Chat.
+
$kendo-chat-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the Chat.
+
$kendo-chat-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the Chat.
+
$kendo-chat-bubble-bgColor$kendo-component-bg#ffffff
Description
The background color of the Chat bubble.
+
$kendo-chat-bubble-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the Chat bubble.
+
$kendo-chat-bubble-borderColor$kendo-chat-bubble-bg#ffffff
Description
The border color of the Chat bubble.
+
$kendo-chat-bubble-shadowString$box-shadow-depth-1var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))
Description
The box shadow of the Chat bubble.
+
$kendo-chat-bubble-hover-shadowString$box-shadow-depth-2var(--kendo-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the hovered Chat bubble.
+
$kendo-chat-bubble-selected-shadowString$box-shadow-depth-3var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the selected Chat bubble.
+
$kendo-chat-alt-bubble-bgColor$kendo-color-primary#3f51b5
Description
The background color of the Chat alt bubble.
+
$kendo-chat-alt-bubble-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-chat-alt-bubble-bg ))white
Description
The text color of the Chat alt bubble.
+
$kendo-chat-alt-bubble-borderColor$kendo-chat-alt-bubble-bg#3f51b5
Description
The border color of the Chat alt bubble.
+
$kendo-chat-alt-bubble-shadowString$box-shadow-depth-1var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the Chat alt bubble.
+
$kendo-chat-alt-bubble-hover-shadowString$box-shadow-depth-2var(--kendo-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the hovered Chat alt bubble.
+
$kendo-chat-alt-bubble-selected-shadowString$box-shadow-depth-3var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the selected Chat alt bubble.
+
$kendo-chat-quick-reply-bgColortransparenttransparent
Description
The background color of Chat quick reply.
+
$kendo-chat-quick-reply-textColor$kendo-color-primary#3f51b5
Description
The text color of Chat quick reply.
+
$kendo-chat-quick-reply-borderColor$kendo-color-primary#3f51b5
Description
The border color of Chat quick reply.
+
$kendo-chat-quick-reply-hover-bgColor$kendo-color-primary#3f51b5
Description
The background color of the hovered Chat quick reply.
+
$kendo-chat-quick-reply-hover-textColor$kendo-color-primary-contrastwhite
Description
The text color of the Chat quick reply.
+
$kendo-chat-quick-reply-hover-borderColor$kendo-color-primary#3f51b5
Description
The border color of the hovered Chat quick reply.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/material/docs/customization-orgchart.md b/packages/material/docs/customization-orgchart.md new file mode 100644 index 00000000000..6c835c0d456 --- /dev/null +++ b/packages/material/docs/customization-orgchart.md @@ -0,0 +1,478 @@ +--- +title: Customizing Orgchart +description: "Refer to the list of the Kendo UI Material theme variables available for customization." +slug: variables_kendothemematerial_orgchart +position: 9 +--- + +# Customizing Orgchart + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-orgchart-spacerNumberk-map-get( $kendo-spacing, 6 )24px
Description
The spacing index of the OrgChart.
+
$kendo-orgchart-padding-yNumber$kendo-orgchart-spacer24px
Description
The vertical padding of the OrgChart.
+
$kendo-orgchart-padding-xNumber$kendo-orgchart-padding-y24px
Description
The horizontal padding of the OrgChart.
+
$kendo-orgchart-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the OrgChart.
+
$kendo-orgchart-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the OrgChart.
+
$kendo-orgchart-line-heightNumber$kendo-line-height-md2
Description
The line height of the OrgChart.
+
$kendo-orgchart-bgColor$kendo-component-bg#ffffff
Description
The background color of the OrgChart.
+
$kendo-orgchart-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the OrgChart.
+
$kendo-orgchart-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the OrgChart.
+
$kendo-orgchart-node-gapNumber$kendo-orgchart-spacer24px
Description
The spacing of the OrgChart node.
+
$kendo-orgchart-group-gapNumber$kendo-orgchart-spacer24px
Description
The spacing of the OrgChart group.
+
$kendo-orgchart-node-container-gapNumber$kendo-orgchart-spacer24px
Description
The spacing of the OrgChart node container.
+
$kendo-orgchart-node-group-padding-yNumber$kendo-orgchart-spacer24px
Description
The vertical padding of the OrgChart node group.
+
$kendo-orgchart-node-group-padding-xNumber$kendo-orgchart-node-group-padding-y24px
Description
The horizontal padding of the OrgChart node group.
+
$kendo-orgchart-node-group-border-widthNumber1px1px
Description
The border width of the OrgChart node group.
+
$kendo-orgchart-node-group-border-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the OrgChart node group.
+
$kendo-orgchart-node-group-bgColorif($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light))#f5f5f5
Description
The background color of the OrgChart node group.
+
$kendo-orgchart-node-group-textColor$kendo-base-textrgba(0, 0, 0, 0.87)
Description
The text color of the OrgChart node group.
+
$kendo-orgchart-node-group-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The border color of the OrgChart node group.
+
$kendo-orgchart-node-group-focus-borderNull$kendo-card-focus-bordernull
Description
The border color of the focused OrgChart node group.
+
$kendo-orgchart-node-group-focus-shadowList0 2px 4px -1px rgba( if($kendo-enable-color-system, k-color( on-light, true ), $elevation), .2 ), 0 4px 5px 0 rgba( if($kendo-enable-color-system, k-color( on-light, true ), $elevation), .14 ), 0 1px 10px 0 rgba( if($kendo-enable-color-system, k-color( on-light, true ), $elevation), .12 )0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)
Description
The shadow of the focused OrgChart node group.
+
$kendo-orgchart-node-group-title-font-sizeNumber$kendo-font-size-xl20px
Description
The font size of the OrgChart node group title.
+
$kendo-orgchart-node-group-title-margin-bottomNumberk-math-div( $kendo-orgchart-spacer, 4 )6px
Description
The bottom margin of the OrgChart node group title.
+
$kendo-orgchart-node-group-title-line-heightNumber$kendo-line-height-sm1.2
Description
The line height of the OrgChart node group title.
+
$kendo-orgchart-node-group-subtitle-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the OrgChart node group subtitle.
+
$kendo-orgchart-node-group-subtitle-margin-bottomNumber$kendo-orgchart-spacer24px
Description
The bottom margin of the OrgChart node group subtitle.
+
$kendo-orgchart-node-group-subtitle-textColorrgba( black, .54 )rgba(0, 0, 0, 0.54)
Description
The line height of the OrgChart node group subtitle.
+
$kendo-orgchart-card-widthNumber300px300px
Description
The width of the OrgChart Card.
+
$kendo-orgchart-card-padding-yNumber$kendo-card-padding-y12px
Description
The vertical padding of the OrgChart Card.
+
$kendo-orgchart-card-padding-xNumber$kendo-orgchart-card-padding-y12px
Description
The horizontal padding of the OrgChart Card.
+
$kendo-orgchart-card-border-widthNumber1px1px
Description
The border width of the OrgChart Card.
+
$kendo-orgchart-card-shadowStringnonenone
Description
The shadow of the OrgChart Card.
+
$kendo-orgchart-card-focus-shadowList$kendo-orgchart-node-group-focus-shadow0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)
Description
The shadow of the focused OrgChart Card.
+
$kendo-orgchart-card-title-margin-bottomNumber0px0px
Description
The bottom margin of the OrgChart Card title.
+
$kendo-orgchart-card-title-font-sizeNullnullnull
Description
The font size of the OrgChart Card title.
+
$kendo-orgchart-card-subtitle-margin-bottomNumber0px0px
Description
The bottom margin of the OrgChart Card subtitle.
+
$kendo-orgchart-card-subtitle-font-sizeNullnullnull
Description
The font size of the OrgChart Card subtitle.
+
$kendo-orgchart-card-body-border-widthList2px 0 02px 0 0
Description
The border width of the OrgChart Card body.
+
$kendo-orgchart-card-body-border-colorColortransparenttransparent
Description
The border color of the OrgChart Card body.
+
$kendo-orgchart-card-body-vbox-margin-rightNumberk-math-div( $kendo-orgchart-spacer, 2 )12px
Description
The right margin of the OrgChart Card body title wrap.
+
$kendo-orgchart-card-body-vbox-min-heightNumber$kendo-card-avatar-size45px
Description
The min height of the OrgChart Card body title wrap.
+
$kendo-orgchart-line-sizeNumber1px1px
Description
The size of the OrgChart connecting line.
+
$kendo-orgchart-line-fillColor$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The fill color of the OrgChart connecting line.
+
$kendo-orgchart-line-v-heightNumber25px25px
Description
The height of the OrgChart connecting line.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/material/docs/customization-splitter.md b/packages/material/docs/customization-splitter.md new file mode 100644 index 00000000000..64ef71dc5f5 --- /dev/null +++ b/packages/material/docs/customization-splitter.md @@ -0,0 +1,228 @@ +--- +title: Customizing Splitter +description: "Refer to the list of the Kendo UI Material theme variables available for customization." +slug: variables_kendothemematerial_splitter +position: 9 +--- + +# Customizing Splitter + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-splitter-border-widthNumber1px1px
Description
The width of the border around the Splitter.
+
$kendo-splitter-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the Splitter.
+
$kendo-splitter-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Splitter.
+
$kendo-splitter-line-heightNumber$kendo-line-height-md2
Description
The line height of the Splitter.
+
$kendo-splitter-bgColor$kendo-component-bg#ffffff
Description
The background color of the Splitter.
+
$kendo-splitter-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the Splitter.
+
$kendo-splitter-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the Splitter.
+
$kendo-splitter-splitbar-sizeNumberk-map-get( $kendo-spacing, 3 )12px
Description
The size of the Splitter splitbar.
+
$kendo-splitter-drag-handle-lengthNumber20px20px
Description
The length of the Splitter drag handle.
+
$kendo-splitter-drag-handle-thicknessNumber2px2px
Description
The thickness of the Splitter drag handle.
+
$kendo-splitter-drag-icon-marginNumber7px7px
Description
The margin of the Splitter drag handle icon.
+
$kendo-splitter-collapse-icon-padding-xNullnullnull
Description
The horizontal padding of the collapse icon in the Splitter.
+
$kendo-splitter-collapse-icon-padding-yNumberk-map-get( $kendo-spacing, .5 )2px
Description
The vertical padding of the collapse icon in the Splitter.
+
$kendo-splitbar-bgColorif($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-splitter-bg, 1 ))#ebebeb
Description
The background color of the Splitter splitbar.
+
$kendo-splitbar-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
The text color of the Splitter splitbar.
+
$kendo-splitbar-hover-bgColorif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-splitbar-bg, .5 ))#e2e2e2
Description
The hover background color of the Splitter splitbar.
+
$kendo-splitbar-hover-textColor$kendo-splitbar-textrgba(0, 0, 0, 0.54)
Description
The hover text color of the Splitter splitbar.
+
$kendo-splitbar-selected-bgColor$kendo-color-primary#3f51b5
Description
The selected background color of the Splitter splitbar.
+
$kendo-splitbar-selected-textColor$kendo-color-primary-contrastwhite
Description
The selected text color of the Splitter splitbar.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/material/docs/customization-stepper.md b/packages/material/docs/customization-stepper.md new file mode 100644 index 00000000000..8ba43dcc2fb --- /dev/null +++ b/packages/material/docs/customization-stepper.md @@ -0,0 +1,718 @@ +--- +title: Customizing Stepper +description: "Refer to the list of the Kendo UI Material theme variables available for customization." +slug: variables_kendothemematerial_stepper +position: 9 +--- + +# Customizing Stepper + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-stepper-margin-xNullnullnull
Description
The horizontal margin the Stepper.
+
$kendo-stepper-margin-yNullnullnull
Description
The vertical margin the Stepper.
+
$kendo-stepper-padding-xNullnullnull
Description
The horizontal padding the Stepper.
+
$kendo-stepper-padding-yNullnullnull
Description
The vertical padding the Stepper.
+
$kendo-stepper-label-margin-xNumber12px12px
Description
The horizontal margin the Stepper label.
+
$kendo-stepper-label-padding-xNumber12px12px
Description
The horizontal padding the Stepper label.
+
$kendo-stepper-label-padding-yNumber5px5px
Description
The vertical padding the Stepper label.
+
$kendo-stepper-border-widthNumber0px0px
Description
The width of the border around the Stepper.
+
$kendo-stepper-inline-content-padding-xNumber20px20px
Description
The horizontal padding the Stepper content.
+
$kendo-stepper-inline-content-padding-yNumber10px10px
Description
The vertical padding the Stepper content.
+
$kendo-stepper-font-sizeNumber$kendo-font-size-md14px
+
$kendo-stepper-line-heightNumberk-math-div( 20, 14 )1.4285714286
+
$kendo-stepper-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
+
$kendo-stepper-bgNullnullnull
Description
The background color of the Stepper.
+
$kendo-stepper-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the Stepper.
+
$kendo-stepper-borderNullnullnull
Description
The border color of the Stepper.
+
$kendo-stepper-indicator-widthNumber28px28px
Description
The width of the Stepper indicator.
+
$kendo-stepper-indicator-heightNumber$kendo-stepper-indicator-width28px
Description
The height of the Stepper indicator.
+
$kendo-stepper-indicator-border-radiusNumber50%50%
Description
The border radius of the Stepper indicator.
+
$kendo-stepper-indicator-border-widthNumber1px1px
Description
The border width of the Stepper indicator.
+
$kendo-stepper-indicator-focus-border-widthNumber1px1px
Description
The border width of the focused Stepper indicator.
+
$kendo-stepper-indicator-focus-sizeNumber2px2px
Description
The size of the focused Stepper indicator.
+
$kendo-stepper-indicator-focus-offsetNumber3px3px
Description
The offset of the Stepper focused indicator.
+
$kendo-stepper-indicator-focus-calc-offsetCalculationcalc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} )calc(1px + 3px)
Description
The calculated offset of the focused Stepper indicator.
+
$kendo-stepper-indicator-bgColor$kendo-component-bg#ffffff
Description
The background color of the Stepper indicator.
+
$kendo-stepper-indicator-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the Stepper indicator.
+
$kendo-stepper-indicator-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the Stepper indicator.
+
$kendo-stepper-indicator-hover-bgColorif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-stepper-indicator-bg ))#ebebeb
Description
The background color of the hovered Stepper indicator.
+
$kendo-stepper-indicator-hover-textNullnullnull
Description
The text color of the hovered Stepper indicator.
+
$kendo-stepper-indicator-hover-borderNullnullnull
Description
The border color of the hovered Stepper indicator.
+
$kendo-stepper-indicator-disabled-bgNullnullnull
Description
The background color of the disabled Stepper indicator.
+
$kendo-stepper-indicator-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .32 ), $kendo-disabled-text)rgba(0, 0, 0, 0.38)
Description
The text color of the disabled Stepper indicator.
+
$kendo-stepper-indicator-disabled-borderNullnullnull
Description
The border color of the disabled Stepper indicator.
+
$kendo-stepper-indicator-done-bgColor$kendo-color-primary#3f51b5
Description
The background color of the Stepper done indicator.
+
$kendo-stepper-indicator-done-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg ))white
Description
The text color of the Stepper done indicator.
+
$kendo-stepper-indicator-done-borderColor$kendo-stepper-indicator-done-bg#3f51b5
Description
The border color of the Stepper done indicator.
+
$kendo-stepper-indicator-done-hover-bgColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg ))#3a4ba7
Description
The background color of the hovered Stepper done indicator.
+
$kendo-stepper-indicator-done-hover-textNullnullnull
Description
The text color of the hovered Stepper done indicator.
+
$kendo-stepper-indicator-done-hover-borderNullnullnull
Description
The border color of the hovered Stepper done indicator.
+
$kendo-stepper-indicator-done-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .6 ), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%))#8c97d3
Description
The background color of the disabled Stepper done indicator.
+
$kendo-stepper-indicator-done-disabled-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg ))white
Description
The text color of the disabled Stepper done indicator.
+
$kendo-stepper-indicator-done-disabled-borderColor$kendo-stepper-indicator-done-disabled-bg#8c97d3
Description
The border color of the disabled Stepper done indicator.
+
$kendo-stepper-indicator-current-bgColor$kendo-stepper-indicator-done-bg#3f51b5
Description
The background color of the Stepper current indicator.
+
$kendo-stepper-indicator-current-textColor$kendo-stepper-indicator-done-textwhite
Description
The text color of the Stepper current indicator.
+
$kendo-stepper-indicator-current-borderColor$kendo-stepper-indicator-done-border#3f51b5
Description
The border color of the Stepper current indicator.
+
$kendo-stepper-indicator-current-hover-bgColor$kendo-stepper-indicator-done-hover-bg#3a4ba7
Description
The background color of the hovered Stepper current indicator.
+
$kendo-stepper-indicator-current-hover-textNull$kendo-stepper-indicator-done-hover-textnull
Description
The text color of the hovered Stepper current indicator.
+
$kendo-stepper-indicator-current-hover-borderNull$kendo-stepper-indicator-done-hover-bordernull
Description
The border color of the hovered Stepper current indicator.
+
$kendo-stepper-indicator-current-disabled-bgColor$kendo-stepper-indicator-done-disabled-bg#8c97d3
Description
The background color of the disabled Stepper current indicator.
+
$kendo-stepper-indicator-current-disabled-textColor$kendo-stepper-indicator-done-disabled-textwhite
Description
The text color of the disabled Stepper current indicator.
+
$kendo-stepper-indicator-current-disabled-borderColor$kendo-stepper-indicator-done-disabled-border#8c97d3
Description
The border color of the disabled Stepper current indicator.
+
$kendo-stepper-label-textNullnullnull
Description
The text color of the Stepper label.
+
$kendo-stepper-label-success-textColor$kendo-color-success#37b400
Description
The success text color of the Stepper label.
+
$kendo-stepper-label-error-textColor$kendo-color-error#f31700
Description
The error text color of the Stepper label.
+
$kendo-stepper-label-hover-textNullnullnull
Description
The text color of the hovered Stepper label.
+
$kendo-stepper-label-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .32 ), k-map-get( $theme, disabled-text ))rgba(0, 0, 0, 0.38)
Description
The text color of the disabled Stepper label.
+
$kendo-stepper-optional-label-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
The text color of the Stepper optional label.
+
$kendo-stepper-optional-label-opacityNullnullnull
Description
The opacity of the Stepper optional label.
+
$kendo-stepper-optional-label-font-sizeNumber$kendo-font-size-sm12px
Description
The font size of the Stepper optional label.
+
$kendo-stepper-optional-label-font-styleNullnullnull
Description
The font style of the Stepper optional label.
+
$kendo-stepper-progressbar-sizeNumber2px2px
Description
The size of the Stepper ProgressBar.
+
$kendo-stepper-progressbar-bgNullnullnull
Description
The background color of the Stepper ProgressBar.
+
$kendo-stepper-progressbar-textNullnullnull
Description
The text color of the Stepper ProgressBar.
+
$kendo-stepper-progressbar-fill-bgNullnullnull
Description
The background color of the selected Stepper ProgressBar.
+
$kendo-stepper-progressbar-fill-textNullnullnull
Description
The text color of the selected Stepper ProgressBar.
+
$kendo-stepper-content-transition-propertyStringheightheight
Description
The property name of the Stepper transition.
+
$kendo-stepper-content-transition-durationNumber300ms300ms
Description
The duration of the Stepper transition.
+
$kendo-stepper-content-transition-timing-functionListcubic-bezier(.4, 0, .2, 1) 0mscubic-bezier(0.4, 0, 0.2, 1) 0ms
Description
The timing function of the Stepper transition.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/material/docs/customization-taskboard.md b/packages/material/docs/customization-taskboard.md new file mode 100644 index 00000000000..f7a55254f60 --- /dev/null +++ b/packages/material/docs/customization-taskboard.md @@ -0,0 +1,788 @@ +--- +title: Customizing Taskboard +description: "Refer to the list of the Kendo UI Material theme variables available for customization." +slug: variables_kendothemematerial_taskboard +position: 9 +--- + +# Customizing Taskboard + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-taskboard-spacerNumberk-map-get( $kendo-spacing, 4 )16px
Description
The spacing index of the TaskBoard.
+
$kendo-taskboard-padding-yNullnullnull
Description
The vertical padding of the TaskBoard.
+
$kendo-taskboard-padding-xNullnullnull
Description
The horizontal of the TaskBoard.
+
$kendo-taskboard-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the TaskBoard.
+
$kendo-taskboard-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the TaskBoard.
+
$kendo-taskboard-line-heightNumber$kendo-line-height-md2
Description
The line height of the TaskBoard.
+
$kendo-taskboard-bgNullnullnull
Description
The background color of the TaskBoard.
+
$kendo-taskboard-textNullnullnull
Description
The text color of the TaskBoard.
+
$kendo-taskboard-borderNullnullnull
Description
The border color of the TaskBoard.
+
$kendo-taskboard-toolbar-padding-yNumber$kendo-taskboard-spacer16px
Description
The vertical padding of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-padding-xNumber$kendo-taskboard-toolbar-padding-y16px
Description
The horizontal padding of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-bgNullnullnull
Description
The background color of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-textNullnullnull
Description
The text color of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-borderNullnullnull
Description
The border color of the TaskBoard Toolbar.
+
$kendo-taskboard-toolbar-gradientNullnullnull
Description
The gradient of the TaskBoard Toolbar.
+
$kendo-taskboard-content-padding-yNumber$kendo-taskboard-spacer16px
Description
The vertical padding of the TaskBoard content.
+
$kendo-taskboard-content-padding-xNumber$kendo-taskboard-content-padding-y16px
Description
The horizontal padding of the TaskBoard content.
+
$kendo-taskboard-column-container-spacing-yNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The vertical spacing of the TaskBoard column container.
+
$kendo-taskboard-column-container-padding-yNumber0px0px
Description
The vertical padding of the TaskBoard column container.
+
$kendo-taskboard-column-container-padding-xNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The horizontal padding of the TaskBoard column container.
+
$kendo-taskboard-columns-container-gapNumber$kendo-taskboard-spacer16px
Description
The spacing of the TaskBoard columns container.
+
$kendo-taskboard-column-widthNumber320px320px
Description
The default width of the TaskBoard column.
+
$kendo-taskboard-column-border-widthNumber1px1px
Description
The border width of the TaskBoard column.
+
$kendo-taskboard-column-border-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the TaskBoard column.
+
$kendo-taskboard-column-bgColorif($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light))#f5f5f5
Description
The background color of the TaskBoard column.
+
$kendo-taskboard-column-textNullnullnull
Description
The text color of the TaskBoard column.
+
$kendo-taskboard-column-borderColortransparenttransparent
Description
The border color of the TaskBoard column.
+
$kendo-taskboard-column-focus-bgNullnullnull
Description
The background color of the focused TaskBoard column.
+
$kendo-taskboard-column-focus-textNullnullnull
Description
The text color of the focused TaskBoard column.
+
$kendo-taskboard-column-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 ))rgba(0, 0, 0, 0.264)
Description
The border color of the focused TaskBoard column.
+
$kendo-taskboard-column-header-padding-yNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The vertical padding of the TaskBoard column header.
+
$kendo-taskboard-column-header-padding-xNumber$kendo-taskboard-column-header-padding-y8px
Description
The horizontal padding of the TaskBoard column header.
+
$kendo-taskboard-column-header-gapNumberk-math-div( $kendo-taskboard-spacer, 4 )4px
Description
The spacing of the TaskBoard column header.
+
$kendo-taskboard-column-header-actions-gapNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The spacing of the TaskBoard column header actions.
+
$kendo-taskboard-column-header-font-weightNumber500500
Description
The font weight of the TaskBoard column header.
+
$kendo-taskboard-column-header-textColor$kendo-component-header-textrgba(0, 0, 0, 0.87)
Description
The text color of the TaskBoard column header.
+
$kendo-taskboard-column-cards-padding-yNullnullnull
Description
The vertical padding of the TaskBoard column Card wrapper.
+
$kendo-taskboard-column-cards-padding-xNullnullnull
Description
The horizontal padding of the TaskBoard column Card wrapper.
+
$kendo-taskboard-column-cards-gapNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The spacing of the TaskBoard column Card wrapper.
+
$kendo-taskboard-pane-widthNumber$kendo-taskboard-column-width320px
Description
The default width of the TaskBoard pane.
+
$kendo-taskboard-pane-padding-yNullnullnull
Description
The vertical padding of the TaskBoard pane.
+
$kendo-taskboard-pane-padding-xNullnullnull
Description
The horizontal padding of the TaskBoard pane.
+
$kendo-taskboard-pane-border-widthNumber1px1px
Description
The border width of the TaskBoard pane.
+
$kendo-taskboard-pane-bgColor$kendo-component-bg#ffffff
Description
The background color of the TaskBoard pane.
+
$kendo-taskboard-pane-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the TaskBoard pane.
+
$kendo-taskboard-pane-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the TaskBoard pane.
+
$kendo-taskboard-pane-header-padding-yNumber( $kendo-taskboard-spacer * .75 )12px
Description
The vertical padding of the TaskBoard pane header.
+
$kendo-taskboard-pane-header-padding-xNumber$kendo-taskboard-spacer16px
Description
The horizontal padding of the TaskBoard pane header.
+
$kendo-taskboard-pane-header-font-weightNumber500500
Description
The font weight of the TaskBoard pane header.
+
$kendo-taskboard-pane-header-textColor$kendo-component-header-textrgba(0, 0, 0, 0.87)
Description
The text color of the TaskBoard pane header.
+
$kendo-taskboard-pane-content-padding-yNumber0px0px
Description
The vertical padding of the TaskBoard pane content.
+
$kendo-taskboard-pane-content-padding-xNumber$kendo-taskboard-spacer16px
Description
The horizontal padding of the TaskBoard pane content.
+
$kendo-taskboard-pane-actions-padding-yNumber( $kendo-taskboard-spacer * .75 )12px
Description
The vertical padding of the TaskBoard pane actions.
+
$kendo-taskboard-pane-actions-padding-xNumber$kendo-taskboard-spacer16px
Description
The horizontal padding of the TaskBoard pane actions.
+
$kendo-taskboard-card-padding-yNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The vertical padding of the TaskBoard Card.
+
$kendo-taskboard-card-padding-xNumber$kendo-taskboard-card-padding-y8px
Description
The horizontal padding of the TaskBoard Card.
+
$kendo-taskboard-card-border-widthNumber1px1px
Description
The border width of the TaskBoard Card.
+
$kendo-taskboard-card-border-radiusNumber$kendo-card-border-radius4px
Description
The border radius of the TaskBoard Card.
+
$kendo-taskboard-card-bgColor$kendo-card-bg#ffffff
Description
The background color of the TaskBoard Card.
+
$kendo-taskboard-card-textColor$kendo-card-textrgba(0, 0, 0, 0.87)
Description
The text color of the TaskBoard Card.
+
$kendo-taskboard-card-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The border color of the TaskBoard Card.
+
$kendo-taskboard-card-shadowStringnonenone
Description
The shadow of the TaskBoard Card.
+
$kendo-taskboard-card-category-border-widthNumber4px4px
Description
The border width of the TaskBoard Card category.
+
$kendo-taskboard-card-hover-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% ))rgba(0, 0, 0, 0.172)
Description
The border color of the hovered TaskBoard Card.
+
$kendo-taskboard-card-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 9% ))rgba(0, 0, 0, 0.1628)
Description
The border color of the focused TaskBoard Card.
+
$kendo-taskboard-card-focus-shadowStringnonenone
Description
The shadow of the focused TaskBoard Card.
+
$kendo-taskboard-card-selected-borderColor$kendo-color-primary-lighter#7986cb
Description
The border of the selected TaskBoard Card.
+
$kendo-taskboard-card-selected-shadowStringnonenone
Description
The shadow of the selected TaskBoard Card.
+
$kendo-taskboard-card-header-textColor$kendo-color-primary#3f51b5
Description
The text color of the TaskBoard Card header text.
+
$kendo-taskboard-card-header-focus-textColor$kendo-color-primary-darker#303f9f
Description
The text color of the hovered TaskBoard Card header text.
+
$kendo-taskboard-card-header-hover-textColor$kendo-color-primary-darker#303f9f
Description
The text color of the focused TaskBoard Card header text.
+
$kendo-taskboard-drag-placeholder-border-widthNumber1px1px
Description
The border width of the TaskBoard Card placeholder.
+
$kendo-taskboard-drag-placeholder-border-radiusNumber$kendo-taskboard-card-border-radius4px
Description
The border radius of the TaskBoard Card placeholder.
+
$kendo-taskboard-drag-placeholder-bgColorrgba( white, .2 )rgba(255, 255, 255, 0.2)
Description
The background color of the TaskBoard Card placeholder.
+
$kendo-taskboard-drag-placeholder-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the TaskBoard Card placeholder.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/material/docs/customization-wizard.md b/packages/material/docs/customization-wizard.md new file mode 100644 index 00000000000..f2fe9a25969 --- /dev/null +++ b/packages/material/docs/customization-wizard.md @@ -0,0 +1,138 @@ +--- +title: Customizing Wizard +description: "Refer to the list of the Kendo UI Material theme variables available for customization." +slug: variables_kendothemematerial_wizard +position: 9 +--- + +# Customizing Wizard + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-wizard-padding-xNumber$kendo-padding-md-x * 1.2520px
Description
The horizontal padding of the Wizard.
+
$kendo-wizard-padding-yNumber$kendo-wizard-padding-x20px
Description
The vertical padding of the Wizard.
+
$kendo-wizard-content-padding-xNumber$kendo-padding-md-x * 232px
Description
The horizontal padding of the Wizard content.
+
$kendo-wizard-content-padding-yNumber$kendo-padding-md-y * 832px
Description
The vertical padding of the Wizard content.
+
$kendo-wizard-buttons-margin-xNumber10px10px
Description
The horizontal margin of the Wizard Button container.
+
$kendo-wizard-border-widthNumber0px0px
Description
The border width of the Wizard.
+
$kendo-wizard-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Wizard.
+
$kendo-wizard-line-heightNumber$kendo-line-height-md2
Description
The line height of the Wizard.
+
$kendo-wizard-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the Wizard.
+
$kendo-wizard-step-focus-borderColor#656565#656565
Description
The outline of the focused Wizard step.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/material/docs/customization.md b/packages/material/docs/customization.md index 8d541206314..a8534ca0178 100644 --- a/packages/material/docs/customization.md +++ b/packages/material/docs/customization.md @@ -3106,7 +3106,7 @@ The following table lists the available variables for customizing the Material t -### Checkbox +### Chat @@ -3124,479 +3124,579 @@ The following table lists the available variables for customizing the Material t - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + +
$kendo-checkbox-border-width$kendo-chat-padding-x Number2px2px16px16px
Description
The border width of the CheckBox.
+
Description
The horizontal padding of the Chat.
$kendo-checkbox-sm-size$kendo-chat-padding-y Numberk-map-get( $kendo-spacing, 3 )12px16px16px
Description
The size of a small CheckBox.
+
Description
The vertical padding of the Chat.
$kendo-checkbox-md-size$kendo-chat-width Numberk-map-get( $kendo-spacing, 4 )16px500px500px
Description
The size of a medium CheckBox.
+
Description
The width of the Chat.
$kendo-checkbox-lg-size$kendo-chat-height Numberk-map-get( $kendo-spacing, 5 )20px600px600px
Description
The size of a large CheckBox.
+
Description
The height of the Chat.
$kendo-checkbox-sm-glyph-size$kendo-chat-border-width Numberk-map-get( $kendo-spacing, 2.5 )10px1px1px
Description
The glyph size of a small CheckBox.
+
Description
The border width of the Chat.
$kendo-checkbox-md-glyph-sizeNumberk-map-get( $kendo-spacing, 3.5 )14px$kendo-chat-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The glyph size of a medium CheckBox.
+
Description
The font family of the Chat.
$kendo-checkbox-lg-glyph-size$kendo-chat-font-size Numberk-map-get( $kendo-spacing, 4.5 )18px$kendo-font-size-md14px
Description
The glyph size of a large CheckBox.
+
Description
The font size of the Chat.
$kendo-checkbox-sm-ripple-size$kendo-chat-line-height Number300%300%$kendo-line-height-md2
Description
The ripple size of a small CheckBox.
+
Description
The line height of the Chat.
$kendo-checkbox-md-ripple-size$kendo-chat-item-spacing-x Number300%300%8px8px
Description
The ripple size of a medium CheckBox.
+
Description
The horizontal spacing between items of the Chat.
$kendo-checkbox-lg-ripple-size$kendo-chat-item-spacing-y Number300%300%16px16px
Description
The ripple size of a large CheckBox.
+
Description
The vertical spacing between items of the Chat.
$kendo-checkbox-bgNullnullnull$kendo-chat-message-list-padding-xNumber$kendo-chat-padding-x16px
Description
The background color of the CheckBox.
+
Description
The horizontal padding of the Chat message list.
$kendo-checkbox-textNullnullnull$kendo-chat-message-list-padding-yNumber$kendo-chat-padding-y16px
Description
The text color of the CheckBox.
+
Description
The vertical padding of the Chat message list.
$kendo-checkbox-borderColorrgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .54 )rgba(0, 0, 0, 0.54)$kendo-chat-message-list-spacingNumber$kendo-chat-item-spacing-y16px
Description
The border color of the CheckBox.
+
Description
The spacing of the Chat message list.
$kendo-checkbox-hover-bgNullnullnull$kendo-chat-timestamp-font-sizeStringsmallersmaller
Description
The background color of the hovered CheckBox.
+
Description
The font size of the Chat timestamp.
$kendo-checkbox-hover-text$kendo-chat-timestamp-line-height Null null null
Description
The text color of the hovered CheckBox.
+
Description
The line height of the Chat timestamp.
$kendo-checkbox-hover-borderNullnullnull$kendo-chat-timestamp-transformStringuppercaseuppercase
Description
The border color of the hovered CheckBox.
+
Description
The text transform of the Chat timestamp.
$kendo-checkbox-checked-bg$kendo-chat-timestamp-text Color$kendo-color-primary#3f51b5$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
The background color of the checked CheckBox.
+
Description
The text color of the Chat timestamp.
$kendo-checkbox-checked-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-checked-bg ))white$kendo-chat-timestamp-bgNullnullnull
Description
The text color of the checked CheckBox.
+
Description
The background color of the Chat timestamp.
$kendo-checkbox-checked-borderColor$kendo-checkbox-checked-bg#3f51b5$kendo-chat-bubble-padding-xNumber12px12px
Description
The border color of the checked CheckBox.
+
Description
The horizontal padding of the Chat bubble message.
$kendo-checkbox-indeterminate-bgColor$kendo-checkbox-checked-bg#3f51b5$kendo-chat-bubble-padding-yNumber8px8px
Description
The background color of the indeterminate CheckBox.
+
Description
The vertical padding of the Chat bubble message.
$kendo-checkbox-indeterminate-textColor$kendo-checkbox-checked-textwhite$kendo-chat-bubble-spacingNumber2px2px
Description
The text color of the indeterminate CheckBox.
+
Description
The spacing of the Chat bubble message.
$kendo-checkbox-indeterminate-borderColor$kendo-checkbox-checked-border#3f51b5$kendo-chat-bubble-line-heightNumber1.251.25
Description
The border color of the indeterminate CheckBox.
+
Description
The line height of the Chat bubble message.
$kendo-checkbox-focus-borderNullnullnull$kendo-chat-bubble-border-radiusNumber12px12px
Description
The border color of the focused CheckBox.
+
Description
The border radius of the Chat bubble message.
$kendo-checkbox-focus-shadowNullnullnull$kendo-chat-bubble-border-radius-smNumber2px2px
Description
The box shadow of the focused CheckBox.
+
Description
The border radius of the Chat small bubble message
$kendo-checkbox-focus-checked-borderNullnullnull$kendo-chat-avatar-sizeNumber32px32px
Description
The border color of the focused and checked CheckBox.
+
Description
The size of the Chat Avatar.
$kendo-checkbox-focus-checked-shadowNullnullnull$kendo-chat-avatar-spacingNumber$kendo-chat-item-spacing-x8px
Description
The box shadow of the focused and checked CheckBox.
+
Description
The spacing of the Chat Avatar.
$kendo-checkbox-disabled-bgNullnullnull$kendo-chat-toolbar-padding-xNumber$kendo-toolbar-md-padding-x8px
Description
The background color of the disabled CheckBox.
+
Description
The horizontal padding of the Chat Toolbar.
$kendo-checkbox-disabled-textNullnullnull$kendo-chat-toolbar-padding-yNumber$kendo-toolbar-md-padding-y8px
Description
The text color of the disabled CheckBox.
+
Description
The vertical padding of the Chat Toolbar.
$kendo-checkbox-disabled-borderColorif($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-component-bg, 4 ))#adadad$kendo-chat-toolbar-spacingNumber$kendo-toolbar-md-spacing8px
Description
The border color of the disabled CheckBox.
+
Description
The spacing of the Chat Toolbar.
$kendo-checkbox-disabled-checked-bg$kendo-chat-toolbar-bg Color$kendo-checkbox-disabled-border#adadadif($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .5 ))whitesmoke
Description
The background color of the disabled and checked CheckBox.
+
Description
The background color of the Chat Toolbar.
$kendo-checkbox-disabled-checked-text$kendo-chat-toolbar-text Colorif($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-checkbox-disabled-checked-bg ))black$kendo-toolbar-textrgba(0, 0, 0, 0.87)
Description
The text color of the disabled and checked CheckBox.
+
Description
The text color of the Chat Toolbar.
$kendo-checkbox-disabled-checked-borderColor$kendo-checkbox-disabled-checked-bg#adadad$kendo-chat-toolbar-borderStringinheritinherit
Description
The border color of the disabled and checked CheckBox.
+
Description
The border color of the Chat Toolbar.
$kendo-checkbox-invalid-bgNullnullnull$kendo-chat-quick-reply-padding-xNumber12px12px
Description
The background color of an invalid CheckBox.
+
Description
The horizontal padding of the Chat quick reply.
$kendo-checkbox-invalid-textColor$kendo-invalid-text#f31700$kendo-chat-quick-reply-padding-yNumber8px8px
Description
The text color of an invalid CheckBox.
+
Description
The vertical padding of the Chat quick reply.
$kendo-checkbox-invalid-borderColor$kendo-invalid-border#f31700$kendo-chat-quick-reply-spacingNumber8px8px
Description
The border color of an invalid CheckBox.
+
Description
The spacing of the Chat quick reply.
$kendo-checkbox-indicator-typeStringimageimage$kendo-chat-quick-reply-line-heightNumber$kendo-chat-bubble-line-height1.25
Description
The type of the CheckBox indicator.
+
Description
The line height of the Chat quick reply.
$kendo-checkbox-glyph-font-familyList"WebComponentsIcons", monospace"WebComponentsIcons", monospace$kendo-chat-bgColor$kendo-app-bg#ffffff
Description
The font family of the CheckBox indicator glyph.
+
Description
The background color of the Chat.
$kendo-checkbox-checked-glyphString"\e118""\e118"$kendo-chat-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The glyph of the CheckBox indicator.
+
Description
The text color of the Chat.
$kendo-checkbox-indeterminate-glyph$kendo-chat-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the Chat.
+
$kendo-chat-bubble-bgColor$kendo-component-bg#ffffff
Description
The background color of the Chat bubble.
+
$kendo-chat-bubble-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the Chat bubble.
+
$kendo-chat-bubble-borderColor$kendo-chat-bubble-bg#ffffff
Description
The border color of the Chat bubble.
+
$kendo-chat-bubble-shadow String"\e121""\e121"$box-shadow-depth-1var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))
Description
The glyph of the indeterminate CheckBox indicator.
+
Description
The box shadow of the Chat bubble.
$kendo-checkbox-checked-image$kendo-chat-bubble-hover-shadow Stringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='none' stroke='white' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/%3e%3c/svg%3e")$box-shadow-depth-2var(--kendo-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14))
Description
The image for a checked CheckBox indicator.
+
Description
The shadow of the hovered Chat bubble.
$kendo-checkbox-indeterminate-image$kendo-chat-bubble-selected-shadow Stringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-width='3' d='M4 10h12'/%3e%3c/svg%3e")$box-shadow-depth-3var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The image for a indeterminate CheckBox indicator.
+
Description
The shadow of the selected Chat bubble.
$kendo-checkbox-label-margin-xNumberk-map-get( $kendo-spacing, 1 )4px$kendo-chat-alt-bubble-bgColor$kendo-color-primary#3f51b5
Description
The horizontal margin of the CheckBox inside a label.
+
Description
The background color of the Chat alt bubble.
$kendo-checkbox-list-spacingNumberk-map-get( $kendo-spacing, 4 )16px$kendo-chat-alt-bubble-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-chat-alt-bubble-bg ))white
Description
The spacing between the items in a horizontal CheckBox list.
+
Description
The text color of the Chat alt bubble.
$kendo-checkbox-list-item-padding-xNumber0px0px$kendo-chat-alt-bubble-borderColor$kendo-chat-alt-bubble-bg#3f51b5
Description
The horizontal padding of the CheckBox list items.
+
Description
The border color of the Chat alt bubble.
$kendo-checkbox-list-item-padding-yNumber$kendo-list-md-item-padding-y8px$kendo-chat-alt-bubble-shadowString$box-shadow-depth-1var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))
Description
The vertical padding of the CheckBox list items.
+
Description
The shadow of the Chat alt bubble.
$kendo-checkbox-ripple-bg$kendo-chat-alt-bubble-hover-shadowString$box-shadow-depth-2var(--kendo-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the hovered Chat alt bubble.
+
$kendo-chat-alt-bubble-selected-shadowString$box-shadow-depth-3var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the selected Chat alt bubble.
+
$kendo-chat-quick-reply-bgColortransparenttransparent
Description
The background color of Chat quick reply.
+
$kendo-chat-quick-reply-text Color $kendo-color-primary #3f51b5
Description
The background color of the CheckBox' ripple.
+
Description
The text color of Chat quick reply.
$kendo-checkbox-ripple-opacityNumber.20.2$kendo-chat-quick-reply-borderColor$kendo-color-primary#3f51b5
Description
The opacity of the CheckBox' ripple.
+
Description
The border color of Chat quick reply.
+
$kendo-chat-quick-reply-hover-bgColor$kendo-color-primary#3f51b5
Description
The background color of the hovered Chat quick reply.
+
$kendo-chat-quick-reply-hover-textColor$kendo-color-primary-contrastwhite
Description
The text color of the Chat quick reply.
+
$kendo-chat-quick-reply-hover-borderColor$kendo-color-primary#3f51b5
Description
The border color of the hovered Chat quick reply.
-### Chip +### Checkbox @@ -3614,1068 +3714,948 @@ The following table lists the available variables for customizing the Material t - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + - + - - - - - + + + + - - + - - - - - + + + + - - + - - + - - - - - - - - - - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
$kendo-chip-border-width$kendo-checkbox-border-width Number1px1px2px2px
Description
The width of the border around the Chip.
+
Description
The border width of the CheckBox.
$kendo-chip-spacing$kendo-checkbox-sm-size Numberk-map-get( $kendo-spacing, 1 )4pxk-map-get( $kendo-spacing, 3 )12px
Description
The spacing between the text and the icons of the Chip.
+
Description
The size of a small CheckBox.
$kendo-chip-padding-x$kendo-checkbox-md-size Numberk-map-get( $kendo-spacing, 1 )4pxk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the Chip.
+
Description
The size of a medium CheckBox.
$kendo-chip-sm-padding-x$kendo-checkbox-lg-size Numberk-map-get( $kendo-spacing, 1 )4pxk-map-get( $kendo-spacing, 5 )20px
Description
The horizontal padding of the small Chip.
+
Description
The size of a large CheckBox.
$kendo-chip-md-padding-x$kendo-checkbox-sm-glyph-size Numberk-map-get( $kendo-spacing, 1 )4pxk-map-get( $kendo-spacing, 2.5 )10px
Description
The horizontal padding of the medium Chip.
+
Description
The glyph size of a small CheckBox.
$kendo-chip-lg-padding-x$kendo-checkbox-md-glyph-size Numberk-map-get( $kendo-spacing, 1 )4pxk-map-get( $kendo-spacing, 3.5 )14px
Description
The horizontal padding of the large Chip.
+
Description
The glyph size of a medium CheckBox.
$kendo-chip-padding-y$kendo-checkbox-lg-glyph-size Numberk-map-get( $kendo-spacing, 1 )4pxk-map-get( $kendo-spacing, 4.5 )18px
Description
The vertical padding of the Chip.
+
Description
The glyph size of a large CheckBox.
$kendo-chip-sm-padding-y$kendo-checkbox-sm-ripple-size Numberk-map-get( $kendo-spacing, 0.5 )2px300%300%
Description
The vertical padding of the small Chip.
+
Description
The ripple size of a small CheckBox.
$kendo-chip-md-padding-y$kendo-checkbox-md-ripple-size Numberk-map-get( $kendo-spacing, 1 )4px300%300%
Description
The vertical padding of the medium Chip.
+
Description
The ripple size of a medium CheckBox.
$kendo-chip-lg-padding-y$kendo-checkbox-lg-ripple-size Numberk-map-get( $kendo-spacing, 1.5 )6px300%300%
Description
The vertical padding of the large Chip.
+
Description
The ripple size of a large CheckBox.
$kendo-chip-font-sizeNumber$kendo-font-size-md14px$kendo-checkbox-bgNullnullnull
Description
The font size of the Chip.
+
Description
The background color of the CheckBox.
$kendo-chip-sm-font-sizeNumber$kendo-font-size-md14px$kendo-checkbox-textNullnullnull
Description
The font size of the small Chip.
+
Description
The text color of the CheckBox.
$kendo-chip-md-font-sizeNumber$kendo-font-size-md14px$kendo-checkbox-borderColorrgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .54 )rgba(0, 0, 0, 0.54)
Description
The font size of the medium Chip.
+
Description
The border color of the CheckBox.
$kendo-chip-lg-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the large Chip.
-
$kendo-chip-line-heightNumberk-math-div( 18, 14 )1.2857142857
Description
The Chip's line height that is related to the $kendo-font-size.
-
$kendo-chip-sm-line-heightNumber$kendo-chip-line-height1.2857142857
Description
The small Chip's line height that is related to the $kendo-font-size.
-
$kendo-chip-md-line-heightNumber$kendo-chip-line-height1.2857142857$kendo-checkbox-hover-bgNullnullnull
Description
The medium Chip's line height that is related to the $kendo-font-size.
+
Description
The background color of the hovered CheckBox.
$kendo-chip-lg-line-heightNumber$kendo-chip-line-height1.2857142857$kendo-checkbox-hover-textNullnullnull
Description
The large Chip's line height that is related to the $kendo-font-size.
+
Description
The text color of the hovered CheckBox.
$kendo-chip-calc-sizeCalculationcalc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} )calc(1.2857142857em + 8px + 2px)$kendo-checkbox-hover-borderNullnullnull
Description
The calculated height of the Chip.
+
Description
The border color of the hovered CheckBox.
$kendo-chip-sizesMap( - sm: ( - padding-x: $kendo-chip-sm-padding-x, - padding-y: $kendo-chip-sm-padding-y, - font-size: $kendo-chip-sm-font-size, - line-height: $kendo-chip-sm-line-height - ), - md: ( - padding-x: $kendo-chip-md-padding-x, - padding-y: $kendo-chip-md-padding-y, - font-size: $kendo-chip-md-font-size, - line-height: $kendo-chip-md-line-height - ), - lg: ( - padding-x: $kendo-chip-lg-padding-x, - padding-y: $kendo-chip-lg-padding-y, - font-size: $kendo-chip-lg-font-size, - line-height: $kendo-chip-lg-line-height - ) -)(sm: (padding-x: 4px, padding-y: 2px, font-size: 14px, line-height: 1.2857142857), md: (padding-x: 4px, padding-y: 4px, font-size: 14px, line-height: 1.2857142857), lg: (padding-x: 4px, padding-y: 6px, font-size: 14px, line-height: 1.2857142857))$kendo-checkbox-checked-bgColor$kendo-color-primary#3f51b5
Description
The map with the sizes of the Chip.
+
Description
The background color of the checked CheckBox.
$kendo-chip-base-bg$kendo-checkbox-checked-text Colorif($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black))#000000if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-checked-bg ))white
Description
The base background of the Chip.
+
Description
The text color of the checked CheckBox.
$kendo-chip-theme-colorsMap( - "base": $kendo-chip-base-bg, - "error": k-map-get( $kendo-theme-colors, "error" ), - "info": k-map-get( $kendo-theme-colors, "info" ), - "warning": k-map-get( $kendo-theme-colors, "warning" ), - "success": k-map-get( $kendo-theme-colors, "success" ) -)("base": #000000, "error": #f31700, "info": #0058e9, "warning": #ffc000, "success": #37b400)$kendo-checkbox-checked-borderColor$kendo-checkbox-checked-bg#3f51b5
Description
The theme colors map for the Chip.
+
Description
The border color of the checked CheckBox.
$kendo-chip-solid-bg$kendo-checkbox-indeterminate-bg Colorif($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $kendo-button-bg, k-try-tint( $kendo-chip-base-bg, 92% )))#ebebeb$kendo-checkbox-checked-bg#3f51b5
Description
The base background color of the solid Chip.
+
Description
The background color of the indeterminate CheckBox.
$kendo-chip-solid-text$kendo-checkbox-indeterminate-text Color$kendo-button-textrgba(0, 0, 0, 0.87)$kendo-checkbox-checked-textwhite
Description
The base text color of the solid Chip.
+
Description
The text color of the indeterminate CheckBox.
$kendo-chip-solid-border$kendo-checkbox-indeterminate-border Color$kendo-chip-solid-bg#ebebeb$kendo-checkbox-checked-border#3f51b5
Description
The base border color of the solid Chip.
+
Description
The border color of the indeterminate CheckBox.
$kendo-chip-solid-shadow$kendo-checkbox-focus-border Null null null
Description
The base shadow of the solid Chip.
+
Description
The border color of the focused CheckBox.
$kendo-chip-solid-gradient$kendo-checkbox-focus-shadow Null$kendo-button-gradientnull null
Description
The base gradient of the solid Chip.
+
Description
The box shadow of the focused CheckBox.
$kendo-chip-solid-focus-bgColorif($kendo-enable-color-system, k-color( base-subtle-active ), k-try-tint( $kendo-chip-base-bg, 80% ))#cccccc$kendo-checkbox-focus-checked-borderNullnullnull
Description
The base background color of the focused solid Chip.
+
Description
The border color of the focused and checked CheckBox.
$kendo-chip-solid-focus-text$kendo-checkbox-focus-checked-shadow Null null null
Description
The base text color of the focused solid Chip.
+
Description
The box shadow of the focused and checked CheckBox.
$kendo-chip-solid-hover-bgColorif($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-tint( $kendo-chip-base-bg, 84% ))#d6d6d6$kendo-checkbox-disabled-bgNullnullnull
Description
The base background color of the hovered solid Chip.
+
Description
The background color of the disabled CheckBox.
$kendo-chip-solid-hover-text$kendo-checkbox-disabled-text Null null null
Description
The base text color of the hovered solid Chip.
+
Description
The text color of the disabled CheckBox.
$kendo-chip-solid-selected-bg$kendo-checkbox-disabled-border Colorif($kendo-enable-color-system, k-color( base-subtle-active ), k-try-tint( $kendo-chip-base-bg, 76% ))#c2c2c2
Description
The base background color of the selected solid Chip.
-
$kendo-chip-solid-selected-textNullnullnullif($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-component-bg, 4 ))#adadad
Description
The base text color of the selected solid Chip.
+
Description
The border color of the disabled CheckBox.
$kendo-chip-outline-bg$kendo-checkbox-disabled-checked-bg Color$kendo-component-bg#ffffff$kendo-checkbox-disabled-border#adadad
Description
The base background color of the outline Chip.
+
Description
The background color of the disabled and checked CheckBox.
$kendo-chip-outline-text$kendo-checkbox-disabled-checked-text Color$kendo-chip-solid-textrgba(0, 0, 0, 0.87)if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-checkbox-disabled-checked-bg ))black
Description
The base text color of the outline Chip.
+
Description
The text color of the disabled and checked CheckBox.
$kendo-chip-outline-border$kendo-checkbox-disabled-checked-border Color$kendo-chip-outline-textrgba(0, 0, 0, 0.87)$kendo-checkbox-disabled-checked-bg#adadad
Description
The base border color of the outline Chip.
+
Description
The border color of the disabled and checked CheckBox.
$kendo-chip-outline-shadow$kendo-checkbox-invalid-bg Null null null
Description
The base shadow of the outline Chip.
+
Description
The background color of an invalid CheckBox.
$kendo-chip-outline-hover-bg$kendo-checkbox-invalid-text Colorif($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-tint( $kendo-chip-base-bg, 92% ))#ebebeb$kendo-invalid-text#f31700
Description
The base background color of the hovered outline Chip.
+
Description
The text color of an invalid CheckBox.
$kendo-chip-outline-hover-text$kendo-checkbox-invalid-border Colorif($kendo-enable-color-system, k-color( base-on-subtle ), k-contrast-color( $kendo-chip-outline-hover-bg ))black$kendo-invalid-border#f31700
Description
The base text color of the hovered outline Chip.
+
Description
The border color of an invalid CheckBox.
$kendo-chip-outline-selected-bgColorif($kendo-enable-color-system, k-color( base-subtle-active ), k-try-tint( $kendo-chip-base-bg, 84% ))#d6d6d6$kendo-checkbox-indicator-typeStringimageimage
Description
The base background color of the selected outline Chip.
+
Description
The type of the CheckBox indicator.
$kendo-chip-outline-selected-textColor$kendo-chip-outline-hover-textblack$kendo-checkbox-glyph-font-familyList"WebComponentsIcons", monospace"WebComponentsIcons", monospace
Description
The base text color of the selected outline Chip.
+
Description
The font family of the CheckBox indicator glyph.
$kendo-chip-list-sizesMap( - sm: k-map-get( $kendo-spacing, 1 ), - md: k-map-get( $kendo-spacing, 1 ), - lg: k-map-get( $kendo-spacing, 1 ) -)(sm: 4px, md: 4px, lg: 4px)$kendo-checkbox-checked-glyphString"\e118""\e118"
Description
The sizes of the Chip list.
+
Description
The glyph of the CheckBox indicator.
- -### Cologradient - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - + - + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - + +
NameTypeDefault valueComputed value
$kendo-color-gradient-spacerNumberk-map-get( $kendo-spacing, 3 )12px
$kendo-checkbox-indeterminate-glyphString"\e121""\e121"
Description
The spacer of the ColorGradient.
+
Description
The glyph of the indeterminate CheckBox indicator.
$kendo-color-gradient-widthNumber294px294px$kendo-checkbox-checked-imageStringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='none' stroke='white' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/%3e%3c/svg%3e")
Description
The width of the ColorGradient.
+
Description
The image for a checked CheckBox indicator.
$kendo-color-gradient-border-widthNumber1px1px$kendo-checkbox-indeterminate-imageStringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-width='3' d='M4 10h12'/%3e%3c/svg%3e")
Description
The width of the border around the ColorGradient.
+
Description
The image for a indeterminate CheckBox indicator.
$kendo-color-gradient-border-radius$kendo-checkbox-label-margin-x Number$kendo-border-radius-mdk-map-get( $kendo-spacing, 1 ) 4px
Description
The border radius of the ColorGradient.
+
Description
The horizontal margin of the CheckBox inside a label.
$kendo-color-gradient-padding-y$kendo-checkbox-list-spacing Number$kendo-color-gradient-spacer12pxk-map-get( $kendo-spacing, 4 )16px
Description
The vertical padding of the ColorGradient.
+
Description
The spacing between the items in a horizontal CheckBox list.
$kendo-color-gradient-padding-x$kendo-checkbox-list-item-padding-x Number$kendo-color-gradient-padding-y12px0px0px
Description
The horizontal padding of the ColorGradient.
+
Description
The horizontal padding of the CheckBox list items.
$kendo-color-gradient-gap$kendo-checkbox-list-item-padding-y Number$kendo-color-gradient-spacer12px$kendo-list-md-item-padding-y8px
Description
The spacing between the sections of the ColorGradient.
+
Description
The vertical padding of the CheckBox list items.
$kendo-color-gradient-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif$kendo-checkbox-ripple-bgColor$kendo-color-primary#3f51b5
Description
The font family of the ColorGradient.
+
Description
The background color of the CheckBox' ripple.
$kendo-color-gradient-font-size$kendo-checkbox-ripple-opacity Number$kendo-font-size-md14px.20.2
Description
The font size of the ColorGradient.
+
Description
The opacity of the CheckBox' ripple.
$kendo-color-gradient-line-height
+ +### Chip + + + + + + + + + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - - - - - - -
NameTypeDefault valueComputed value
$kendo-chip-border-width Number$kendo-line-height-md21px1px
Description
The line height of the ColorGradient.
+
Description
The width of the border around the Chip.
$kendo-color-gradient-textColor$kendo-component-textrgba(0, 0, 0, 0.87)$kendo-chip-spacingNumberk-map-get( $kendo-spacing, 1 )4px
Description
The text color of the ColorGradient.
+
Description
The spacing between the text and the icons of the Chip.
$kendo-color-gradient-bgColor$kendo-component-bg#ffffff$kendo-chip-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The background color of the ColorGradient.
+
Description
The horizontal padding of the Chip.
$kendo-color-gradient-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)$kendo-chip-sm-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The border color of the ColorGradient.
+
Description
The horizontal padding of the small Chip.
$kendo-color-gradient-focus-borderColor$kendo-hover-borderrgba(0, 0, 0, 0.15)$kendo-chip-md-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The border color of the focused ColorGradient.
+
Description
The horizontal padding of the medium Chip.
$kendo-color-gradient-focus-shadowString$box-shadow-depth-3var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))$kendo-chip-lg-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The box shadow of the focused ColorGradient.
+
Description
The horizontal padding of the large Chip.
$kendo-color-gradient-canvas-border-radius$kendo-chip-padding-y Number$kendo-border-radius-mdk-map-get( $kendo-spacing, 1 ) 4px
Description
The border radius of the ColorGradient canvas.
+
Description
The vertical padding of the Chip.
$kendo-color-gradient-canvas-gap$kendo-chip-sm-padding-y Number$kendo-color-gradient-spacer12pxk-map-get( $kendo-spacing, 0.5 )2px
Description
The spacing between the items of the ColorGradient canvas.
+
Description
The vertical padding of the small Chip.
$kendo-color-gradient-canvas-rectangle-height$kendo-chip-md-padding-y Number180px180pxk-map-get( $kendo-spacing, 1 )4px
Description
The height the ColorGradient canvas hsv rectangle.
+
Description
The vertical padding of the medium Chip.
$kendo-color-gradient-slider-track-size$kendo-chip-lg-padding-y Number10px10pxk-map-get( $kendo-spacing, 1.5 )6px
Description
The width of the ColorGradient slider.
+
Description
The vertical padding of the large Chip.
$kendo-color-gradient-slider-border-radius$kendo-chip-font-size Number10px10px$kendo-font-size-md14px
Description
The border radius of the ColorGradient slider.
+
Description
The font size of the Chip.
$kendo-color-gradient-slider-draghandle-border-width$kendo-chip-sm-font-size Number3px3px$kendo-font-size-md14px
Description
The width of the border around the ColorGradient slider drag handle.
+
Description
The font size of the small Chip.
$kendo-color-gradient-slider-vertical-size$kendo-chip-md-font-size Number180px180px$kendo-font-size-md14px
Description
The height of the ColorGradient vertical slider.
+
Description
The font size of the medium Chip.
$kendo-color-gradient-slider-horizontal-size$kendo-chip-lg-font-size Number100%100%$kendo-font-size-md14px
Description
The width of the ColorGradient horizontal slider.
+
Description
The font size of the large Chip.
$kendo-color-gradient-draghandle-width$kendo-chip-line-height Number14px14pxk-math-div( 18, 14 )1.2857142857
Description
The width of the ColorGradient canvas drag handle.
+
Description
The Chip's line height that is related to the $kendo-font-size.
$kendo-color-gradient-draghandle-height$kendo-chip-sm-line-height Number14px14px$kendo-chip-line-height1.2857142857
Description
The height of the ColorGradient canvas drag handle.
+
Description
The small Chip's line height that is related to the $kendo-font-size.
$kendo-color-gradient-draghandle-border-width$kendo-chip-md-line-height Number1px1px$kendo-chip-line-height1.2857142857
Description
The width of the border around the ColorGradient canvas drag handle.
+
Description
The medium Chip's line height that is related to the $kendo-font-size.
$kendo-color-gradient-draghandle-outline-width$kendo-chip-lg-line-height Number1px1px$kendo-chip-line-height1.2857142857
Description
The width of the outline around the ColorGradient canvas drag handle.
+
Description
The large Chip's line height that is related to the $kendo-font-size.
$kendo-color-gradient-draghandle-border-radiusNumber50%50%$kendo-chip-calc-sizeCalculationcalc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} )calc(1.2857142857em + 8px + 2px)
Description
The border radius of the ColorGradient canvas drag handle.
+
Description
The calculated height of the Chip.
$kendo-color-gradient-draghandle-textNullnullnull$kendo-chip-sizesMap( + sm: ( + padding-x: $kendo-chip-sm-padding-x, + padding-y: $kendo-chip-sm-padding-y, + font-size: $kendo-chip-sm-font-size, + line-height: $kendo-chip-sm-line-height + ), + md: ( + padding-x: $kendo-chip-md-padding-x, + padding-y: $kendo-chip-md-padding-y, + font-size: $kendo-chip-md-font-size, + line-height: $kendo-chip-md-line-height + ), + lg: ( + padding-x: $kendo-chip-lg-padding-x, + padding-y: $kendo-chip-lg-padding-y, + font-size: $kendo-chip-lg-font-size, + line-height: $kendo-chip-lg-line-height + ) +)(sm: (padding-x: 4px, padding-y: 2px, font-size: 14px, line-height: 1.2857142857), md: (padding-x: 4px, padding-y: 4px, font-size: 14px, line-height: 1.2857142857), lg: (padding-x: 4px, padding-y: 6px, font-size: 14px, line-height: 1.2857142857))
Description
The text color of the ColorGradient canvas drag handle.
+
Description
The map with the sizes of the Chip.
$kendo-color-gradient-draghandle-bg$kendo-chip-base-bg Colortransparenttransparentif($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black))#000000
Description
The background color of the ColorGradient canvas drag handle.
+
Description
The base background of the Chip.
$kendo-color-gradient-draghandle-borderColorrgba( white, .8 )rgba(255, 255, 255, 0.8)$kendo-chip-theme-colorsMap( + "base": $kendo-chip-base-bg, + "error": k-map-get( $kendo-theme-colors, "error" ), + "info": k-map-get( $kendo-theme-colors, "info" ), + "warning": k-map-get( $kendo-theme-colors, "warning" ), + "success": k-map-get( $kendo-theme-colors, "success" ) +)("base": #000000, "error": #f31700, "info": #0058e9, "warning": #ffc000, "success": #37b400)
Description
The color of the border around the ColorGradient canvas drag handle.
+
Description
The theme colors map for the Chip.
$kendo-color-gradient-draghandle-shadow$kendo-chip-solid-bg Colorrgba( $kendo-color-black, .5)rgba(0, 0, 0, 0.5)if($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $kendo-button-bg, k-try-tint( $kendo-chip-base-bg, 92% )))#ebebeb
Description
The color of the outline around the ColorGradient canvas drag handle.
+
Description
The base background color of the solid Chip.
$kendo-color-gradient-draghandle-focus-shadow$kendo-chip-solid-text Color$kendo-color-black#000000$kendo-button-textrgba(0, 0, 0, 0.87)
Description
The focus color of the outline around the ColorGradient canvas drag handle.
+
Description
The base text color of the solid Chip.
$kendo-color-gradient-draghandle-hover-shadow$kendo-chip-solid-border Color$kendo-color-black#000000$kendo-chip-solid-bg#ebebeb
Description
The outline color of the outline around the ColorGradient canvas drag handle.
+
Description
The base border color of the solid Chip.
$kendo-color-gradient-draghandle-shadowColork-elevation(2)rgba(0, 0, 0, 0.5)$kendo-chip-solid-shadowNullnullnull
Description
The box shadow of the ColorGradient canvas drag handle.
+
Description
The base shadow of the solid Chip.
$kendo-color-gradient-canvas-draghandle-margin-yNumber- k-math-div( $kendo-color-gradient-draghandle-height, 2 )-7px$kendo-chip-solid-gradientNull$kendo-button-gradientnull
Description
The vertical margin of the ColorGradient canvas drag handle.
+
Description
The base gradient of the solid Chip.
$kendo-color-gradient-canvas-draghandle-margin-xNumber- k-math-div( $kendo-color-gradient-draghandle-width, 2 )-7px$kendo-chip-solid-focus-bgColorif($kendo-enable-color-system, k-color( base-subtle-active ), k-try-tint( $kendo-chip-base-bg, 80% ))#cccccc
Description
The horizontal margin of the ColorGradient canvas drag handle.
+
Description
The base background color of the focused solid Chip.
$kendo-color-gradient-input-widthNumber50px50px$kendo-chip-solid-focus-textNullnullnull
Description
The width of the ColorGradient input.
+
Description
The base text color of the focused solid Chip.
$kendo-color-gradient-input-gapNumberk-map-get( $kendo-spacing, 2 )8px$kendo-chip-solid-hover-bgColorif($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-tint( $kendo-chip-base-bg, 84% ))#d6d6d6
Description
The spacing between the ColorGradient inputs.
+
Description
The base background color of the hovered solid Chip.
$kendo-color-gradient-input-label-gapNumberk-map-get( $kendo-spacing, 1 )4px$kendo-chip-solid-hover-textNullnullnull
Description
The spacing between the ColorGradient inputs and their labels.
+
Description
The base text color of the hovered solid Chip.
$kendo-color-gradient-input-label-text$kendo-chip-solid-selected-bg Color$kendo-subtle-textrgba(0, 0, 0, 0.54)if($kendo-enable-color-system, k-color( base-subtle-active ), k-try-tint( $kendo-chip-base-bg, 76% ))#c2c2c2
Description
The text color of the ColorGradient input labels.
+
Description
The base background color of the selected solid Chip.
$kendo-color-gradient-contrast-ratio-font-weightNumber$kendo-font-weight-medium500$kendo-chip-solid-selected-textNullnullnull
Description
The font weight of the ColorGradient contrast ratio text.
+
Description
The base text color of the selected solid Chip.
$kendo-color-gradient-contrast-spacerNumberk-map-get( $kendo-spacing, 2 )8px
Description
The spacing between the items in the ColorGradient contrast tool.
-
- -### Color System - - - - - - - - - - - - - - - - - - - - - + + + + - - + - - + + - - + - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-colorsMap$_default-colors(app-surface: #ffffff, on-app-surface: #212121, subtle: #757575, surface: #f5f5f5, surface-alt: #ffffff, border: rgba(0, 0, 0, 0.12), border-alt: rgba(0, 0, 0, 0.15), base-subtle: #ebebeb, base-subtle-hover: #d6d6d6, base-subtle-active: #c2c2c2, base: #ffffff, base-hover: #ebebeb, base-active: #d6d6d6, base-emphasis: #adadad, base-on-subtle: #212121, on-base: #212121, base-on-surface: #212121, primary-subtle: #d1d5ee, primary-subtle-hover: #c5cae8, primary-subtle-active: #b5bde3, primary: #3f51b5, primary-hover: #3a4ba7, primary-active: #354498, primary-emphasis: #97a0d7, primary-on-subtle: #161c3f, on-primary: #ffffff, primary-on-surface: #3f51b5, secondary-subtle: #fbcdd9, secondary-subtle-hover: #f9afc3, secondary-subtle-active: #f79bb3, secondary: #e51a5f, secondary-hover: #d31857, secondary-active: #c01650, secondary-emphasis: #f58da9, secondary-on-subtle: #500c22, on-secondary: #ffffff, secondary-on-surface: #ae1549, tertiary-subtle: #c9dbd8, tertiary-subtle-hover: #a9c6c1, tertiary-subtle-active: #92b8b1, tertiary: #00695c, tertiary-hover: #006155, tertiary-active: #00584d, tertiary-emphasis: #84aea7, tertiary-on-subtle: #002520, on-tertiary: #ffffff, tertiary-on-surface: #054f46, info-subtle: #c8d7fb, info-subtle-hover: #a7c0f7, info-subtle-active: #8fb0f6, info: #0058e9, info-hover: #0251d6, info-active: #034ac3, info-emphasis: #80a5f4, info-on-subtle: #071f51, on-info: #ffffff, info-on-surface: #0443b0, success-subtle: #d7f0cc, success-subtle-hover: #bae2ad, success-subtle-active: #a7db97, success: #37b400, success-hover: #33a600, success-active: #2e9704, success-emphasis: #93d775, success-on-subtle: #163f09, on-success: #ffffff, success-on-surface: #2b8906, warning-subtle: #fff0ce, warning-subtle-hover: #ffe7b0, warning-subtle-active: #ffe19c, warning: #ffc000, warning-hover: #ebb201, warning-active: #d6a202, warning-emphasis: #ffdd8f, warning-on-subtle: #59430a, on-warning: #000000, warning-on-surface: #ffc000, error-subtle: #fcc7c2, error-subtle-hover: #feafa8, error-subtle-active: #fe9a91, error: #f31700, error-hover: #e01701, error-active: #cc1505, error-emphasis: #fc8d83, error-on-subtle: #550c07, on-error: #ffffff, error-on-surface: #b91406, light-subtle: #fafafa, light-subtle-hover: #f5f5f5, light-subtle-active: #eeeeee, light: #f5f5f5, light-hover: #ebebeb, light-active: #d6d6d6, light-emphasis: #e0e0e0, light-on-subtle: #212121, on-light: #000000, light-on-surface: #616161, dark-subtle: #c7c7c7, dark-subtle-hover: #c2c2c2, dark-subtle-active: #bdbdbd, dark: #424242, dark-hover: #212121, dark-active: #000000, dark-emphasis: #9e9e9e, dark-on-subtle: #212121, on-dark: #ffffff, dark-on-surface: #616161, inverse-subtle: #c7c7c7, inverse-subtle-hover: #c2c2c2, inverse-subtle-active: #bdbdbd, inverse: #424242, inverse-hover: #212121, inverse-active: #000000, inverse-emphasis: #9e9e9e, inverse-on-subtle: #212121, on-inverse: #ffffff, inverse-on-surface: #616161, series-a: #9c27b0, series-a-bold: #751d84, series-a-bolder: #4e1458, series-a-subtle: #b55dc4, series-a-subtler: #cd93d7, series-b: #2196f3, series-b-bold: #1971b6, series-b-bolder: #114b7a, series-b-subtle: #59b0f6, series-b-subtler: #90cbf9, series-c: #009688, series-c-bold: #007166, series-c-bolder: #004b44, series-c-subtle: #40b0a6, series-c-subtler: #80cbc4, series-d: #ffeb3b, series-d-bold: #bfb02c, series-d-bolder: #80761e, series-d-subtle: #fff06c, series-d-subtler: #fff59d, series-e: #f44336, series-e-bold: #b73229, series-e-bolder: #7a221b, series-e-subtle: #f77268, series-e-subtler: #faa19b, series-f: #4caf50, series-f-bold: #39833c, series-f-bolder: #265828, series-f-subtle: #79c37c, series-f-subtler: #a6d7a8)$kendo-chip-outline-bgColor$kendo-component-bg#ffffff
Description
The global default Colors map.
+
Description
The base background color of the outline Chip.
$kendo-color-primary$kendo-chip-outline-text Colormaterial-color( $primary-palette, main )#3f51b5$kendo-chip-solid-textrgba(0, 0, 0, 0.87)
Description
The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
+
Description
The base text color of the outline Chip.
$kendo-color-primary-contrast$kendo-chip-outline-border Colormaterial-color( $primary-palette, main-contrast )white$kendo-chip-outline-textrgba(0, 0, 0, 0.87)
Description
The color used along with the primary color denoted by $kendo-color-primary.
Used to provide contrast between the background and foreground colors.
+
Description
The base border color of the outline Chip.
$kendo-color-secondaryColormaterial-color( $secondary-palette, main )#e51a5f
Description
The secondary color of the theme.
-
$kendo-color-secondary-contrastColormaterial-color( $secondary-palette, main-contrast )white
Description
The color used along with the secondary color denoted by $kendo-color-secondary.
Used to provide contrast between the background and foreground colors.
-
$kendo-color-tertiaryColormaterial-color($tertiary-palette, main)#00695c
Description
The tertiary color of the theme.
-
$kendo-color-tertiary-contrastColormaterial-color($tertiary-palette, main-contrast)white
Description
The color used along with the tertiary color denoted by $kendo-color-tertiary.
Used to provide contrast between the background and foreground colors.
-
$kendo-color-infoColor#0058e9#0058e9
Description
The color for informational messages and states.
-
$kendo-color-successColor#37b400#37b400$kendo-chip-outline-shadowNullnullnull
Description
The color for success messages and states.
+
Description
The base shadow of the outline Chip.
$kendo-color-warning$kendo-chip-outline-hover-bg Color#ffc000#ffc000if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-tint( $kendo-chip-base-bg, 92% ))#ebebeb
Description
The color for warning messages and states.
+
Description
The base background color of the hovered outline Chip.
$kendo-color-error$kendo-chip-outline-hover-text Color#f31700#f31700if($kendo-enable-color-system, k-color( base-on-subtle ), k-contrast-color( $kendo-chip-outline-hover-bg ))black
Description
The color for error messages and states.
+
Description
The base text color of the hovered outline Chip.
$kendo-color-dark$kendo-chip-outline-selected-bg Colorget-base-hue( gray, 800 )#424242if($kendo-enable-color-system, k-color( base-subtle-active ), k-try-tint( $kendo-chip-base-bg, 84% ))#d6d6d6
Description
The dark color of the theme.
+
Description
The base background color of the selected outline Chip.
$kendo-color-light$kendo-chip-outline-selected-text Colorget-base-hue( gray, 100 )#f5f5f5$kendo-chip-outline-hover-textblack
Description
The light color of the theme.
+
Description
The base text color of the selected outline Chip.
$kendo-color-inverseColorif( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )#424242$kendo-chip-list-sizesMap( + sm: k-map-get( $kendo-spacing, 1 ), + md: k-map-get( $kendo-spacing, 1 ), + lg: k-map-get( $kendo-spacing, 1 ) +)(sm: 4px, md: 4px, lg: 4px)
Description
Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
+
Description
The sizes of the Chip list.
-### Coloreditor +### Cologradient @@ -4693,399 +4673,439 @@ The following table lists the available variables for customizing the Material t - + - - + - - + - - + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + - - + - - + - - + - - + - - + - - + - - + - - + + - - + - + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - -
$kendo-color-editor-spacer$kendo-color-gradient-spacer Number k-map-get( $kendo-spacing, 3 ) 12px
Description
The spacer of the ColorEditor.
+
Description
The spacer of the ColorGradient.
$kendo-color-editor-min-width$kendo-color-gradient-width Number 294px 294px
Description
The minimum width of the ColorEditor.
+
Description
The width of the ColorGradient.
$kendo-color-editor-border-width$kendo-color-gradient-border-width Number 1px 1px
Description
The width of the border around the ColorEditor.
+
Description
The width of the border around the ColorGradient.
$kendo-color-editor-border-radius$kendo-color-gradient-border-radius Number $kendo-border-radius-md 4px
Description
The border radius of the ColorEditor.
+
Description
The border radius of the ColorGradient.
$kendo-color-editor-font-family$kendo-color-gradient-padding-yNumber$kendo-color-gradient-spacer12px
Description
The vertical padding of the ColorGradient.
+
$kendo-color-gradient-padding-xNumber$kendo-color-gradient-padding-y12px
Description
The horizontal padding of the ColorGradient.
+
$kendo-color-gradient-gapNumber$kendo-color-gradient-spacer12px
Description
The spacing between the sections of the ColorGradient.
+
$kendo-color-gradient-font-family List $kendo-font-family Roboto, "Helvetica Neue", sans-serif
Description
The font family of the ColorEditor.
+
Description
The font family of the ColorGradient.
$kendo-color-editor-font-size$kendo-color-gradient-font-size Number $kendo-font-size-md 14px
Description
The font size of the ColorEditor.
+
Description
The font size of the ColorGradient.
$kendo-color-editor-line-height$kendo-color-gradient-line-height Number $kendo-line-height-md 2
Description
The line height of the ColorEditor.
+
Description
The line height of the ColorGradient.
$kendo-color-editor-text$kendo-color-gradient-text Color $kendo-component-text rgba(0, 0, 0, 0.87)
Description
The text color of the ColorEditor.
+
Description
The text color of the ColorGradient.
$kendo-color-editor-bg$kendo-color-gradient-bg Color $kendo-component-bg #ffffff
Description
The background color of the ColorEditor.
+
Description
The background color of the ColorGradient.
$kendo-color-editor-border$kendo-color-gradient-border Color $kendo-component-border rgba(0, 0, 0, 0.12)
Description
The border color of the ColorEditor.
+
Description
The border color of the ColorGradient.
$kendo-color-editor-focus-border$kendo-color-gradient-focus-border Color $kendo-hover-border rgba(0, 0, 0, 0.15)
Description
The border color of the focused ColorEditor.
+
Description
The border color of the focused ColorGradient.
$kendo-color-editor-focus-shadow$kendo-color-gradient-focus-shadow String $box-shadow-depth-3 var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The box shadow of the focused ColorEditor.
+
Description
The box shadow of the focused ColorGradient.
$kendo-color-editor-header-padding-y$kendo-color-gradient-canvas-border-radius Number$kendo-color-editor-spacer12px$kendo-border-radius-md4px
Description
The vertical padding of the ColorEditor header.
+
Description
The border radius of the ColorGradient canvas.
$kendo-color-editor-header-padding-x$kendo-color-gradient-canvas-gap Number$kendo-color-editor-header-padding-y$kendo-color-gradient-spacer 12px
Description
The horizontal padding of the ColorEditor header.
+
Description
The spacing between the items of the ColorGradient canvas.
$kendo-color-editor-header-actions-gap$kendo-color-gradient-canvas-rectangle-height Numberk-map-get( $kendo-spacing, 2 )8px180px180px
Description
The spacing between the ColorEditor header actions.
+
Description
The height the ColorGradient canvas hsv rectangle.
$kendo-color-editor-color-preview-width$kendo-color-gradient-slider-track-size Number32px32px10px10px
Description
The width of the ColorEditor preview.
+
Description
The width of the ColorGradient slider.
$kendo-color-editor-color-preview-height$kendo-color-gradient-slider-border-radius Number12px12px10px10px
Description
The height of the ColorEditor preview.
+
Description
The border radius of the ColorGradient slider.
$kendo-color-editor-preview-gap$kendo-color-gradient-slider-draghandle-border-width Numberk-map-get( $kendo-spacing, 1 )4px3px3px
Description
The spacing between the colors in the ColorEditor preview.
+
Description
The width of the border around the ColorGradient slider drag handle.
$kendo-color-editor-views-padding-y$kendo-color-gradient-slider-vertical-size Number$kendo-color-editor-spacer12px180px180px
Description
The vertical padding of the ColorEditor views container.
+
Description
The height of the ColorGradient vertical slider.
$kendo-color-editor-views-padding-x$kendo-color-gradient-slider-horizontal-size Number$kendo-color-editor-views-padding-y12px100%100%
Description
The horizontal padding of the ColorEditor views container.
+
Description
The width of the ColorGradient horizontal slider.
$kendo-color-editor-views-gap$kendo-color-gradient-draghandle-width Number$kendo-color-editor-spacer12px14px14px
Description
The spacing of the ColorEditor views container.
+
Description
The width of the ColorGradient canvas drag handle.
$kendo-color-editor-color-gradient-focus-outline-colorColorrgba(0, 0, 0, .3)rgba(0, 0, 0, 0.3)$kendo-color-gradient-draghandle-heightNumber14px14px
Description
The outline color of the focused ColorGradient.
+
Description
The height of the ColorGradient canvas drag handle.
$kendo-color-editor-color-gradient-focus-outline$kendo-color-gradient-draghandle-border-width Number2px2px1px1px
Description
The outline width of the focused ColorGradient.
+
Description
The width of the border around the ColorGradient canvas drag handle.
$kendo-color-editor-color-gradient-focus-outline-offset$kendo-color-gradient-draghandle-outline-width Number2px2px1px1px
Description
The outline offset of the focused ColorGradient.
+
Description
The width of the outline around the ColorGradient canvas drag handle.
- -### Colorpalette - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-color-palette-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
$kendo-color-gradient-draghandle-border-radiusNumber50%50%
Description
The font family of the ColorPalette.
+
Description
The border radius of the ColorGradient canvas drag handle.
$kendo-color-palette-font-sizeNumber$kendo-font-size-md14px$kendo-color-gradient-draghandle-textNullnullnull
Description
The font size of the ColorPalette.
+
Description
The text color of the ColorGradient canvas drag handle.
$kendo-color-palette-line-heightNumber00$kendo-color-gradient-draghandle-bgColortransparenttransparent
Description
The line height of the ColorPalette.
+
Description
The background color of the ColorGradient canvas drag handle.
$kendo-color-palette-tile-width$kendo-color-gradient-draghandle-borderColorrgba( white, .8 )rgba(255, 255, 255, 0.8)
Description
The color of the border around the ColorGradient canvas drag handle.
+
$kendo-color-gradient-draghandle-shadowColorrgba( $kendo-color-black, .5)rgba(0, 0, 0, 0.5)
Description
The color of the outline around the ColorGradient canvas drag handle.
+
$kendo-color-gradient-draghandle-focus-shadowColor$kendo-color-black#000000
Description
The focus color of the outline around the ColorGradient canvas drag handle.
+
$kendo-color-gradient-draghandle-hover-shadowColor$kendo-color-black#000000
Description
The outline color of the outline around the ColorGradient canvas drag handle.
+
$kendo-color-gradient-draghandle-shadowColork-elevation(2)rgba(0, 0, 0, 0.5)
Description
The box shadow of the ColorGradient canvas drag handle.
+
$kendo-color-gradient-canvas-draghandle-margin-y Numberk-map-get( $kendo-spacing, 6 )24px- k-math-div( $kendo-color-gradient-draghandle-height, 2 )-7px
Description
The width of the ColorPalette tile.
+
Description
The vertical margin of the ColorGradient canvas drag handle.
$kendo-color-palette-tile-height$kendo-color-gradient-canvas-draghandle-margin-x Number$kendo-color-palette-tile-width24px- k-math-div( $kendo-color-gradient-draghandle-width, 2 )-7px
Description
The height of the ColorPalette tile.
+
Description
The horizontal margin of the ColorGradient canvas drag handle.
$kendo-color-palette-tile-focus-shadowList0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 )0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.5)$kendo-color-gradient-input-widthNumber50px50px
Description
The shadow of the ColorPalette focused tile.
+
Description
The width of the ColorGradient input.
$kendo-color-palette-tile-hover-shadowList0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 )0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.8)$kendo-color-gradient-input-gapNumberk-map-get( $kendo-spacing, 2 )8px
Description
The shadow of the ColorPalette hovered tile.
+
Description
The spacing between the ColorGradient inputs.
$kendo-color-palette-tile-selected-shadowList0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 )0 1px 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px white$kendo-color-gradient-input-label-gapNumberk-map-get( $kendo-spacing, 1 )4px
Description
The shadow of the ColorPalette selected tile.
+
Description
The spacing between the ColorGradient inputs and their labels.
- -### Component - - - - - - - - - - - - - - - - - - + + - - + + - - - - - + + + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-component-bg
$kendo-color-gradient-input-label-text Colork-map-get( $theme, component-bg )#ffffff$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
Background color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.
+
Description
The text color of the ColorGradient input labels.
$kendo-component-textColork-map-get( $theme, component-text )rgba(0, 0, 0, 0.87)$kendo-color-gradient-contrast-ratio-font-weightNumber$kendo-font-weight-medium500
Description
Text color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.
+
Description
The font weight of the ColorGradient contrast ratio text.
$kendo-component-borderColork-map-get( $theme, component-border )rgba(0, 0, 0, 0.12)$kendo-color-gradient-contrast-spacerNumberk-map-get( $kendo-spacing, 2 )8px
Description
Border color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.
+
Description
The spacing between the items in the ColorGradient contrast tool.
-### Dialog +### Color System @@ -5103,93 +5123,149 @@ The following table lists the available variables for customizing the Material t - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
$kendo-dialog-titlebar-bgNullnullnull$kendo-colorsMap$_default-colors(app-surface: #ffffff, on-app-surface: #212121, subtle: #757575, surface: #f5f5f5, surface-alt: #ffffff, border: rgba(0, 0, 0, 0.12), border-alt: rgba(0, 0, 0, 0.15), base-subtle: #ebebeb, base-subtle-hover: #d6d6d6, base-subtle-active: #c2c2c2, base: #ffffff, base-hover: #ebebeb, base-active: #d6d6d6, base-emphasis: #adadad, base-on-subtle: #212121, on-base: #212121, base-on-surface: #212121, primary-subtle: #d1d5ee, primary-subtle-hover: #c5cae8, primary-subtle-active: #b5bde3, primary: #3f51b5, primary-hover: #3a4ba7, primary-active: #354498, primary-emphasis: #97a0d7, primary-on-subtle: #161c3f, on-primary: #ffffff, primary-on-surface: #3f51b5, secondary-subtle: #fbcdd9, secondary-subtle-hover: #f9afc3, secondary-subtle-active: #f79bb3, secondary: #e51a5f, secondary-hover: #d31857, secondary-active: #c01650, secondary-emphasis: #f58da9, secondary-on-subtle: #500c22, on-secondary: #ffffff, secondary-on-surface: #ae1549, tertiary-subtle: #c9dbd8, tertiary-subtle-hover: #a9c6c1, tertiary-subtle-active: #92b8b1, tertiary: #00695c, tertiary-hover: #006155, tertiary-active: #00584d, tertiary-emphasis: #84aea7, tertiary-on-subtle: #002520, on-tertiary: #ffffff, tertiary-on-surface: #054f46, info-subtle: #c8d7fb, info-subtle-hover: #a7c0f7, info-subtle-active: #8fb0f6, info: #0058e9, info-hover: #0251d6, info-active: #034ac3, info-emphasis: #80a5f4, info-on-subtle: #071f51, on-info: #ffffff, info-on-surface: #0443b0, success-subtle: #d7f0cc, success-subtle-hover: #bae2ad, success-subtle-active: #a7db97, success: #37b400, success-hover: #33a600, success-active: #2e9704, success-emphasis: #93d775, success-on-subtle: #163f09, on-success: #ffffff, success-on-surface: #2b8906, warning-subtle: #fff0ce, warning-subtle-hover: #ffe7b0, warning-subtle-active: #ffe19c, warning: #ffc000, warning-hover: #ebb201, warning-active: #d6a202, warning-emphasis: #ffdd8f, warning-on-subtle: #59430a, on-warning: #000000, warning-on-surface: #ffc000, error-subtle: #fcc7c2, error-subtle-hover: #feafa8, error-subtle-active: #fe9a91, error: #f31700, error-hover: #e01701, error-active: #cc1505, error-emphasis: #fc8d83, error-on-subtle: #550c07, on-error: #ffffff, error-on-surface: #b91406, light-subtle: #fafafa, light-subtle-hover: #f5f5f5, light-subtle-active: #eeeeee, light: #f5f5f5, light-hover: #ebebeb, light-active: #d6d6d6, light-emphasis: #e0e0e0, light-on-subtle: #212121, on-light: #000000, light-on-surface: #616161, dark-subtle: #c7c7c7, dark-subtle-hover: #c2c2c2, dark-subtle-active: #bdbdbd, dark: #424242, dark-hover: #212121, dark-active: #000000, dark-emphasis: #9e9e9e, dark-on-subtle: #212121, on-dark: #ffffff, dark-on-surface: #616161, inverse-subtle: #c7c7c7, inverse-subtle-hover: #c2c2c2, inverse-subtle-active: #bdbdbd, inverse: #424242, inverse-hover: #212121, inverse-active: #000000, inverse-emphasis: #9e9e9e, inverse-on-subtle: #212121, on-inverse: #ffffff, inverse-on-surface: #616161, series-a: #9c27b0, series-a-bold: #751d84, series-a-bolder: #4e1458, series-a-subtle: #b55dc4, series-a-subtler: #cd93d7, series-b: #2196f3, series-b-bold: #1971b6, series-b-bolder: #114b7a, series-b-subtle: #59b0f6, series-b-subtler: #90cbf9, series-c: #009688, series-c-bold: #007166, series-c-bolder: #004b44, series-c-subtle: #40b0a6, series-c-subtler: #80cbc4, series-d: #ffeb3b, series-d-bold: #bfb02c, series-d-bolder: #80761e, series-d-subtle: #fff06c, series-d-subtler: #fff59d, series-e: #f44336, series-e-bold: #b73229, series-e-bolder: #7a221b, series-e-subtle: #f77268, series-e-subtler: #faa19b, series-f: #4caf50, series-f-bold: #39833c, series-f-bolder: #265828, series-f-subtle: #79c37c, series-f-subtler: #a6d7a8)
Description
The background color of the Dialog titlebar.
+
Description
The global default Colors map.
$kendo-dialog-titlebar-textNullnullnull$kendo-color-primaryColormaterial-color( $primary-palette, main )#3f51b5
Description
The text color of the Dialog titlebar.
+
Description
The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$kendo-dialog-titlebar-borderNullnullnull$kendo-color-primary-contrastColormaterial-color( $primary-palette, main-contrast )white
Description
The border color of the Dialog titlebar.
+
Description
The color used along with the primary color denoted by $kendo-color-primary.
Used to provide contrast between the background and foreground colors.
$kendo-dialog-buttongroup-padding-xNumber$kendo-actions-padding-x8px$kendo-color-secondaryColormaterial-color( $secondary-palette, main )#e51a5f
Description
The horizontal padding of the Dialog action buttons.
+
Description
The secondary color of the theme.
$kendo-dialog-buttongroup-padding-yNumber$kendo-actions-padding-y8px$kendo-color-secondary-contrastColormaterial-color( $secondary-palette, main-contrast )white
Description
The vertical padding of the Dialog action buttons.
+
Description
The color used along with the secondary color denoted by $kendo-color-secondary.
Used to provide contrast between the background and foreground colors.
$kendo-dialog-buttongroup-border-widthNumber1px1px$kendo-color-tertiaryColormaterial-color($tertiary-palette, main)#00695c
Description
The width of the top border of the Dialog action buttons.
+
Description
The tertiary color of the theme.
$kendo-dialog-button-spacingNumber$kendo-actions-button-spacing8px$kendo-color-tertiary-contrastColormaterial-color($tertiary-palette, main-contrast)white
Description
The spacing between the Dialog action buttons.
+
Description
The color used along with the tertiary color denoted by $kendo-color-tertiary.
Used to provide contrast between the background and foreground colors.
$kendo-dialog-theme-colorsMap( - "primary": k-map-get($kendo-theme-colors, "primary"), - "light": k-map-get($kendo-theme-colors, "light"), - "dark": k-map-get($kendo-theme-colors, "dark") -)("primary": #3f51b5, "light": #f5f5f5, "dark": #424242)$kendo-color-infoColor#0058e9#0058e9
Description
The theme colors map for the Dialog.
+
Description
The color for informational messages and states.
+
$kendo-color-successColor#37b400#37b400
Description
The color for success messages and states.
+
$kendo-color-warningColor#ffc000#ffc000
Description
The color for warning messages and states.
+
$kendo-color-errorColor#f31700#f31700
Description
The color for error messages and states.
+
$kendo-color-darkColorget-base-hue( gray, 800 )#424242
Description
The dark color of the theme.
+
$kendo-color-lightColorget-base-hue( gray, 100 )#f5f5f5
Description
The light color of the theme.
+
$kendo-color-inverseColorif( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )#424242
Description
Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
-### Dock-manager +### Coloreditor @@ -5207,359 +5283,349 @@ The following table lists the available variables for customizing the Material t - + - - + + - - - - - + + + + - - - - - + + + + - - + - + - - + + + + + + + + + + - - + + - - + - - + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - - - - - - - - - - + + - - - - - + + + + - - - + +
$kendo-dock-manager-border-width$kendo-color-editor-spacer Number1px1pxk-map-get( $kendo-spacing, 3 )12px
Description
The width of the border around the DockManager component.
+
Description
The spacer of the ColorEditor.
$kendo-dock-manager-border-styleStringsolidsolid$kendo-color-editor-min-widthNumber294px294px
Description
The style of the border around the DockManager component.
+
Description
The minimum width of the ColorEditor.
$kendo-dock-manager-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)$kendo-color-editor-border-widthNumber1px1px
Description
The color of the border around the DockManager component.
+
Description
The width of the border around the ColorEditor.
$kendo-dock-manager-pane-header-padding-y$kendo-color-editor-border-radius Numberk-map-get( $kendo-spacing, 1 )$kendo-border-radius-md 4px
Description
The vertical padding of the pane header in the DockManager component.
+
Description
The border radius of the ColorEditor.
$kendo-dock-manager-pane-header-padding-x$kendo-color-editor-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the ColorEditor.
+
$kendo-color-editor-font-size Numberk-map-get( $kendo-spacing, 6 )24px$kendo-font-size-md14px
Description
The horizontal padding of the pane header in the DockManager component.
+
Description
The font size of the ColorEditor.
$kendo-dock-manager-pane-header-border-width$kendo-color-editor-line-height Number$kendo-dock-manager-border-width1px$kendo-line-height-md2
Description
The width of the border around the pane header in the DockManager component.
+
Description
The line height of the ColorEditor.
$kendo-dock-manager-pane-header-border-styleStringsolidsolid$kendo-color-editor-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The style of the border around the pane header in the DockManager component.
+
Description
The text color of the ColorEditor.
$kendo-dock-manager-pane-header-bg$kendo-color-editor-bg Color $kendo-component-bg #ffffff
Description
The background color of the pane header in the DockManager component.
+
Description
The background color of the ColorEditor.
$kendo-dock-manager-pane-title-padding-yNullnullnull$kendo-color-editor-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The vertical padding of the pane title in the DockManager component.
+
Description
The border color of the ColorEditor.
$kendo-dock-manager-pane-title-padding-xNullnullnull$kendo-color-editor-focus-borderColor$kendo-hover-borderrgba(0, 0, 0, 0.15)
Description
The horizontal padding of the pane title in the DockManager component.
+
Description
The border color of the focused ColorEditor.
$kendo-dock-manager-pane-title-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif$kendo-color-editor-focus-shadowString$box-shadow-depth-3var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The font family of the pane title in the DockManager component.
+
Description
The box shadow of the focused ColorEditor.
$kendo-dock-manager-pane-title-font-size$kendo-color-editor-header-padding-y Number$kendo-font-size-lg16px$kendo-color-editor-spacer12px
Description
The font size of the pane title in the DockManager component.
+
Description
The vertical padding of the ColorEditor header.
$kendo-dock-manager-pane-title-line-height$kendo-color-editor-header-padding-x Number$kendo-line-height-sm1.2$kendo-color-editor-header-padding-y12px
Description
The line height of the pane title in the DockManager component.
+
Description
The horizontal padding of the ColorEditor header.
$kendo-dock-manager-pane-title-font-weight$kendo-color-editor-header-actions-gap Number$kendo-font-weight-normal400k-map-get( $kendo-spacing, 2 )8px
Description
The font weight of the pane title in the DockManager component.
+
Description
The spacing between the ColorEditor header actions.
$kendo-dock-manager-pane-content-padding-x$kendo-color-editor-color-preview-width Number$kendo-dock-manager-pane-header-padding-x24px32px32px
Description
The horizontal padding of the pane content in the DockManager component.
+
Description
The width of the ColorEditor preview.
$kendo-dock-manager-pane-content-padding-y$kendo-color-editor-color-preview-height Number$kendo-dock-manager-pane-header-padding-x24px12px12px
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.
+
Description
The height of the ColorEditor preview.
$kendo-dock-manager-unpinned-container-width$kendo-color-editor-preview-gap Number300px300px
Description
The width of the unpinned pane container in the DockManager component.
-
$kendo-dock-manager-unpinned-container-bgColor$kendo-color-white#ffffffk-map-get( $kendo-spacing, 1 )4px
Description
The background-color of the unpinned pane container in the DockManager component.
+
Description
The spacing between the colors in the ColorEditor preview.
$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)$kendo-color-editor-views-padding-yNumber$kendo-color-editor-spacer12px
Description
The box shadow of the unpinned pane container in the DockManager component.
+
Description
The vertical padding of the ColorEditor views container.
$kendo-dock-indicator-padding$kendo-color-editor-views-padding-x Numberk-map-get( $kendo-spacing, 1.5 )6px$kendo-color-editor-views-padding-y12px
Description
The padding of the dock indicator in the DockManager component.
+
Description
The horizontal padding of the ColorEditor views container.
$kendo-dock-indicator-bgColor$kendo-base-bg#ffffff$kendo-color-editor-views-gapNumber$kendo-color-editor-spacer12px
Description
The background color of the dock indicator in the DockManager component.
+
Description
The spacing of the ColorEditor views container.
$kendo-dock-indicator-text$kendo-color-editor-color-gradient-focus-outline-color Color$kendo-color-primary#3f51b5rgba(0, 0, 0, .3)rgba(0, 0, 0, 0.3)
Description
The text color of the dock indicator in the DockManager component.
+
Description
The outline color of the focused ColorGradient.
$kendo-dock-indicator-outline-width$kendo-color-editor-color-gradient-focus-outline Number1px1px
Description
The outline width of the dock indicator in the DockManager component.
-
$kendo-dock-indicator-outline-styleStringsolidsolid2px2px
Description
The outline style of the dock indicator in the DockManager component.
+
Description
The outline width of the focused ColorGradient.
$kendo-dock-indicator-outlineColor$kendo-dock-indicator-text#3f51b5$kendo-color-editor-color-gradient-focus-outline-offsetNumber2px2px
Description
The outline color of the dock indicator in the DockManager component.
+
Description
The outline offset of the focused ColorGradient.
$kendo-dock-indicator-shadow
+ +### Colorpalette + + + + + + + + + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-color-palette-font-family Listdrop-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))$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The box shadow of the dock indicator in the DockManager component.
+
Description
The font family of the ColorPalette.
$kendo-dock-indicator-hover-bgColorif($kendo-enable-color-system, k-color( primary-hover ), k-color-mix( $kendo-color-white, $kendo-color-primary, 8% ))#4e5fbb$kendo-color-palette-font-sizeNumber$kendo-font-size-md14px
Description
The background color of the hovered dock indicator in the DockManager component.
+
Description
The font size of the ColorPalette.
$kendo-dock-indicator-hover-textColor$kendo-color-white#ffffff$kendo-color-palette-line-heightNumber00
Description
The text color of the hovered dock indicator in the DockManager component.
+
Description
The line height of the ColorPalette.
$kendo-dock-manager-dock-preview-border-width$kendo-color-palette-tile-width Number1px1pxk-map-get( $kendo-spacing, 6 )24px
Description
The width of the border around the dropping area in the DockManager component.
+
Description
The width of the ColorPalette tile.
$kendo-dock-manager-dock-preview-border-styleStringdasheddashed$kendo-color-palette-tile-heightNumber$kendo-color-palette-tile-width24px
Description
The style of the border around the dropping area in the DockManager component.
+
Description
The height of the ColorPalette tile.
$kendo-dock-manager-dock-preview-border-radiusNumber$kendo-border-radius-sm2px$kendo-color-palette-tile-focus-shadowList0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 )0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.5)
Description
The border radius of the dropping area in the DockManager component.
+
Description
The shadow of the ColorPalette focused tile.
$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)$kendo-color-palette-tile-hover-shadowList0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 )0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.8)
Description
The background color of the dropping area in the DockManager component.
+
Description
The shadow of the ColorPalette hovered tile.
$kendo-dock-manager-dock-preview-borderColor$kendo-color-primary#3f51b5$kendo-color-palette-tile-selected-shadowList0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 )0 1px 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px white
Description
The border color of the dropping area in the DockManager component.
+
Description
The shadow of the ColorPalette selected tile.
-### Dropdowntree +### Component @@ -5577,29 +5643,39 @@ The following table lists the available variables for customizing the Material t - - - - + + + + - - - - - + + + + - + + + + + + + + +
$kendo-dropdowntree-popup-padding-xNumberk-map-get( $kendo-spacing, 2 )8px$kendo-component-bgColork-map-get( $theme, component-bg )#ffffff
Description
The horizontal padding of the DropdownTree popup
+
Description
Background color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.
$kendo-dropdowntree-popup-padding-yNumberk-map-get( $kendo-spacing, 2 )8px$kendo-component-textColork-map-get( $theme, component-text )rgba(0, 0, 0, 0.87)
Description
The vertical padding of the DropdownTree popup
+
Description
Text color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.
+
$kendo-component-borderColork-map-get( $theme, component-border )rgba(0, 0, 0, 0.12)
Description
Border color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.
-### Dropzone +### Dialog @@ -5617,379 +5693,463 @@ The following table lists the available variables for customizing the Material t - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - + + +
$kendo-dropzone-padding-xNumberk-map-get( $kendo-spacing, 2 )8px$kendo-dialog-titlebar-bgNullnullnull
Description
The horizontal padding of the DropZone.
+
Description
The background color of the Dialog titlebar.
$kendo-dropzone-padding-yNumberk-map-get( $kendo-spacing, 2 )8px$kendo-dialog-titlebar-textNullnullnull
Description
The vertical padding of the DropZone.
+
Description
The text color of the Dialog titlebar.
$kendo-dropzone-border-widthNumber1px1px$kendo-dialog-titlebar-borderNullnullnull
Description
The border width of the DropZone.
+
Description
The border color of the Dialog titlebar.
$kendo-dropzone-min-height$kendo-dialog-buttongroup-padding-x Number220px220px$kendo-actions-padding-x8px
Description
The minimum height of the DropZone.
+
Description
The horizontal padding of the Dialog action buttons.
$kendo-dropzone-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif$kendo-dialog-buttongroup-padding-yNumber$kendo-actions-padding-y8px
Description
The font family of the DropZone.
+
Description
The vertical padding of the Dialog action buttons.
$kendo-dropzone-font-size$kendo-dialog-buttongroup-border-width Number$kendo-font-size-md14px1px1px
Description
The font size of the DropZone.
+
Description
The width of the top border of the Dialog action buttons.
$kendo-dropzone-line-height$kendo-dialog-button-spacing Numberk-math-div( 20, 14 )1.4285714286$kendo-actions-button-spacing8px
Description
The line height of the DropZone.
+
Description
The spacing between the Dialog action buttons.
$kendo-dropzone-bgColorif($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-base-bg, 1 ))#ebebeb$kendo-dialog-theme-colorsMap( + "primary": k-map-get($kendo-theme-colors, "primary"), + "light": k-map-get($kendo-theme-colors, "light"), + "dark": k-map-get($kendo-theme-colors, "dark") +)("primary": #3f51b5, "light": #f5f5f5, "dark": #424242)
Description
The background color of the DropZone.
+
Description
The theme colors map for the Dialog.
+
+ +### Dock-manager + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + - - + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - - - - - - - + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-dock-manager-border-widthNumber1px1px
Description
The width of the border around the DockManager component.
$kendo-dropzone-textColor$kendo-base-textrgba(0, 0, 0, 0.87)$kendo-dock-manager-border-styleStringsolidsolid
Description
The text color of the DropZone.
+
Description
The style of the border around the DockManager component.
$kendo-dropzone-border$kendo-dock-manager-border Color $kendo-base-border rgba(0, 0, 0, 0.08)
Description
The border color of the DropZone.
+
Description
The color of the border around the DockManager component.
$kendo-dropzone-icon-spacing$kendo-dock-manager-pane-header-padding-y Numberk-map-get( $kendo-spacing, 6 )24pxk-map-get( $kendo-spacing, 1 )4px
Description
The spacing below the DropZone icon.
+
Description
The vertical padding of the pane header in the DockManager component.
$kendo-dropzone-icon-textColorif($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 ))rgba(97, 97, 97, 0.9116)$kendo-dock-manager-pane-header-padding-xNumberk-map-get( $kendo-spacing, 6 )24px
Description
The text color of the DropZone icon.
+
Description
The horizontal padding of the pane header in the DockManager component.
$kendo-dropzone-icon-hover-textColor$kendo-color-primary#3f51b5$kendo-dock-manager-pane-header-border-widthNumber$kendo-dock-manager-border-width1px
Description
The text color of the hovered DropZone icon.
+
Description
The width of the border around the pane header in the DockManager component.
$kendo-dropzone-hint-font-sizeNullnullnull$kendo-dock-manager-pane-header-border-styleStringsolidsolid
Description
The font size of the DropZone hint.
+
Description
The style of the border around the pane header in the DockManager component.
$kendo-dropzone-hint-spacingNumberk-map-get( $kendo-spacing, 2 )8px$kendo-dock-manager-pane-header-bgColor$kendo-component-bg#ffffff
Description
The spacing below the DropZone hint.
+
Description
The background color of the pane header in the DockManager component.
$kendo-dropzone-hint-text$kendo-dock-manager-pane-title-padding-y Null null null
Description
The text color of the DropZone hint.
-
$kendo-dropzone-note-font-sizeNumber$kendo-font-size-sm12px
Description
The font size of the DropZone note.
+
Description
The vertical padding of the pane title in the DockManager component.
$kendo-dropzone-note-spacing$kendo-dock-manager-pane-title-padding-x Null null null
Description
The spacing below the DropZone note.
+
Description
The horizontal padding of the pane title in the DockManager component.
$kendo-dropzone-note-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)$kendo-dock-manager-pane-title-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The text color of the DropZone note.
+
Description
The font family of the pane title in the DockManager component.
- -### Editor - - - - - - - - - - - - - - - - - - + + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + + + + + + + + + + + + + + + + + + + - - + + + + + + + + + + - - + + - - + + + + + + + + + + - + + + + + + + + + + - - + - + + + + + + + + + + + + + + + + + + + - - + - - + + - + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-editor-border-width
$kendo-dock-manager-pane-title-font-size Number1px1px$kendo-font-size-lg16px
Description
The width of the border around the Еditor.
+
Description
The font size of the pane title in the DockManager component.
$kendo-editor-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif$kendo-dock-manager-pane-title-line-heightNumber$kendo-line-height-sm1.2
Description
The font family of the Еditor.
+
Description
The line height of the pane title in the DockManager component.
$kendo-editor-font-size$kendo-dock-manager-pane-title-font-weight Number$kendo-font-size-md14px$kendo-font-weight-normal400
Description
The font size of the Еditor.
+
Description
The font weight of the pane title in the DockManager component.
$kendo-editor-line-height$kendo-dock-manager-pane-content-padding-x Number$kendo-line-height-md2$kendo-dock-manager-pane-header-padding-x24px
Description
The line height of the Еditor.
+
Description
The horizontal padding of the pane content in the DockManager component.
$kendo-editor-placeholder-textColor$kendo-input-placeholder-textrgba(0, 0, 0, 0.54)$kendo-dock-manager-pane-content-padding-yNumber$kendo-dock-manager-pane-header-padding-x24px
Description
The text color of the Еditor placeholder.
+
Description
The vertical padding of the pane content in the DockManager component.
$kendo-editor-placeholder-opacityNumber$kendo-input-placeholder-opacity1$kendo-dock-manager-tabbed-pane-padding-yNullnullnull
Description
The opacity of the Editor placeholder.
+
Description
The horizontal padding of the tabbed pane in the DockManager component.
$kendo-editor-selected-textColor$kendo-color-primary-contrastwhite$kendo-dock-manager-tabbed-pane-padding-xNullnullnull
Description
The selected text color of the Editor.
+
Description
The horizontal padding of the tabbed pane in the DockManager component.
$kendo-editor-selected-bgColor$kendo-color-primary#3f51b5$kendo-dock-manager-unpinned-container-widthNumber300px300px
Description
The selected background color of the Editor.
+
Description
The width of the unpinned pane container in the DockManager component.
$kendo-editor-highlighted-bg$kendo-dock-manager-unpinned-container-bg Colorif($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix($kendo-color-primary, #ffffff, 20%))#d9dcf0$kendo-color-white#ffffff
Description
The highlighted background color of the Editor.
+
Description
The background-color of the unpinned pane container in the DockManager component.
$kendo-editor-export-tool-icon-margin-xNumber.5em0.5em$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 horizontal margin of the Editor's export tool icon.
+
Description
The box shadow of the unpinned pane container in the DockManager component.
$kendo-editor-resize-handle-size$kendo-dock-indicator-padding Number8px8pxk-map-get( $kendo-spacing, 1.5 )6px
Description
The size of the Editor's resize handle.
+
Description
The padding of the dock indicator in the DockManager component.
$kendo-editor-resize-handle-border-width$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-width Number 1px 1px
Description
The border width of the Editor's resize handle.
+
Description
The outline width of the dock indicator in the DockManager component.
$kendo-editor-resize-handle-border$kendo-dock-indicator-outline-styleStringsolidsolid
Description
The outline style of the dock indicator in the DockManager component.
+
$kendo-dock-indicator-outline Color#000000#000000$kendo-dock-indicator-text#3f51b5
Description
The border color of the Editor's resize handle.
+
Description
The outline color of the dock indicator in the DockManager component.
$kendo-editor-resize-handle-bg$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-bg Color#ffffffif($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 background color of the Editor's resize handle.
+
Description
The text color of the hovered dock indicator in the DockManager component.
$kendo-editor-selectednode-outline-width$kendo-dock-manager-dock-preview-border-width Number2px1px1px
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-sm 2px
Description
The outline width of the Editor's selected node.
+
Description
The border radius of the dropping area in the DockManager component.
$kendo-editor-selectednode-outline-color$kendo-dock-manager-dock-preview-bg Color#88ccff#88ccffif($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 ))rgba(63, 81, 181, 0.16)
Description
The outline color of the Editor's selected node.
+
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.
-### Elevation +### Dropdowntree @@ -6007,19 +6167,29 @@ The following table lists the available variables for customizing the Material t - - - - + + + + - + + + + + + + + +
$kendo-elevationMap$_default-elevation(1: (0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14)), 2: (0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14)), 3: (0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14)), 4: (0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14)), 5: (0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14)), 6: (0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px 0px rgba(0, 0, 0, 0.14)), 7: (0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14)), 8: (0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14)), 9: (0px 11px 15px rgba(0, 0, 0, 0.2), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14)))$kendo-dropdowntree-popup-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The global default Elevation map.
+
Description
The horizontal padding of the DropdownTree popup
+
$kendo-dropdowntree-popup-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The vertical padding of the DropdownTree popup
-### Expander +### Dropzone @@ -6037,229 +6207,199 @@ The following table lists the available variables for customizing the Material t - + - - + + - - + + + + + + + + + + - - + + + + + + + + + + - - + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - - - - - - - + - - - - - - - - - - - + - - + + - - + - - + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - -
$kendo-expander-spacing-y$kendo-dropzone-padding-x Numberk-map-get( $kendo-spacing, 3 )12pxk-map-get( $kendo-spacing, 2 )8px
Description
The vertical spacing of the ExpansionPanel.
+
Description
The horizontal padding of the DropZone.
$kendo-expander-border-width$kendo-dropzone-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The vertical padding of the DropZone.
+
$kendo-dropzone-border-width Number 1px 1px
Description
The width of the border around the ExpansionPanel.
+
Description
The border width of the DropZone.
$kendo-expander-font-family$kendo-dropzone-min-heightNumber220px220px
Description
The minimum height of the DropZone.
+
$kendo-dropzone-font-family List $kendo-font-family Roboto, "Helvetica Neue", sans-serif
Description
The font family of the ExpansionPanel.
+
Description
The font family of the DropZone.
$kendo-expander-font-size$kendo-dropzone-font-size Number $kendo-font-size-md 14px
Description
The font size of the ExpansionPanel.
+
Description
The font size of the DropZone.
$kendo-expander-line-height$kendo-dropzone-line-height Number$kendo-line-height-md2k-math-div( 20, 14 )1.4285714286
Description
The hine height of the ExpansionPanel.
+
Description
The line height of the DropZone.
$kendo-expander-text$kendo-dropzone-bg Color$kendo-component-textrgba(0, 0, 0, 0.87)if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-base-bg, 1 ))#ebebeb
Description
The text color of the ExpansionPanel.
+
Description
The background color of the DropZone.
$kendo-expander-bg$kendo-dropzone-text Color$kendo-component-bg#ffffff$kendo-base-textrgba(0, 0, 0, 0.87)
Description
The background color of the ExpansionPanel.
+
Description
The text color of the DropZone.
$kendo-expander-border$kendo-dropzone-border Color$kendo-component-borderrgba(0, 0, 0, 0.12)$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The border color of the ExpansionPanel.
+
Description
The border color of the DropZone.
$kendo-expander-focus-shadowListinset 0 0 0 2px rgba( black, .08 )inset 0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The box shadow of the focused ExpansionPanel.
-
$kendo-expander-header-padding-x$kendo-dropzone-icon-spacing Number k-map-get( $kendo-spacing, 6 ) 24px
Description
The horizontal padding of the ExpansionPanel header.
-
$kendo-expander-header-padding-yNumberk-map-get( $kendo-spacing, 3 )12px
Description
The vertical padding of the ExpansionPanel header.
+
Description
The spacing below the DropZone icon.
$kendo-expander-header-text$kendo-dropzone-icon-text Color$kendo-expander-textrgba(0, 0, 0, 0.87)if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 ))rgba(97, 97, 97, 0.9116)
Description
The text color of the ExpansionPanel header.
+
Description
The text color of the DropZone icon.
$kendo-expander-header-bg$kendo-dropzone-icon-hover-text Colortransparenttransparent$kendo-color-primary#3f51b5
Description
The background color of the ExpansionPanel header.
+
Description
The text color of the hovered DropZone icon.
$kendo-expander-header-border$kendo-dropzone-hint-font-size Null null null
Description
The border color of the ExpansionPanel header.
+
Description
The font size of the DropZone hint.
$kendo-expander-header-hover-bgColorrgba( black, .04 )rgba(0, 0, 0, 0.04)$kendo-dropzone-hint-spacingNumberk-map-get( $kendo-spacing, 2 )8px
Description
The background color of the hovered ExpansionPanel header.
+
Description
The spacing below the DropZone hint.
$kendo-expander-header-focus-bgColorrgba( black, .12 )rgba(0, 0, 0, 0.12)$kendo-dropzone-hint-textNullnullnull
Description
The background color of the focused ExpansionPanel header.
+
Description
The text color of the DropZone hint.
$kendo-expander-header-focus-shadowStringnonenone$kendo-dropzone-note-font-sizeNumber$kendo-font-size-sm12px
Description
The box shadow of the focused ExpansionPanel header.
+
Description
The font size of the DropZone note.
$kendo-expander-title-textColor$kendo-color-secondary#e51a5f$kendo-dropzone-note-spacingNullnullnull
Description
The text color of the ExpansionPanel title.
+
Description
The spacing below the DropZone note.
$kendo-expander-header-sub-title-text$kendo-dropzone-note-text Color $kendo-subtle-text rgba(0, 0, 0, 0.54)
Description
The text color of the ExpansionPanel sub-title.
-
$kendo-expander-indicator-margin-xNumberk-map-get( $kendo-spacing, 3 )12px
Description
The horizontal margin of the ExpansionPanel indicator.
-
$kendo-expander-content-padding-xNumberk-map-get( $kendo-spacing, 6 )24px
Description
The horizontal padding of the ExpansionPanel content.
-
$kendo-expander-content-padding-yNumberk-map-get( $kendo-spacing, 6 )24px
Description
The vertical padding of the ExpansionPanel content.
+
Description
The text color of the DropZone note.
-### Filemanager +### Editor @@ -6277,1132 +6417,1129 @@ The following table lists the available variables for customizing the Material t - - - - - - - - - - + - - + - - + - - + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - - + +
$kendo-file-manager-spacerNumberk-map-get( $kendo-spacing, 4 )16px
Description
The space between the FileManager items.
-
$kendo-file-manager-border-width$kendo-editor-border-width Number 1px 1px
Description
The border width of the FileManager.
+
Description
The width of the border around the Еditor.
$kendo-file-manager-font-family$kendo-editor-font-family List $kendo-font-family Roboto, "Helvetica Neue", sans-serif
Description
The font family of the FileManager.
+
Description
The font family of the Еditor.
$kendo-file-manager-font-size$kendo-editor-font-size Number $kendo-font-size-md 14px
Description
The font size of the FileManager.
+
Description
The font size of the Еditor.
$kendo-file-manager-line-height$kendo-editor-line-height Number $kendo-line-height-md 2
Description
The line height of the FileManager.
+
Description
The line height of the Еditor.
$kendo-file-manager-bg$kendo-editor-placeholder-text Color$kendo-component-bg#ffffff$kendo-input-placeholder-textrgba(0, 0, 0, 0.54)
Description
The background color of the FileManager.
+
Description
The text color of the Еditor placeholder.
$kendo-file-manager-textColor$kendo-component-textrgba(0, 0, 0, 0.87)$kendo-editor-placeholder-opacityNumber$kendo-input-placeholder-opacity1
Description
The text color of the FileManager.
+
Description
The opacity of the Editor placeholder.
$kendo-file-manager-border$kendo-editor-selected-text Color$kendo-component-borderrgba(0, 0, 0, 0.12)$kendo-color-primary-contrastwhite
Description
The border color of the FileManager.
+
Description
The selected text color of the Editor.
$kendo-file-manager-toolbar-border-widthNumber$kendo-file-manager-border-width1px$kendo-editor-selected-bgColor$kendo-color-primary#3f51b5
Description
The border width of the FileManager Toolbar.
+
Description
The selected background color of the Editor.
$kendo-file-manager-toolbar-bg$kendo-editor-highlighted-bg Colorif($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .5 ))whitesmokeif($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix($kendo-color-primary, #ffffff, 20%))#d9dcf0
Description
The background color of the FileManager Toolbar.
+
Description
The highlighted background color of the Editor.
$kendo-file-manager-toolbar-textNullnullnull$kendo-editor-export-tool-icon-margin-xNumber.5em0.5em
Description
The text color of the FileManager Toolbar.
+
Description
The horizontal margin of the Editor's export tool icon.
$kendo-file-manager-toolbar-borderNullnullnull$kendo-editor-resize-handle-sizeNumber8px8px
Description
The border color of the FileManager Toolbar.
+
Description
The size of the Editor's resize handle.
$kendo-file-manager-toolbar-gradientNullnullnull$kendo-editor-resize-handle-border-widthNumber1px1px
Description
The gradient of the FileManager Toolbar.
+
Description
The border width of the Editor's resize handle.
$kendo-file-manager-navigation-padding-xNumber$kendo-file-manager-spacer16px$kendo-editor-resize-handle-borderColor#000000#000000
Description
The horizontal padding of the FileManager Navigation.
+
Description
The border color of the Editor's resize handle.
$kendo-file-manager-navigation-padding-yNumber$kendo-file-manager-spacer16px$kendo-editor-resize-handle-bgColor#ffffff#ffffff
Description
The vertical padding of the FileManager Navigation.
+
Description
The background color of the Editor's resize handle.
$kendo-file-manager-navigation-width$kendo-editor-selectednode-outline-width Number20%20%2px2px
Description
The width of the FileManager Navigation.
+
Description
The outline width of the Editor's selected node.
$kendo-file-manager-navigation-border-widthNumber$kendo-file-manager-border-width1px$kendo-editor-selectednode-outline-colorColor#88ccff#88ccff
Description
The border width of the FileManager Navigation.
+
Description
The outline color of the Editor's selected node.
$kendo-file-manager-navigation-bgNullnullnull
+ +### Elevation + + + + + + + + + + + + + + + + + + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-elevationMap$_default-elevation(1: (0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14)), 2: (0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14)), 3: (0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14)), 4: (0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14)), 5: (0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14)), 6: (0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px 0px rgba(0, 0, 0, 0.14)), 7: (0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14)), 8: (0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14)), 9: (0px 11px 15px rgba(0, 0, 0, 0.2), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14)))
Description
The background color of the FileManager Navigation.
+
Description
The global default Elevation map.
$kendo-file-manager-navigation-textNullnullnull
+ +### Expander + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - - - - - - - - - - - - - - - - - - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-expander-spacing-yNumberk-map-get( $kendo-spacing, 3 )12px
Description
The text color of the FileManager Navigation.
+
Description
The vertical spacing of the ExpansionPanel.
$kendo-file-manager-navigation-borderNullnullnull$kendo-expander-border-widthNumber1px1px
Description
The border color of the FileManager Navigation.
+
Description
The width of the border around the ExpansionPanel.
$kendo-file-manager-breadcrumb-padding-xNumberk-map-get( $kendo-spacing, 2 )8px$kendo-expander-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The horizontal padding of the FileManager Breadcrumb.
+
Description
The font family of the ExpansionPanel.
$kendo-file-manager-breadcrumb-padding-y$kendo-expander-font-size Numberk-map-get( $kendo-spacing, 2 )8px$kendo-font-size-md14px
Description
The vertical padding of the FileManager Breadcrumb.
+
Description
The font size of the ExpansionPanel.
$kendo-file-manager-breadcrumb-border-width$kendo-expander-line-height Number$kendo-file-manager-border-width1px$kendo-line-height-md2
Description
The border width of the FileManager Breadcrumb.
+
Description
The hine height of the ExpansionPanel.
$kendo-file-manager-breadcrumb-bg$kendo-expander-text Color$kendo-file-manager-toolbar-bgwhitesmoke
Description
The background color of the FileManager Breadcrumb.
-
$kendo-file-manager-breadcrumb-textNullnullnull
Description
The text color of the FileManager Breadcrumb.
-
$kendo-file-manager-breadcrumb-borderNullnullnull$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The border color of the FileManager Breadcrumb.
+
Description
The text color of the ExpansionPanel.
$kendo-file-manager-listview-bgNullnullnull$kendo-expander-bgColor$kendo-component-bg#ffffff
Description
The background color of the FileManager ListView.
+
Description
The background color of the ExpansionPanel.
$kendo-file-manager-listview-textNullnullnull$kendo-expander-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The text color of the FileManager ListView.
+
Description
The border color of the ExpansionPanel.
$kendo-file-manager-listview-borderNullnullnull$kendo-expander-focus-shadowListinset 0 0 0 2px rgba( black, .08 )inset 0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The border color of the FileManager ListView.
+
Description
The box shadow of the focused ExpansionPanel.
$kendo-file-manager-listview-item-padding-x$kendo-expander-header-padding-x Numberk-map-get( $kendo-spacing, 4 )16pxk-map-get( $kendo-spacing, 6 )24px
Description
The horizontal padding of the FileManager ListView item.
+
Description
The horizontal padding of the ExpansionPanel header.
$kendo-file-manager-listview-item-padding-y$kendo-expander-header-padding-y Numberk-map-get( $kendo-spacing, 4 )16pxk-map-get( $kendo-spacing, 3 )12px
Description
The vertical padding of the FileManager ListView item.
+
Description
The vertical padding of the ExpansionPanel header.
$kendo-file-manager-listview-item-widthNumber120px120px$kendo-expander-header-textColor$kendo-expander-textrgba(0, 0, 0, 0.87)
Description
The width of the FileManager ListView item.
+
Description
The text color of the ExpansionPanel header.
$kendo-file-manager-listview-item-heightNumber120px120px$kendo-expander-header-bgColortransparenttransparent
Description
The height of the FileManager ListView item.
+
Description
The background color of the ExpansionPanel header.
$kendo-file-manager-listview-item-bg$kendo-expander-header-border Null null null
Description
The background color of the FileManager ListView item.
+
Description
The border color of the ExpansionPanel header.
$kendo-file-manager-listview-item-textNullnullnull$kendo-expander-header-hover-bgColorrgba( black, .04 )rgba(0, 0, 0, 0.04)
Description
The text color of the FileManager ListView item.
+
Description
The background color of the hovered ExpansionPanel header.
$kendo-file-manager-listview-item-borderNullnullnull$kendo-expander-header-focus-bgColorrgba( black, .12 )rgba(0, 0, 0, 0.12)
Description
The border color of the FileManager ListView item.
+
Description
The background color of the focused ExpansionPanel header.
$kendo-file-manager-listview-item-icon-bgNullnullnull$kendo-expander-header-focus-shadowStringnonenone
Description
The background color of the FileManager ListView item icon.
+
Description
The box shadow of the focused ExpansionPanel header.
$kendo-file-manager-listview-item-icon-text$kendo-expander-title-text Colorif($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))rgba(97, 97, 97, 0.9116)$kendo-color-secondary#e51a5f
Description
The text color of the FileManager ListView item icon.
+
Description
The text color of the ExpansionPanel title.
$kendo-file-manager-listview-item-icon-borderNullnullnull$kendo-expander-header-sub-title-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
The border color of the FileManager ListView item icon.
+
Description
The text color of the ExpansionPanel sub-title.
$kendo-file-manager-listview-item-icon-selected-bgNullnullnull$kendo-expander-indicator-margin-xNumberk-map-get( $kendo-spacing, 3 )12px
Description
Background color of the FileManager selected ListView item icon.
+
Description
The horizontal margin of the ExpansionPanel indicator.
$kendo-file-manager-listview-item-icon-selected-textStringinheritinherit$kendo-expander-content-padding-xNumberk-map-get( $kendo-spacing, 6 )24px
Description
Text color of the FileManager selected ListView item icon.
+
Description
The horizontal padding of the ExpansionPanel content.
$kendo-file-manager-listview-item-icon-selected-borderNullnullnull$kendo-expander-content-padding-yNumberk-map-get( $kendo-spacing, 6 )24px
Description
Border color of the FileManager selected ListView item icon.
+
Description
The vertical padding of the ExpansionPanel content.
$kendo-file-manager-grid-bgNullnullnull
+ +### Filemanager + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + - - + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-file-manager-spacerNumberk-map-get( $kendo-spacing, 4 )16px
Description
The background color of the FileManager Grid.
+
Description
The space between the FileManager items.
$kendo-file-manager-grid-textNullnullnull$kendo-file-manager-border-widthNumber1px1px
Description
The text color of the FileManager Grid.
+
Description
The border width of the FileManager.
$kendo-file-manager-grid-borderNullnullnull$kendo-file-manager-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The border color of the FileManager Grid.
+
Description
The font family of the FileManager.
$kendo-file-manager-preview-padding-x$kendo-file-manager-font-size Number$kendo-file-manager-spacer16px$kendo-font-size-md14px
Description
The horizontal padding of the FileManager preview.
+
Description
The font size of the FileManager.
$kendo-file-manager-preview-padding-y$kendo-file-manager-line-height Number$kendo-file-manager-spacer16px$kendo-line-height-md2
Description
The vertical padding of the FileManager preview.
+
Description
The line height of the FileManager.
$kendo-file-manager-preview-widthNumber20%20%$kendo-file-manager-bgColor$kendo-component-bg#ffffff
Description
The width of the FileManager preview.
+
Description
The background color of the FileManager.
$kendo-file-manager-preview-border-widthNumber$kendo-file-manager-border-width1px$kendo-file-manager-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The border width of the FileManager preview.
+
Description
The text color of the FileManager.
$kendo-file-manager-preview-spacingNumber$kendo-file-manager-spacer16px$kendo-file-manager-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The spacing of the FileManager preview.
+
Description
The border color of the FileManager.
$kendo-file-manager-preview-column-gap$kendo-file-manager-toolbar-border-width Numberk-map-get( $kendo-spacing, 1 )4px$kendo-file-manager-border-width1px
Description
The gap between the columns in the FileManager preview.
+
Description
The border width of the FileManager Toolbar.
$kendo-file-manager-preview-bgNullnullnull$kendo-file-manager-toolbar-bgColorif($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .5 ))whitesmoke
Description
The background color of the FileManager preview.
+
Description
The background color of the FileManager Toolbar.
$kendo-file-manager-preview-text$kendo-file-manager-toolbar-text Null null null
Description
The text color of the FileManager preview.
+
Description
The text color of the FileManager Toolbar.
$kendo-file-manager-preview-border$kendo-file-manager-toolbar-border Null null null
Description
The border color of the FileManager preview.
+
Description
The border color of the FileManager Toolbar.
$kendo-file-manager-preview-icon-bg$kendo-file-manager-toolbar-gradient Null null null
Description
The background color of the FileManager preview icon.
+
Description
The gradient of the FileManager Toolbar.
$kendo-file-manager-preview-icon-textColorif($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))rgba(97, 97, 97, 0.9116)$kendo-file-manager-navigation-padding-xNumber$kendo-file-manager-spacer16px
Description
The text color of the FileManager preview icon.
+
Description
The horizontal padding of the FileManager Navigation.
$kendo-file-manager-preview-icon-borderNullnullnull$kendo-file-manager-navigation-padding-yNumber$kendo-file-manager-spacer16px
Description
The border color of the FileManager preview icon.
+
Description
The vertical padding of the FileManager Navigation.
- -### Filter - - - - - - - - - - - - - - - - - - + + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-filter-padding-x
$kendo-file-manager-navigation-width Number$kendo-padding-sm-x8px20%20%
Description
The horizontal padding of the Filter.
+
Description
The width of the FileManager Navigation.
$kendo-filter-padding-y$kendo-file-manager-navigation-border-width Number$kendo-filter-padding-x8px$kendo-file-manager-border-width1px
Description
The vertical padding of the Filter.
+
Description
The border width of the FileManager Navigation.
$kendo-filter-bottom-marginNumber2.1em2.1em$kendo-file-manager-navigation-bgNullnullnull
Description
The bottom margin of the Filter.
+
Description
The background color of the FileManager Navigation.
$kendo-filter-line-sizeNumber1px1px$kendo-file-manager-navigation-textNullnullnull
Description
The width of the line that connects the Filter items.
+
Description
The text color of the FileManager Navigation.
$kendo-filter-operator-dropdown-widthNumber15em15em$kendo-file-manager-navigation-borderNullnullnull
Description
The width of the dropdown elements in the Filter items.
+
Description
The border color of the FileManager Navigation.
$kendo-filter-preview-field-textColor$kendo-color-primary#3f51b5$kendo-file-manager-breadcrumb-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The text color of the Filter preview field.
+
Description
The horizontal padding of the FileManager Breadcrumb.
$kendo-filter-preview-operator-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)$kendo-file-manager-breadcrumb-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The text color of the Filter preview operator.
+
Description
The vertical padding of the FileManager Breadcrumb.
$kendo-filter-toolbar-focus-shadowList0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12)0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.14), 0 1px 10px rgba(0, 0, 0, 0.12)$kendo-file-manager-breadcrumb-border-widthNumber$kendo-file-manager-border-width1px
Description
The box shadow of the focused Filter toolbar.
+
Description
The border width of the FileManager Breadcrumb.
- -### Floating-action-button - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-fab-border-widthNumber0px0px
$kendo-file-manager-breadcrumb-bgColor$kendo-file-manager-toolbar-bgwhitesmoke
Description
The width of the border around the FAB.
+
Description
The background color of the FileManager Breadcrumb.
$kendo-fab-border-radiusNumber$kendo-border-radius-md4px$kendo-file-manager-breadcrumb-textNullnullnull
Description
The border radius of the FAB.
+
Description
The text color of the FileManager Breadcrumb.
$kendo-fab-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif$kendo-file-manager-breadcrumb-borderNullnullnull
Description
The font family of the FAB.
+
Description
The border color of the FileManager Breadcrumb.
$kendo-fab-font-sizeNumber$kendo-font-size-md14px$kendo-file-manager-listview-bgNullnullnull
Description
The font size of the FAB.
+
Description
The background color of the FileManager ListView.
$kendo-fab-line-heightNumberk-math-div( 20, 14 )1.4285714286$kendo-file-manager-listview-textNullnullnull
Description
The line height of the FAB.
+
Description
The text color of the FileManager ListView.
$kendo-fab-padding-xNumberk-map-get( $kendo-spacing, 4 )16px$kendo-file-manager-listview-borderNullnullnull
Description
The horizontal padding of the FAB.
+
Description
The border color of the FileManager ListView.
$kendo-fab-sm-padding-x$kendo-file-manager-listview-item-padding-x Numberk-math-div( $kendo-fab-padding-x, 2 )8pxk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the small FAB.
+
Description
The horizontal padding of the FileManager ListView item.
$kendo-fab-md-padding-x$kendo-file-manager-listview-item-padding-y Number$kendo-fab-padding-xk-map-get( $kendo-spacing, 4 ) 16px
Description
The horizontal padding of the medium FAB.
+
Description
The vertical padding of the FileManager ListView item.
$kendo-fab-lg-padding-x$kendo-file-manager-listview-item-width Number( $kendo-fab-padding-x * 1.5 )24px120px120px
Description
The horizontal padding of the large FAB.
+
Description
The width of the FileManager ListView item.
$kendo-fab-padding-y$kendo-file-manager-listview-item-height Number$kendo-fab-padding-x16px120px120px
Description
The vertical padding of the FAB.
+
Description
The height of the FileManager ListView item.
$kendo-fab-sm-padding-yNumberk-math-div( $kendo-fab-padding-y, 2 )8px$kendo-file-manager-listview-item-bgNullnullnull
Description
The vertical padding of the small FAB.
+
Description
The background color of the FileManager ListView item.
$kendo-fab-md-padding-yNumber$kendo-fab-padding-y16px$kendo-file-manager-listview-item-textNullnullnull
Description
The vertical padding of the medium FAB.
+
Description
The text color of the FileManager ListView item.
$kendo-fab-lg-padding-yNumber( $kendo-fab-padding-y * 1.5 )24px$kendo-file-manager-listview-item-borderNullnullnull
Description
The vertical padding of the large FAB.
+
Description
The border color of the FileManager ListView item.
$kendo-fab-icon-padding-xNumberk-map-get( $kendo-spacing, 0.5 )2px$kendo-file-manager-listview-item-icon-bgNullnullnull
Description
The horizontal padding of the FAB icon.
+
Description
The background color of the FileManager ListView item icon.
$kendo-fab-icon-padding-yNumber$kendo-fab-icon-padding-x2px$kendo-file-manager-listview-item-icon-textColorif($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))rgba(97, 97, 97, 0.9116)
Description
The vertical padding of the FAB icon.
+
Description
The text color of the FileManager ListView item icon.
$kendo-fab-icon-spacingNumberk-map-get( $kendo-spacing, 1 ) * 1.56px$kendo-file-manager-listview-item-icon-borderNullnullnull
Description
The spacing FAB icon.
+
Description
The border color of the FileManager ListView item icon.
$kendo-fab-items-padding-xNumber0px0px$kendo-file-manager-listview-item-icon-selected-bgNullnullnull
Description
The horizontal padding of the FAB items.
+
Description
Background color of the FileManager selected ListView item icon.
$kendo-fab-items-padding-yNumberk-map-get( $kendo-spacing, 4 )16px$kendo-file-manager-listview-item-icon-selected-textStringinheritinherit
Description
The vertical padding of the FAB items.
+
Description
Text color of the FileManager selected ListView item icon.
$kendo-fab-item-text-padding-xNumberk-map-get( $kendo-spacing, 1 )4px$kendo-file-manager-listview-item-icon-selected-borderNullnullnull
Description
The horizontal padding of the FAB item text.
+
Description
Border color of the FileManager selected ListView item icon.
$kendo-fab-item-text-padding-yNumber$kendo-fab-item-text-padding-x4px$kendo-file-manager-grid-bgNullnullnull
Description
The vertical padding of the FAB item text.
+
Description
The background color of the FileManager Grid.
$kendo-fab-item-text-border-widthNumber1px1px$kendo-file-manager-grid-textNullnullnull
Description
The width of the FAB item text border.
+
Description
The text color of the FileManager Grid.
$kendo-fab-item-text-border-radiusNumber2px2px$kendo-file-manager-grid-borderNullnullnull
Description
The border radius of the FAB item text.
+
Description
The border color of the FileManager Grid.
$kendo-fab-item-text-font-size$kendo-file-manager-preview-padding-x Number$kendo-font-size-xs10px$kendo-file-manager-spacer16px
Description
The font size of the FAB item text.
+
Description
The horizontal padding of the FileManager preview.
$kendo-fab-item-text-line-height$kendo-file-manager-preview-padding-y Number1.21.2$kendo-file-manager-spacer16px
Description
The line height of the FAB item text.
+
Description
The vertical padding of the FileManager preview.
$kendo-fab-item-icon-padding-x$kendo-file-manager-preview-width Numberk-map-get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x10px20%20%
Description
The horizontal padding of the FAB item icon.
+
Description
The width of the FileManager preview.
$kendo-fab-item-icon-padding-y$kendo-file-manager-preview-border-width Number$kendo-fab-item-icon-padding-x10px$kendo-file-manager-border-width1px
Description
The vertical padding of the FAB item icon.
+
Description
The border width of the FileManager preview.
$kendo-fab-item-icon-border-width$kendo-file-manager-preview-spacing Number00$kendo-file-manager-spacer16px
Description
The border width of the FAB item icon.
+
Description
The spacing of the FileManager preview.
$kendo-fab-item-icon-border-radius$kendo-file-manager-preview-column-gap Number50%50%k-map-get( $kendo-spacing, 1 )4px
Description
The border radius of the FAB item icon.
+
Description
The gap between the columns in the FileManager preview.
$kendo-fab-theme-colorsMap$kendo-theme-colors("primary": #3f51b5, "secondary": #e51a5f, "tertiary": #00695c, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #f5f5f5, "inverse": #424242)$kendo-file-manager-preview-bgNullnullnull
Description
The theme colors map for the FAB.
+
Description
The background color of the FileManager preview.
$kendo-fab-sizesMap( - sm: ( - padding-x: $kendo-fab-sm-padding-x, - padding-y: $kendo-fab-sm-padding-y - ), - md: ( - padding-x: $kendo-fab-md-padding-x, - padding-y: $kendo-fab-md-padding-y - ), - lg: ( - padding-x: $kendo-fab-lg-padding-x, - padding-y: $kendo-fab-lg-padding-y - ) -)(sm: (padding-x: 8px, padding-y: 8px), md: (padding-x: 16px, padding-y: 16px), lg: (padding-x: 24px, padding-y: 24px))$kendo-file-manager-preview-textNullnullnull
Description
The size map for the FAB.
+
Description
The text color of the FileManager preview.
$kendo-fab-shadowString$box-shadow-depth-5var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))$kendo-file-manager-preview-borderNullnullnull
Description
The base shadow of the FAB.
+
Description
The border color of the FileManager preview.
$kendo-fab-disabled-shadowString$box-shadow-depth-5var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))$kendo-file-manager-preview-icon-bgNullnullnull
Description
The shadow of the disabled FAB.
+
Description
The background color of the FileManager preview icon.
$kendo-fab-active-shadowString$box-shadow-depth-7var(--kendo-elevation-7, 0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14))$kendo-file-manager-preview-icon-textColorif($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))rgba(97, 97, 97, 0.9116)
Description
The shadow of the active FAB.
+
Description
The text color of the FileManager preview icon.
$kendo-fab-item-textColor$kendo-component-textrgba(0, 0, 0, 0.87)$kendo-file-manager-preview-icon-borderNullnullnull
Description
The base text color of the FAB item.
+
Description
The border color of the FileManager preview icon.
$kendo-fab-item-bgColor$kendo-component-bg#ffffff
+ +### Filter + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-filter-padding-xNumber$kendo-padding-sm-x8px
Description
The base background color of the FAB item.
+
Description
The horizontal padding of the Filter.
$kendo-fab-item-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)$kendo-filter-padding-yNumber$kendo-filter-padding-x8px
Description
The base border color of the FAB item.
+
Description
The vertical padding of the Filter.
$kendo-fab-item-icon-textColor$kendo-button-textrgba(0, 0, 0, 0.87)$kendo-filter-bottom-marginNumber2.1em2.1em
Description
The base text color of the FAB item icon.
+
Description
The bottom margin of the Filter.
$kendo-fab-item-icon-bgColor$kendo-button-bg#ffffff$kendo-filter-line-sizeNumber1px1px
Description
The base background color of the FAB item icon.
+
Description
The width of the line that connects the Filter items.
$kendo-fab-item-icon-borderColor$kendo-button-border#ffffff$kendo-filter-operator-dropdown-widthNumber15em15em
Description
The base border color of the FAB item icon.
+
Description
The width of the dropdown elements in the Filter items.
$kendo-fab-item-shadowString$kendo-fab-shadowvar(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))$kendo-filter-preview-field-textColor$kendo-color-primary#3f51b5
Description
The base shadow of the FAB item.
+
Description
The text color of the Filter preview field.
$kendo-fab-item-disabled-shadowString$kendo-fab-disabled-shadowvar(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))$kendo-filter-preview-operator-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
The shadow of the disabled FAB item.
+
Description
The text color of the Filter preview operator.
$kendo-fab-item-active-shadowString$kendo-fab-active-shadowvar(--kendo-elevation-7, 0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14))$kendo-filter-toolbar-focus-shadowList0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12)0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.14), 0 1px 10px rgba(0, 0, 0, 0.12)
Description
The shadow of the active FAB item.
+
Description
The box shadow of the focused Filter toolbar.
-### Floating-label +### Floating-action-button @@ -7420,639 +7557,612 @@ The following table lists the available variables for customizing the Material t - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - - - - - - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - - - - - -
$kendo-floating-label-scale$kendo-fab-border-width Number110px0px
Description
The transformation scale of the Floating Label.
+
Description
The width of the border around the FAB.
$kendo-floating-label-font-size$kendo-fab-border-radius Number$kendo-input-font-size16px$kendo-border-radius-md4px
Description
The font size of the Floating Label.
+
Description
The border radius of the FAB.
$kendo-floating-label-max-widthNumber90%90%$kendo-fab-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The maximum width of the Floating Label.
+
Description
The font family of the FAB.
$kendo-floating-label-line-height$kendo-fab-font-size Number$kendo-input-line-height1.25$kendo-font-size-md14px
Description
The line height of the Floating Label.
+
Description
The font size of the FAB.
$kendo-floating-label-heightCalculationcalc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} )calc(1.25 * 16px)$kendo-fab-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The height of the Floating Label.
+
Description
The line height of the FAB.
$kendo-floating-label-offset-xCalculationcalc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} )calc(16px + 1px)
Description
The horizontal offset of the Floating Label.
-
$kendo-floating-label-offset-yCalculationcalc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} )calc(calc(1.25 * 16px) + 1px + 8px)$kendo-fab-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The vertical offset of the Floating Label.
+
Description
The horizontal padding of the FAB.
$kendo-floating-label-focus-scale$kendo-fab-sm-padding-x Number.750.75k-math-div( $kendo-fab-padding-x, 2 )8px
Description
The transformation scale of the focused Floating Label.
+
Description
The horizontal padding of the small FAB.
$kendo-floating-label-focus-offset-x$kendo-fab-md-padding-x Number0px0px$kendo-fab-padding-x16px
Description
The horizontal offset of the focused Floating Label.
+
Description
The horizontal padding of the medium FAB.
$kendo-floating-label-focus-offset-y$kendo-fab-lg-padding-x Number0px0px( $kendo-fab-padding-x * 1.5 )24px
Description
The vertical offset of the focused Floating Label.
+
Description
The horizontal padding of the large FAB.
$kendo-floating-label-transitionList.15s cubic-bezier( .4, 0, .2, 1 )0.15s cubic-bezier(0.4, 0, 0.2, 1)$kendo-fab-padding-yNumber$kendo-fab-padding-x16px
Description
The transition of the Floating Label.
+
Description
The vertical padding of the FAB.
$kendo-floating-label-bgNullnullnull$kendo-fab-sm-padding-yNumberk-math-div( $kendo-fab-padding-y, 2 )8px
Description
The background color of the Floating Label.
+
Description
The vertical padding of the small FAB.
$kendo-floating-label-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)$kendo-fab-md-padding-yNumber$kendo-fab-padding-y16px
Description
The text color of the Floating Label.
+
Description
The vertical padding of the medium FAB.
$kendo-floating-label-focus-bgNullnullnull$kendo-fab-lg-padding-yNumber( $kendo-fab-padding-y * 1.5 )24px
Description
The background color of the focused Floating Label.
+
Description
The vertical padding of the large FAB.
$kendo-floating-label-focus-textColor$kendo-color-primary#3f51b5
Description
The text color of the focused Floating Label.
-
- -### Form - - - - - - - - - - - - - - - - - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-form-spacer$kendo-fab-icon-padding-x Number$kendo-padding-md-x * 232pxk-map-get( $kendo-spacing, 0.5 )2px
Description
The padding of the inline Form.
+
Description
The horizontal padding of the FAB icon.
$kendo-form-font-size$kendo-fab-icon-padding-y Number$kendo-font-size-md14px$kendo-fab-icon-padding-x2px
Description
The font size of the Form.
+
Description
The vertical padding of the FAB icon.
$kendo-form-line-height$kendo-fab-icon-spacing Number$kendo-line-height-md2k-map-get( $kendo-spacing, 1 ) * 1.56px
Description
The line height of the Form.
+
Description
The spacing FAB icon.
$kendo-form-line-height-emCalculationcalc( #{$kendo-form-line-height} * 1em )calc(2 * 1em)$kendo-fab-items-padding-xNumber0px0px
Description
The line height of the Form in em units.
+
Description
The horizontal padding of the FAB items.
$kendo-form-sm-line-height$kendo-fab-items-padding-y Number$kendo-line-height-sm1.2k-map-get( $kendo-spacing, 4 )16px
Description
The line height of the small Form.
+
Description
The vertical padding of the FAB items.
$kendo-form-lg-line-height$kendo-fab-item-text-padding-x Number$kendo-line-height-lg1.5k-map-get( $kendo-spacing, 1 )4px
Description
The line height of the large Form.
+
Description
The horizontal padding of the FAB item text.
$kendo-form-fieldset-marginList2em 0 02em 0 0$kendo-fab-item-text-padding-yNumber$kendo-fab-item-text-padding-x4px
Description
The margin of the Form fieldset.
+
Description
The vertical padding of the FAB item text.
$kendo-form-fieldset-padding$kendo-fab-item-text-border-width Number0px0px1px1px
Description
The padding of the Form fieldset.
+
Description
The width of the FAB item text border.
$kendo-form-legend-marginList0 0 1em0 0 1em$kendo-fab-item-text-border-radiusNumber2px2px
Description
The margin of the Form legend.
+
Description
The border radius of the FAB item text.
$kendo-form-legend-padding$kendo-fab-item-text-font-size Number0px0px$kendo-font-size-xs10px
Description
The padding of the Form legend.
+
Description
The font size of the FAB item text.
$kendo-form-legend-border-widthList0 0 2px0 0 2px$kendo-fab-item-text-line-heightNumber1.21.2
Description
The border width of the Form legend.
+
Description
The line height of the FAB item text.
$kendo-form-legend-border-styleStringsolidsolid$kendo-fab-item-icon-padding-xNumberk-map-get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x10px
Description
The border style of the Form legend.
+
Description
The horizontal padding of the FAB item icon.
$kendo-form-legend-border-colorColor$kendo-component-borderrgba(0, 0, 0, 0.12)$kendo-fab-item-icon-padding-yNumber$kendo-fab-item-icon-padding-x10px
Description
The border color of the Form legend.
+
Description
The vertical padding of the FAB item icon.
$kendo-form-legend-width$kendo-fab-item-icon-border-width Number100%100%00
Description
The width of the Form legend.
+
Description
The border width of the FAB item icon.
$kendo-form-legend-font-size$kendo-fab-item-icon-border-radius Number$kendo-font-size-md14px50%50%
Description
The font size of the Form legend.
+
Description
The border radius of the FAB item icon.
$kendo-form-legend-text-transformStringuppercaseuppercase$kendo-fab-theme-colorsMap$kendo-theme-colors("primary": #3f51b5, "secondary": #e51a5f, "tertiary": #00695c, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #f5f5f5, "inverse": #424242)
Description
The text capitalization of the Form legend.
+
Description
The theme colors map for the FAB.
$kendo-form-label-margin-bottomNumber0px0px$kendo-fab-sizesMap( + sm: ( + padding-x: $kendo-fab-sm-padding-x, + padding-y: $kendo-fab-sm-padding-y + ), + md: ( + padding-x: $kendo-fab-md-padding-x, + padding-y: $kendo-fab-md-padding-y + ), + lg: ( + padding-x: $kendo-fab-lg-padding-x, + padding-y: $kendo-fab-lg-padding-y + ) +)(sm: (padding-x: 8px, padding-y: 8px), md: (padding-x: 16px, padding-y: 16px), lg: (padding-x: 24px, padding-y: 24px))
Description
The bottom margin of the Form label.
+
Description
The size map for the FAB.
$kendo-form-button-margin-xNumber8px8px$kendo-fab-shadowString$box-shadow-depth-5var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))
Description
The horizontal margin of the Form buttons.
+
Description
The base shadow of the FAB.
$kendo-form-hint-font-sizeNumber$kendo-font-size-sm12px$kendo-fab-disabled-shadowString$box-shadow-depth-5var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))
Description
The font size of the Form hint.
+
Description
The shadow of the disabled FAB.
$kendo-form-hint-font-style$kendo-fab-active-shadow Stringnormalnormal$box-shadow-depth-7var(--kendo-elevation-7, 0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14))
Description
The font style of the Form hint.
+
Description
The shadow of the active FAB.
$kendo-form-hint-margin-topNumber4px4px$kendo-fab-item-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The top margin of the Form hint.
+
Description
The base text color of the FAB item.
$kendo-form-sm-rows-spacingNumberk-map-get( $kendo-spacing, 4 )16px$kendo-fab-item-bgColor$kendo-component-bg#ffffff
Description
The row spacing of the small Form.
+
Description
The base background color of the FAB item.
$kendo-form-md-rows-spacingNumberk-map-get( $kendo-spacing, 6 )24px$kendo-fab-item-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The row spacing of the medium Form.
+
Description
The base border color of the FAB item.
$kendo-form-lg-rows-spacingNumberk-map-get( $kendo-spacing, 7 )28px$kendo-fab-item-icon-textColor$kendo-button-textrgba(0, 0, 0, 0.87)
Description
The row spacing of the large Form.
+
Description
The base text color of the FAB item icon.
$kendo-form-separator-marginList$kendo-form-md-rows-spacing 0 024px 0 0$kendo-fab-item-icon-bgColor$kendo-button-bg#ffffff
Description
The margin of the Form separator.
+
Description
The base background color of the FAB item icon.
$kendo-form-separator-border-color$kendo-fab-item-icon-border Color$kendo-form-legend-border-colorrgba(0, 0, 0, 0.12)$kendo-button-border#ffffff
Description
The border color of the Form separator.
+
Description
The base border color of the FAB item icon.
$kendo-horizontal-form-label-padding-topNumber5px5px$kendo-fab-item-shadowString$kendo-fab-shadowvar(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))
Description
The top padding of the label in the horizontal Form.
+
Description
The base shadow of the FAB item.
$kendo-horizontal-form-label-margin-xNumber10px10px$kendo-fab-item-disabled-shadowString$kendo-fab-disabled-shadowvar(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))
Description
The horizontal margin of the label in the horizontal Form.
+
Description
The shadow of the disabled FAB item.
$kendo-horizontal-form-label-widthNumber25%25%$kendo-fab-item-active-shadowString$kendo-fab-active-shadowvar(--kendo-elevation-7, 0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14))
Description
The width of the label in the horizontal Form.
+
Description
The shadow of the active FAB item.
$kendo-horizontal-form-label-alignStringflex-endflex-end
+ +### Floating-label + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - - - - - - - - - - + + + + - - + - - - - - + + + + - - + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-floating-label-scaleNumber11
Description
The horizontal alignment of the label in the horizontal Form.
+
Description
The transformation scale of the Floating Label.
$kendo-horizontal-form-field-wrap-max-widthCalculationcalc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} )calc(100% - 25% - 10px)$kendo-floating-label-font-sizeNumber$kendo-input-font-size16px
Description
The maximum width of the field wrap in the horizontal Form.
+
Description
The font size of the Floating Label.
$kendo-inline-form-element-width$kendo-floating-label-max-width Number25%25%90%90%
Description
The width of the inline Form element.
+
Description
The maximum width of the Floating Label.
$kendo-forms-invalid-colorStringinheritinherit$kendo-floating-label-line-heightNumber$kendo-input-line-height1.25
Description
The invalid text color of the Form.
+
Description
The line height of the Floating Label.
$kendo-label-optional-margin-xNumber6px6px$kendo-floating-label-heightCalculationcalc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} )calc(1.25 * 16px)
Description
The horizontal margin of the optional label in the Form.
+
Description
The height of the Floating Label.
$kendo-label-optional-font-sizeNumber12px12px$kendo-floating-label-offset-xCalculationcalc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} )calc(16px + 1px)
Description
The font size of the optional label in the Form.
+
Description
The horizontal offset of the Floating Label.
$kendo-label-optional-font-styleStringitalicitalic$kendo-floating-label-offset-yCalculationcalc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} )calc(calc(1.25 * 16px) + 1px + 8px)
Description
The font style of the optional label in the Form.
+
Description
The vertical offset of the Floating Label.
$kendo-fieldset-margin$kendo-floating-label-focus-scale Number30px30px.750.75
Description
The margin of the Form fieldset.
+
Description
The transformation scale of the focused Floating Label.
$kendo-fieldset-font-size$kendo-floating-label-focus-offset-x Number$kendo-h4-font-size34px0px0px
Description
The font size of the Form fieldset.
+
Description
The horizontal offset of the focused Floating Label.
$kendo-fieldset-bgNullnullnull$kendo-floating-label-focus-offset-yNumber0px0px
Description
The background color of the Form fieldset.
+
Description
The vertical offset of the focused Floating Label.
$kendo-fieldset-textNullnullnull
Description
The text color of the Form fieldset.
-
$kendo-fieldset-borderNullnullnull$kendo-floating-label-transitionList.15s cubic-bezier( .4, 0, .2, 1 )0.15s cubic-bezier(0.4, 0, 0.2, 1)
Description
The border color of the Form fieldset.
+
Description
The transition of the Floating Label.
$kendo-fieldset-legend-bg$kendo-floating-label-bg Null null null
Description
The background color of the Form legend.
+
Description
The background color of the Floating Label.
$kendo-fieldset-legend-textNullnullnull$kendo-floating-label-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
The text color of the Form legend.
+
Description
The text color of the Floating Label.
$kendo-fieldset-legend-border$kendo-floating-label-focus-bg Null null null
Description
The border color of the Form legend.
+
Description
The background color of the focused Floating Label.
$kendo-form-sizesMap( - sm: ( - form-rows-spacing: $kendo-form-sm-rows-spacing - ), - md: ( - form-rows-spacing: $kendo-form-md-rows-spacing - ), - lg: ( - form-rows-spacing: $kendo-form-lg-rows-spacing - ) -)(sm: (form-rows-spacing: 16px), md: (form-rows-spacing: 24px), lg: (form-rows-spacing: 28px))$kendo-floating-label-focus-textColor$kendo-color-primary#3f51b5
Description
The sizes map for the Form.
+
Description
The text color of the focused Floating Label.
-### Grid +### Form @@ -8070,419 +8180,469 @@ The following table lists the available variables for customizing the Material t - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - - - + + + + + + - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
$kendo-grid-padding-x$kendo-form-spacer Number$kendo-table-md-cell-padding-x24px$kendo-padding-md-x * 232px
Description
Horizontal padding of the grid.
+
Description
The padding of the inline Form.
$kendo-grid-padding-y$kendo-form-font-size Number$kendo-table-md-cell-padding-y10px$kendo-font-size-md14px
Description
Vertical padding of the grid.
+
Description
The font size of the Form.
$kendo-grid-header-padding-x$kendo-form-line-height Number$kendo-grid-padding-x24px$kendo-line-height-md2
Description
Horizontal padding of the grid header.
+
Description
The line height of the Form.
$kendo-grid-header-padding-yNumber16px16px$kendo-form-line-height-emCalculationcalc( #{$kendo-form-line-height} * 1em )calc(2 * 1em)
Description
Vertical padding of the grid header.
+
Description
The line height of the Form in em units.
$kendo-grid-grouping-header-padding-x$kendo-form-sm-line-height Number8px8px$kendo-line-height-sm1.2
Description
Horizontal padding of the grid grouping header.
+
Description
The line height of the small Form.
$kendo-grid-grouping-header-padding-y$kendo-form-lg-line-height Number$kendo-grid-grouping-header-padding-x8px$kendo-line-height-lg1.5
Description
Vertical padding of the grid grouping header.
+
Description
The line height of the large Form.
$kendo-grid-cell-padding-xNumber$kendo-grid-padding-x24px$kendo-form-fieldset-marginList2em 0 02em 0 0
Description
Horizontal padding of the grid cell.
+
Description
The margin of the Form fieldset.
$kendo-grid-cell-padding-y$kendo-form-fieldset-padding Number$kendo-grid-padding-y10px0px0px
Description
Vertical padding of the grid cell.
+
Description
The padding of the Form fieldset.
$kendo-grid-filter-cell-padding-xNumber$kendo-grid-padding-x24px$kendo-form-legend-marginList0 0 1em0 0 1em
Description
Horizontal padding of the grid filter cell.
+
Description
The margin of the Form legend.
$kendo-grid-filter-cell-padding-y$kendo-form-legend-padding Number$kendo-grid-padding-y10px0px0px
Description
Vertical padding of the grid filter cell.
+
Description
The padding of the Form legend.
$kendo-grid-edit-cell-padding-xNumber$kendo-grid-cell-padding-x24px$kendo-form-legend-border-widthList0 0 2px0 0 2px
Description
Horizontal padding of the grid edit cell.
+
Description
The border width of the Form legend.
$kendo-grid-edit-cell-padding-yNumber6px6px$kendo-form-legend-border-styleStringsolidsolid
Description
Vertical padding of the grid edit cell.
+
Description
The border style of the Form legend.
$kendo-grid-bg$kendo-form-legend-border-color Color$kendo-table-bg#ffffff$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
Background color of the grid component
+
Description
The border color of the Form legend.
$kendo-grid-textColor$kendo-table-textrgba(0, 0, 0, 0.87)$kendo-form-legend-widthNumber100%100%
Description
Text color of the grid component
+
Description
The width of the Form legend.
$kendo-grid-borderColor$kendo-table-borderrgba(0, 0, 0, 0.12)$kendo-form-legend-font-sizeNumber$kendo-font-size-md14px
Description
Border color of the grid component
+
Description
The font size of the Form legend.
$kendo-grid-header-bgColor$kendo-table-header-bg#ffffff$kendo-form-legend-text-transformStringuppercaseuppercase
Description
Background color of grid header
+
Description
The text capitalization of the Form legend.
$kendo-grid-header-textColor$kendo-table-header-textrgba(0, 0, 0, 0.54)$kendo-form-label-margin-bottomNumber0px0px
Description
Background color of grid header
+
Description
The bottom margin of the Form label.
$kendo-grid-header-borderColor$kendo-table-header-borderrgba(0, 0, 0, 0.12)$kendo-form-button-margin-xNumber8px8px
Description
Border color of grid header
+
Description
The horizontal margin of the Form buttons.
$kendo-grid-header-gradientNullnullnull$kendo-form-hint-font-sizeNumber$kendo-font-size-sm12px
Description
Background gradient of grid header
+
Description
The font size of the Form hint.
$kendo-grid-footer-bgColor$kendo-table-footer-bg#ffffff$kendo-form-hint-font-styleStringnormalnormal
Description
Background color of grid footer
+
Description
The font style of the Form hint.
$kendo-grid-footer-textColor$kendo-table-footer-textrgba(0, 0, 0, 0.54)$kendo-form-hint-margin-topNumber4px4px
Description
Text color of grid footer
+
Description
The top margin of the Form hint.
$kendo-grid-footer-borderColor$kendo-table-footer-borderrgba(0, 0, 0, 0.12)
Description
Border color of grid footer
+ 		$kendo-form-sm-rows-spacingNumberk-map-get( $kendo-spacing, 4 )16px
Description
The row spacing of the small Form.
$kendo-grid-alt-bgColor$kendo-table-alt-row-bgtransparent$kendo-form-md-rows-spacingNumberk-map-get( $kendo-spacing, 6 )24px
Description
Background color of alternating rows in grid
+
Description
The row spacing of the medium Form.
$kendo-grid-alt-textNull$kendo-table-alt-row-textnull$kendo-form-lg-rows-spacingNumberk-map-get( $kendo-spacing, 7 )28px
Description
Text color of alternating rows in grid
+
Description
The row spacing of the large Form.
$kendo-grid-alt-borderNull$kendo-table-alt-row-bordernull$kendo-form-separator-marginList$kendo-form-md-rows-spacing 0 024px 0 0
Description
Text color of alternating rows in grid
+
Description
The margin of the Form separator.
$kendo-grid-hover-bg$kendo-form-separator-border-color Color$kendo-table-hover-bgrgba(0, 0, 0, 0.07)$kendo-form-legend-border-colorrgba(0, 0, 0, 0.12)
Description
Background color of hovered rows in grid
+
Description
The border color of the Form separator.
$kendo-grid-hover-textNull$kendo-table-hover-textnull$kendo-horizontal-form-label-padding-topNumber5px5px
Description
Text color of hovered rows in grid
+
Description
The top padding of the label in the horizontal Form.
$kendo-grid-hover-borderColor$kendo-table-hover-borderrgba(0, 0, 0, 0.12)$kendo-horizontal-form-label-margin-xNumber10px10px
Description
Border color of hovered rows in grid
+
Description
The horizontal margin of the label in the horizontal Form.
$kendo-grid-selected-bgColor$kendo-table-selected-bgrgba(0, 0, 0, 0.04)$kendo-horizontal-form-label-widthNumber25%25%
Description
Background color of selected rows in grid
+
Description
The width of the label in the horizontal Form.
$kendo-grid-selected-textNull$kendo-table-selected-textnull$kendo-horizontal-form-label-alignStringflex-endflex-end
Description
Text color of selected rows in grid
+
Description
The horizontal alignment of the label in the horizontal Form.
$kendo-grid-selected-borderNull$kendo-table-selected-bordernull$kendo-horizontal-form-field-wrap-max-widthCalculationcalc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} )calc(100% - 25% - 10px)
Description
Border color of selected rows in grid
+
Description
The maximum width of the field wrap in the horizontal Form.
$kendo-grid-selection-aggregates-bgColor$kendo-grid-header-bg#ffffff$kendo-inline-form-element-widthNumber25%25%
Description
Background color of the selection aggregates container
+
Description
The width of the inline Form element.
$kendo-grid-selection-aggregates-textColor$kendo-grid-textrgba(0, 0, 0, 0.87)$kendo-forms-invalid-colorStringinheritinherit
Description
Text color of the selection aggregates container
+
Description
The invalid text color of the Form.
$kendo-grid-selection-aggregates-borderColor$kendo-grid-borderrgba(0, 0, 0, 0.12)$kendo-label-optional-margin-xNumber6px6px
Description
Border color of the selection aggregates container
+
Description
The horizontal margin of the optional label in the Form.
$kendo-grid-selection-aggregates-border-width$kendo-label-optional-font-size Number$kendo-grid-border-width1px12px12px
Description
Border width of the selection aggregates container
+
Description
The font size of the optional label in the Form.
$kendo-grid-selection-aggregates-spacingNumberk-map-get( $kendo-spacing, 2 )8px$kendo-label-optional-font-styleStringitalicitalic
Description
Spacing between the selection aggregates items
+
Description
The font style of the optional label in the Form.
$kendo-grid-selection-aggregates-line-height$kendo-fieldset-margin Number20px20px30px30px
Description
Line height of the selection aggregates container
+
Description
The margin of the Form fieldset.
$kendo-grid-selection-aggregates-font-weight$kendo-fieldset-font-size Number$kendo-font-weight-bold700$kendo-h4-font-size34px
Description
Font weight of the selection aggregates container
+
Description
The font size of the Form fieldset.
$kendo-grid-row-resizer-hover-bgColorif($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .24 ))rgba(0, 0, 0, 0.24)$kendo-fieldset-bgNullnullnull
Description
Background color of the grid row resize indicator
+
Description
The background color of the Form fieldset.
$kendo-grid-row-resizer-active-bgColor$kendo-color-primary#3f51b5$kendo-fieldset-textNullnullnull
Description
Active background color of the grid row resize indicator
+
Description
The text color of the Form fieldset.
$kendo-grid-row-resizer-heightNumberk-map-get( $kendo-spacing, .5 )2px$kendo-fieldset-borderNullnullnull
Description
Height of the grid row resize indicator
+
Description
The border color of the Form fieldset.
+
$kendo-fieldset-legend-bgNullnullnull
Description
The background color of the Form legend.
+
$kendo-fieldset-legend-textNullnullnull
Description
The text color of the Form legend.
+
$kendo-fieldset-legend-borderNullnullnull
Description
The border color of the Form legend.
+
$kendo-form-sizesMap( + sm: ( + form-rows-spacing: $kendo-form-sm-rows-spacing + ), + md: ( + form-rows-spacing: $kendo-form-md-rows-spacing + ), + lg: ( + form-rows-spacing: $kendo-form-lg-rows-spacing + ) +)(sm: (form-rows-spacing: 16px), md: (form-rows-spacing: 24px), lg: (form-rows-spacing: 28px))
Description
The sizes map for the Form.
-### Input +### Grid @@ -8500,1264 +8660,1264 @@ The following table lists the available variables for customizing the Material t - + - - + + - - + - - + + - - - - - - - - - - - + - - + + - - + - - - - - - - - - - - + - - + + - - + - + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - + - - + - + - - + - - + + - - + - + - - - - - - - - - - - - - - + + + + - - + - - + + - - + - + - - + - + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - - + +
$kendo-input-default-width$kendo-grid-padding-x Number100%100%$kendo-table-md-cell-padding-x24px
Description
The default width of the Input components.
+
Description
Horizontal padding of the grid.
$kendo-input-border-width$kendo-grid-padding-y Number1px1px$kendo-table-md-cell-padding-y10px
Description
The border width of the Input components.
-
$kendo-input-border-radiusNullnullnull
Description
The border radius of the Input components.
+
Description
Vertical padding of the grid.
$kendo-input-padding-x$kendo-grid-header-padding-x Numberk-map-get( $kendo-spacing, 4 )16px$kendo-grid-padding-x24px
Description
The horizontal padding of the Input components.
+
Description
Horizontal padding of the grid header.
$kendo-input-sm-padding-x$kendo-grid-header-padding-y Numberk-map-get( $kendo-spacing, 4 ) 16px
Description
The horizontal padding of the small Input components.
-
$kendo-input-md-padding-xNumberk-map-get( $kendo-spacing, 4 ) 16px
Description
The horizontal padding of the medium Input components.
+
Description
Vertical padding of the grid header.
$kendo-input-lg-padding-x$kendo-grid-grouping-header-padding-x Numberk-map-get( $kendo-spacing, 4 )16px8px8px
Description
The horizontal padding of the large Input components.
+
Description
Horizontal padding of the grid grouping header.
$kendo-input-padding-y$kendo-grid-grouping-header-padding-y Numberk-map-get( $kendo-spacing, 2 )$kendo-grid-grouping-header-padding-x 8px
Description
The vertical padding of the Input components.
+
Description
Vertical padding of the grid grouping header.
$kendo-input-sm-padding-y$kendo-grid-cell-padding-x Numberk-map-get( $kendo-spacing, 1.5 )6px$kendo-grid-padding-x24px
Description
The vertical padding of the small Input components.
+
Description
Horizontal padding of the grid cell.
$kendo-input-md-padding-y$kendo-grid-cell-padding-y Numberk-map-get( $kendo-spacing, 2 )8px$kendo-grid-padding-y10px
Description
The vertical padding of the medium Input components.
+
Description
Vertical padding of the grid cell.
$kendo-input-lg-padding-y$kendo-grid-filter-cell-padding-x Numberk-map-get( $kendo-spacing, 2 )8px$kendo-grid-padding-x24px
Description
The vertical padding of the large Input components.
+
Description
Horizontal padding of the grid filter cell.
$kendo-input-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif$kendo-grid-filter-cell-padding-yNumber$kendo-grid-padding-y10px
Description
The font family of the Input components.
+
Description
Vertical padding of the grid filter cell.
$kendo-input-font-size$kendo-grid-edit-cell-padding-x Number$kendo-font-size-lg16px$kendo-grid-cell-padding-x24px
Description
The font size of the Input components.
+
Description
Horizontal padding of the grid edit cell.
$kendo-input-sm-font-size$kendo-grid-edit-cell-padding-y Number$kendo-font-size-lg16px6px6px
Description
The font size of the small Input components.
+
Description
Vertical padding of the grid edit cell.
$kendo-input-md-font-sizeNumber$kendo-font-size-lg16px$kendo-grid-bgColor$kendo-table-bg#ffffff
Description
The font size of the medium Input components.
+
Description
Background color of the grid component
$kendo-input-lg-font-sizeNumber$kendo-font-size-lg16px$kendo-grid-textColor$kendo-table-textrgba(0, 0, 0, 0.87)
Description
The font size of the large Input components.
+
Description
Text color of the grid component
$kendo-input-line-heightNumber1.251.25$kendo-grid-borderColor$kendo-table-borderrgba(0, 0, 0, 0.12)
Description
The line height of the Input components.
+
Description
Border color of the grid component
$kendo-input-sm-line-heightNumber1.251.25$kendo-grid-header-bgColor$kendo-table-header-bg#ffffff
Description
The line height of the small Input components.
+
Description
Background color of grid header
$kendo-input-md-line-heightNumber1.251.25$kendo-grid-header-textColor$kendo-table-header-textrgba(0, 0, 0, 0.54)
Description
The line height of the medium Input components.
+
Description
Background color of grid header
$kendo-input-lg-line-heightNumber1.51.5$kendo-grid-header-borderColor$kendo-table-header-borderrgba(0, 0, 0, 0.12)
Description
The line height of the large Input components.
+
Description
Border color of grid header
$kendo-input-sizesMap( - sm: ( - padding-x: $kendo-input-sm-padding-x, - padding-y: $kendo-input-sm-padding-y, - font-size: $kendo-input-sm-font-size, - line-height: $kendo-input-sm-line-height, - button-padding-x: k-map-get( $kendo-spacing, 1 ), - button-padding-y: k-map-get( $kendo-spacing, 1 ) - ), - md: ( - padding-x: $kendo-input-md-padding-x, - padding-y: $kendo-input-md-padding-y, - font-size: $kendo-input-md-font-size, - line-height: $kendo-input-md-line-height, - button-padding-x: k-map-get( $kendo-spacing, 1 ), - button-padding-y: k-map-get( $kendo-spacing, 1 ) - ), - lg: ( - padding-x: $kendo-input-lg-padding-x, - padding-y: $kendo-input-lg-padding-y, - font-size: $kendo-input-lg-font-size, - line-height: $kendo-input-lg-line-height, - button-padding-x: k-map-get( $kendo-spacing, 1 ), - button-padding-y: k-map-get( $kendo-spacing, 1 ) - ) -)(sm: (padding-x: 16px, padding-y: 6px, font-size: 16px, line-height: 1.25, button-padding-x: 4px, button-padding-y: 4px), md: (padding-x: 16px, padding-y: 8px, font-size: 16px, line-height: 1.25, button-padding-x: 4px, button-padding-y: 4px), lg: (padding-x: 16px, padding-y: 8px, font-size: 16px, line-height: 1.5, button-padding-x: 4px, button-padding-y: 4px))$kendo-grid-header-gradientNullnullnull
Description
The sizes map for the Input components.
+
Description
Background gradient of grid header
$kendo-input-bg$kendo-grid-footer-bg Colorif($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-component-bg, .5 ))whitesmoke$kendo-table-footer-bg#ffffff
Description
The background color of the Input components.
+
Description
Background color of grid footer
$kendo-input-text$kendo-grid-footer-text Color$kendo-component-textrgba(0, 0, 0, 0.87)$kendo-table-footer-textrgba(0, 0, 0, 0.54)
Description
The text color of the Input components.
+
Description
Text color of grid footer
$kendo-input-border$kendo-grid-footer-border Colorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .44 ), rgba( $kendo-component-border, .38 ))rgba(0, 0, 0, 0.38)$kendo-table-footer-borderrgba(0, 0, 0, 0.12)
Description
The border color of the Input components.
+
Description
Border color of grid footer
$kendo-input-shadowNullnullnull$kendo-grid-alt-bgColor$kendo-table-alt-row-bgtransparent
Description
The shadow of the Input components.
+
Description
Background color of alternating rows in grid
$kendo-input-hover-bg$kendo-grid-alt-text Nullnull$kendo-table-alt-row-text null
Description
The background color of the hovered Input components.
+
Description
Text color of alternating rows in grid
$kendo-input-hover-text$kendo-grid-alt-border Nullnull$kendo-table-alt-row-border null
Description
The text color of the hovered Input components.
+
Description
Text color of alternating rows in grid
$kendo-input-hover-border$kendo-grid-hover-bg Color$kendo-input-textrgba(0, 0, 0, 0.87)$kendo-table-hover-bgrgba(0, 0, 0, 0.07)
Description
The border color of the hovered Input components.
+
Description
Background color of hovered rows in grid
$kendo-input-hover-shadow$kendo-grid-hover-text Nullnull$kendo-table-hover-text null
Description
The shadow of the hovered Input components.
+
Description
Text color of hovered rows in grid
$kendo-input-focus-bgNullnullnull
Description
The background color of the focused Input components.
-
$kendo-input-focus-textNullnullnull$kendo-grid-hover-borderColor$kendo-table-hover-borderrgba(0, 0, 0, 0.12)
Description
The text color of the focused Input components.
+
Description
Border color of hovered rows in grid
$kendo-input-focus-border$kendo-grid-selected-bg Color$kendo-color-primary#3f51b5$kendo-table-selected-bgrgba(0, 0, 0, 0.04)
Description
The border color of the focused Input components.
+
Description
Background color of selected rows in grid
$kendo-input-focus-shadow$kendo-grid-selected-text Nullnull$kendo-table-selected-text null
Description
The shadow of the focused Input components.
+
Description
Text color of selected rows in grid
$kendo-input-selected-bg$kendo-grid-selected-border Nullnull$kendo-table-selected-border null
Description
The background color of the selected Input components.
+
Description
Border color of selected rows in grid
$kendo-input-selected-textNullnullnull$kendo-grid-selection-aggregates-bgColor$kendo-grid-header-bg#ffffff
Description
The text color of the selected Input components.
+
Description
Background color of the selection aggregates container
$kendo-input-disabled-bg$kendo-grid-selection-aggregates-text Colorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .03 ), k-try-shade( $kendo-component-bg, .25 ))#fafafa$kendo-grid-textrgba(0, 0, 0, 0.87)
Description
The background color of the disabled Input components.
+
Description
Text color of the selection aggregates container
$kendo-input-disabled-text$kendo-grid-selection-aggregates-border Colorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .27 ), $kendo-disabled-text)rgba(0, 0, 0, 0.38)$kendo-grid-borderrgba(0, 0, 0, 0.12)
Description
The text color of the disabled Input components.
+
Description
Border color of the selection aggregates container
$kendo-input-disabled-borderColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .03 ), rgba( $kendo-component-border, k-math-div( k-color-alpha( $kendo-component-border ), 2 ) ))rgba(0, 0, 0, 0.06)$kendo-grid-selection-aggregates-border-widthNumber$kendo-grid-border-width1px
Description
The border color of the disabled Input components.
+
Description
Border width of the selection aggregates container
$kendo-input-disabled-gradientNullnullnull$kendo-grid-selection-aggregates-spacingNumberk-map-get( $kendo-spacing, 2 )8px
Description
The gradient of the disabled Input components.
+
Description
Spacing between the selection aggregates items
$kendo-input-disabled-shadowNullnullnull$kendo-grid-selection-aggregates-line-heightNumber20px20px
Description
The shadow of the disabled Input components.
+
Description
Line height of the selection aggregates container
$kendo-input-outline-bgNullnullnull$kendo-grid-selection-aggregates-font-weightNumber$kendo-font-weight-bold700
Description
The background color of the outline Input components.
+
Description
Font weight of the selection aggregates container
$kendo-input-outline-text$kendo-grid-row-resizer-hover-bg Color$kendo-input-textrgba(0, 0, 0, 0.87)if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .24 ))rgba(0, 0, 0, 0.24)
Description
The text color of the outline Input components.
+
Description
Background color of the grid row resize indicator
$kendo-input-outline-border$kendo-grid-row-resizer-active-bg Color$kendo-input-borderrgba(0, 0, 0, 0.38)$kendo-color-primary#3f51b5
Description
The border color of the outline Input components.
+
Description
Active background color of the grid row resize indicator
$kendo-input-outline-hover-bgNullnullnull$kendo-grid-row-resizer-heightNumberk-map-get( $kendo-spacing, .5 )2px
Description
The background color of the outline hovered Input components.
+
Description
Height of the grid row resize indicator
$kendo-input-outline-hover-textNullnullnull
+ +### Input + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + - - + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - + - - + - - + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-input-default-widthNumber100%100%
Description
The text color of the outline hovered Input components.
+
Description
The default width of the Input components.
$kendo-input-outline-hover-borderColor$kendo-input-hover-borderrgba(0, 0, 0, 0.87)$kendo-input-border-widthNumber1px1px
Description
The border color of the outline hovered Input components.
+
Description
The border width of the Input components.
$kendo-input-outline-focus-bg$kendo-input-border-radius Null null null
Description
The background color of the outline focused Input components.
+
Description
The border radius of the Input components.
$kendo-input-outline-focus-textNullnullnull$kendo-input-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The text color of the outline focused Input components.
+
Description
The horizontal padding of the Input components.
$kendo-input-outline-focus-borderColor$kendo-input-focus-border#3f51b5$kendo-input-sm-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The border color of the outline focused Input components.
+
Description
The horizontal padding of the small Input components.
$kendo-input-outline-focus-shadowNull$kendo-input-focus-shadownull$kendo-input-md-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The shadow of the outline focused Input components.
+
Description
The horizontal padding of the medium Input components.
$kendo-input-flat-bgNullnullnull$kendo-input-lg-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The background color of the flat Input components.
+
Description
The horizontal padding of the large Input components.
$kendo-input-flat-textColor$kendo-input-textrgba(0, 0, 0, 0.87)$kendo-input-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The text color of the flat Input components.
+
Description
The vertical padding of the Input components.
$kendo-input-flat-borderColor$kendo-input-borderrgba(0, 0, 0, 0.38)$kendo-input-sm-padding-yNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
The border color of the flat Input components.
+
Description
The vertical padding of the small Input components.
$kendo-input-flat-hover-bgNullnullnull$kendo-input-md-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The background color of the flat hovered Input components.
+
Description
The vertical padding of the medium Input components.
$kendo-input-flat-hover-textNullnullnull$kendo-input-lg-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The text color of the flat hovered Input components.
+
Description
The vertical padding of the large Input components.
$kendo-input-flat-hover-borderColor$kendo-input-hover-borderrgba(0, 0, 0, 0.87)$kendo-input-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The border color of the flat hovered Input components.
+
Description
The font family of the Input components.
$kendo-input-flat-focus-bgNullnullnull$kendo-input-font-sizeNumber$kendo-font-size-lg16px
Description
The background color of the flat focused Input components.
+
Description
The font size of the Input components.
$kendo-input-flat-focus-textNullnullnull$kendo-input-sm-font-sizeNumber$kendo-font-size-lg16px
Description
The text color of the flat focused Input components.
+
Description
The font size of the small Input components.
$kendo-input-flat-focus-borderColor$kendo-input-focus-border#3f51b5$kendo-input-md-font-sizeNumber$kendo-font-size-lg16px
Description
The border color of the flat focused Input components.
+
Description
The font size of the medium Input components.
$kendo-input-flat-focus-shadowNull$kendo-input-focus-shadownull$kendo-input-lg-font-sizeNumber$kendo-font-size-lg16px
Description
The shadow of the flat focused Input components.
+
Description
The font size of the large Input components.
$kendo-input-placeholder-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)$kendo-input-line-heightNumber1.251.25
Description
The text color of the Input placeholder.
+
Description
The line height of the Input components.
$kendo-input-placeholder-opacity$kendo-input-sm-line-height Number111.251.25
Description
The opacity of the Input placeholder.
+
Description
The line height of the small Input components.
$kendo-input-clear-value-textNullnullnull$kendo-input-md-line-heightNumber1.251.25
Description
The color of the Input clear value icon.
+
Description
The line height of the medium Input components.
$kendo-input-clear-value-opacity$kendo-input-lg-line-height Number.50.51.51.5
Description
The opacity of the Input clear value icon.
+
Description
The line height of the large Input components.
$kendo-input-clear-value-hover-textNullnullnull$kendo-input-sizesMap( + sm: ( + padding-x: $kendo-input-sm-padding-x, + padding-y: $kendo-input-sm-padding-y, + font-size: $kendo-input-sm-font-size, + line-height: $kendo-input-sm-line-height, + button-padding-x: k-map-get( $kendo-spacing, 1 ), + button-padding-y: k-map-get( $kendo-spacing, 1 ) + ), + md: ( + padding-x: $kendo-input-md-padding-x, + padding-y: $kendo-input-md-padding-y, + font-size: $kendo-input-md-font-size, + line-height: $kendo-input-md-line-height, + button-padding-x: k-map-get( $kendo-spacing, 1 ), + button-padding-y: k-map-get( $kendo-spacing, 1 ) + ), + lg: ( + padding-x: $kendo-input-lg-padding-x, + padding-y: $kendo-input-lg-padding-y, + font-size: $kendo-input-lg-font-size, + line-height: $kendo-input-lg-line-height, + button-padding-x: k-map-get( $kendo-spacing, 1 ), + button-padding-y: k-map-get( $kendo-spacing, 1 ) + ) +)(sm: (padding-x: 16px, padding-y: 6px, font-size: 16px, line-height: 1.25, button-padding-x: 4px, button-padding-y: 4px), md: (padding-x: 16px, padding-y: 8px, font-size: 16px, line-height: 1.25, button-padding-x: 4px, button-padding-y: 4px), lg: (padding-x: 16px, padding-y: 8px, font-size: 16px, line-height: 1.5, button-padding-x: 4px, button-padding-y: 4px))
Description
The color of the hovered Input clear value icon.
+
Description
The sizes map for the Input components.
$kendo-input-clear-value-hover-opacityNumber11$kendo-input-bgColorif($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-component-bg, .5 ))whitesmoke
Description
The opacity of the hovered Input clear value icon.
+
Description
The background color of the Input components.
$kendo-input-values-margin-yNumberk-map-get( $kendo-spacing, 0.5 )2px$kendo-input-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The vertical margin of the clear value icon.
+
Description
The text color of the Input components.
$kendo-input-values-margin-xNumber$kendo-input-values-margin-y2px$kendo-input-borderColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .44 ), rgba( $kendo-component-border, .38 ))rgba(0, 0, 0, 0.38)
Description
The horizontal margin of the clear value icon.
+
Description
The border color of the Input components.
$kendo-input-button-width$kendo-input-shadow Null null null
Description
The width of the Input button.
+
Description
The shadow of the Input components.
$kendo-input-button-border-widthNumber1px1px$kendo-input-hover-bgNullnullnull
Description
The border width of the Input button.
+
Description
The background color of the hovered Input components.
$kendo-input-spinner-width$kendo-input-hover-text Null null null
Description
The width of the Input spinner button.
+
Description
The text color of the hovered Input components.
$kendo-input-spinner-icon-offset$kendo-input-hover-borderColor$kendo-input-textrgba(0, 0, 0, 0.87)
Description
The border color of the hovered Input components.
+
$kendo-input-hover-shadow Null null null
Description
The icon offset of the Input spinner button.
+
Description
The shadow of the hovered Input components.
$kendo-input-separator-textColorrgba( $kendo-component-border, .12 )rgba(0, 0, 0, 0.12)$kendo-input-focus-bgNullnullnull
Description
The color of the Input separator.
+
Description
The background color of the focused Input components.
$kendo-input-separator-opacityNumber.50.5$kendo-input-focus-textNullnullnull
Description
The opacity of the Input separator.
+
Description
The text color of the focused Input components.
$kendo-input-prefix-text$kendo-input-focus-border Color$kendo-subtle-textrgba(0, 0, 0, 0.54)$kendo-color-primary#3f51b5
Description
The text color of the Input prefix.
+
Description
The border color of the focused Input components.
$kendo-input-suffix-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)$kendo-input-focus-shadowNullnullnull
Description
The text color of the Input suffix.
+
Description
The shadow of the focused Input components.
$kendo-input-invalid-borderColor$kendo-invalid-border#f31700$kendo-input-selected-bgNullnullnull
Description
The border color of the invalid Input components.
+
Description
The background color of the selected Input components.
$kendo-input-invalid-shadow$kendo-input-selected-text Null$kendo-invalid-shadownull null
Description
The shadow of the invalid Input components.
+
Description
The text color of the selected Input components.
$kendo-input-valid-border$kendo-input-disabled-bg Color$kendo-valid-border#37b400if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .03 ), k-try-shade( $kendo-component-bg, .25 ))#fafafa
Description
The border color of the valid Input components.
+
Description
The background color of the disabled Input components.
$kendo-input-valid-shadowNull$kendo-valid-shadownull$kendo-input-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .27 ), $kendo-disabled-text)rgba(0, 0, 0, 0.38)
Description
The shadow of the valid Input components.
+
Description
The text color of the disabled Input components.
- -### List - - - - - - - - - - - - - - - - - - - - - + + + + + - - + - - + - - + - - - - - + + + + - - - - - + + + + - - + - - + - - - - - + + + + - - + - - + - - - - - + + + + - - + - + - - + - - - - - + + + + - - - - - + + + + - - + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - - + + + + + - - - - - + + + + - - + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + - + - - + - - + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-list-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
$kendo-input-disabled-borderColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .03 ), rgba( $kendo-component-border, k-math-div( k-color-alpha( $kendo-component-border ), 2 ) ))rgba(0, 0, 0, 0.06)
Description
The font family of the List components.
+
Description
The border color of the disabled Input components.
$kendo-list-font-size$kendo-input-disabled-gradient Null null null
Description
The font size of the List component, if no size is set.
+
Description
The gradient of the disabled Input components.
$kendo-list-line-height$kendo-input-disabled-shadow Null null null
Description
The line height of the List component, if no size is set.
+
Description
The shadow of the disabled Input components.
$kendo-list-header-padding-x$kendo-input-outline-bg Null null null
Description
The horizontal padding of the List header, if no size is set.
+
Description
The background color of the outline Input components.
$kendo-list-header-padding-yNullnullnull$kendo-input-outline-textColor$kendo-input-textrgba(0, 0, 0, 0.87)
Description
The vertical padding of the List header, if no size is set.
+
Description
The text color of the outline Input components.
$kendo-list-header-border-widthList0 0 1px0 0 1px$kendo-input-outline-borderColor$kendo-input-borderrgba(0, 0, 0, 0.38)
Description
The border width of the List header.
+
Description
The border color of the outline Input components.
$kendo-list-header-font-size$kendo-input-outline-hover-bg Null null null
Description
The font size of the List header, if no size is set.
+
Description
The background color of the outline hovered Input components.
$kendo-list-header-line-height$kendo-input-outline-hover-text Null null null
Description
The line height of the List header, if no size is set.
+
Description
The text color of the outline hovered Input components.
$kendo-list-header-font-weightNumber$kendo-font-weight-bold700$kendo-input-outline-hover-borderColor$kendo-input-hover-borderrgba(0, 0, 0, 0.87)
Description
The font weight of the List header.
+
Description
The border color of the outline hovered Input components.
$kendo-list-item-padding-x$kendo-input-outline-focus-bg Null null null
Description
The horizontal padding of the List items, when no size is set.
+
Description
The background color of the outline focused Input components.
$kendo-list-item-padding-y$kendo-input-outline-focus-text Null null null
Description
The vertical padding of the List items, when no size is set.
+
Description
The text color of the outline focused Input components.
$kendo-list-item-font-sizeNullnullnull$kendo-input-outline-focus-borderColor$kendo-input-focus-border#3f51b5
Description
The font size of the List items, if no size is set.
+
Description
The border color of the outline focused Input components.
$kendo-list-item-line-height$kendo-input-outline-focus-shadow Nullnull$kendo-input-focus-shadow null
Description
The line height of the List items, if no size is set.
+
Description
The shadow of the outline focused Input components.
$kendo-list-group-item-padding-x$kendo-input-flat-bg Null null null
Description
The horizontal padding of the List group items, when no size is set.
+
Description
The background color of the flat Input components.
$kendo-list-group-item-padding-yNullnullnull$kendo-input-flat-textColor$kendo-input-textrgba(0, 0, 0, 0.87)
Description
The vertical padding of the List group items, when no size is set.
+
Description
The text color of the flat Input components.
$kendo-list-group-item-border-widthList1px 0 01px 0 0$kendo-input-flat-borderColor$kendo-input-borderrgba(0, 0, 0, 0.38)
Description
The border width of the List group items.
+
Description
The border color of the flat Input components.
$kendo-list-group-item-font-size$kendo-input-flat-hover-bg Null null null
Description
The font size of the List group items, if no size is set.
+
Description
The background color of the flat hovered Input components.
$kendo-list-group-item-line-height$kendo-input-flat-hover-text Null null null
Description
The line height of the List group items, if no size is set.
+
Description
The text color of the flat hovered Input components.
$kendo-list-group-item-font-weightNumber$kendo-font-weight-bold700$kendo-input-flat-hover-borderColor$kendo-input-hover-borderrgba(0, 0, 0, 0.87)
Description
The font weight of a List group item.
+
Description
The border color of the flat hovered Input components.
$kendo-list-bgColor$kendo-component-bg#ffffff$kendo-input-flat-focus-bgNullnullnull
Description
The background color of the List component.
+
Description
The background color of the flat focused Input components.
$kendo-list-textColor$kendo-component-textrgba(0, 0, 0, 0.87)$kendo-input-flat-focus-textNullnullnull
Description
The text color of the List component.
+
Description
The text color of the flat focused Input components.
$kendo-list-border$kendo-input-flat-focus-border Color$kendo-component-borderrgba(0, 0, 0, 0.12)$kendo-input-focus-border#3f51b5
Description
The border color of the List component.
+
Description
The border color of the flat focused Input components.
$kendo-list-header-bg$kendo-input-flat-focus-shadow Nullnull$kendo-input-focus-shadow null
Description
The background color of the List header.
+
Description
The shadow of the flat focused Input components.
$kendo-list-header-textNullnullnull$kendo-input-placeholder-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
The text color of the List header.
+
Description
The text color of the Input placeholder.
$kendo-list-header-borderStringinheritinherit$kendo-input-placeholder-opacityNumber11
Description
The border color of the List header.
+
Description
The opacity of the Input placeholder.
$kendo-list-header-shadow$kendo-input-clear-value-text Null null null
Description
The box shadow of the List header.
+
Description
The color of the Input clear value icon.
$kendo-list-item-bgNullnullnull$kendo-input-clear-value-opacityNumber.50.5
Description
The background color of the List items.
+
Description
The opacity of the Input clear value icon.
$kendo-list-item-text$kendo-input-clear-value-hover-text Null null null
Description
The text color of the List items.
+
Description
The color of the hovered Input clear value icon.
$kendo-list-item-hover-bgColor$kendo-hover-bgrgba(0, 0, 0, 0.04)$kendo-input-clear-value-hover-opacityNumber11
Description
The background color of the hovered List items.
+
Description
The opacity of the hovered Input clear value icon.
$kendo-list-item-hover-textColor$kendo-hover-textrgba(0, 0, 0, 0.87)$kendo-input-values-margin-yNumberk-map-get( $kendo-spacing, 0.5 )2px
Description
The text color of the hovered List items.
+
Description
The vertical margin of the clear value icon.
$kendo-list-item-focus-bgColor$kendo-list-item-hover-bgrgba(0, 0, 0, 0.04)$kendo-input-values-margin-xNumber$kendo-input-values-margin-y2px
Description
The background color of the focused List items.
+
Description
The horizontal margin of the clear value icon.
$kendo-list-item-focus-text$kendo-input-button-width Null null null
Description
The text color of the focused List items.
+
Description
The width of the Input button.
$kendo-list-item-focus-shadowNullnullnull
$kendo-input-button-border-widthNumber1px1px
Description
The box shadow of the focused List items.
+
Description
The border width of the Input button.
$kendo-list-item-selected-bgColor$kendo-component-bg#ffffff$kendo-input-spinner-widthNullnullnull
Description
The background color of the selected List items.
+
Description
The width of the Input spinner button.
$kendo-list-item-selected-text$kendo-input-spinner-icon-offsetNullnullnull
Description
The icon offset of the Input spinner button.
+
$kendo-input-separator-text Color$kendo-color-secondary#e51a5frgba( $kendo-component-border, .12 )rgba(0, 0, 0, 0.12)
Description
The text color of the selected List items.
+
Description
The color of the Input separator.
$kendo-list-group-item-bgNullnullnull$kendo-input-separator-opacityNumber.50.5
Description
The background color of the List group items.
+
Description
The opacity of the Input separator.
$kendo-list-group-item-textNullnullnull$kendo-input-prefix-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
The text color of the List group items.
+
Description
The text color of the Input prefix.
$kendo-list-group-item-borderStringinheritinherit$kendo-input-suffix-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
The border color of the List group items.
+
Description
The text color of the Input suffix.
$kendo-list-group-item-shadow$kendo-input-invalid-borderColor$kendo-invalid-border#f31700
Description
The border color of the invalid Input components.
+
$kendo-input-invalid-shadow Nullnull$kendo-invalid-shadow null
Description
The base shadow of the List group items.
+
Description
The shadow of the invalid Input components.
$kendo-list-no-data-text$kendo-input-valid-border Color$kendo-subtle-textrgba(0, 0, 0, 0.54)$kendo-valid-border#37b400
Description
The color of the 'No Data' text.
+
Description
The border color of the valid Input components.
$kendo-list-option-label-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)$kendo-input-valid-shadowNull$kendo-valid-shadownull
Description
The color of the 'Option Label' text.
+
Description
The shadow of the valid Input components.
-### Listbox +### List @@ -9775,359 +9935,419 @@ The following table lists the available variables for customizing the Material t - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - -
$kendo-listbox-spacingNumberk-map-get( $kendo-spacing, 3 )12px$kendo-list-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The spacing between the ListBox elements.
+
Description
The font family of the List components.
$kendo-listbox-button-spacingNumberk-map-get( $kendo-spacing, 2 )8px$kendo-list-font-sizeNullnullnull
Description
The spacing between the ListBox buttons.
+
Description
The font size of the List component, if no size is set.
$kendo-listbox-widthNumber10em10em$kendo-list-line-heightNullnullnull
Description
The width of the ListBox.
+
Description
The line height of the List component, if no size is set.
$kendo-listbox-default-heightNumber200px200px$kendo-list-header-padding-xNullnullnull
Description
The height of the ListBox.
+
Description
The horizontal padding of the List header, if no size is set.
$kendo-listbox-border-widthNumber1px1px$kendo-list-header-padding-yNullnullnull
Description
The width of the border around the ListBox.
+
Description
The vertical padding of the List header, if no size is set.
$kendo-listbox-font-family$kendo-list-header-border-width List$kendo-font-familyRoboto, "Helvetica Neue", sans-serif0 0 1px0 0 1px
Description
The font family of the ListBox.
+
Description
The border width of the List header.
$kendo-listbox-font-sizeNumber$kendo-list-md-font-size14px$kendo-list-header-font-sizeNullnullnull
Description
The font size of the ListBox.
+
Description
The font size of the List header, if no size is set.
$kendo-listbox-line-heightNumber$kendo-list-md-line-height1.4285714286$kendo-list-header-line-heightNullnullnull
Description
The line height of the ListBox.
+
Description
The line height of the List header, if no size is set.
$kendo-listbox-textColor$kendo-component-textrgba(0, 0, 0, 0.87)$kendo-list-header-font-weightNumber$kendo-font-weight-bold700
Description
The text color of the ListBox.
+
Description
The font weight of the List header.
$kendo-listbox-bgColor$kendo-component-bg#ffffff$kendo-list-item-padding-xNullnullnull
Description
The background color of the ListBox.
+
Description
The horizontal padding of the List items, when no size is set.
$kendo-listbox-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)$kendo-list-item-padding-yNullnullnull
Description
The border color of the ListBox.
+
Description
The vertical padding of the List items, when no size is set.
$kendo-listbox-item-padding-xNumber$kendo-list-md-item-padding-x16px$kendo-list-item-font-sizeNullnullnull
Description
The inline padding of the ListBox item.
+
Description
The font size of the List items, if no size is set.
$kendo-listbox-item-padding-yNumber$kendo-list-md-item-padding-y8px$kendo-list-item-line-heightNullnullnull
Description
The block padding of the ListBox item.
+
Description
The line height of the List items, if no size is set.
$kendo-listbox-drop-hint-widthNumber2px2px$kendo-list-group-item-padding-xNullnullnull
Description
The width of the ListBox drop hint.
+
Description
The horizontal padding of the List group items, when no size is set.
$kendo-listbox-drop-hint-border-widthNumber2px2px$kendo-list-group-item-padding-yNullnullnull
Description
The width of the border around the ListBox drop hint.
-
- -### Listview - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + + + + + + + + + + + + + + + + + + - + - - + + + + + + + + + + + + + + + + + + + - - + - - + - - + + - - + + + + + + + + + + - - + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-listview-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the ListView.
+
Description
The vertical padding of the List group items, when no size is set.
$kendo-listview-padding-yNumberk-map-get( $kendo-spacing, 1 )4px$kendo-list-group-item-border-widthList1px 0 01px 0 0
Description
The vertical padding of the ListView.
+
Description
The border width of the List group items.
$kendo-listview-border-widthNumber1px1px$kendo-list-group-item-font-sizeNullnullnull
Description
The width of the border around bordered ListView.
+
Description
The font size of the List group items, if no size is set.
$kendo-listview-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif$kendo-list-group-item-line-heightNullnullnull
Description
The font family of the ListView.
+
Description
The line height of the List group items, if no size is set.
$kendo-listview-font-size$kendo-list-group-item-font-weight Number$kendo-font-size-md14px$kendo-font-weight-bold700
Description
The font size of the ListView.
+
Description
The font weight of a List group item.
$kendo-listview-line-heightNumber$kendo-line-height-md2$kendo-list-bgColor$kendo-component-bg#ffffff
Description
The line height of the ListView.
+
Description
The background color of the List component.
$kendo-listview-text$kendo-list-text Color $kendo-component-text rgba(0, 0, 0, 0.87)
Description
The text color of the ListView.
+
Description
The text color of the List component.
$kendo-listview-bg$kendo-list-border Color$kendo-component-bg#ffffff$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The background color of the ListView.
+
Description
The border color of the List component.
$kendo-listview-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)$kendo-list-header-bgNullnullnull
Description
The border color of the ListView.
+
Description
The background color of the List header.
$kendo-listview-item-padding-xNumberk-map-get( $kendo-spacing, 1 )4px$kendo-list-header-textNullnullnull
Description
The horizontal padding of the ListView items.
+
Description
The text color of the List header.
$kendo-listview-item-padding-yNumberk-map-get( $kendo-spacing, 1 )4px$kendo-list-header-borderStringinheritinherit
Description
The vertical padding of the ListView items.
+
Description
The border color of the List header.
$kendo-listview-item-selected-text$kendo-list-header-shadow Null null null
Description
The text color of the selected ListView items.
+
Description
The box shadow of the List header.
$kendo-listview-item-selected-bg$kendo-list-item-bgNullnullnull
Description
The background color of the List items.
+
$kendo-list-item-textNullnullnull
Description
The text color of the List items.
+
$kendo-list-item-hover-bg Colorif($kendo-enable-color-system, k-color( base-active ), rgba( k-contrast-color( $kendo-listview-bg ), .04 ))$kendo-hover-bg rgba(0, 0, 0, 0.04)
Description
The background color of the selected ListView items.
+
Description
The background color of the hovered List items.
$kendo-listview-item-selected-border$kendo-list-item-hover-textColor$kendo-hover-textrgba(0, 0, 0, 0.87)
Description
The text color of the hovered List items.
+
$kendo-list-item-focus-bgColor$kendo-list-item-hover-bgrgba(0, 0, 0, 0.04)
Description
The background color of the focused List items.
+
$kendo-list-item-focus-text Null null null
Description
The border color of the selected ListView items.
+
Description
The text color of the focused List items.
$kendo-listview-item-focus-text$kendo-list-item-focus-shadow Null null null
Description
The text color of the focused ListView items.
+
Description
The box shadow of the focused List items.
$kendo-listview-item-focus-bg$kendo-list-item-selected-bg Colorif($kendo-enable-color-system, k-color( base-active ), rgba( k-contrast-color( $kendo-listview-bg ), .08 ))rgba(0, 0, 0, 0.08)$kendo-component-bg#ffffff
Description
The background color of the focused ListView items.
+
Description
The background color of the selected List items.
$kendo-listview-item-focus-border$kendo-list-item-selected-textColor$kendo-color-secondary#e51a5f
Description
The text color of the selected List items.
+
$kendo-list-group-item-bg Null null null
Description
The border color of the focused ListView items.
+
Description
The background color of the List group items.
$kendo-listview-item-focus-shadow$kendo-list-group-item-text Null null null
Description
The box shadow of the focused ListView items.
+
Description
The text color of the List group items.
+
$kendo-list-group-item-borderStringinheritinherit
Description
The border color of the List group items.
+
$kendo-list-group-item-shadowNullnullnull
Description
The base shadow of the List group items.
+
$kendo-list-no-data-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
The color of the 'No Data' text.
+
$kendo-list-option-label-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
The color of the 'Option Label' text.
-### Loader +### Listbox @@ -10145,349 +10365,359 @@ The following table lists the available variables for customizing the Material t - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - + +
$kendo-loader-segment-border-radius$kendo-listbox-spacing Number50%50%k-map-get( $kendo-spacing, 3 )12px
Description
The border radius of the Loader segment.
+
Description
The spacing between the ListBox elements.
$kendo-loader-sm-segment-size$kendo-listbox-button-spacing Numberk-map-get( $kendo-spacing, 1 )4pxk-map-get( $kendo-spacing, 2 )8px
Description
The size of the small Loader segment.
+
Description
The spacing between the ListBox buttons.
$kendo-loader-md-segment-size$kendo-listbox-width Numberk-map-get( $kendo-spacing, 2 )8px10em10em
Description
The size of the medium Loader segment.
+
Description
The width of the ListBox.
$kendo-loader-lg-segment-size$kendo-listbox-default-height Numberk-map-get( $kendo-spacing, 4 )16px200px200px
Description
The size of the large Loader segment.
+
Description
The height of the ListBox.
$kendo-loader-sm-padding$kendo-listbox-border-width Numberk-math-div( $kendo-loader-sm-segment-size, 2 )2px1px1px
Description
The padding of the small Loader.
+
Description
The width of the border around the ListBox.
$kendo-loader-md-paddingNumberk-math-div( $kendo-loader-md-segment-size, 2 )4px$kendo-listbox-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The padding of the medium Loader.
+
Description
The font family of the ListBox.
$kendo-loader-lg-padding$kendo-listbox-font-size Numberk-math-div( $kendo-loader-lg-segment-size, 2 )8px$kendo-list-md-font-size14px
Description
The padding of the large Loader.
+
Description
The font size of the ListBox.
$kendo-loader-sm-spinner-3-width$kendo-listbox-line-height Number( $kendo-loader-sm-segment-size * 4 )16px$kendo-list-md-line-height1.4285714286
Description
The width of the small spinner-3 Loader.
+
Description
The line height of the ListBox.
$kendo-loader-md-spinner-3-widthNumber( $kendo-loader-md-segment-size * 4 )32px$kendo-listbox-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The width of the medium spinner-3 Loader.
+
Description
The text color of the ListBox.
$kendo-loader-lg-spinner-3-widthNumber( $kendo-loader-lg-segment-size * 4 )64px$kendo-listbox-bgColor$kendo-component-bg#ffffff
Description
The width of the large spinner-3 Loader.
+
Description
The background color of the ListBox.
$kendo-loader-sm-spinner-3-heightNumber( $kendo-loader-sm-spinner-3-width * $equilateral-height )13.8564064608px$kendo-listbox-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The height of the small spinner-3 Loader.
+
Description
The border color of the ListBox.
$kendo-loader-md-spinner-3-height$kendo-listbox-item-padding-x Number( $kendo-loader-md-spinner-3-width * $equilateral-height )27.7128129216px$kendo-list-md-item-padding-x16px
Description
The height of the medium spinner-3 Loader.
+
Description
The inline padding of the ListBox item.
$kendo-loader-lg-spinner-3-height$kendo-listbox-item-padding-y Number( $kendo-loader-lg-spinner-3-width * $equilateral-height )55.4256258432px$kendo-list-md-item-padding-y8px
Description
The height of the large spinner-3 Loader.
+
Description
The block padding of the ListBox item.
$kendo-loader-sm-spinner-4-width$kendo-listbox-drop-hint-width Number$kendo-loader-sm-segment-size * 416px2px2px
Description
The width of the small spinner-4 Loader.
+
Description
The width of the ListBox drop hint.
$kendo-loader-md-spinner-4-width$kendo-listbox-drop-hint-border-width Number$kendo-loader-md-segment-size * 432px2px2px
Description
The width of the medium spinner-4 Loader.
+
Description
The width of the border around the ListBox drop hint.
$kendo-loader-lg-spinner-4-width
+ +### Listview + + + + + + + + + + + + + + + + + + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + + + + + + + + + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-listview-padding-x Number$kendo-loader-lg-segment-size * 464pxk-map-get( $kendo-spacing, 1 )4px
Description
The width of the large spinner-4 Loader.
+
Description
The horizontal padding of the ListView.
$kendo-loader-sm-spinner-4-height$kendo-listview-padding-y Number$kendo-loader-sm-spinner-4-width16pxk-map-get( $kendo-spacing, 1 )4px
Description
The height of the small spinner-4 Loader.
+
Description
The vertical padding of the ListView.
$kendo-loader-md-spinner-4-height$kendo-listview-border-width Number$kendo-loader-md-spinner-4-width32px1px1px
Description
The height of the medium spinner-4 Loader.
+
Description
The width of the border around bordered ListView.
$kendo-loader-lg-spinner-4-heightNumber$kendo-loader-lg-spinner-4-width64px$kendo-listview-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The height of the large spinner-4 Loader.
+
Description
The font family of the ListView.
$kendo-loader-secondary-bgColor#000000#000000$kendo-listview-font-sizeNumber$kendo-font-size-md14px
Description
The color of the Loader based on the secondary theme color.
+
Description
The font size of the ListView.
$kendo-loader-container-panel-border-width$kendo-listview-line-height Number1px1px$kendo-line-height-md2
Description
The border width of the container panel.
+
Description
The line height of the ListView.
$kendo-loader-container-panel-border-styleStringsolidsolid$kendo-listview-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The border style of the container panel.
+
Description
The text color of the ListView.
$kendo-loader-container-panel-border-color$kendo-listview-bgColor$kendo-component-bg#ffffff
Description
The background color of the ListView.
+
$kendo-listview-border Color $kendo-component-border rgba(0, 0, 0, 0.12)
Description
The border color of the container panel.
+
Description
The border color of the ListView.
$kendo-loader-container-panel-border-radius$kendo-listview-item-padding-x Number$kendo-border-radius-mdk-map-get( $kendo-spacing, 1 ) 4px
Description
The border radius of the container panel.
+
Description
The horizontal padding of the ListView items.
$kendo-loader-container-panel-bgColor$kendo-color-white#ffffff$kendo-listview-item-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
The background color of the container panel.
+
Description
The vertical padding of the ListView items.
$kendo-loader-sm-container-paddingNumberk-map-get( $kendo-spacing, 4 )16px$kendo-listview-item-selected-textNullnullnull
Description
The padding of the small Loader container.
+
Description
The text color of the selected ListView items.
$kendo-loader-md-container-paddingNumberk-map-get( $kendo-spacing, 5 )20px$kendo-listview-item-selected-bgColorif($kendo-enable-color-system, k-color( base-active ), rgba( k-contrast-color( $kendo-listview-bg ), .04 ))rgba(0, 0, 0, 0.04)
Description
The padding of the medium Loader container.
+
Description
The background color of the selected ListView items.
$kendo-loader-lg-container-paddingNumberk-map-get( $kendo-spacing, 6 )24px$kendo-listview-item-selected-borderNullnullnull
Description
The padding of the large Loader container.
+
Description
The border color of the selected ListView items.
$kendo-loader-sm-container-gapNumberk-map-get( $kendo-spacing, 1 )4px
Description
The gap of the small Loader container.
-
$kendo-loader-md-container-gapNumberk-map-get( $kendo-spacing, 2 )8px
Description
The gap of the medium Loader container.
-
$kendo-loader-lg-container-gapNumberk-map-get( $kendo-spacing, 3 )12px$kendo-listview-item-focus-textNullnullnull
Description
The gap of the large Loader container.
+
Description
The text color of the focused ListView items.
$kendo-loader-sm-container-font-sizeNumber$kendo-font-size-sm12px$kendo-listview-item-focus-bgColorif($kendo-enable-color-system, k-color( base-active ), rgba( k-contrast-color( $kendo-listview-bg ), .08 ))rgba(0, 0, 0, 0.08)
Description
The font size of the small Loader container.
+
Description
The background color of the focused ListView items.
$kendo-loader-md-container-font-sizeNumber$kendo-font-size-md14px$kendo-listview-item-focus-borderNullnullnull
Description
The font size of the medium Loader container.
+
Description
The border color of the focused ListView items.
$kendo-loader-lg-container-font-sizeNumber$kendo-font-size-lg16px$kendo-listview-item-focus-shadowNullnullnull
Description
The font size of the large Loader container.
+
Description
The box shadow of the focused ListView items.
-### Loading +### Loader @@ -10505,339 +10735,349 @@ The following table lists the available variables for customizing the Material t - - - - + + + + - - - - - + + + + - - + - - + + - - -
$kendo-loading-bgColor$kendo-component-bg#ffffff$kendo-loader-segment-border-radiusNumber50%50%
Description
The background color of the Loading indicator.
+
Description
The border radius of the Loader segment.
$kendo-loading-textStringcurrentColorcurrentColor$kendo-loader-sm-segment-sizeNumberk-map-get( $kendo-spacing, 1 )4px
Description
The text color of the Loading indicator.
+
Description
The size of the small Loader segment.
$kendo-loading-opacity$kendo-loader-md-segment-size Number.30.3k-map-get( $kendo-spacing, 2 )8px
Description
The opacity of the Loading indicator.
+
Description
The size of the medium Loader segment.
- -### Menu - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - + - - + + - - + - + + + + + + + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - + - - + + - - - - - + + + + - - + - + - - - - - + + + + - - + - - + + - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-menu-popup-padding-xNullnullnull
$kendo-loader-lg-segment-sizeNumberk-map-get( $kendo-spacing, 4 )16px
Description
Horizontal padding of the menu popup.
+
Description
The size of the large Loader segment.
$kendo-menu-popup-padding-yNullnullnull$kendo-loader-sm-paddingNumberk-math-div( $kendo-loader-sm-segment-size, 2 )2px
Description
Vertical padding of the menu popup.
+
Description
The padding of the small Loader.
$kendo-menu-popup-border-width$kendo-loader-md-padding Number$kendo-popup-border-width0pxk-math-div( $kendo-loader-md-segment-size, 2 )4px
Description
Width of the border around the menu popup.
+
Description
The padding of the medium Loader.
$kendo-menu-popup-font-size$kendo-loader-lg-padding Number$kendo-font-size-lgk-math-div( $kendo-loader-lg-segment-size, 2 )8px
Description
The padding of the large Loader.
+
$kendo-loader-sm-spinner-3-widthNumber( $kendo-loader-sm-segment-size * 4 ) 16px
Description
Font sizes of the menu popup.
+
Description
The width of the small spinner-3 Loader.
$kendo-menu-popup-line-height$kendo-loader-md-spinner-3-width Number1.251.25( $kendo-loader-md-segment-size * 4 )32px
Description
Line heights used along with $kendo-font-size.
+
Description
The width of the medium spinner-3 Loader.
$kendo-menu-popup-bgColor$kendo-popup-bg#ffffff$kendo-loader-lg-spinner-3-widthNumber( $kendo-loader-lg-segment-size * 4 )64px
Description
The background of the menu popup.
+
Description
The width of the large spinner-3 Loader.
$kendo-menu-popup-textColor$kendo-popup-textrgba(0, 0, 0, 0.87)$kendo-loader-sm-spinner-3-heightNumber( $kendo-loader-sm-spinner-3-width * $equilateral-height )13.8564064608px
Description
The text color of the menu popup.
+
Description
The height of the small spinner-3 Loader.
$kendo-menu-popup-borderColor$kendo-popup-borderrgba(0, 0, 0, 0.12)$kendo-loader-md-spinner-3-heightNumber( $kendo-loader-md-spinner-3-width * $equilateral-height )27.7128129216px
Description
The border color of the menu popup.
+
Description
The height of the medium spinner-3 Loader.
$kendo-menu-popup-gradientNullnullnull$kendo-loader-lg-spinner-3-heightNumber( $kendo-loader-lg-spinner-3-width * $equilateral-height )55.4256258432px
Description
The background gradient of the menu popup.
+
Description
The height of the large spinner-3 Loader.
$kendo-menu-popup-item-padding-x$kendo-loader-sm-spinner-4-width Numberk-map-get( $kendo-spacing, 4 )$kendo-loader-sm-segment-size * 4 16px
Description
Horizontal padding of the menu item in popup.
+
Description
The width of the small spinner-4 Loader.
$kendo-menu-popup-item-padding-y$kendo-loader-md-spinner-4-width Numberk-map-get( $kendo-spacing, 2 )8px$kendo-loader-md-segment-size * 432px
Description
Vertical padding of the menu item in popup.
+
Description
The width of the medium spinner-4 Loader.
$kendo-menu-popup-item-padding-endCalculationcalc( #{$kendo-menu-popup-item-padding-x * 2} + #{$kendo-icon-size} )calc(32px + 16px)$kendo-loader-lg-spinner-4-widthNumber$kendo-loader-lg-segment-size * 464px
Description
The end padding of the menu item in popup.
+
Description
The width of the large spinner-4 Loader.
$kendo-menu-popup-sm-item-icon-margin-start$kendo-loader-sm-spinner-4-height Number$kendo-menu-popup-sm-item-padding-x$kendo-loader-sm-spinner-4-width 16px
Description
The start margin of the menu item expand icon.
+
Description
The height of the small spinner-4 Loader.
$kendo-menu-popup-sm-item-icon-margin-endCalculationcalc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )calc(-1 * (calc(32px + 16px) - 8px))$kendo-loader-md-spinner-4-heightNumber$kendo-loader-md-spinner-4-width32px
Description
The end margin of the menu item expand icon.
+
Description
The height of the medium spinner-4 Loader.
$kendo-menu-popup-item-spacing$kendo-loader-lg-spinner-4-height Number0px0px$kendo-loader-lg-spinner-4-width64px
Description
The spacing between the menu items in popup.
+
Description
The height of the large spinner-4 Loader.
$kendo-menu-popup-item-bgNullnullnull
$kendo-loader-secondary-bgColor#000000#000000
Description
The background of the menu item in popup.
+
Description
The color of the Loader based on the secondary theme color.
$kendo-menu-popup-item-textNullnullnull$kendo-loader-container-panel-border-widthNumber1px1px
Description
The text color of the menu item in popup.
+
Description
The border width of the container panel.
$kendo-menu-popup-item-borderNullnullnull$kendo-loader-container-panel-border-styleStringsolidsolid
Description
The border color of the menu item in popup.
+
Description
The border style of the container panel.
$kendo-menu-popup-item-gradientNullnullnull$kendo-loader-container-panel-border-colorColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The background gradient of the menu item in popup.
+
Description
The border color of the container panel.
$kendo-menu-popup-item-hover-bgColor$kendo-list-item-hover-bgrgba(0, 0, 0, 0.04)$kendo-loader-container-panel-border-radiusNumber$kendo-border-radius-md4px
Description
The background of hovered menu item in popup.
+
Description
The border radius of the container panel.
$kendo-menu-popup-item-hover-text$kendo-loader-container-panel-bg Color$kendo-list-item-hover-textrgba(0, 0, 0, 0.87)$kendo-color-white#ffffff
Description
The text color of hovered menu item in popup.
+
Description
The background color of the container panel.
$kendo-menu-popup-item-hover-borderNullnullnull$kendo-loader-sm-container-paddingNumberk-map-get( $kendo-spacing, 4 )16px
Description
The border color of hovered menu item in popup.
+
Description
The padding of the small Loader container.
$kendo-menu-popup-item-hover-gradientNullnullnull$kendo-loader-md-container-paddingNumberk-map-get( $kendo-spacing, 5 )20px
Description
The background gradient of hovered menu item in popup.
+
Description
The padding of the medium Loader container.
$kendo-menu-popup-item-expanded-bgColor$kendo-list-item-selected-bg#ffffff$kendo-loader-lg-container-paddingNumberk-map-get( $kendo-spacing, 6 )24px
Description
The background of expanded menu item in popup.
+
Description
The padding of the large Loader container.
$kendo-menu-popup-item-expanded-textColor$kendo-list-item-selected-text#e51a5f$kendo-loader-sm-container-gapNumberk-map-get( $kendo-spacing, 1 )4px
Description
The text color of expanded menu item in popup.
+
Description
The gap of the small Loader container.
$kendo-menu-popup-item-expanded-borderNullnullnull$kendo-loader-md-container-gapNumberk-map-get( $kendo-spacing, 2 )8px
Description
The border color of expanded menu item in popup.
+
Description
The gap of the medium Loader container.
$kendo-menu-popup-item-expanded-gradientNullnullnull$kendo-loader-lg-container-gapNumberk-map-get( $kendo-spacing, 3 )12px
Description
The background gradient of expanded menu item in popup.
+
Description
The gap of the large Loader container.
$kendo-menu-popup-item-focus-shadowNullnullnull$kendo-loader-sm-container-font-sizeNumber$kendo-font-size-sm12px
Description
The base shadow of focused menu item in popup.
+
Description
The font size of the small Loader container.
+
$kendo-loader-md-container-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the medium Loader container.
+
$kendo-loader-lg-container-font-sizeNumber$kendo-font-size-lg16px
Description
The font size of the large Loader container.
-### Menu-button +### Loading @@ -10855,19 +11095,39 @@ The following table lists the available variables for customizing the Material t - + + + + + + + + + + + + + + + + + + + - - + + -
$kendo-menu-button-arrow-padding-x$kendo-loading-bgColor$kendo-component-bg#ffffff
Description
The background color of the Loading indicator.
+
$kendo-loading-textStringcurrentColorcurrentColor
Description
The text color of the Loading indicator.
+
$kendo-loading-opacity Numberk-map-get( $kendo-spacing, 1 )4px.30.3
Description
The horizontal padding of the button arrow in the Menu Button.
+
Description
The opacity of the Loading indicator.
-### Notification +### Menu @@ -10885,1001 +11145,949 @@ The following table lists the available variables for customizing the Material t - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + - - + - - - - - - - - - - - + + - - - - - - - - - - -
$kendo-notification-group-gapNumberk-map-get( $kendo-spacing, 2 )8px$kendo-menu-popup-padding-xNullnullnull
Description
The row-gap between the elements in the Notification group.
+
Description
Horizontal padding of the menu popup.
$kendo-notification-padding-xNumber16px16px$kendo-menu-popup-padding-yNullnullnull
Description
The horizontal padding of the Notification.
+
Description
Vertical padding of the menu popup.
$kendo-notification-padding-y$kendo-menu-popup-border-width Number14px14px$kendo-popup-border-width0px
Description
The vertical padding of the Notification.
+
Description
Width of the border around the menu popup.
$kendo-notification-border-width$kendo-menu-popup-font-size Number0px0px$kendo-font-size-lg16px
Description
The width of the border around the Notification.
+
Description
Font sizes of the menu popup.
$kendo-notification-border-radius$kendo-menu-popup-line-height Numberk-map-get( $kendo-spacing, 1 )4px1.251.25
Description
The border radius of the Notification.
+
Description
Line heights used along with $kendo-font-size.
$kendo-notification-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif$kendo-menu-popup-bgColor$kendo-popup-bg#ffffff
Description
The font family of the Notification.
+
Description
The background of the menu popup.
$kendo-notification-font-sizeNumber$kendo-font-size-md14px$kendo-menu-popup-textColor$kendo-popup-textrgba(0, 0, 0, 0.87)
Description
The font size of the Notification.
+
Description
The text color of the menu popup.
$kendo-notification-line-heightNumberk-math-div( 20, 14 )1.4285714286$kendo-menu-popup-borderColor$kendo-popup-borderrgba(0, 0, 0, 0.12)
Description
The line height of the Notification.
+
Description
The border color of the menu popup.
$kendo-notification-bgColor$kendo-component-bg#ffffff
Description
The background color of the Notification.
-
$kendo-notification-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the Notification.
-
$kendo-notification-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the Notification.
-
$kendo-notification-shadowString$kendo-popup-shadowvar(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))$kendo-menu-popup-gradientNullnullnull
Description
The box shadow of the Notification.
+
Description
The background gradient of the menu popup.
$kendo-notification-icon-spacing$kendo-menu-popup-item-padding-x Number$kendo-icon-spacing8px
Description
The horizontal spacing of the Notification icon.
-
$kendo-notification-theme-colorsMap$kendo-theme-colors("primary": #3f51b5, "secondary": #e51a5f, "tertiary": #00695c, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #f5f5f5, "inverse": #424242)k-map-get( $kendo-spacing, 4 )16px
Description
The theme colors map for the Notification.
+
Description
Horizontal padding of the menu item in popup.
$kendo-notification-themeMapnotification-theme( $kendo-notification-theme-colors )("inverse": (color: white, background-color: #424242, border: #424242), "light": (color: black, background-color: #f5f5f5, border: #f5f5f5), "dark": (color: white, background-color: #424242, border: #424242), "error": (color: black, background-color: #f31700, border: #f31700), "warning": (color: black, background-color: #ffc000, border: #ffc000), "success": (color: black, background-color: #37b400, border: #37b400), "info": (color: white, background-color: #0058e9, border: #0058e9), "tertiary": (color: white, background-color: #00695c, border: #00695c), "secondary": (color: white, background-color: #e51a5f, border: #e51a5f), "primary": (color: white, background-color: #3f51b5, border: #3f51b5))
Description
The generated theme colors map for the Notification.
-
- -### Pager - - - - - - - - - - - - - - - - - - + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - + +
NameTypeDefault valueComputed value
$kendo-pager-padding-x$kendo-menu-popup-item-padding-y Number k-map-get( $kendo-spacing, 2 ) 8px
Description
The horizontal padding of the Pager.
+
Description
Vertical padding of the menu item in popup.
$kendo-pager-sm-padding-xNumberk-map-get( $kendo-spacing, 1 )4px$kendo-menu-popup-item-padding-endCalculationcalc( #{$kendo-menu-popup-item-padding-x * 2} + #{$kendo-icon-size} )calc(32px + 16px)
Description
The horizontal padding of the small Pager.
+
Description
The end padding of the menu item in popup.
$kendo-pager-md-padding-x$kendo-menu-popup-sm-item-icon-margin-start Numberk-map-get( $kendo-spacing, 2 )8px$kendo-menu-popup-sm-item-padding-x16px
Description
The horizontal padding of the medium Pager.
+
Description
The start margin of the menu item expand icon.
$kendo-pager-lg-padding-xNumberk-map-get( $kendo-spacing, 2.5 )10px$kendo-menu-popup-sm-item-icon-margin-endCalculationcalc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )calc(-1 * (calc(32px + 16px) - 8px))
Description
The horizontal padding of the large Pager.
+
Description
The end margin of the menu item expand icon.
$kendo-pager-padding-y$kendo-menu-popup-item-spacing Number$kendo-pager-padding-x8px0px0px
Description
The vertical padding of the Pager.
+
Description
The spacing between the menu items in popup.
$kendo-pager-sm-padding-yNumber$kendo-pager-sm-padding-x4px$kendo-menu-popup-item-bgNullnullnull
Description
The vertical padding of the small Pager.
+
Description
The background of the menu item in popup.
$kendo-pager-md-padding-yNumber$kendo-pager-md-padding-x8px$kendo-menu-popup-item-textNullnullnull
Description
The vertical padding of the medium Pager.
+
Description
The text color of the menu item in popup.
$kendo-pager-lg-padding-yNumber$kendo-pager-lg-padding-x10px$kendo-menu-popup-item-borderNullnullnull
Description
The vertical padding of the large Pager.
+
Description
The border color of the menu item in popup.
$kendo-pager-sm-item-min-widthCalculation$kendo-button-sm-calc-sizecalc(1.4285714286em + 12px + 2px)$kendo-menu-popup-item-gradientNullnullnull
Description
The minimum width of the items in the small Pager.
+
Description
The background gradient of the menu item in popup.
$kendo-pager-md-item-min-widthCalculation$kendo-button-md-calc-sizecalc(1.4285714286em + 16px + 2px)$kendo-menu-popup-item-hover-bgColor$kendo-list-item-hover-bgrgba(0, 0, 0, 0.04)
Description
The minimum width of the items in the medium Pagers.
+
Description
The background of hovered menu item in popup.
$kendo-pager-lg-item-min-widthCalculation$kendo-button-lg-calc-sizecalc(1.4285714286em + 20px + 2px)$kendo-menu-popup-item-hover-textColor$kendo-list-item-hover-textrgba(0, 0, 0, 0.87)
Description
The minimum width of the items in the large Pagers.
+
Description
The text color of hovered menu item in popup.
$kendo-pager-sm-item-group-spacingNumberk-map-get( $kendo-spacing, 1.5 )6px$kendo-menu-popup-item-hover-borderNullnullnull
Description
The margin between the item groups in the small Pager.
+
Description
The border color of hovered menu item in popup.
$kendo-pager-md-item-group-spacingNumberk-map-get( $kendo-spacing, 2 )8px$kendo-menu-popup-item-hover-gradientNullnullnull
Description
The margin between the item groups in the medium Pager.
+
Description
The background gradient of hovered menu item in popup.
$kendo-pager-lg-item-group-spacingNumberk-map-get( $kendo-spacing, 2.5 )10px$kendo-menu-popup-item-expanded-bgColor$kendo-list-item-selected-bg#ffffff
Description
The margin between the item groups in the large Pager.
+
Description
The background of expanded menu item in popup.
$kendo-pager-border-widthNumber1px1px$kendo-menu-popup-item-expanded-textColor$kendo-list-item-selected-text#e51a5f
Description
The border width of the Pager.
+
Description
The text color of expanded menu item in popup.
$kendo-pager-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif$kendo-menu-popup-item-expanded-borderNullnullnull
Description
The font family of the Pager.
+
Description
The border color of expanded menu item in popup.
$kendo-pager-font-sizeNumber$kendo-font-size-md14px$kendo-menu-popup-item-expanded-gradientNullnullnull
Description
The font size of the Pager.
+
Description
The background gradient of expanded menu item in popup.
$kendo-pager-line-heightNumber$kendo-line-height-md2$kendo-menu-popup-item-focus-shadowNullnullnull
Description
The line height of the Pager.
+
Description
The base shadow of focused menu item in popup.
$kendo-pager-bgColor$kendo-component-bg#ffffff
Description
The background color of the Pager.
-
$kendo-pager-textColorif($kendo-enable-color-system, k-color( subtle ), if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text ))rgba(0, 0, 0, 0.54)
Description
The text color of the Pager.
-
$kendo-pager-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
+ +### Menu-button + + + + + + + + + + + + + + + + + + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-menu-button-arrow-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The border color of the Pager.
+
Description
The horizontal padding of the button arrow in the Menu Button.
$kendo-pager-focus-bgColorif($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-pager-bg, .5 ))whitesmoke
+ +### Notification + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - + - - + + - - + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - + +
NameTypeDefault valueComputed value
$kendo-notification-group-gapNumberk-map-get( $kendo-spacing, 2 )8px
Description
The background color of the focused Pager.
+
Description
The row-gap between the elements in the Notification group.
$kendo-pager-focus-shadowNullnullnull$kendo-notification-padding-xNumber16px16px
Description
The box shadow of the focused Pager.
+
Description
The horizontal padding of the Notification.
$kendo-pager-section-spacing$kendo-notification-padding-y Number$kendo-pager-padding-x8px14px14px
Description
The spacing between the Pager sections.
+
Description
The vertical padding of the Notification.
$kendo-pager-item-border-width$kendo-notification-border-width Number 0px 0px
Description
The border width of the Pager items.
+
Description
The width of the border around the Notification.
$kendo-pager-item-border-radius$kendo-notification-border-radius Number5em5emk-map-get( $kendo-spacing, 1 )4px
Description
The border radius of the Pager items.
+
Description
The border radius of the Notification.
$kendo-pager-item-spacingNumber0px0px$kendo-notification-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The spacing around the Pager items.
+
Description
The font family of the Notification.
$kendo-pager-item-bgNullnullnull$kendo-notification-font-sizeNumber$kendo-font-size-md14px
Description
The background color of the Pager items.
+
Description
The font size of the Notification.
$kendo-pager-item-textNullnullnull$kendo-notification-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The text color of the Pager items.
+
Description
The line height of the Notification.
$kendo-pager-item-borderNullnullnull$kendo-notification-bgColor$kendo-component-bg#ffffff
Description
The border color of the Pager items.
+
Description
The background color of the Notification.
$kendo-pager-item-hover-bg$kendo-notification-text Color$kendo-list-item-hover-bgrgba(0, 0, 0, 0.04)$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The background color of the hovered Pager items.
+
Description
The text color of the Notification.
$kendo-pager-item-hover-text$kendo-notification-border Color$kendo-pager-textrgba(0, 0, 0, 0.54)$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The text color of the hovered Pager items.
+
Description
The border color of the Notification.
$kendo-pager-item-hover-borderNullnullnull$kendo-notification-shadowString$kendo-popup-shadowvar(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))
Description
The border color of the hovered Pager items.
+
Description
The box shadow of the Notification.
$kendo-pager-item-selected-bgColor$kendo-color-primary#3f51b5$kendo-notification-icon-spacingNumber$kendo-icon-spacing8px
Description
The background color of the selected Pager items.
+
Description
The horizontal spacing of the Notification icon.
$kendo-pager-item-selected-textColor$kendo-color-primary-contrastwhite$kendo-notification-theme-colorsMap$kendo-theme-colors("primary": #3f51b5, "secondary": #e51a5f, "tertiary": #00695c, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #f5f5f5, "inverse": #424242)
Description
The text color of the selected Pager items.
+
Description
The theme colors map for the Notification.
$kendo-pager-item-selected-borderNullnullnull$kendo-notification-themeMapnotification-theme( $kendo-notification-theme-colors )("inverse": (color: white, background-color: #424242, border: #424242), "light": (color: black, background-color: #f5f5f5, border: #f5f5f5), "dark": (color: white, background-color: #424242, border: #424242), "error": (color: black, background-color: #f31700, border: #f31700), "warning": (color: black, background-color: #ffc000, border: #ffc000), "success": (color: black, background-color: #37b400, border: #37b400), "info": (color: white, background-color: #0058e9, border: #0058e9), "tertiary": (color: white, background-color: #00695c, border: #00695c), "secondary": (color: white, background-color: #e51a5f, border: #e51a5f), "primary": (color: white, background-color: #3f51b5, border: #3f51b5))
Description
The border color of the selected Pager items.
+
Description
The generated theme colors map for the Notification.
$kendo-pager-number-border-radius
+ +### Orgchart + + + + + + + + + + + + + + + + + + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-orgchart-spacer Number$kendo-pager-item-border-radius5emk-map-get( $kendo-spacing, 6 )24px
Description
The border radius of the Pager numbers.
+
Description
The spacing index of the OrgChart.
$kendo-pager-item-focus-opacity$kendo-orgchart-padding-y Number.120.12$kendo-orgchart-spacer24px
Description
The opacity of the focused Pager items.
+
Description
The vertical padding of the OrgChart.
$kendo-pager-item-focus-bgColorrgba($kendo-list-item-hover-bg, $kendo-pager-item-focus-opacity)rgba(0, 0, 0, 0.12)$kendo-orgchart-padding-xNumber$kendo-orgchart-padding-y24px
Description
The background color of the focused Pager items.
+
Description
The horizontal padding of the OrgChart.
$kendo-pager-item-focus-shadowNullnullnull$kendo-orgchart-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The box shadow of the focused Pager items.
+
Description
The font family of the OrgChart.
$kendo-pager-input-width$kendo-orgchart-font-size Number5em5em$kendo-font-size-md14px
Description
The width of the Inputs in the Pager.
+
Description
The font size of the OrgChart.
$kendo-pager-sm-dropdown-width$kendo-orgchart-line-height Number5em5em$kendo-line-height-md2
Description
The width of the DropDowns in the small Pager.
+
Description
The line height of the OrgChart.
$kendo-pager-md-dropdown-widthNumber5em5em$kendo-orgchart-bgColor$kendo-component-bg#ffffff
Description
The width of the DropDowns in the medium Pager.
+
Description
The background color of the OrgChart.
$kendo-pager-lg-dropdown-widthNumber5em5em$kendo-orgchart-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The width of the DropDowns in the large Pager.
+
Description
The text color of the OrgChart.
$kendo-pager-sizesMap( - sm: ( - padding-x: $kendo-pager-sm-padding-x, - padding-y: $kendo-pager-sm-padding-y, - item-group-spacing: $kendo-pager-sm-item-group-spacing, - item-min-width: $kendo-pager-sm-item-min-width, - pager-dropdown-width: $kendo-pager-sm-dropdown-width - ), - md: ( - padding-x: $kendo-pager-md-padding-x, - padding-y: $kendo-pager-md-padding-y, - item-group-spacing: $kendo-pager-md-item-group-spacing, - item-min-width: $kendo-pager-md-item-min-width, - pager-dropdown-width: $kendo-pager-md-dropdown-width - ), - lg: ( - padding-x: $kendo-pager-lg-padding-x, - padding-y: $kendo-pager-lg-padding-y, - item-group-spacing: $kendo-pager-lg-item-group-spacing, - item-min-width: $kendo-pager-lg-item-min-width, - pager-dropdown-width: $kendo-pager-lg-dropdown-width - ) -)(sm: (padding-x: 4px, padding-y: 4px, item-group-spacing: 6px, item-min-width: calc(1.4285714286em + 12px + 2px), pager-dropdown-width: 5em), md: (padding-x: 8px, padding-y: 8px, item-group-spacing: 8px, item-min-width: calc(1.4285714286em + 16px + 2px), pager-dropdown-width: 5em), lg: (padding-x: 10px, padding-y: 10px, item-group-spacing: 10px, item-min-width: calc(1.4285714286em + 20px + 2px), pager-dropdown-width: 5em))$kendo-orgchart-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The sizes map of the Pager.
+
Description
The border color of the OrgChart.
- -### Pdf-viewer - - - - - - - - - - - - - - - - - - + + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - - - - - - - - - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-pdf-viewer-border-width
$kendo-orgchart-node-gap Number1px1px$kendo-orgchart-spacer24px
Description
The border width of the PDFViewer.
+
Description
The spacing of the OrgChart node.
$kendo-pdf-viewer-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif$kendo-orgchart-group-gapNumber$kendo-orgchart-spacer24px
Description
The font family of the PDFViewer.
+
Description
The spacing of the OrgChart group.
$kendo-pdf-viewer-font-size$kendo-orgchart-node-container-gap Number$kendo-font-size-md14px$kendo-orgchart-spacer24px
Description
The font size of the PDFViewer.
+
Description
The spacing of the OrgChart node container.
$kendo-pdf-viewer-line-height$kendo-orgchart-node-group-padding-y Number$kendo-line-height-md2$kendo-orgchart-spacer24px
Description
The line height of the PDFViewer.
+
Description
The vertical padding of the OrgChart node group.
$kendo-pdf-viewer-bgColor$kendo-component-bg#ffffff$kendo-orgchart-node-group-padding-xNumber$kendo-orgchart-node-group-padding-y24px
Description
The background color of the PDFViewer.
+
Description
The horizontal padding of the OrgChart node group.
$kendo-pdf-viewer-textColor$kendo-component-textrgba(0, 0, 0, 0.87)$kendo-orgchart-node-group-border-widthNumber1px1px
Description
The text color of the PDFViewer.
+
Description
The border width of the OrgChart node group.
$kendo-pdf-viewer-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)$kendo-orgchart-node-group-border-radiusNumber$kendo-border-radius-md4px
Description
The border color of the PDFViewer.
+
Description
The border radius of the OrgChart node group.
$kendo-pdf-viewer-toolbar-bg$kendo-orgchart-node-group-bg Colorif($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .25 ))#fafafaif($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light))#f5f5f5
Description
The background color of the PDFViewer Toolbar.
+
Description
The background color of the OrgChart node group.
$kendo-pdf-viewer-toolbar-textNullnullnull$kendo-orgchart-node-group-textColor$kendo-base-textrgba(0, 0, 0, 0.87)
Description
The text color of the PDFViewer Toolbar.
+
Description
The text color of the OrgChart node group.
$kendo-pdf-viewer-toolbar-borderNullnullnull$kendo-orgchart-node-group-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The border color of the PDFViewer Toolbar.
+
Description
The border color of the OrgChart node group.
$kendo-pdf-viewer-toolbar-gradient$kendo-orgchart-node-group-focus-border Nullnull$kendo-card-focus-border null
Description
The gradient of the PDFViewer Toolbar.
+
Description
The border color of the focused OrgChart node group.
$kendo-pdf-viewer-canvas-bgColor$kendo-app-bg#ffffff$kendo-orgchart-node-group-focus-shadowList0 2px 4px -1px rgba( if($kendo-enable-color-system, k-color( on-light, true ), $elevation), .2 ), 0 4px 5px 0 rgba( if($kendo-enable-color-system, k-color( on-light, true ), $elevation), .14 ), 0 1px 10px 0 rgba( if($kendo-enable-color-system, k-color( on-light, true ), $elevation), .12 )0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)
Description
The background color of the PDFViewer canvas.
+
Description
The shadow of the focused OrgChart node group.
$kendo-pdf-viewer-canvas-textNullnullnull$kendo-orgchart-node-group-title-font-sizeNumber$kendo-font-size-xl20px
Description
The text color of the PDFViewer canvas.
+
Description
The font size of the OrgChart node group title.
$kendo-pdf-viewer-canvas-borderNullnullnull$kendo-orgchart-node-group-title-margin-bottomNumberk-math-div( $kendo-orgchart-spacer, 4 )6px
Description
The border color of the PDFViewer canvas.
+
Description
The bottom margin of the OrgChart node group title.
$kendo-pdf-viewer-page-spacing$kendo-orgchart-node-group-title-line-height Number30px30px$kendo-line-height-sm1.2
Description
The spacing of the PDFViewer page.
+
Description
The line height of the OrgChart node group title.
$kendo-pdf-viewer-page-bgColorwhitewhite$kendo-orgchart-node-group-subtitle-font-sizeNumber$kendo-font-size-md14px
Description
The background color of the PDFViewer page.
+
Description
The font size of the OrgChart node group subtitle.
$kendo-pdf-viewer-page-textColor$kendo-component-textrgba(0, 0, 0, 0.87)$kendo-orgchart-node-group-subtitle-margin-bottomNumber$kendo-orgchart-spacer24px
Description
The text color of the PDFViewer page.
+
Description
The bottom margin of the OrgChart node group subtitle.
$kendo-pdf-viewer-page-border$kendo-orgchart-node-group-subtitle-text Color$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the PDFViewer page.
-
$kendo-pdf-viewer-page-shadowString$box-shadow-depth-3var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))rgba( black, .54 )rgba(0, 0, 0, 0.54)
Description
The shadow of the PDFViewer page.
+
Description
The line height of the OrgChart node group subtitle.
$kendo-pdf-viewer-search-panel-padding-x$kendo-orgchart-card-width Number$kendo-toolbar-md-padding-x8px300px300px
Description
The horizontal padding of the PDFViewer search panel.
+
Description
The width of the OrgChart Card.
$kendo-pdf-viewer-search-panel-padding-yCalculationcalc( #{$kendo-toolbar-md-padding-x} * 2 )calc(8px * 2)$kendo-orgchart-card-padding-yNumber$kendo-card-padding-y12px
Description
The vertical padding of the PDFViewer search panel.
+
Description
The vertical padding of the OrgChart Card.
$kendo-pdf-viewer-search-panel-spacing$kendo-orgchart-card-padding-x Number$kendo-toolbar-md-spacing8px$kendo-orgchart-card-padding-y12px
Description
The spacing of the PDFViewer search panel.
+
Description
The horizontal padding of the OrgChart Card.
$kendo-pdf-viewer-search-panel-border-width$kendo-orgchart-card-border-width Number 1px 1px
Description
The border width of the PDFViewer search panel.
+
Description
The border width of the OrgChart Card.
$kendo-pdf-viewer-search-panel-border-radiusNumberk-map-get( $kendo-spacing, 1 )4px$kendo-orgchart-card-shadowStringnonenone
Description
The border radius of the PDFViewer search panel.
+
Description
The shadow of the OrgChart Card.
$kendo-pdf-viewer-search-panel-bgColor$kendo-component-bg#ffffff$kendo-orgchart-card-focus-shadowList$kendo-orgchart-node-group-focus-shadow0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)
Description
The background color of the PDFViewer search panel.
+
Description
The shadow of the focused OrgChart Card.
$kendo-pdf-viewer-search-panel-textColor$kendo-component-textrgba(0, 0, 0, 0.87)$kendo-orgchart-card-title-margin-bottomNumber0px0px
Description
The text color of the PDFViewer search panel.
+
Description
The bottom margin of the OrgChart Card title.
$kendo-pdf-viewer-search-panel-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)$kendo-orgchart-card-title-font-sizeNullnullnull
Description
The border color of the PDFViewer search panel.
+
Description
The font size of the OrgChart Card title.
$kendo-pdf-viewer-search-panel-shadowString$kendo-window-shadowvar(--kendo-elevation-8, 0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14))$kendo-orgchart-card-subtitle-margin-bottomNumber0px0px
Description
The shadow of the PDFViewer search panel.
+
Description
The bottom margin of the OrgChart Card subtitle.
$kendo-pdf-viewer-search-panel-matches-spacing$kendo-orgchart-card-subtitle-font-sizeNullnullnull
Description
The font size of the OrgChart Card subtitle.
+
$kendo-orgchart-card-body-border-widthList2px 0 02px 0 0
Description
The border width of the OrgChart Card body.
+
$kendo-orgchart-card-body-border-colorColortransparenttransparent
Description
The border color of the OrgChart Card body.
+
$kendo-orgchart-card-body-vbox-margin-right Number$kendo-padding-sm-x8pxk-math-div( $kendo-orgchart-spacer, 2 )12px
Description
The spacing of the matches container in the PDFViewer search panel.
+
Description
The right margin of the OrgChart Card body title wrap.
$kendo-pdf-viewer-selection-line-height$kendo-orgchart-card-body-vbox-min-height Number$kendo-line-height-sm1.2$kendo-card-avatar-size45px
Description
The line height of the PDFViewer selection.
+
Description
The min height of the OrgChart Card body title wrap.
$kendo-pdf-viewer-search-highlight-bgColor$kendo-body-textrgba(0, 0, 0, 0.87)$kendo-orgchart-line-sizeNumber1px1px
Description
The background color of the PDFViewer highlight.
+
Description
The size of the OrgChart connecting line.
$kendo-pdf-viewer-search-highlight-mark-bg$kendo-orgchart-line-fill Coloryellowyellow$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The background color of the PDFViewer highlight mark.
+
Description
The fill color of the OrgChart connecting line.
$kendo-pdf-viewer-icon-textColor$kendo-dropzone-icon-textrgba(97, 97, 97, 0.9116)$kendo-orgchart-line-v-heightNumber25px25px
Description
The text color of the PDFViewer icon.
+
Description
The height of the OrgChart connecting line.
-### Picker +### Pager @@ -11897,769 +12105,3367 @@ The following table lists the available variables for customizing the Material t - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - + + + + + - - + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + - - + - - + + + + + + + + + + - - + + - - - - - + + + + - - + - - + - + - - - - - + + + + - - + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
$kendo-picker-bgColor$kendo-input-bgwhitesmoke$kendo-pager-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The background color of the Picker components.
+
Description
The horizontal padding of the Pager.
$kendo-picker-textColor$kendo-input-textrgba(0, 0, 0, 0.87)$kendo-pager-sm-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The text color of the Picker components.
+
Description
The horizontal padding of the small Pager.
$kendo-picker-borderColor$kendo-input-borderrgba(0, 0, 0, 0.38)$kendo-pager-md-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The border color of the Picker components.
+
Description
The horizontal padding of the medium Pager.
$kendo-picker-gradientNullnullnull$kendo-pager-lg-padding-xNumberk-map-get( $kendo-spacing, 2.5 )10px
Description
The gradient of the Picker components.
+
Description
The horizontal padding of the large Pager.
$kendo-picker-shadowNull$kendo-input-shadownull$kendo-pager-padding-yNumber$kendo-pager-padding-x8px
Description
The shadow of the Picker components.
+
Description
The vertical padding of the Pager.
$kendo-picker-hover-bgNull$kendo-input-hover-bgnull$kendo-pager-sm-padding-yNumber$kendo-pager-sm-padding-x4px
Description
The background color of the hovered Picker components.
+
Description
The vertical padding of the small Pager.
$kendo-picker-hover-textNull$kendo-input-hover-textnull$kendo-pager-md-padding-yNumber$kendo-pager-md-padding-x8px
Description
The text color of the hovered Picker components.
+
Description
The vertical padding of the medium Pager.
$kendo-picker-hover-borderColor$kendo-input-hover-borderrgba(0, 0, 0, 0.87)$kendo-pager-lg-padding-yNumber$kendo-pager-lg-padding-x10px
Description
The border color of the hovered Picker components.
+
Description
The vertical padding of the large Pager.
$kendo-picker-hover-gradientNullnullnull$kendo-pager-sm-item-min-widthCalculation$kendo-button-sm-calc-sizecalc(1.4285714286em + 12px + 2px)
Description
The gradient of the hovered Picker components.
+
Description
The minimum width of the items in the small Pager.
$kendo-picker-hover-shadowNull$kendo-input-hover-shadownull$kendo-pager-md-item-min-widthCalculation$kendo-button-md-calc-sizecalc(1.4285714286em + 16px + 2px)
Description
The shadow of the hovered Picker components.
+
Description
The minimum width of the items in the medium Pagers.
$kendo-picker-focus-bgNull$kendo-input-focus-bgnull$kendo-pager-lg-item-min-widthCalculation$kendo-button-lg-calc-sizecalc(1.4285714286em + 20px + 2px)
Description
The background color of the focused Picker components.
+
Description
The minimum width of the items in the large Pagers.
$kendo-picker-focus-textNull$kendo-input-focus-textnull$kendo-pager-sm-item-group-spacingNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
The text color of the focused Picker components.
+
Description
The margin between the item groups in the small Pager.
$kendo-picker-focus-borderColor$kendo-input-focus-border#3f51b5$kendo-pager-md-item-group-spacingNumberk-map-get( $kendo-spacing, 2 )8px
Description
The border color of the focused Picker components.
+
Description
The margin between the item groups in the medium Pager.
$kendo-picker-focus-gradientNullnullnull$kendo-pager-lg-item-group-spacingNumberk-map-get( $kendo-spacing, 2.5 )10px
Description
The gradient of the focused Picker components.
+
Description
The margin between the item groups in the large Pager.
$kendo-picker-focus-shadowNull$kendo-input-focus-shadownull$kendo-pager-border-widthNumber1px1px
Description
The shadow of the focused Picker components.
+
Description
The border width of the Pager.
$kendo-picker-disabled-bgColor$kendo-input-disabled-bg#fafafa$kendo-pager-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The background color of the disabled Picker components.
+
Description
The font family of the Pager.
$kendo-picker-disabled-textColor$kendo-input-disabled-textrgba(0, 0, 0, 0.38)$kendo-pager-font-sizeNumber$kendo-font-size-md14px
Description
The text color of the disabled Picker components.
+
Description
The font size of the Pager.
$kendo-picker-disabled-borderColor$kendo-input-disabled-borderrgba(0, 0, 0, 0.06)$kendo-pager-line-heightNumber$kendo-line-height-md2
Description
The border color of the disabled Picker components.
+
Description
The line height of the Pager.
$kendo-picker-disabled-gradientNullnullnull$kendo-pager-bgColor$kendo-component-bg#ffffff
Description
The gradient of the disabled Picker components.
+
Description
The background color of the Pager.
$kendo-picker-disabled-shadowNullnullnull
$kendo-pager-textColorif($kendo-enable-color-system, k-color( subtle ), if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text ))rgba(0, 0, 0, 0.54)
Description
The shadow of the disabled Picker components.
+
Description
The text color of the Pager.
$kendo-picker-outline-bg$kendo-pager-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the Pager.
+
$kendo-pager-focus-bgColorif($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-pager-bg, .5 ))whitesmoke
Description
The background color of the focused Pager.
+
$kendo-pager-focus-shadow Null null null
Description
The background color of the outline Picker components.
+
Description
The box shadow of the focused Pager.
$kendo-picker-outline-textColor$kendo-picker-textrgba(0, 0, 0, 0.87)$kendo-pager-section-spacingNumber$kendo-pager-padding-x8px
Description
The text color of the outline Picker components.
+
Description
The spacing between the Pager sections.
$kendo-picker-outline-borderColor$kendo-picker-borderrgba(0, 0, 0, 0.38)$kendo-pager-item-border-widthNumber0px0px
Description
The border color of the outline Picker components.
+
Description
The border width of the Pager items.
$kendo-picker-outline-hover-bg$kendo-pager-item-border-radiusNumber5em5em
Description
The border radius of the Pager items.
+
$kendo-pager-item-spacingNumber0px0px
Description
The spacing around the Pager items.
+
$kendo-pager-item-bg Null null null
Description
The background color of the outline hovered Picker components.
+
Description
The background color of the Pager items.
$kendo-picker-outline-hover-text$kendo-pager-item-text Null null null
Description
The text color of the outline hovered Picker components.
+
Description
The text color of the Pager items.
$kendo-picker-outline-hover-border$kendo-pager-item-borderNullnullnull
Description
The border color of the Pager items.
+
$kendo-pager-item-hover-bg Color$kendo-picker-hover-borderrgba(0, 0, 0, 0.87)$kendo-list-item-hover-bgrgba(0, 0, 0, 0.04)
Description
The border color of the outline hovered Picker components.
+
Description
The background color of the hovered Pager items.
$kendo-picker-outline-focus-bgStringnulnul$kendo-pager-item-hover-textColor$kendo-pager-textrgba(0, 0, 0, 0.54)
Description
The background color of the outline focused Picker components.
+
Description
The text color of the hovered Pager items.
$kendo-picker-outline-focus-text$kendo-pager-item-hover-border Null null null
Description
The text color of the outline focused Picker components.
+
Description
The border color of the hovered Pager items.
$kendo-picker-outline-focus-border$kendo-pager-item-selected-bg Color$kendo-picker-focus-border$kendo-color-primary #3f51b5
Description
The border color of the outline focused Picker components.
+
Description
The background color of the selected Pager items.
$kendo-picker-outline-focus-shadowNullnullnull$kendo-pager-item-selected-textColor$kendo-color-primary-contrastwhite
Description
The shadow of the outline focused Picker components.
+
Description
The text color of the selected Pager items.
$kendo-picker-outline-hover-focus-bg$kendo-pager-item-selected-border Null null null
Description
The background color of the outline hovered and focused Picker components.
+
Description
The border color of the selected Pager items.
$kendo-picker-outline-hover-focus-text$kendo-pager-number-border-radiusNumber$kendo-pager-item-border-radius5em
Description
The border radius of the Pager numbers.
+
$kendo-pager-item-focus-opacityNumber.120.12
Description
The opacity of the focused Pager items.
+
$kendo-pager-item-focus-bgColorrgba($kendo-list-item-hover-bg, $kendo-pager-item-focus-opacity)rgba(0, 0, 0, 0.12)
Description
The background color of the focused Pager items.
+
$kendo-pager-item-focus-shadow Null null null
Description
The text color of the outline hovered and focused Picker components.
+
Description
The box shadow of the focused Pager items.
+
$kendo-pager-input-widthNumber5em5em
Description
The width of the Inputs in the Pager.
+
$kendo-pager-sm-dropdown-widthNumber5em5em
Description
The width of the DropDowns in the small Pager.
+
$kendo-pager-md-dropdown-widthNumber5em5em
Description
The width of the DropDowns in the medium Pager.
+
$kendo-pager-lg-dropdown-widthNumber5em5em
Description
The width of the DropDowns in the large Pager.
+
$kendo-pager-sizesMap( + sm: ( + padding-x: $kendo-pager-sm-padding-x, + padding-y: $kendo-pager-sm-padding-y, + item-group-spacing: $kendo-pager-sm-item-group-spacing, + item-min-width: $kendo-pager-sm-item-min-width, + pager-dropdown-width: $kendo-pager-sm-dropdown-width + ), + md: ( + padding-x: $kendo-pager-md-padding-x, + padding-y: $kendo-pager-md-padding-y, + item-group-spacing: $kendo-pager-md-item-group-spacing, + item-min-width: $kendo-pager-md-item-min-width, + pager-dropdown-width: $kendo-pager-md-dropdown-width + ), + lg: ( + padding-x: $kendo-pager-lg-padding-x, + padding-y: $kendo-pager-lg-padding-y, + item-group-spacing: $kendo-pager-lg-item-group-spacing, + item-min-width: $kendo-pager-lg-item-min-width, + pager-dropdown-width: $kendo-pager-lg-dropdown-width + ) +)(sm: (padding-x: 4px, padding-y: 4px, item-group-spacing: 6px, item-min-width: calc(1.4285714286em + 12px + 2px), pager-dropdown-width: 5em), md: (padding-x: 8px, padding-y: 8px, item-group-spacing: 8px, item-min-width: calc(1.4285714286em + 16px + 2px), pager-dropdown-width: 5em), lg: (padding-x: 10px, padding-y: 10px, item-group-spacing: 10px, item-min-width: calc(1.4285714286em + 20px + 2px), pager-dropdown-width: 5em))
Description
The sizes map of the Pager.
+
+ +### Pdf-viewer + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-pdf-viewer-border-widthNumber1px1px
Description
The border width of the PDFViewer.
+
$kendo-pdf-viewer-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the PDFViewer.
+
$kendo-pdf-viewer-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the PDFViewer.
+
$kendo-pdf-viewer-line-heightNumber$kendo-line-height-md2
Description
The line height of the PDFViewer.
+
$kendo-pdf-viewer-bgColor$kendo-component-bg#ffffff
Description
The background color of the PDFViewer.
+
$kendo-pdf-viewer-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the PDFViewer.
+
$kendo-pdf-viewer-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the PDFViewer.
+
$kendo-pdf-viewer-toolbar-bgColorif($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .25 ))#fafafa
Description
The background color of the PDFViewer Toolbar.
+
$kendo-pdf-viewer-toolbar-textNullnullnull
Description
The text color of the PDFViewer Toolbar.
+
$kendo-pdf-viewer-toolbar-borderNullnullnull
Description
The border color of the PDFViewer Toolbar.
+
$kendo-pdf-viewer-toolbar-gradientNullnullnull
Description
The gradient of the PDFViewer Toolbar.
+
$kendo-pdf-viewer-canvas-bgColor$kendo-app-bg#ffffff
Description
The background color of the PDFViewer canvas.
+
$kendo-pdf-viewer-canvas-textNullnullnull
Description
The text color of the PDFViewer canvas.
+
$kendo-pdf-viewer-canvas-borderNullnullnull
Description
The border color of the PDFViewer canvas.
+
$kendo-pdf-viewer-page-spacingNumber30px30px
Description
The spacing of the PDFViewer page.
+
$kendo-pdf-viewer-page-bgColorwhitewhite
Description
The background color of the PDFViewer page.
+
$kendo-pdf-viewer-page-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the PDFViewer page.
+
$kendo-pdf-viewer-page-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the PDFViewer page.
+
$kendo-pdf-viewer-page-shadowString$box-shadow-depth-3var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the PDFViewer page.
+
$kendo-pdf-viewer-search-panel-padding-xNumber$kendo-toolbar-md-padding-x8px
Description
The horizontal padding of the PDFViewer search panel.
+
$kendo-pdf-viewer-search-panel-padding-yCalculationcalc( #{$kendo-toolbar-md-padding-x} * 2 )calc(8px * 2)
Description
The vertical padding of the PDFViewer search panel.
+
$kendo-pdf-viewer-search-panel-spacingNumber$kendo-toolbar-md-spacing8px
Description
The spacing of the PDFViewer search panel.
+
$kendo-pdf-viewer-search-panel-border-widthNumber1px1px
Description
The border width of the PDFViewer search panel.
+
$kendo-pdf-viewer-search-panel-border-radiusNumberk-map-get( $kendo-spacing, 1 )4px
Description
The border radius of the PDFViewer search panel.
+
$kendo-pdf-viewer-search-panel-bgColor$kendo-component-bg#ffffff
Description
The background color of the PDFViewer search panel.
+
$kendo-pdf-viewer-search-panel-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the PDFViewer search panel.
+
$kendo-pdf-viewer-search-panel-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the PDFViewer search panel.
+
$kendo-pdf-viewer-search-panel-shadowString$kendo-window-shadowvar(--kendo-elevation-8, 0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14))
Description
The shadow of the PDFViewer search panel.
+
$kendo-pdf-viewer-search-panel-matches-spacingNumber$kendo-padding-sm-x8px
Description
The spacing of the matches container in the PDFViewer search panel.
+
$kendo-pdf-viewer-selection-line-heightNumber$kendo-line-height-sm1.2
Description
The line height of the PDFViewer selection.
+
$kendo-pdf-viewer-search-highlight-bgColor$kendo-body-textrgba(0, 0, 0, 0.87)
Description
The background color of the PDFViewer highlight.
+
$kendo-pdf-viewer-search-highlight-mark-bgColoryellowyellow
Description
The background color of the PDFViewer highlight mark.
+
$kendo-pdf-viewer-icon-textColor$kendo-dropzone-icon-textrgba(97, 97, 97, 0.9116)
Description
The text color of the PDFViewer icon.
+
+ +### Picker + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-picker-bgColor$kendo-input-bgwhitesmoke
Description
The background color of the Picker components.
+
$kendo-picker-textColor$kendo-input-textrgba(0, 0, 0, 0.87)
Description
The text color of the Picker components.
+
$kendo-picker-borderColor$kendo-input-borderrgba(0, 0, 0, 0.38)
Description
The border color of the Picker components.
+
$kendo-picker-gradientNullnullnull
Description
The gradient of the Picker components.
+
$kendo-picker-shadowNull$kendo-input-shadownull
Description
The shadow of the Picker components.
+
$kendo-picker-hover-bgNull$kendo-input-hover-bgnull
Description
The background color of the hovered Picker components.
+
$kendo-picker-hover-textNull$kendo-input-hover-textnull
Description
The text color of the hovered Picker components.
+
$kendo-picker-hover-borderColor$kendo-input-hover-borderrgba(0, 0, 0, 0.87)
Description
The border color of the hovered Picker components.
+
$kendo-picker-hover-gradientNullnullnull
Description
The gradient of the hovered Picker components.
+
$kendo-picker-hover-shadowNull$kendo-input-hover-shadownull
Description
The shadow of the hovered Picker components.
+
$kendo-picker-focus-bgNull$kendo-input-focus-bgnull
Description
The background color of the focused Picker components.
+
$kendo-picker-focus-textNull$kendo-input-focus-textnull
Description
The text color of the focused Picker components.
+
$kendo-picker-focus-borderColor$kendo-input-focus-border#3f51b5
Description
The border color of the focused Picker components.
+
$kendo-picker-focus-gradientNullnullnull
Description
The gradient of the focused Picker components.
+
$kendo-picker-focus-shadowNull$kendo-input-focus-shadownull
Description
The shadow of the focused Picker components.
+
$kendo-picker-disabled-bgColor$kendo-input-disabled-bg#fafafa
Description
The background color of the disabled Picker components.
+
$kendo-picker-disabled-textColor$kendo-input-disabled-textrgba(0, 0, 0, 0.38)
Description
The text color of the disabled Picker components.
+
$kendo-picker-disabled-borderColor$kendo-input-disabled-borderrgba(0, 0, 0, 0.06)
Description
The border color of the disabled Picker components.
+
$kendo-picker-disabled-gradientNullnullnull
Description
The gradient of the disabled Picker components.
+
$kendo-picker-disabled-shadowNullnullnull
Description
The shadow of the disabled Picker components.
+
$kendo-picker-outline-bgNullnullnull
Description
The background color of the outline Picker components.
+
$kendo-picker-outline-textColor$kendo-picker-textrgba(0, 0, 0, 0.87)
Description
The text color of the outline Picker components.
+
$kendo-picker-outline-borderColor$kendo-picker-borderrgba(0, 0, 0, 0.38)
Description
The border color of the outline Picker components.
+
$kendo-picker-outline-hover-bgNullnullnull
Description
The background color of the outline hovered Picker components.
+
$kendo-picker-outline-hover-textNullnullnull
Description
The text color of the outline hovered Picker components.
+
$kendo-picker-outline-hover-borderColor$kendo-picker-hover-borderrgba(0, 0, 0, 0.87)
Description
The border color of the outline hovered Picker components.
+
$kendo-picker-outline-focus-bgStringnulnul
Description
The background color of the outline focused Picker components.
+
$kendo-picker-outline-focus-textNullnullnull
Description
The text color of the outline focused Picker components.
+
$kendo-picker-outline-focus-borderColor$kendo-picker-focus-border#3f51b5
Description
The border color of the outline focused Picker components.
+
$kendo-picker-outline-focus-shadowNullnullnull
Description
The shadow of the outline focused Picker components.
+
$kendo-picker-outline-hover-focus-bgNullnullnull
Description
The background color of the outline hovered and focused Picker components.
+
$kendo-picker-outline-hover-focus-textNullnullnull
Description
The text color of the outline hovered and focused Picker components.
+
$kendo-picker-outline-hover-focus-borderNullnullnull
Description
The border color of the outline hovered and focused Picker components.
+
$kendo-picker-flat-bgNullnullnull
Description
The background color of the flat Picker components.
+
$kendo-picker-flat-textColor$kendo-picker-textrgba(0, 0, 0, 0.87)
Description
The text color of the flat Picker components.
+
$kendo-picker-flat-borderColor$kendo-picker-borderrgba(0, 0, 0, 0.38)
Description
The border color of the flat Picker components.
+
$kendo-picker-flat-hover-bgNullnullnull
Description
The background color of the flat hovered Picker components.
+
$kendo-picker-flat-hover-textNullnullnull
Description
The text color of the flat hovered Picker components.
+
$kendo-picker-flat-focus-bgNullnullnull
Description
The background color of the flat focused Picker components.
+
$kendo-picker-flat-focus-textNullnullnull
Description
The text color of the flat focused Picker components.
+
$kendo-picker-flat-focus-borderColor$kendo-picker-focus-border#3f51b5
Description
The border color of the flat focused Picker components.
+
$kendo-picker-flat-focus-shadowNullnullnull
Description
The shadow of the flat focused Picker components.
+
$kendo-picker-flat-hover-focus-bgNullnullnull
Description
The background color of the flat hovered and focused Picker components.
+
$kendo-picker-flat-hover-focus-textNullnullnull
Description
The text color of the flat hovered and focused Picker components.
+
$kendo-picker-flat-hover-focus-borderNullnullnull
Description
The border color of the flat hovered and focused Picker components.
+
+ +### Pickers + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-picker-flat-hover-borderColor$kendo-picker-hover-borderrgba(0, 0, 0, 0.87)
Description
The border color of the flat hovered Picker components.
+
+ +### Popover + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-popover-border-widthNumber1px1px
Description
The width of the border around the Popover.
+
$kendo-popover-border-styleStringsolidsolid
Description
The style of the border around the Popover.
+
$kendo-popover-border-radiusNumber$kendo-card-border-radius4px
Description
The radius of the border around the Popover.
+
$kendo-popover-font-familyList$kendo-card-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the Popover.
+
$kendo-popover-font-sizeNumber$kendo-card-font-size14px
Description
The font size of the Popover.
+
$kendo-popover-line-heightNumber$kendo-card-line-height1.4285714286
Description
The line height of the Popover.
+
$kendo-popover-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the Popover.
+
$kendo-popover-bgColor$kendo-component-bg#ffffff
Description
The background color of the Popover.
+
$kendo-popover-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the Popover.
+
$kendo-popover-shadowString$kendo-card-shadowvar(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))
Description
The box shadow of the Popover.
+
$kendo-popover-header-padding-xNumber$kendo-card-header-padding-x16px
Description
The horizontal padding of the Popover header.
+
$kendo-popover-header-padding-yNumber$kendo-card-header-padding-y12px
Description
The vertical padding of the Popover header.
+
$kendo-popover-header-border-widthNumber$kendo-card-header-border-width1px
Description
The border width of the Popover header.
+
$kendo-popover-header-border-styleString$kendo-popover-border-stylesolid
Description
The border style of the Popover header.
+
$kendo-popover-header-textNull$kendo-card-header-textnull
Description
The text color of the Popover header.
+
$kendo-popover-header-bgNull$kendo-card-header-bgnull
Description
The background color of the Popover header.
+
$kendo-popover-header-borderColor$kendo-card-header-borderrgba(0, 0, 0, 0.12)
Description
The border color of the Popover header.
+
$kendo-popover-body-padding-xNumber$kendo-card-body-padding-x16px
Description
The horizontal padding of the Popover body.
+
$kendo-popover-body-padding-yNumber$kendo-card-body-padding-y16px
Description
The vertical padding of the Popover body.
+
$kendo-popover-actions-border-widthNumber$kendo-popover-border-width1px
Description
The border width of the Popover actions.
+
$kendo-popover-callout-widthNumber$kendo-card-callout-width20px
Description
The width of the Popover callout.
+
$kendo-popover-callout-heightNumber$kendo-card-callout-height20px
Description
The height of the Popover callout.
+
$kendo-popover-callout-border-widthNumber$kendo-popover-border-width1px
Description
The border width of the Popover callout.
+
$kendo-popover-callout-border-styleString$kendo-popover-border-stylesolid
Description
The border style of the Popover callout.
+
$kendo-popover-callout-bgColor$kendo-popover-bg#ffffff
Description
The background color of the Popover callout.
+
$kendo-popover-callout-borderColor$kendo-popover-borderrgba(0, 0, 0, 0.12)
Description
The border color of the Popover callout.
+
+ +### Popup + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-popup-padding-xNullnullnull
Description
Horizontal padding of the popup.
+
$kendo-popup-padding-yNullnullnull
Description
Vertical padding of the popup.
+
$kendo-popup-border-widthNumber0px0px
Description
Width of the border around the popup.
+
$kendo-popup-border-radiusNullnullnull
Description
Border radius of the popup.
+
$kendo-popup-font-sizeNumber$kendo-font-size-md14px
Description
Font size of the popup.
+
$kendo-popup-line-heightNumber$kendo-line-height-md2
Description
Line height of the popup.
+
$kendo-popup-content-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
Horizontal padding of the popup content.
+
$kendo-popup-content-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
Vertical padding of the popup content.
+
$kendo-popup-bgColor$kendo-component-bg#ffffff
Description
Background color of the popup.
+
$kendo-popup-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
Text color of the popup.
+
$kendo-popup-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
Border color of the popup.
+
$kendo-popup-shadowString$box-shadow-depth-4var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))
Description
Box shadow of the popup.
+
+ +### Progressbar + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-progressbar-heightNumber5px5px
Description
The height of the ProgressBar.
+
$kendo-progressbar-horizontal-widthNumber100%100%
Description
The horizontal width of the ProgressBar.
+
$kendo-progressbar-animation-timingNullnullnull
Description
The animation timing of the ProgressBar.
+
$kendo-progressbar-border-widthNumber0px0px
Description
The width of the border around the ProgressBar.
+
$kendo-progressbar-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the ProgressBar.
+
$kendo-progressbar-font-sizeNumber$kendo-font-size-sm12px
Description
The font size of the ProgressBar.
+
$kendo-progressbar-line-heightNumber11
Description
The line height of the ProgressBar.
+
$kendo-progressbar-bgColorif($kendo-enable-color-system, k-color( primary-subtle ), k-try-tint( $kendo-color-primary, 8 ))#bac0e4
Description
The background color of the ProgressBar.
+
$kendo-progressbar-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the ProgressBar.
+
$kendo-progressbar-borderNullnullnull
Description
The border color of the ProgressBar.
+
$kendo-progressbar-gradientNullnullnull
Description
The background gradient of the ProgressBar.
+
$kendo-progressbar-value-bgColor$kendo-color-primary#3f51b5
Description
The progress background color of the ProgressBar.
+
$kendo-progressbar-value-textColor$kendo-color-primary-contrastwhite
Description
The progress text color of the ProgressBar.
+
$kendo-progressbar-value-borderNullnullnull
Description
The progress border color of the ProgressBar.
+
$kendo-progressbar-value-gradientNullnullnull
Description
The progress background gradient of the ProgressBar.
+
$kendo-progressbar-indeterminate-bgColor$kendo-progressbar-bg#bac0e4
Description
The background color of the indeterminate ProgressBar.
+
$kendo-progressbar-indeterminate-textColor$kendo-progressbar-textrgba(0, 0, 0, 0.87)
Description
The text color of the indeterminate ProgressBar.
+
$kendo-progressbar-indeterminate-borderNull$kendo-progressbar-bordernull
Description
The border color of the indeterminate ProgressBar.
+
$kendo-progressbar-indeterminate-gradientNullnullnull
Description
The background gradient of the indeterminate ProgressBar.
+
$kendo-progressbar-chunk-borderColor$kendo-component-bg#ffffff
Description
The border color of the chunk ProgressBar.
+
$kendo-circular-progressbar-arc-strokeColor$kendo-color-primary#3f51b5
Description
The arc stroke color of the circular ProgressBar.
+
$kendo-circular-progressbar-scale-strokeColor$kendo-progressbar-bg#bac0e4
Description
The scale stroke background color of the circular ProgressBar.
+
+ +### Prompt + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-prompt-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the Prompt.
+
$kendo-prompt-bgColor$kendo-component-bg#ffffff
Description
The background color of the Prompt.
+
$kendo-prompt-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the Prompt.
+
$kendo-prompt-header-textColor$kendo-component-header-textrgba(0, 0, 0, 0.87)
Description
The text color of the Prompt header.
+
$kendo-prompt-header-bgColor$kendo-component-bg#ffffff
Description
The background color of the Prompt header.
+
$kendo-prompt-header-borderColor$kendo-component-header-borderrgba(0, 0, 0, 0.08)
Description
The border color of the Prompt header.
+
$kendo-prompt-content-padding-yNumberk-map-get( $kendo-spacing, 4 )16px
Description
The vertical padding of the Prompt content.
+
$kendo-prompt-content-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the Prompt content.
+
$kendo-prompt-content-spacingNumberk-map-get( $kendo-spacing, 4 )16px
Description
The spacing between the items of the Prompt content.
+
$kendo-prompt-content-textColor$kendo-component-header-textrgba(0, 0, 0, 0.87)
Description
The text color of the Prompt content.
+
$kendo-prompt-content-bgColor$kendo-component-header-bg#ffffff
Description
The background color of the Prompt content.
+
$kendo-prompt-content-borderColor$kendo-component-header-borderrgba(0, 0, 0, 0.08)
Description
The text border of the Prompt content.
+
$kendo-prompt-expander-spacingNumberk-map-get( $kendo-spacing, 2 )8px
Description
The spacing between the items of the Prompt content expander.
+
$kendo-prompt-suggestion-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The vertical padding of the Prompt suggestion container.
+
$kendo-prompt-suggestion-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the Prompt suggestion container.
+
$kendo-prompt-suggestion-border-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the Prompt suggestion container.
+
$kendo-prompt-suggestion-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the Prompt suggestion container.
+
$kendo-prompt-suggestion-bgColor$kendo-body-bg#ffffff
Description
The background color of the Prompt suggestion container.
+
$kendo-prompt-suggestion-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the Prompt suggestion container.
+
$kendo-prompt-suggestion-shadowStringk-elevation(1)var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))
Description
The elevation of the Prompt suggestion container.
+
+ +### Radio + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-radio-radiusNumber50%50%
Description
The border radius of the RadioButton.
+
$kendo-radio-border-widthNumber2px2px
Description
The border width of the RadioButton.
+
$kendo-radio-sm-sizeNumberk-map-get( $kendo-spacing, 3 )12px
Description
The size of a small RadioButton.
+
$kendo-radio-md-sizeNumberk-map-get( $kendo-spacing, 4 )16px
Description
The size of a medium RadioButton.
+
$kendo-radio-lg-sizeNumberk-map-get( $kendo-spacing, 5 )20px
Description
The size of a large RadioButton.
+
$kendo-radio-sm-glyph-sizeNumberk-map-get( $kendo-spacing, 2.5 )10px
Description
The glyph size of a small RadioButton.
+
$kendo-radio-md-glyph-sizeNumberk-map-get( $kendo-spacing, 3.5 )14px
Description
The glyph size of a medium RadioButton.
+
$kendo-radio-lg-glyph-sizeNumberk-map-get( $kendo-spacing, 4.5 )18px
Description
The glyph size of a large RadioButton.
+
$kendo-radio-sm-ripple-sizeNumber300%300%
Description
The ripple size of a small RadioButton.
+
$kendo-radio-md-ripple-sizeNumber300%300%
Description
The ripple size of a medium RadioButton.
+
$kendo-radio-lg-ripple-sizeNumber300%300%
Description
The ripple size of a large RadioButton.
+
$kendo-radio-sizesMap( + sm: ( + size: $kendo-radio-sm-size, + glyph-size: $kendo-radio-sm-glyph-size, + ripple-size: $kendo-radio-sm-ripple-size + ), + md: ( + size: $kendo-radio-md-size, + glyph-size: $kendo-radio-md-glyph-size, + ripple-size: $kendo-radio-md-ripple-size + ), + lg: ( + size: $kendo-radio-lg-size, + glyph-size: $kendo-radio-lg-glyph-size, + ripple-size: $kendo-radio-lg-ripple-size + ) +)(sm: (size: 12px, glyph-size: 10px, ripple-size: 300%), md: (size: 16px, glyph-size: 14px, ripple-size: 300%), lg: (size: 20px, glyph-size: 18px, ripple-size: 300%))
Description
The map with the different RadioButton sizes.
+
$kendo-radio-bgNull$kendo-checkbox-bgnull
Description
The background color of the RadioButton.
+
$kendo-radio-textNull$kendo-checkbox-textnull
Description
The color of the RadioButton.
+
$kendo-radio-borderColor$kendo-checkbox-borderrgba(0, 0, 0, 0.54)
Description
The border color of the RadioButton.
+
$kendo-radio-hover-bgNullnullnull
Description
The background color of the hovered RadioButton.
+
$kendo-radio-hover-textNullnullnull
Description
The color of the hovered RadioButton.
+
$kendo-radio-hover-borderNullnullnull
Description
The border color of the hovered RadioButton.
+
$kendo-radio-checked-bgNullnullnull
Description
The background color of the checked RadioButton.
+
$kendo-radio-checked-textColor$kendo-color-primary#3f51b5
Description
The color of the checked RadioButton.
+
$kendo-radio-checked-borderColor$kendo-radio-checked-text#3f51b5
Description
The border color of the checked RadioButton.
+
$kendo-radio-focus-borderNull$kendo-checkbox-focus-bordernull
Description
The border color of the focused RadioButton.
+
$kendo-radio-focus-shadowNull$kendo-checkbox-focus-shadownull
Description
The box shadow of the focused RadioButton.
+
$kendo-radio-focus-checked-borderNull$kendo-checkbox-focus-checked-bordernull
Description
The border color of the focused and checked RadioButton.
+
$kendo-radio-focus-checked-shadowNull$kendo-checkbox-focus-checked-shadownull
Description
The box shadow of the focused and checked RadioButton.
+
$kendo-radio-disabled-bgNullnullnull
Description
The background color of the disabled RadioButton.
+
$kendo-radio-disabled-textNullnullnull
Description
The color of the disabled RadioButton.
+
$kendo-radio-disabled-borderColor$kendo-checkbox-disabled-border#adadad
Description
The border color of the disabled RadioButton.
+
$kendo-radio-disabled-checked-bgNullnullnull
Description
The background color of the disabled and checked RadioButton.
+
$kendo-radio-disabled-checked-textColor$kendo-radio-disabled-border#adadad
Description
The color of the disabled and checked RadioButton.
+
$kendo-radio-disabled-checked-borderColor$kendo-radio-disabled-border#adadad
Description
The border color of disabled and checked RadioButton.
+
$kendo-radio-invalid-bgNull$kendo-checkbox-invalid-bgnull
Description
The background color of the invalid RadioButton.
+
$kendo-radio-invalid-textColor$kendo-checkbox-invalid-text#f31700
Description
The color of the invalid RadioButton.
+
$kendo-radio-invalid-borderColor$kendo-checkbox-invalid-border#f31700
Description
The border color of the invalid RadioButton.
+
$kendo-radio-indicator-typeStringimageimage
Description
The type of the RadioButton indicator.
+
$kendo-radio-glyph-font-familyList"WebComponentsIcons", monospace"WebComponentsIcons", monospace
Description
The font family of the RadioButton indicator glyph.
+
$kendo-radio-checked-glyphString"\e308""\e308"
Description
The glyph of the RadioButton indicator.
+
$kendo-radio-checked-imageStringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='%233f51b5'/%3e%3c/svg%3e")
Description
The image of the checked RadioButton indicator.
+
$kendo-radio-disabled-checked-imageStringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='%23adadad'/%3e%3c/svg%3e")
Description
The image of the disabled and checked RadioButton indicator.
+
$kendo-radio-label-margin-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal margin of the RadioButton inside of a label.
+
$kendo-radio-list-spacingNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal list item margin of the RadioButton.
+
$kendo-radio-list-item-padding-xNumber0px0px
Description
The horizontal list item padding of the RadioButton.
+
$kendo-radio-list-item-padding-yNumber$kendo-list-md-item-padding-y8px
Description
The vertical list item padding of the RadioButton.
+
$kendo-radio-ripple-bgColor$kendo-color-primary#3f51b5
Description
The background color of the RadioButton ripple..
+
$kendo-radio-ripple-opacityNumber.20.2
Description
The opacity of the RadioButton ripple.
+
+ +### Rating + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-rating-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the Rating.
+
$kendo-rating-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Rating.
+
$kendo-rating-line-heightNumber$kendo-line-height-md2
Description
The line height of the Rating.
+
$kendo-rating-container-margin-xNumberk-math-div( $kendo-padding-sm-x, 2 )4px
Description
The horizontal margin of the Rating container.
+
$kendo-rating-item-padding-xNumberk-math-div( $kendo-padding-sm-x, 2 )4px
Description
The horizontal padding of the Rating item.
+
$kendo-rating-item-padding-yNumber$kendo-padding-md-y4px
Description
The vertical padding of the Rating item.
+
$kendo-rating-label-margin-xNumber$kendo-padding-sm-x8px
Description
The horizontal margin of the Rating label.
+
$kendo-rating-label-margin-yNumber$kendo-padding-md-y4px
Description
The vertical margin of the Rating label.
+
$kendo-rating-label-line-heightNumber$kendo-line-height-lg1.5
Description
The line height of the Rating label.
+
$kendo-rating-icon-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
The text color of the Rating icon.
+
$kendo-rating-icon-selected-textColor$kendo-color-primary-darker#303f9f
Description
The text color of the selected Rating icon.
+
$kendo-rating-icon-hover-textColor$kendo-color-primary-darker#303f9f
Description
The text color of the hovered Rating icon.
+
$kendo-rating-icon-focus-textColor$kendo-color-primary-darker#303f9f
Description
The text color of the focused Rating icon.
+
$kendo-rating-icon-focus-shadowList0 2px 4px rgba( black, .1 )0 2px 4px rgba(0, 0, 0, 0.1)
Description
The shadow of the focused Rating icon.
+
$kendo-rating-icon-focus-selected-shadowList0 2px 4px rgba( black, .1)0 2px 4px rgba(0, 0, 0, 0.1)
Description
The shadow of the focused and selected Rating icon.
+
+ +### Scrollview + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + - - - - - + + + + - - + - + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-scrollview-border-widthNumber1px1px
Description
The width of the border around the ScrollView.
+
$kendo-scrollview-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the ScrollView.
$kendo-picker-outline-hover-focus-borderNullnullnull$kendo-scrollview-font-sizeNumber$kendo-font-size-md14px
Description
The border color of the outline hovered and focused Picker components.
+
Description
The font size of the ScrollView.
$kendo-picker-flat-bgNullnullnull$kendo-scrollview-line-heightNumber$kendo-line-height-md2
Description
The background color of the flat Picker components.
+
Description
The line height of the ScrollView.
$kendo-picker-flat-text$kendo-scrollview-text Color$kendo-picker-text$kendo-component-text rgba(0, 0, 0, 0.87)
Description
The text color of the flat Picker components.
+
Description
The text color of the ScrollView.
$kendo-picker-flat-border$kendo-scrollview-bg Color$kendo-picker-borderrgba(0, 0, 0, 0.38)$kendo-component-bg#ffffff
Description
The border color of the flat Picker components.
+
Description
The background color of the ScrollView.
$kendo-picker-flat-hover-bgNullnullnull$kendo-scrollview-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The background color of the flat hovered Picker components.
+
Description
The border color of the ScrollView.
$kendo-picker-flat-hover-textNullnullnull$kendo-scrollview-pagebutton-sizeNumber10px10px
Description
The text color of the flat hovered Picker components.
+
Description
The size of the ScrollView page button.
$kendo-picker-flat-focus-bgNullnullnull$kendo-scrollview-pagebutton-bgColor$kendo-button-bg#ffffff
Description
The background color of the flat focused Picker components.
+
Description
The background color of the ScrollView page button.
$kendo-picker-flat-focus-textNullnullnull$kendo-scrollview-pagebutton-borderColor$kendo-button-border#ffffff
Description
The text color of the flat focused Picker components.
+
Description
The border color of the ScrollView page button.
$kendo-picker-flat-focus-border$kendo-scrollview-pagebutton-primary-bg Color$kendo-picker-focus-border$kendo-color-primary #3f51b5
Description
The border color of the flat focused Picker components.
+
Description
The primary background color of the ScrollView page button.
$kendo-picker-flat-focus-shadowNullnullnull$kendo-scrollview-pagebutton-primary-borderColor$kendo-color-primary#3f51b5
Description
The shadow of the flat focused Picker components.
+
Description
The primary border color of the ScrollView page button.
$kendo-picker-flat-hover-focus-bgNullnullnull$kendo-scrollview-pagebutton-shadowList0 0 0 2px rgba( black, .13 )0 0 0 2px rgba(0, 0, 0, 0.13)
Description
The background color of the flat hovered and focused Picker components.
+
Description
The box shadow of the ScrollView page button.
$kendo-picker-flat-hover-focus-textNullnullnull$kendo-scrollview-pager-offsetNumber00
Description
The text color of the flat hovered and focused Picker components.
+
Description
The offset of the ScrollView pager.
$kendo-picker-flat-hover-focus-borderNullnullnull$kendo-scrollview-pager-item-spacingNumber20px20px
Description
The border color of the flat hovered and focused Picker components.
+
Description
The spacing between the ScrollView pager items.
- -### Pickers - - - - - - - - - - - - - - - - - - - - - + + + + + - - -
NameTypeDefault valueComputed value
$kendo-picker-flat-hover-borderColor$kendo-picker-hover-borderrgba(0, 0, 0, 0.87)
$kendo-scrollview-pager-item-border-widthNumber0px0px
Description
The border color of the flat hovered Picker components.
+
Description
The border width of the ScrollView pager items.
- -### Popover - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + + + + + + + + + + - - + + - - + - - + + - - + + + + + + + + + + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-popover-border-widthNumber1px1px
$kendo-scrollview-pager-heightCalculationcalc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + #{$kendo-scrollview-pager-item-spacing * 2} )calc(10px + 0px + 40px)
Description
The width of the border around the Popover.
+
Description
The height of the ScrollView pager.
$kendo-popover-border-styleStringsolidsolid$kendo-scrollview-arrow-tap-highlight-colorColor$kendo-color-rgba-transparentrgba(0, 0, 0, 0)
Description
The style of the border around the Popover.
+
Description
The text color of the highlight over the tapped ScrollView navigation arrows.
$kendo-popover-border-radiusNumber$kendo-card-border-radius4px$kendo-scrollview-navigation-colorColorwhitewhite
Description
The radius of the border around the Popover.
+
Description
The color of the ScrollView navigation arrows.
$kendo-popover-font-family$kendo-scrollview-navigation-icon-shadow List$kendo-card-font-familyRoboto, "Helvetica Neue", sans-serifrgba( black, .3 ) 0 0 15pxrgba(0, 0, 0, 0.3) 0 0 15px
Description
The font family of the Popover.
+
Description
The box shadow of the ScrollView navigation arrows.
$kendo-popover-font-size$kendo-scrollview-navigation-bgColorrgba( black, 0 )rgba(0, 0, 0, 0)
Description
The background color of the ScrollView navigation.
+
$kendo-scrollview-navigation-default-opacity Number$kendo-card-font-size14px.70.7
Description
The font size of the Popover.
+
Description
The opacity of the ScrollView navigation.
$kendo-popover-line-height$kendo-scrollview-navigation-hover-opacity Number$kendo-card-line-height1.428571428611
Description
The line height of the Popover.
+
Description
The hover opacity of the ScrollView navigation.
$kendo-popover-text$kendo-scrollview-navigation-hover-span-bgNullnullnull
Description
The hover background color of the ScrollView navigation arrows.
+
$kendo-scrollview-light-bg Color$kendo-component-textrgba(0, 0, 0, 0.87)rgba( white, .4 )rgba(255, 255, 255, 0.4)
Description
The text color of the Popover.
+
Description
The background color of the ScrollView pager in light mode.
$kendo-popover-bg$kendo-scrollview-dark-bg Color$kendo-component-bg#ffffffrgba( black, .4 )rgba(0, 0, 0, 0.4)
Description
The background color of the Popover.
+
Description
The background color of the ScrollView pager in dark mode.
$kendo-popover-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)$kendo-scrollview-transition-durationNumber.3s0.3s
Description
The border color of the Popover.
+
Description
The duration of the ScrollView transition.
$kendo-popover-shadow$kendo-scrollview-transition-timing-function String$kendo-card-shadowvar(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))ease-in-outease-in-out
Description
The box shadow of the Popover.
+
Description
The timing function of the ScrollView transition.
$kendo-popover-header-padding-xNumber$kendo-card-header-padding-x16px
+ +### Shadows + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - + +
NameTypeDefault valueComputed value
$box-shadow-depth-1Stringk-elevation(1)var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))
Description
The horizontal padding of the Popover header.
+
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for switch.
Equivalent to material elevation 1.
$kendo-popover-header-padding-yNumber$kendo-card-header-padding-y12px$box-shadow-depth-2Stringk-elevation(2)var(--kendo-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14))
Description
The vertical padding of the Popover header.
+
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for resting state of button, card and other widgets.
Equivalent to material elevation 2.
$kendo-popover-header-border-widthNumber$kendo-card-header-border-width1px$box-shadow-depth-3Stringk-elevation(3)var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The border width of the Popover header.
+
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for menu, popups and raised state of button and card.
Equivalent to material elevation 3.
$kendo-popover-header-border-style$box-shadow-depth-4 String$kendo-popover-border-stylesolidk-elevation(4)var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))
Description
The border style of the Popover header.
+
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for drawers and other overlaying elements.
Equivalent to material elevation 4.
$kendo-popover-header-textNull$kendo-card-header-textnull$box-shadow-depth-5Stringk-elevation(5)var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))
Description
The text color of the Popover header.
+
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for window and dialog.
Equivalent to material elevation 6.
$kendo-popover-header-bgNull$kendo-card-header-bgnull$box-shadow-depth-6Stringk-elevation(6)var(--kendo-elevation-6, 0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px 0px rgba(0, 0, 0, 0.14))
Description
The background color of the Popover header.
+
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for window and dialog.
Equivalent to material elevation 8.
$kendo-popover-header-borderColor$kendo-card-header-borderrgba(0, 0, 0, 0.12)$box-shadow-depth-7Stringk-elevation(7)var(--kendo-elevation-7, 0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14))
Description
The border color of the Popover header.
+
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for window and dialog.
Equivalent to material elevation 12.
$kendo-popover-body-padding-xNumber$kendo-card-body-padding-x16px$box-shadow-depth-8Stringk-elevation(8)var(--kendo-elevation-8, 0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14))
Description
The horizontal padding of the Popover body.
+
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for window and dialog.
Equivalent to material elevation 16.
$kendo-popover-body-padding-yNumber$kendo-card-body-padding-y16px$box-shadow-depth-9Stringk-elevation(9)var(--kendo-elevation-9, 0px 11px 15px rgba(0, 0, 0, 0.2), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14))
Description
The vertical padding of the Popover body.
+
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for window and dialog.
Equivalent to material elevation 24.
$kendo-popover-actions-border-widthNumber$kendo-popover-border-width1px$elevationColork-map-get( $theme, elevation )#000000
Description
The border width of the Popover actions.
+
Description
Color of shadows
$kendo-popover-callout-widthNumber$kendo-card-callout-width20px
+ +### Skeleton + + + + + + + + + + + + + + + + + + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + -
NameTypeDefault valueComputed value
$kendo-skeleton-text-transformStringscale( 1, .6 )scale(1, 0.6)
Description
The width of the Popover callout.
+
Description
The transform scale of the Skeleton text.
$kendo-popover-callout-height$kendo-skeleton-text-border-radius Number$kendo-card-callout-height20px$kendo-border-radius-md4px
Description
The height of the Popover callout.
+
Description
The border radius of the Skeleton text.
$kendo-popover-callout-border-width$kendo-skeleton-rect-border-radius Number$kendo-popover-border-width1px00
Description
The border width of the Popover callout.
+
Description
The border radius of the rectangular Skeleton.
$kendo-popover-callout-border-styleString$kendo-popover-border-stylesolid$kendo-skeleton-circle-border-radiusNumber9999px9999px
Description
The border style of the Popover callout.
+
Description
The border radius of the circular Skeleton.
$kendo-popover-callout-bg$kendo-skeleton-item-bg Color$kendo-popover-bg#ffffffif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), rgba( $kendo-color-inverse, .2 ))rgba(66, 66, 66, 0.2)
Description
The background color of the Popover callout.
+
Description
The background color of the Skeleton item.
$kendo-popover-callout-border$kendo-skeleton-wave-bg Color$kendo-popover-borderrgba(0, 0, 0, 0.12)rgba( black, .04 )rgba(0, 0, 0, 0.04)
Description
The border color of the Popover callout.
+
Description
The background color of the Skeleton wave animation.
-### Popup +### Split-button @@ -12677,129 +15483,99 @@ The following table lists the available variables for customizing the Material t - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + -
$kendo-popup-padding-xNullnullnull
Description
Horizontal padding of the popup.
-
$kendo-popup-padding-yNullnullnull
Description
Vertical padding of the popup.
-
$kendo-popup-border-widthNumber0px0px
Description
Width of the border around the popup.
-
$kendo-popup-border-radius$kendo-split-button-focus-shadow Nullnull$kendo-button-focus-shadow null
Description
Border radius of the popup.
+
Description
The focus shadow of the SplitButton.
$kendo-popup-font-size$kendo-split-button-arrow-padding-x Number$kendo-font-size-md14pxk-map-get( $kendo-spacing, 1 )4px
Description
Font size of the popup.
+
Description
The horizontal padding of the arrow Button.
$kendo-popup-line-height$kendo-split-button-sm-arrow-padding-x Number$kendo-line-height-md2k-map-get( $kendo-spacing, 1 )4px
Description
Line height of the popup.
+
Description
The horizontal padding of the small arrow Button.
$kendo-popup-content-padding-x$kendo-split-button-md-arrow-padding-x Numberk-map-get( $kendo-spacing, 2 )8pxk-map-get( $kendo-spacing, 1 )4px
Description
Horizontal padding of the popup content.
+
Description
The horizontal padding of the medium arrow Button.
$kendo-popup-content-padding-y$kendo-split-button-lg-arrow-padding-x Numberk-map-get( $kendo-spacing, 2 )8pxk-map-get( $kendo-spacing, 1 )4px
Description
Vertical padding of the popup content.
+
Description
The horizontal padding of the large arrow Button.
$kendo-popup-bgColor$kendo-component-bg#ffffff$kendo-split-button-arrow-padding-yNumber$kendo-button-padding-y8px
Description
Background color of the popup.
+
Description
The vertical padding of the arrow Button.
$kendo-popup-textColor$kendo-component-textrgba(0, 0, 0, 0.87)$kendo-split-button-sm-arrow-padding-yNumber$kendo-button-sm-padding-y6px
Description
Text color of the popup.
+
Description
The vertical padding of the small arrow Button.
$kendo-popup-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)$kendo-split-button-md-arrow-padding-yNumber$kendo-button-md-padding-y8px
Description
Border color of the popup.
+
Description
The vertical padding of the medium arrow Button.
$kendo-popup-shadowString$box-shadow-depth-4var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))$kendo-split-button-lg-arrow-padding-yNumber$kendo-button-lg-padding-y10px
Description
Box shadow of the popup.
+
Description
The vertical padding of the large arrow Button.
-### Progressbar +### Splitter @@ -12817,935 +15593,899 @@ The following table lists the available variables for customizing the Material t - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - + + - - + - - + - - + + - - + - - + + - - + - - + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + - - + + -
$kendo-progressbar-heightNumber5px5px
Description
The height of the ProgressBar.
-
$kendo-progressbar-horizontal-widthNumber100%100%
Description
The horizontal width of the ProgressBar.
-
$kendo-progressbar-animation-timingNullnullnull
Description
The animation timing of the ProgressBar.
-
$kendo-progressbar-border-width$kendo-splitter-border-width Number0px0px1px1px
Description
The width of the border around the ProgressBar.
+
Description
The width of the border around the Splitter.
$kendo-progressbar-font-family$kendo-splitter-font-family List $kendo-font-family Roboto, "Helvetica Neue", sans-serif
Description
The font family of the ProgressBar.
+
Description
The font family of the Splitter.
$kendo-progressbar-font-size$kendo-splitter-font-size Number$kendo-font-size-sm12px$kendo-font-size-md14px
Description
The font size of the ProgressBar.
+
Description
The font size of the Splitter.
$kendo-progressbar-line-height$kendo-splitter-line-height Number11$kendo-line-height-md2
Description
The line height of the ProgressBar.
+
Description
The line height of the Splitter.
$kendo-progressbar-bg$kendo-splitter-bg Colorif($kendo-enable-color-system, k-color( primary-subtle ), k-try-tint( $kendo-color-primary, 8 ))#bac0e4$kendo-component-bg#ffffff
Description
The background color of the ProgressBar.
+
Description
The background color of the Splitter.
$kendo-progressbar-text$kendo-splitter-text Color $kendo-component-text rgba(0, 0, 0, 0.87)
Description
The text color of the ProgressBar.
+
Description
The text color of the Splitter.
$kendo-progressbar-borderNullnullnull$kendo-splitter-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the ProgressBar.
+
Description
The border color of the Splitter.
$kendo-progressbar-gradientNullnullnull$kendo-splitter-splitbar-sizeNumberk-map-get( $kendo-spacing, 3 )12px
Description
The background gradient of the ProgressBar.
+
Description
The size of the Splitter splitbar.
$kendo-progressbar-value-bgColor$kendo-color-primary#3f51b5$kendo-splitter-drag-handle-lengthNumber20px20px
Description
The progress background color of the ProgressBar.
+
Description
The length of the Splitter drag handle.
$kendo-progressbar-value-textColor$kendo-color-primary-contrastwhite$kendo-splitter-drag-handle-thicknessNumber2px2px
Description
The progress text color of the ProgressBar.
+
Description
The thickness of the Splitter drag handle.
$kendo-progressbar-value-borderNullnullnull$kendo-splitter-drag-icon-marginNumber7px7px
Description
The progress border color of the ProgressBar.
+
Description
The margin of the Splitter drag handle icon.
$kendo-progressbar-value-gradient$kendo-splitter-collapse-icon-padding-x Null null null
Description
The progress background gradient of the ProgressBar.
+
Description
The horizontal padding of the collapse icon in the Splitter.
$kendo-progressbar-indeterminate-bgColor$kendo-progressbar-bg#bac0e4$kendo-splitter-collapse-icon-padding-yNumberk-map-get( $kendo-spacing, .5 )2px
Description
The background color of the indeterminate ProgressBar.
+
Description
The vertical padding of the collapse icon in the Splitter.
$kendo-progressbar-indeterminate-text$kendo-splitbar-bg Color$kendo-progressbar-textrgba(0, 0, 0, 0.87)if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-splitter-bg, 1 ))#ebebeb
Description
The text color of the indeterminate ProgressBar.
+
Description
The background color of the Splitter splitbar.
$kendo-progressbar-indeterminate-borderNull$kendo-progressbar-bordernull$kendo-splitbar-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
The border color of the indeterminate ProgressBar.
+
Description
The text color of the Splitter splitbar.
$kendo-progressbar-indeterminate-gradientNullnullnull$kendo-splitbar-hover-bgColorif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-splitbar-bg, .5 ))#e2e2e2
Description
The background gradient of the indeterminate ProgressBar.
+
Description
The hover background color of the Splitter splitbar.
$kendo-progressbar-chunk-border$kendo-splitbar-hover-text Color$kendo-component-bg#ffffff$kendo-splitbar-textrgba(0, 0, 0, 0.54)
Description
The border color of the chunk ProgressBar.
+
Description
The hover text color of the Splitter splitbar.
$kendo-circular-progressbar-arc-stroke$kendo-splitbar-selected-bg Color $kendo-color-primary #3f51b5
Description
The arc stroke color of the circular ProgressBar.
+
Description
The selected background color of the Splitter splitbar.
$kendo-circular-progressbar-scale-stroke$kendo-splitbar-selected-text Color$kendo-progressbar-bg#bac0e4$kendo-color-primary-contrastwhite
Description
The scale stroke background color of the circular ProgressBar.
+
Description
The selected text color of the Splitter splitbar.
-### Prompt +### Stepper - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
NameTypeDefault valueComputed value
$kendo-prompt-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the Prompt.
-
$kendo-prompt-bgColor$kendo-component-bg#ffffff
Description
The background color of the Prompt.
-
$kendo-prompt-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
+ + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - - - - - - -
NameTypeDefault valueComputed value
$kendo-stepper-margin-xNullnullnull
Description
The border color of the Prompt.
+
Description
The horizontal margin the Stepper.
$kendo-prompt-header-textColor$kendo-component-header-textrgba(0, 0, 0, 0.87)$kendo-stepper-margin-yNullnullnull
Description
The text color of the Prompt header.
+
Description
The vertical margin the Stepper.
$kendo-prompt-header-bgColor$kendo-component-bg#ffffff$kendo-stepper-padding-xNullnullnull
Description
The background color of the Prompt header.
+
Description
The horizontal padding the Stepper.
$kendo-prompt-header-borderColor$kendo-component-header-borderrgba(0, 0, 0, 0.08)$kendo-stepper-padding-yNullnullnull
Description
The border color of the Prompt header.
+
Description
The vertical padding the Stepper.
$kendo-prompt-content-padding-y$kendo-stepper-label-margin-x Numberk-map-get( $kendo-spacing, 4 )16px12px12px
Description
The vertical padding of the Prompt content.
+
Description
The horizontal margin the Stepper label.
$kendo-prompt-content-padding-x$kendo-stepper-label-padding-x Numberk-map-get( $kendo-spacing, 4 )16px12px12px
Description
The horizontal padding of the Prompt content.
+
Description
The horizontal padding the Stepper label.
$kendo-prompt-content-spacing$kendo-stepper-label-padding-y Numberk-map-get( $kendo-spacing, 4 )16px5px5px
Description
The spacing between the items of the Prompt content.
+
Description
The vertical padding the Stepper label.
$kendo-prompt-content-textColor$kendo-component-header-textrgba(0, 0, 0, 0.87)$kendo-stepper-border-widthNumber0px0px
Description
The text color of the Prompt content.
+
Description
The width of the border around the Stepper.
$kendo-prompt-content-bgColor$kendo-component-header-bg#ffffff$kendo-stepper-inline-content-padding-xNumber20px20px
Description
The background color of the Prompt content.
+
Description
The horizontal padding the Stepper content.
$kendo-prompt-content-borderColor$kendo-component-header-borderrgba(0, 0, 0, 0.08)$kendo-stepper-inline-content-padding-yNumber10px10px
Description
The text border of the Prompt content.
+
Description
The vertical padding the Stepper content.
$kendo-prompt-expander-spacing$kendo-stepper-font-size Numberk-map-get( $kendo-spacing, 2 )8px$kendo-font-size-md14px
Description
The spacing between the items of the Prompt content expander.
+
$kendo-prompt-suggestion-padding-y$kendo-stepper-line-height Numberk-map-get( $kendo-spacing, 2 )8pxk-math-div( 20, 14 )1.4285714286
Description
The vertical padding of the Prompt suggestion container.
+
$kendo-prompt-suggestion-padding-xNumberk-map-get( $kendo-spacing, 2 )8px$kendo-stepper-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The horizontal padding of the Prompt suggestion container.
+
$kendo-prompt-suggestion-border-radiusNumber$kendo-border-radius-md4px$kendo-stepper-bgNullnullnull
Description
The border radius of the Prompt suggestion container.
+
Description
The background color of the Stepper.
$kendo-prompt-suggestion-text$kendo-stepper-text Color $kendo-component-text rgba(0, 0, 0, 0.87)
Description
The text color of the Prompt suggestion container.
+
Description
The text color of the Stepper.
$kendo-prompt-suggestion-bgColor$kendo-body-bg#ffffff$kendo-stepper-borderNullnullnull
Description
The background color of the Prompt suggestion container.
+
Description
The border color of the Stepper.
$kendo-prompt-suggestion-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)$kendo-stepper-indicator-widthNumber28px28px
Description
The border color of the Prompt suggestion container.
+
Description
The width of the Stepper indicator.
$kendo-prompt-suggestion-shadowStringk-elevation(1)var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))
Description
The elevation of the Prompt suggestion container.
-
- -### Radio - - - - - - - - - - - - - - - - - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - + - + - - + - - + + - - + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + - - + - - + + - - + - + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - + - + - - - - - + + + + - - + - - + + - - + + + + + + + + + + - - + - - + + - - + - - + + - - + - + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-radio-radius$kendo-stepper-indicator-height Number50%50%$kendo-stepper-indicator-width28px
Description
The border radius of the RadioButton.
+
Description
The height of the Stepper indicator.
$kendo-radio-border-width$kendo-stepper-indicator-border-radius Number2px2px50%50%
Description
The border width of the RadioButton.
+
Description
The border radius of the Stepper indicator.
$kendo-radio-sm-size$kendo-stepper-indicator-border-width Numberk-map-get( $kendo-spacing, 3 )12px1px1px
Description
The size of a small RadioButton.
+
Description
The border width of the Stepper indicator.
$kendo-radio-md-size$kendo-stepper-indicator-focus-border-width Numberk-map-get( $kendo-spacing, 4 )16px1px1px
Description
The size of a medium RadioButton.
+
Description
The border width of the focused Stepper indicator.
$kendo-radio-lg-size$kendo-stepper-indicator-focus-size Numberk-map-get( $kendo-spacing, 5 )20px2px2px
Description
The size of a large RadioButton.
+
Description
The size of the focused Stepper indicator.
$kendo-radio-sm-glyph-size$kendo-stepper-indicator-focus-offset Numberk-map-get( $kendo-spacing, 2.5 )10px3px3px
Description
The glyph size of a small RadioButton.
+
Description
The offset of the Stepper focused indicator.
$kendo-radio-md-glyph-sizeNumberk-map-get( $kendo-spacing, 3.5 )14px$kendo-stepper-indicator-focus-calc-offsetCalculationcalc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} )calc(1px + 3px)
Description
The glyph size of a medium RadioButton.
+
Description
The calculated offset of the focused Stepper indicator.
$kendo-radio-lg-glyph-sizeNumberk-map-get( $kendo-spacing, 4.5 )18px$kendo-stepper-indicator-bgColor$kendo-component-bg#ffffff
Description
The glyph size of a large RadioButton.
+
Description
The background color of the Stepper indicator.
$kendo-radio-sm-ripple-sizeNumber300%300%$kendo-stepper-indicator-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The ripple size of a small RadioButton.
+
Description
The text color of the Stepper indicator.
$kendo-radio-md-ripple-sizeNumber300%300%$kendo-stepper-indicator-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The ripple size of a medium RadioButton.
+
Description
The border color of the Stepper indicator.
$kendo-radio-lg-ripple-sizeNumber300%300%$kendo-stepper-indicator-hover-bgColorif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-stepper-indicator-bg ))#ebebeb
Description
The ripple size of a large RadioButton.
+
Description
The background color of the hovered Stepper indicator.
$kendo-radio-sizesMap( - sm: ( - size: $kendo-radio-sm-size, - glyph-size: $kendo-radio-sm-glyph-size, - ripple-size: $kendo-radio-sm-ripple-size - ), - md: ( - size: $kendo-radio-md-size, - glyph-size: $kendo-radio-md-glyph-size, - ripple-size: $kendo-radio-md-ripple-size - ), - lg: ( - size: $kendo-radio-lg-size, - glyph-size: $kendo-radio-lg-glyph-size, - ripple-size: $kendo-radio-lg-ripple-size - ) -)(sm: (size: 12px, glyph-size: 10px, ripple-size: 300%), md: (size: 16px, glyph-size: 14px, ripple-size: 300%), lg: (size: 20px, glyph-size: 18px, ripple-size: 300%))$kendo-stepper-indicator-hover-textNullnullnull
Description
The map with the different RadioButton sizes.
+
Description
The text color of the hovered Stepper indicator.
$kendo-radio-bg$kendo-stepper-indicator-hover-border Null$kendo-checkbox-bgnull null
Description
The background color of the RadioButton.
+
Description
The border color of the hovered Stepper indicator.
$kendo-radio-text$kendo-stepper-indicator-disabled-bg Null$kendo-checkbox-textnull null
Description
The color of the RadioButton.
+
Description
The background color of the disabled Stepper indicator.
$kendo-radio-border$kendo-stepper-indicator-disabled-text Color$kendo-checkbox-borderrgba(0, 0, 0, 0.54)if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .32 ), $kendo-disabled-text)rgba(0, 0, 0, 0.38)
Description
The border color of the RadioButton.
+
Description
The text color of the disabled Stepper indicator.
$kendo-radio-hover-bg$kendo-stepper-indicator-disabled-border Null null null
Description
The background color of the hovered RadioButton.
+
Description
The border color of the disabled Stepper indicator.
$kendo-radio-hover-textNullnullnull$kendo-stepper-indicator-done-bgColor$kendo-color-primary#3f51b5
Description
The color of the hovered RadioButton.
+
Description
The background color of the Stepper done indicator.
$kendo-radio-hover-border$kendo-stepper-indicator-done-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg ))white
Description
The text color of the Stepper done indicator.
+
$kendo-stepper-indicator-done-borderColor$kendo-stepper-indicator-done-bg#3f51b5
Description
The border color of the Stepper done indicator.
+
$kendo-stepper-indicator-done-hover-bgColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg ))#3a4ba7
Description
The background color of the hovered Stepper done indicator.
+
$kendo-stepper-indicator-done-hover-text Null null null
Description
The border color of the hovered RadioButton.
+
Description
The text color of the hovered Stepper done indicator.
$kendo-radio-checked-bg$kendo-stepper-indicator-done-hover-border Null null null
Description
The background color of the checked RadioButton.
+
Description
The border color of the hovered Stepper done indicator.
$kendo-radio-checked-text$kendo-stepper-indicator-done-disabled-bg Color$kendo-color-primary#3f51b5if($kendo-enable-color-system, rgba( k-color( primary, true ), .6 ), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%))#8c97d3
Description
The color of the checked RadioButton.
+
Description
The background color of the disabled Stepper done indicator.
$kendo-radio-checked-border$kendo-stepper-indicator-done-disabled-text Color$kendo-radio-checked-textif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg ))white
Description
The text color of the disabled Stepper done indicator.
+
$kendo-stepper-indicator-done-disabled-borderColor$kendo-stepper-indicator-done-disabled-bg#8c97d3
Description
The border color of the disabled Stepper done indicator.
+
$kendo-stepper-indicator-current-bgColor$kendo-stepper-indicator-done-bg #3f51b5
Description
The border color of the checked RadioButton.
+
Description
The background color of the Stepper current indicator.
$kendo-radio-focus-borderNull$kendo-checkbox-focus-bordernull$kendo-stepper-indicator-current-textColor$kendo-stepper-indicator-done-textwhite
Description
The border color of the focused RadioButton.
+
Description
The text color of the Stepper current indicator.
$kendo-radio-focus-shadowNull$kendo-checkbox-focus-shadownull$kendo-stepper-indicator-current-borderColor$kendo-stepper-indicator-done-border#3f51b5
Description
The box shadow of the focused RadioButton.
+
Description
The border color of the Stepper current indicator.
$kendo-radio-focus-checked-borderNull$kendo-checkbox-focus-checked-bordernull$kendo-stepper-indicator-current-hover-bgColor$kendo-stepper-indicator-done-hover-bg#3a4ba7
Description
The border color of the focused and checked RadioButton.
+
Description
The background color of the hovered Stepper current indicator.
$kendo-radio-focus-checked-shadow$kendo-stepper-indicator-current-hover-text Null$kendo-checkbox-focus-checked-shadow$kendo-stepper-indicator-done-hover-text null
Description
The box shadow of the focused and checked RadioButton.
+
Description
The text color of the hovered Stepper current indicator.
$kendo-radio-disabled-bg$kendo-stepper-indicator-current-hover-border Nullnull$kendo-stepper-indicator-done-hover-border null
Description
The background color of the disabled RadioButton.
+
Description
The border color of the hovered Stepper current indicator.
$kendo-radio-disabled-textNullnullnull$kendo-stepper-indicator-current-disabled-bgColor$kendo-stepper-indicator-done-disabled-bg#8c97d3
Description
The color of the disabled RadioButton.
+
Description
The background color of the disabled Stepper current indicator.
$kendo-radio-disabled-border$kendo-stepper-indicator-current-disabled-text Color$kendo-checkbox-disabled-border#adadad$kendo-stepper-indicator-done-disabled-textwhite
Description
The border color of the disabled RadioButton.
+
Description
The text color of the disabled Stepper current indicator.
$kendo-radio-disabled-checked-bg$kendo-stepper-indicator-current-disabled-borderColor$kendo-stepper-indicator-done-disabled-border#8c97d3
Description
The border color of the disabled Stepper current indicator.
+
$kendo-stepper-label-text Null null null
Description
The background color of the disabled and checked RadioButton.
+
Description
The text color of the Stepper label.
$kendo-radio-disabled-checked-text$kendo-stepper-label-success-text Color$kendo-radio-disabled-border#adadad$kendo-color-success#37b400
Description
The color of the disabled and checked RadioButton.
+
Description
The success text color of the Stepper label.
$kendo-radio-disabled-checked-border$kendo-stepper-label-error-text Color$kendo-radio-disabled-border#adadad$kendo-color-error#f31700
Description
The border color of disabled and checked RadioButton.
+
Description
The error text color of the Stepper label.
$kendo-radio-invalid-bg$kendo-stepper-label-hover-text Null$kendo-checkbox-invalid-bgnull null
Description
The background color of the invalid RadioButton.
+
Description
The text color of the hovered Stepper label.
$kendo-radio-invalid-text$kendo-stepper-label-disabled-text Color$kendo-checkbox-invalid-text#f31700if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .32 ), k-map-get( $theme, disabled-text ))rgba(0, 0, 0, 0.38)
Description
The color of the invalid RadioButton.
+
Description
The text color of the disabled Stepper label.
$kendo-radio-invalid-border$kendo-stepper-optional-label-text Color$kendo-checkbox-invalid-border#f31700$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
The border color of the invalid RadioButton.
+
Description
The text color of the Stepper optional label.
$kendo-radio-indicator-typeStringimageimage$kendo-stepper-optional-label-opacityNullnullnull
Description
The type of the RadioButton indicator.
+
Description
The opacity of the Stepper optional label.
$kendo-radio-glyph-font-familyList"WebComponentsIcons", monospace"WebComponentsIcons", monospace$kendo-stepper-optional-label-font-sizeNumber$kendo-font-size-sm12px
Description
The font family of the RadioButton indicator glyph.
+
Description
The font size of the Stepper optional label.
$kendo-radio-checked-glyphString"\e308""\e308"$kendo-stepper-optional-label-font-styleNullnullnull
Description
The glyph of the RadioButton indicator.
+
Description
The font style of the Stepper optional label.
$kendo-radio-checked-imageStringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='%233f51b5'/%3e%3c/svg%3e")$kendo-stepper-progressbar-sizeNumber2px2px
Description
The image of the checked RadioButton indicator.
+
Description
The size of the Stepper ProgressBar.
$kendo-radio-disabled-checked-imageStringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='%23adadad'/%3e%3c/svg%3e")$kendo-stepper-progressbar-bgNullnullnull
Description
The image of the disabled and checked RadioButton indicator.
+
Description
The background color of the Stepper ProgressBar.
$kendo-radio-label-margin-xNumberk-map-get( $kendo-spacing, 1 )4px$kendo-stepper-progressbar-textNullnullnull
Description
The horizontal margin of the RadioButton inside of a label.
+
Description
The text color of the Stepper ProgressBar.
$kendo-radio-list-spacingNumberk-map-get( $kendo-spacing, 4 )16px$kendo-stepper-progressbar-fill-bgNullnullnull
Description
The horizontal list item margin of the RadioButton.
+
Description
The background color of the selected Stepper ProgressBar.
$kendo-radio-list-item-padding-xNumber0px0px$kendo-stepper-progressbar-fill-textNullnullnull
Description
The horizontal list item padding of the RadioButton.
+
Description
The text color of the selected Stepper ProgressBar.
$kendo-radio-list-item-padding-yNumber$kendo-list-md-item-padding-y8px$kendo-stepper-content-transition-propertyStringheightheight
Description
The vertical list item padding of the RadioButton.
+
Description
The property name of the Stepper transition.
$kendo-radio-ripple-bgColor$kendo-color-primary#3f51b5$kendo-stepper-content-transition-durationNumber300ms300ms
Description
The background color of the RadioButton ripple..
+
Description
The duration of the Stepper transition.
$kendo-radio-ripple-opacityNumber.20.2$kendo-stepper-content-transition-timing-functionListcubic-bezier(.4, 0, .2, 1) 0mscubic-bezier(0.4, 0, 0.2, 1) 0ms
Description
The opacity of the RadioButton ripple.
+
Description
The timing function of the Stepper transition.
-### Rating +### Switch @@ -13763,579 +16503,573 @@ The following table lists the available variables for customizing the Material t - - - - + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
$kendo-rating-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif$kendo-switch-font-familyNullnullnull
Description
The font family of the Switch.
+
$kendo-switch-track-border-widthNullnullnull
Description
The border width of the Switch track.
+
$kendo-switch-thumb-border-widthNullnullnull
Description
The border width of the Switch thumb.
+
Description
The font family of the Rating.
+ 		$kendo-switch-label-text-transformNullnullnull
Description
The text transform of the Switch label.
$kendo-rating-font-sizeNumber$kendo-font-size-md14px$kendo-switch-label-displayStringnonenone
Description
The font size of the Rating.
+
Description
The display of the Switch label.
$kendo-rating-line-heightNumber$kendo-line-height-md2$kendo-switch-sizesMap( + sm: ( font-size: null, track-width: 26px, track-height: 12px, thumb-width: 16px, thumb-height: 16px, thumb-offset: -2px, label-offset: 0px ), + md: ( font-size: null, track-width: 32px, track-height: 14px, thumb-width: 20px, thumb-height: 20px, thumb-offset: -3px, label-offset: 0px ), + lg: ( font-size: null, track-width: 38px, track-height: 16px, thumb-width: 24px, thumb-height: 24px, thumb-offset: -4px, label-offset: 0px ) +)(sm: (font-size: null, track-width: 26px, track-height: 12px, thumb-width: 16px, thumb-height: 16px, thumb-offset: -2px, label-offset: 0px), md: (font-size: null, track-width: 32px, track-height: 14px, thumb-width: 20px, thumb-height: 20px, thumb-offset: -3px, label-offset: 0px), lg: (font-size: null, track-width: 38px, track-height: 16px, thumb-width: 24px, thumb-height: 24px, thumb-offset: -4px, label-offset: 0px))
Description
The line height of the Rating.
+
Description
The map with the different Switch sizes.
$kendo-rating-container-margin-xNumberk-math-div( $kendo-padding-sm-x, 2 )4px$kendo-switch-off-track-bgColorrgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .38 )rgba(0, 0, 0, 0.38)
Description
The horizontal margin of the Rating container.
+
Description
The background of the track when the Switch is not checked.
$kendo-rating-item-padding-xNumberk-math-div( $kendo-padding-sm-x, 2 )4px$kendo-switch-off-track-textNullnullnull
Description
The horizontal padding of the Rating item.
+
Description
The text color of the track when the Switch is not checked.
$kendo-rating-item-padding-yNumber$kendo-padding-md-y4px$kendo-switch-off-track-borderNullnullnull
Description
The vertical padding of the Rating item.
+
Description
The border color of the track when the Switch is not checked
$kendo-rating-label-margin-xNumber$kendo-padding-sm-x8px$kendo-switch-off-track-gradientNullnullnull
Description
The horizontal margin of the Rating label.
+
Description
The background gradient of the track when the Switch is not checked.
$kendo-rating-label-margin-yNumber$kendo-padding-md-y4px$kendo-switch-off-track-hover-bgNullnullnull
Description
The vertical margin of the Rating label.
+
Description
The background of the track when the hovered Switch is not checked.
$kendo-rating-label-line-heightNumber$kendo-line-height-lg1.5$kendo-switch-off-track-hover-textNullnullnull
Description
The line height of the Rating label.
+
Description
The text color of the track when the hovered Switch is not checked.
$kendo-rating-icon-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)$kendo-switch-off-track-hover-borderNullnullnull
Description
The text color of the Rating icon.
+
Description
The border color of the track when the hovered Switch is not checked.
$kendo-rating-icon-selected-textColor$kendo-color-primary-darker#303f9f$kendo-switch-off-track-hover-gradientNullnullnull
Description
The text color of the selected Rating icon.
+
Description
The background gradient of the track when the hovered Switch is not checked.
$kendo-rating-icon-hover-textColor$kendo-color-primary-darker#303f9f$kendo-switch-off-track-focus-bgNullnullnull
Description
The text color of the hovered Rating icon.
+
Description
The background of the track when the focused Switch is not checked.
$kendo-rating-icon-focus-textColor$kendo-color-primary-darker#303f9f$kendo-switch-off-track-focus-textNullnullnull
Description
The text color of the focused Rating icon.
+
Description
The text color of the track when the focused Switch is not checked.
$kendo-rating-icon-focus-shadowList0 2px 4px rgba( black, .1 )0 2px 4px rgba(0, 0, 0, 0.1)$kendo-switch-off-track-focus-borderNullnullnull
Description
The shadow of the focused Rating icon.
+
Description
The border color of the track when the focused Switch is not checked.
$kendo-rating-icon-focus-selected-shadowList0 2px 4px rgba( black, .1)0 2px 4px rgba(0, 0, 0, 0.1)$kendo-switch-off-track-focus-gradientNullnullnull
Description
The shadow of the focused and selected Rating icon.
+
Description
The background gradient of the track when the focused Switch is not checked.
- -### Scrollview - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-scrollview-border-widthNumber1px1px
$kendo-switch-off-track-focus-ringNullnullnull
Description
The width of the border around the ScrollView.
+
Description
The ring around the track when the focused Switch is not checked.
$kendo-scrollview-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif$kendo-switch-off-track-disabled-bgNullnullnull
Description
The font family of the ScrollView.
+
Description
The background of the track when the disabled Switch is not checked.
$kendo-scrollview-font-sizeNumber$kendo-font-size-md14px$kendo-switch-off-track-disabled-textNullnullnull
Description
The font size of the ScrollView.
+
Description
The text color of the track when the disabled Switch is not checked.
$kendo-scrollview-line-heightNumber$kendo-line-height-md2$kendo-switch-off-track-disabled-borderNullnullnull
Description
The line height of the ScrollView.
+
Description
The border color of the track when the disabled Switch is not checked.
$kendo-scrollview-textColor$kendo-component-textrgba(0, 0, 0, 0.87)$kendo-switch-off-track-disabled-gradientNullnullnull
Description
The text color of the ScrollView.
+
Description
The background gradient of the track when the disabled Switch is not checked.
$kendo-scrollview-bg$kendo-switch-off-thumb-bg Color$kendo-component-bgif($kendo-enable-color-system, k-color( app-surface ), if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )) #ffffff
Description
The background color of the ScrollView.
+
Description
The background of the thumb when the Switch is not checked.
$kendo-scrollview-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)$kendo-switch-off-thumb-textNullnullnull
Description
The border color of the ScrollView.
+
Description
The text color of the thumb when the Switch is not checked.
$kendo-scrollview-pagebutton-sizeNumber10px10px$kendo-switch-off-thumb-borderNullnullnull
Description
The size of the ScrollView page button.
+
Description
The border color of the thumb when the Switch is not checked.
$kendo-scrollview-pagebutton-bgColor$kendo-button-bg#ffffff$kendo-switch-off-thumb-gradientNullnullnull
Description
The background color of the ScrollView page button.
+
Description
The background gradient of the thumb when the Switch is not checked.
$kendo-scrollview-pagebutton-borderColor$kendo-button-border#ffffff$kendo-switch-off-thumb-hover-bgNullnullnull
Description
The border color of the ScrollView page button.
+
Description
The background of the thumb when the hovered Switch is not checked.
$kendo-scrollview-pagebutton-primary-bgColor$kendo-color-primary#3f51b5$kendo-switch-off-thumb-hover-textNullnullnull
Description
The primary background color of the ScrollView page button.
+
Description
The text color of the thumb when the hovered Switch is not checked.
$kendo-scrollview-pagebutton-primary-borderColor$kendo-color-primary#3f51b5$kendo-switch-off-thumb-hover-borderNullnullnull
Description
The primary border color of the ScrollView page button.
+
Description
The border color of the thumb when the hovered Switch is not checked.
$kendo-scrollview-pagebutton-shadowList0 0 0 2px rgba( black, .13 )0 0 0 2px rgba(0, 0, 0, 0.13)$kendo-switch-off-thumb-hover-gradientNullnullnull
Description
The box shadow of the ScrollView page button.
+
Description
The background gradient of the thumb when the hovered Switch is not checked.
$kendo-scrollview-pager-offsetNumber00$kendo-switch-on-track-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .54 ), rgba( $kendo-color-primary, .54 ))rgba(63, 81, 181, 0.54)
Description
The offset of the ScrollView pager.
+
Description
The background of the track when the Switch is checked.
$kendo-scrollview-pager-item-spacingNumber20px20px$kendo-switch-on-track-textNullnullnull
Description
The spacing between the ScrollView pager items.
+
Description
The text color of the track when the Switch is checked.
$kendo-scrollview-pager-item-border-widthNumber0px0px$kendo-switch-on-track-borderNullnullnull
Description
The border width of the ScrollView pager items.
+
Description
The border color of the track when the Switch is checked.
$kendo-scrollview-pager-heightCalculationcalc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + #{$kendo-scrollview-pager-item-spacing * 2} )calc(10px + 0px + 40px)$kendo-switch-on-track-gradientNullnullnull
Description
The height of the ScrollView pager.
+
Description
The background gradient of the track when the Switch is checked.
$kendo-scrollview-arrow-tap-highlight-colorColor$kendo-color-rgba-transparentrgba(0, 0, 0, 0)$kendo-switch-on-track-hover-bgNullnullnull
Description
The text color of the highlight over the tapped ScrollView navigation arrows.
+
Description
The background of the track when the hovered Switch is checked.
$kendo-scrollview-navigation-colorColorwhitewhite$kendo-switch-on-track-hover-textNullnullnull
Description
The color of the ScrollView navigation arrows.
+
Description
The text color of the track when the hovered Switch is checked.
$kendo-scrollview-navigation-icon-shadowListrgba( black, .3 ) 0 0 15pxrgba(0, 0, 0, 0.3) 0 0 15px$kendo-switch-on-track-hover-borderNullnullnull
Description
The box shadow of the ScrollView navigation arrows.
+
Description
The border color of the track when the hovered Switch is checked.
$kendo-scrollview-navigation-bgColorrgba( black, 0 )rgba(0, 0, 0, 0)$kendo-switch-on-track-hover-gradientNullnullnull
Description
The background color of the ScrollView navigation.
+
Description
The background gradient of the track when the hovered Switch is checked.
$kendo-scrollview-navigation-default-opacityNumber.70.7$kendo-switch-on-track-focus-bgNullnullnull
Description
The opacity of the ScrollView navigation.
+
Description
The background of the track when the focused Switch is checked.
$kendo-scrollview-navigation-hover-opacityNumber11$kendo-switch-on-track-focus-textNullnullnull
Description
The hover opacity of the ScrollView navigation.
+
Description
The text color of the track when the focused Switch is checked.
$kendo-scrollview-navigation-hover-span-bg$kendo-switch-on-track-focus-border Null null null
Description
The hover background color of the ScrollView navigation arrows.
+
Description
The border color of the track when the focused Switch is checked.
$kendo-scrollview-light-bgColorrgba( white, .4 )rgba(255, 255, 255, 0.4)$kendo-switch-on-track-focus-gradientNullnullnull
Description
The background color of the ScrollView pager in light mode.
+
Description
The background gradient of the track when the focused Switch is checked.
$kendo-scrollview-dark-bgColorrgba( black, .4 )rgba(0, 0, 0, 0.4)$kendo-switch-on-track-focus-ringNullnullnull
Description
The background color of the ScrollView pager in dark mode.
+
Description
The ring around the track when the focused Switch is checked.
$kendo-scrollview-transition-durationNumber.3s0.3s$kendo-switch-on-track-disabled-bgNullnullnull
Description
The duration of the ScrollView transition.
+
Description
The background of the track when the disabled Switch is checked.
$kendo-scrollview-transition-timing-functionStringease-in-outease-in-out$kendo-switch-on-track-disabled-textNullnullnull
Description
The timing function of the ScrollView transition.
+
Description
The text color of the track when the disabled Switch is checked.
- -### Shadows - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + -
NameTypeDefault valueComputed value
$box-shadow-depth-1Stringk-elevation(1)var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))
$kendo-switch-on-track-disabled-borderNullnullnull
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for switch.
Equivalent to material elevation 1.
+
Description
The border color of the track when the disabled Switch is checked.
$box-shadow-depth-2Stringk-elevation(2)var(--kendo-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14))$kendo-switch-on-track-disabled-gradientNullnullnull
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for resting state of button, card and other widgets.
Equivalent to material elevation 2.
+
Description
The background gradient of the track when the disabled Switch is checked.
$box-shadow-depth-3Stringk-elevation(3)var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))$kendo-switch-on-thumb-bgColor$kendo-color-primary#3f51b5
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for menu, popups and raised state of button and card.
Equivalent to material elevation 3.
+
Description
The background of the thumb when the Switch is checked.
$box-shadow-depth-4Stringk-elevation(4)var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))$kendo-switch-on-thumb-textNullnullnull
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for drawers and other overlaying elements.
Equivalent to material elevation 4.
+
Description
The text color of the thumb when the Switch is checked.
$box-shadow-depth-5Stringk-elevation(5)var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))
$kendo-switch-on-thumb-borderNullnullnull
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for window and dialog.
Equivalent to material elevation 6.
+
Description
The border color of the thumb when the Switch is checked.
$box-shadow-depth-6Stringk-elevation(6)var(--kendo-elevation-6, 0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px 0px rgba(0, 0, 0, 0.14))$kendo-switch-on-thumb-gradientNullnullnull
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for window and dialog.
Equivalent to material elevation 8.
+
Description
The background gradient of the thumb when the Switch is checked.
$box-shadow-depth-7Stringk-elevation(7)var(--kendo-elevation-7, 0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14))$kendo-switch-on-thumb-hover-bgNullnullnull
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for window and dialog.
Equivalent to material elevation 12.
+
Description
The background of the thumb when the hovered Switch is checked.
$box-shadow-depth-8Stringk-elevation(8)var(--kendo-elevation-8, 0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14))$kendo-switch-on-thumb-hover-textNullnullnull
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for window and dialog.
Equivalent to material elevation 16.
+
Description
The text color of the thumb when the hovered Switch is checked.
$box-shadow-depth-9Stringk-elevation(9)var(--kendo-elevation-9, 0px 11px 15px rgba(0, 0, 0, 0.2), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14))$kendo-switch-on-thumb-hover-borderNullnullnull
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for window and dialog.
Equivalent to material elevation 24.
+
Description
The border color of the thumb when the hovered Switch is checked.
$elevationColork-map-get( $theme, elevation )#000000$kendo-switch-on-thumb-hover-gradientNullnullnull
Description
Color of shadows
+
Description
The background gradient of the thumb when the hovered Switch is checked.
-### Skeleton +### Table @@ -14353,1426 +17087,1422 @@ The following table lists the available variables for customizing the Material t - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
$kendo-skeleton-text-transformStringscale( 1, .6 )scale(1, 0.6)$kendo-table-border-widthNumber1px1px
Description
The transform scale of the Skeleton text.
+
Description
The width of the table border.
$kendo-skeleton-text-border-radius$kendo-table-cell-vertical-border-width Number$kendo-border-radius-md4px1px1px
Description
The border radius of the Skeleton text.
+
Description
The width of vertical border of table cells.
$kendo-skeleton-rect-border-radius$kendo-table-cell-horizontal-border-width Number001px1px
Description
The border radius of the rectangular Skeleton.
+
Description
The width of horizontal border of table cells.
$kendo-skeleton-circle-border-radiusNumber9999px9999px$kendo-table-font-sizeNullnullnull
Description
The border radius of the circular Skeleton.
+
Description
The font size of the table if no size is specified.
$kendo-skeleton-item-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), rgba( $kendo-color-inverse, .2 ))rgba(66, 66, 66, 0.2)$kendo-table-line-heightNullnullnull
Description
The background color of the Skeleton item.
+
Description
The line-height of the table if no size is specified.
$kendo-skeleton-wave-bgColorrgba( black, .04 )rgba(0, 0, 0, 0.04)$kendo-table-cell-padding-xNullnullnull
Description
The background color of the Skeleton wave animation.
+
Description
The horizontal padding of the cells in the table if no size is specified.
- -### Split-button - - - - - - - - - - - - - - - - - - + + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-split-button-focus-shadow
$kendo-table-cell-padding-y Null$kendo-button-focus-shadownull null
Description
The focus shadow of the SplitButton.
+
Description
The vertical padding of the cells in the table if no size is specified.
$kendo-split-button-arrow-padding-xNumberk-map-get( $kendo-spacing, 1 )4px$kendo-table-sizesMap( + sm: ( + font-size: $kendo-font-size-md, + line-height: $kendo-line-height-md, + cell-padding-x: $kendo-table-sm-cell-padding-x, + cell-padding-y: $kendo-table-sm-cell-padding-y + ), + md: ( + font-size: $kendo-font-size-md, + line-height: $kendo-line-height-md, + cell-padding-x: $kendo-table-md-cell-padding-x, + cell-padding-y: $kendo-table-md-cell-padding-y + ), + lg: ( + font-size: $kendo-font-size-md, + line-height: $kendo-line-height-md, + cell-padding-x: $kendo-table-lg-cell-padding-x, + cell-padding-y: $kendo-table-lg-cell-padding-y + ) +)(sm: (font-size: 14px, line-height: 2, cell-padding-x: 10px, cell-padding-y: 4px), md: (font-size: 14px, line-height: 2, cell-padding-x: 24px, cell-padding-y: 10px), lg: (font-size: 14px, line-height: 2, cell-padding-x: 24px, cell-padding-y: 10px))
Description
The horizontal padding of the arrow Button.
+
Description
The sizes of the table.
$kendo-split-button-sm-arrow-padding-xNumberk-map-get( $kendo-spacing, 1 )4px$kendo-table-bgColor$kendo-component-bg#ffffff
Description
The horizontal padding of the small arrow Button.
+
Description
Background color of tables.
$kendo-split-button-md-arrow-padding-xNumberk-map-get( $kendo-spacing, 1 )4px$kendo-table-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The horizontal padding of the medium arrow Button.
+
Description
Text color of tables.
$kendo-split-button-lg-arrow-padding-xNumberk-map-get( $kendo-spacing, 1 )4px$kendo-table-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The horizontal padding of the large arrow Button.
+
Description
Border color of tables.
$kendo-split-button-arrow-padding-yNumber$kendo-button-padding-y8px$kendo-table-header-bgColor$kendo-table-bg#ffffff
Description
Background color of table headers.
+
$kendo-table-header-textColorif($kendo-enable-color-system, k-color( subtle ), if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text ))rgba(0, 0, 0, 0.54)
Description
Text color of table headers.
+
$kendo-table-header-borderColor$kendo-table-borderrgba(0, 0, 0, 0.12)
Description
Border color of table headers.
+
$kendo-table-header-gradientNullnullnull
Description
Gradient of table headers.
+
$kendo-table-footer-bgColor$kendo-table-header-bg#ffffff
Description
Background color of table footers.
+
$kendo-table-footer-textColor$kendo-table-header-textrgba(0, 0, 0, 0.54)
Description
The vertical padding of the arrow Button.
+
Description
Text color of table footers.
$kendo-split-button-sm-arrow-padding-yNumber$kendo-button-sm-padding-y6px$kendo-table-footer-borderColor$kendo-table-header-borderrgba(0, 0, 0, 0.12)
Description
The vertical padding of the small arrow Button.
+
Description
Border color of table footers.
$kendo-split-button-md-arrow-padding-yNumber$kendo-button-md-padding-y8px$kendo-table-group-row-bgColor$kendo-table-header-bg#ffffff
Description
The vertical padding of the medium arrow Button.
+
Description
Background color of group rows in table.
$kendo-split-button-lg-arrow-padding-yNumber$kendo-button-lg-padding-y10px$kendo-table-group-row-textColor$kendo-table-header-textrgba(0, 0, 0, 0.54)
Description
The vertical padding of the large arrow Button.
+
Description
Text color of group rows in table.
- -### Switch - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - + - - + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + - - + - - + - + - - - - - + + + + - - + - - + - - - + +
NameTypeDefault valueComputed value
$kendo-switch-font-familyNullnullnull
$kendo-table-group-row-borderColor$kendo-table-header-borderrgba(0, 0, 0, 0.12)
Description
The font family of the Switch.
+
Description
Border color of group rows in table.
$kendo-switch-track-border-widthNullnullnull$kendo-table-alt-row-bgColortransparenttransparent
Description
The border width of the Switch track.
+
Description
Background color of alternating rows in table.
$kendo-switch-thumb-border-width$kendo-table-alt-row-text Null null null
Description
The border width of the Switch thumb.
+
Description
Text color of alternating rows in table.
$kendo-switch-label-text-transform$kendo-table-alt-row-border Null null null
Description
The text transform of the Switch label.
+
Description
Border color of alternating rows in table.
$kendo-switch-label-displayStringnonenone$kendo-table-hover-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( k-contrast-color( $kendo-table-bg ), .07 ))rgba(0, 0, 0, 0.07)
Description
The display of the Switch label.
+
Description
Background color of hovered rows in table.
$kendo-switch-sizesMap( - sm: ( font-size: null, track-width: 26px, track-height: 12px, thumb-width: 16px, thumb-height: 16px, thumb-offset: -2px, label-offset: 0px ), - md: ( font-size: null, track-width: 32px, track-height: 14px, thumb-width: 20px, thumb-height: 20px, thumb-offset: -3px, label-offset: 0px ), - lg: ( font-size: null, track-width: 38px, track-height: 16px, thumb-width: 24px, thumb-height: 24px, thumb-offset: -4px, label-offset: 0px ) -)(sm: (font-size: null, track-width: 26px, track-height: 12px, thumb-width: 16px, thumb-height: 16px, thumb-offset: -2px, label-offset: 0px), md: (font-size: null, track-width: 32px, track-height: 14px, thumb-width: 20px, thumb-height: 20px, thumb-offset: -3px, label-offset: 0px), lg: (font-size: null, track-width: 38px, track-height: 16px, thumb-width: 24px, thumb-height: 24px, thumb-offset: -4px, label-offset: 0px))$kendo-table-hover-textNullnullnull
Description
The map with the different Switch sizes.
+
Description
Text color of hovered rows in table.
$kendo-switch-off-track-bg$kendo-table-hover-border Colorrgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .38 )rgba(0, 0, 0, 0.38)$kendo-table-borderrgba(0, 0, 0, 0.12)
Description
The background of the track when the Switch is not checked.
+
Description
Border color of hovered rows in table.
$kendo-switch-off-track-text$kendo-table-focus-bg Null null null
Description
The text color of the track when the Switch is not checked.
+
Description
Background color of focused rows in table.
$kendo-switch-off-track-border$kendo-table-focus-text Null null null
Description
The border color of the track when the Switch is not checked
+
Description
Text color of focused rows in table.
$kendo-switch-off-track-gradient$kendo-table-focus-border Null null null
Description
The background gradient of the track when the Switch is not checked.
+
Description
Border color of focused rows in table.
$kendo-switch-off-track-hover-bg$kendo-table-focus-shadow Nullnull$kendo-list-item-focus-shadow null
Description
The background of the track when the hovered Switch is not checked.
+
Description
Box shadow of focused rows in table.
$kendo-switch-off-track-hover-textNullnullnull$kendo-table-selected-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .12 ), rgba( k-contrast-color( $kendo-table-bg ), .04 ))rgba(0, 0, 0, 0.04)
Description
The text color of the track when the hovered Switch is not checked.
+
Description
Background color of selected rows in table.
$kendo-switch-off-track-hover-border$kendo-table-selected-text Null null null
Description
The border color of the track when the hovered Switch is not checked.
+
Description
Text color of selected rows in table.
$kendo-switch-off-track-hover-gradient$kendo-table-selected-border Null null null
Description
The background gradient of the track when the hovered Switch is not checked.
+
Description
Border color of selected rows in table.
$kendo-switch-off-track-focus-bg
+ +### Tabstrip + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - + + - - + - - + - - - - - + + + + - - - - - + + + + - - + - - + - - + - - + - - + + - - + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - - - - + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-tabstrip-bg Null null null
Description
The background of the track when the focused Switch is not checked.
+
Description
Background color of tabstrip component
$kendo-switch-off-track-focus-textNullnullnull$kendo-tabstrip-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
The text color of the track when the focused Switch is not checked.
+
Description
Text color of tabstrip component
$kendo-switch-off-track-focus-borderNullnullnull$kendo-tabstrip-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the track when the focused Switch is not checked.
+
Description
Border color of tabstrip component
$kendo-switch-off-track-focus-gradientNullnullnull$kendo-tabstrip-item-padding-xNumber24px24px
Description
The background gradient of the track when the focused Switch is not checked.
+
Description
Horizontal padding of tabs
$kendo-switch-off-track-focus-ringNullnullnull$kendo-tabstrip-item-padding-yNumber14px14px
Description
The ring around the track when the focused Switch is not checked.
+
Description
Vertical padding of tabs
$kendo-switch-off-track-disabled-bgNullnullnull$kendo-tabstrip-item-border-widthNumber0px0px
Description
The background of the track when the disabled Switch is not checked.
+
Description
Width of border around of tabs
$kendo-switch-off-track-disabled-textNullnullnull$kendo-tabstrip-item-border-radiusNumber0px0px
Description
The text color of the track when the disabled Switch is not checked.
+
Description
Border radius of tabs
$kendo-switch-off-track-disabled-borderNullnullnull$kendo-tabstrip-item-gapNumber0px0px
Description
The border color of the track when the disabled Switch is not checked.
+
Description
Spacing between tabs
$kendo-switch-off-track-disabled-gradient$kendo-tabstrip-item-bg Null null null
Description
The background gradient of the track when the disabled Switch is not checked.
+
Description
Background color of tabs
$kendo-switch-off-thumb-bg$kendo-tabstrip-item-text Colorif($kendo-enable-color-system, k-color( app-surface ), if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white ))#ffffff$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
The background of the thumb when the Switch is not checked.
+
Description
Text color of tabs
$kendo-switch-off-thumb-text$kendo-tabstrip-item-border Null null null
Description
The text color of the thumb when the Switch is not checked.
+
Description
Border color of tabs
$kendo-switch-off-thumb-border$kendo-tabstrip-item-gradient Null null null
Description
The border color of the thumb when the Switch is not checked.
+
Description
Background gradient of tabs
$kendo-switch-off-thumb-gradientNullnullnull$kendo-tabstrip-item-hover-bgColor$kendo-hover-bgrgba(0, 0, 0, 0.04)
Description
The background gradient of the thumb when the Switch is not checked.
+
Description
Background color of hovered tabs
$kendo-switch-off-thumb-hover-bgNullnullnull$kendo-tabstrip-item-hover-textColor$kendo-body-textrgba(0, 0, 0, 0.87)
Description
The background of the thumb when the hovered Switch is not checked.
+
Description
Text color of hovered tabs
$kendo-switch-off-thumb-hover-text$kendo-tabstrip-item-hover-border Null null null
Description
The text color of the thumb when the hovered Switch is not checked.
+
Description
Border color of hovered tabs
$kendo-switch-off-thumb-hover-border$kendo-tabstrip-item-hover-gradient Null null null
Description
The border color of the thumb when the hovered Switch is not checked.
+
Description
Background gradient of hovered tabs
$kendo-switch-off-thumb-hover-gradient$kendo-tabstrip-item-selected-bg Null null null
Description
The background gradient of the thumb when the hovered Switch is not checked.
+
Description
Background color of selected tabs
$kendo-switch-on-track-bg$kendo-tabstrip-item-selected-text Colorif($kendo-enable-color-system, rgba( k-color( primary, true ), .54 ), rgba( $kendo-color-primary, .54 ))rgba(63, 81, 181, 0.54)$kendo-body-textrgba(0, 0, 0, 0.87)
Description
The background of the track when the Switch is checked.
+
Description
Text color of selected tabs
$kendo-switch-on-track-text$kendo-tabstrip-item-selected-border Null null null
Description
The text color of the track when the Switch is checked.
+
Description
Border color of selected tabs
$kendo-switch-on-track-border$kendo-tabstrip-item-selected-gradient Null null null
Description
The border color of the track when the Switch is checked.
+
Description
Background gradient of selected tabs
$kendo-switch-on-track-gradientNullnullnull$kendo-tabstrip-content-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The background gradient of the track when the Switch is checked.
+
Description
Horizontal padding of tabstrip content
$kendo-switch-on-track-hover-bgNullnullnull$kendo-tabstrip-content-padding-yNumberk-map-get( $kendo-spacing, 4 )16px
Description
The background of the track when the hovered Switch is checked.
+
Description
Vertical padding of tabstrip content
$kendo-switch-on-track-hover-textNullnullnull$kendo-tabstrip-content-border-widthNumber0px0px
Description
The text color of the track when the hovered Switch is checked.
+
Description
Width of border around tabstrip content
$kendo-switch-on-track-hover-borderNullnullnull$kendo-tabstrip-content-bgColortransparenttransparent
Description
The border color of the track when the hovered Switch is checked.
+
Description
Background color of tabstrip content
$kendo-switch-on-track-hover-gradient$kendo-tabstrip-content-text Null null null
Description
The background gradient of the track when the hovered Switch is checked.
+
Description
Text color of tabstrip content
$kendo-switch-on-track-focus-bg$kendo-tabstrip-content-border Null null null
Description
The background of the track when the focused Switch is checked.
+
Description
Border color of tabstrip content
$kendo-switch-on-track-focus-textNullnullnull$kendo-tabstrip-content-focus-borderColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the track when the focused Switch is checked.
+
Description
Border color of tabstrip focused content
$kendo-switch-on-track-focus-borderNullnullnull
+ +### Taskboard + + + + + + + + + + + + + + + + + + + + + - - + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - + - - + - - + - - + - - - -
NameTypeDefault valueComputed value
$kendo-taskboard-spacerNumberk-map-get( $kendo-spacing, 4 )16px
Description
The border color of the track when the focused Switch is checked.
+
Description
The spacing index of the TaskBoard.
$kendo-switch-on-track-focus-gradient$kendo-taskboard-padding-y Null null null
Description
The background gradient of the track when the focused Switch is checked.
+
Description
The vertical padding of the TaskBoard.
$kendo-switch-on-track-focus-ring$kendo-taskboard-padding-x Null null null
Description
The ring around the track when the focused Switch is checked.
+
Description
The horizontal of the TaskBoard.
$kendo-switch-on-track-disabled-bgNullnullnull$kendo-taskboard-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The background of the track when the disabled Switch is checked.
+
Description
The font family of the TaskBoard.
$kendo-switch-on-track-disabled-textNullnullnull$kendo-taskboard-font-sizeNumber$kendo-font-size-md14px
Description
The text color of the track when the disabled Switch is checked.
+
Description
The font size of the TaskBoard.
$kendo-switch-on-track-disabled-borderNullnullnull$kendo-taskboard-line-heightNumber$kendo-line-height-md2
Description
The border color of the track when the disabled Switch is checked.
+
Description
The line height of the TaskBoard.
$kendo-switch-on-track-disabled-gradient$kendo-taskboard-bg Null null null
Description
The background gradient of the track when the disabled Switch is checked.
+
Description
The background color of the TaskBoard.
$kendo-switch-on-thumb-bgColor$kendo-color-primary#3f51b5$kendo-taskboard-textNullnullnull
Description
The background of the thumb when the Switch is checked.
+
Description
The text color of the TaskBoard.
$kendo-switch-on-thumb-text$kendo-taskboard-border Null null null
Description
The text color of the thumb when the Switch is checked.
+
Description
The border color of the TaskBoard.
$kendo-switch-on-thumb-borderNullnullnull$kendo-taskboard-toolbar-padding-yNumber$kendo-taskboard-spacer16px
Description
The border color of the thumb when the Switch is checked.
+
Description
The vertical padding of the TaskBoard Toolbar.
$kendo-switch-on-thumb-gradientNullnullnull$kendo-taskboard-toolbar-padding-xNumber$kendo-taskboard-toolbar-padding-y16px
Description
The background gradient of the thumb when the Switch is checked.
+
Description
The horizontal padding of the TaskBoard Toolbar.
$kendo-switch-on-thumb-hover-bg$kendo-taskboard-toolbar-bg Null null null
Description
The background of the thumb when the hovered Switch is checked.
+
Description
The background color of the TaskBoard Toolbar.
$kendo-switch-on-thumb-hover-text$kendo-taskboard-toolbar-text Null null null
Description
The text color of the thumb when the hovered Switch is checked.
+
Description
The text color of the TaskBoard Toolbar.
$kendo-switch-on-thumb-hover-border$kendo-taskboard-toolbar-border Null null null
Description
The border color of the thumb when the hovered Switch is checked.
+
Description
The border color of the TaskBoard Toolbar.
$kendo-switch-on-thumb-hover-gradient$kendo-taskboard-toolbar-gradient Null null null
Description
The background gradient of the thumb when the hovered Switch is checked.
-
- -### Table - - - - - - - - - - - - - - - - - - - - - - - - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + - - - - - - - - - - - - - - + + + + - - - - - + + + + - - + - - + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-table-border-widthNumber1px1px
Description
The width of the table border.
+
Description
The gradient of the TaskBoard Toolbar.
$kendo-table-cell-vertical-border-width$kendo-taskboard-content-padding-y Number1px1px$kendo-taskboard-spacer16px
Description
The width of vertical border of table cells.
+
Description
The vertical padding of the TaskBoard content.
$kendo-table-cell-horizontal-border-width$kendo-taskboard-content-padding-x Number1px1px$kendo-taskboard-content-padding-y16px
Description
The width of horizontal border of table cells.
+
Description
The horizontal padding of the TaskBoard content.
$kendo-table-font-sizeNullnullnull$kendo-taskboard-column-container-spacing-yNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The font size of the table if no size is specified.
+
Description
The vertical spacing of the TaskBoard column container.
$kendo-table-line-heightNullnullnull$kendo-taskboard-column-container-padding-yNumber0px0px
Description
The line-height of the table if no size is specified.
+
Description
The vertical padding of the TaskBoard column container.
$kendo-table-cell-padding-xNullnullnull$kendo-taskboard-column-container-padding-xNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
The horizontal padding of the cells in the table if no size is specified.
+
Description
The horizontal padding of the TaskBoard column container.
$kendo-table-cell-padding-yNullnullnull$kendo-taskboard-columns-container-gapNumber$kendo-taskboard-spacer16px
Description
The vertical padding of the cells in the table if no size is specified.
+
Description
The spacing of the TaskBoard columns container.
$kendo-table-sizesMap( - sm: ( - font-size: $kendo-font-size-md, - line-height: $kendo-line-height-md, - cell-padding-x: $kendo-table-sm-cell-padding-x, - cell-padding-y: $kendo-table-sm-cell-padding-y - ), - md: ( - font-size: $kendo-font-size-md, - line-height: $kendo-line-height-md, - cell-padding-x: $kendo-table-md-cell-padding-x, - cell-padding-y: $kendo-table-md-cell-padding-y - ), - lg: ( - font-size: $kendo-font-size-md, - line-height: $kendo-line-height-md, - cell-padding-x: $kendo-table-lg-cell-padding-x, - cell-padding-y: $kendo-table-lg-cell-padding-y - ) -)(sm: (font-size: 14px, line-height: 2, cell-padding-x: 10px, cell-padding-y: 4px), md: (font-size: 14px, line-height: 2, cell-padding-x: 24px, cell-padding-y: 10px), lg: (font-size: 14px, line-height: 2, cell-padding-x: 24px, cell-padding-y: 10px))$kendo-taskboard-column-widthNumber320px320px
Description
The sizes of the table.
+
Description
The default width of the TaskBoard column.
$kendo-table-bgColor$kendo-component-bg#ffffff$kendo-taskboard-column-border-widthNumber1px1px
Description
Background color of tables.
+
Description
The border width of the TaskBoard column.
$kendo-table-textColor$kendo-component-textrgba(0, 0, 0, 0.87)$kendo-taskboard-column-border-radiusNumber$kendo-border-radius-md4px
Description
Text color of tables.
+
Description
The border radius of the TaskBoard column.
$kendo-table-border$kendo-taskboard-column-bg Color$kendo-component-borderrgba(0, 0, 0, 0.12)if($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light))#f5f5f5
Description
Border color of tables.
+
Description
The background color of the TaskBoard column.
$kendo-table-header-bgColor$kendo-table-bg#ffffff$kendo-taskboard-column-textNullnullnull
Description
Background color of table headers.
+
Description
The text color of the TaskBoard column.
$kendo-table-header-text$kendo-taskboard-column-border Colorif($kendo-enable-color-system, k-color( subtle ), if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text ))rgba(0, 0, 0, 0.54)transparenttransparent
Description
Text color of table headers.
+
Description
The border color of the TaskBoard column.
$kendo-table-header-borderColor$kendo-table-borderrgba(0, 0, 0, 0.12)$kendo-taskboard-column-focus-bgNullnullnull
Description
Border color of table headers.
+
Description
The background color of the focused TaskBoard column.
$kendo-table-header-gradient$kendo-taskboard-column-focus-text Null null null
Description
Gradient of table headers.
+
Description
The text color of the focused TaskBoard column.
$kendo-table-footer-bg$kendo-taskboard-column-focus-border Color$kendo-table-header-bg#ffffffif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 ))rgba(0, 0, 0, 0.264)
Description
Background color of table footers.
+
Description
The border color of the focused TaskBoard column.
$kendo-table-footer-textColor$kendo-table-header-textrgba(0, 0, 0, 0.54)$kendo-taskboard-column-header-padding-yNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
Text color of table footers.
+
Description
The vertical padding of the TaskBoard column header.
$kendo-table-footer-borderColor$kendo-table-header-borderrgba(0, 0, 0, 0.12)$kendo-taskboard-column-header-padding-xNumber$kendo-taskboard-column-header-padding-y8px
Description
Border color of table footers.
+
Description
The horizontal padding of the TaskBoard column header.
$kendo-table-group-row-bgColor$kendo-table-header-bg#ffffff$kendo-taskboard-column-header-gapNumberk-math-div( $kendo-taskboard-spacer, 4 )4px
Description
Background color of group rows in table.
+
Description
The spacing of the TaskBoard column header.
$kendo-table-group-row-textColor$kendo-table-header-textrgba(0, 0, 0, 0.54)$kendo-taskboard-column-header-actions-gapNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
Text color of group rows in table.
+
Description
The spacing of the TaskBoard column header actions.
$kendo-table-group-row-borderColor$kendo-table-header-borderrgba(0, 0, 0, 0.12)$kendo-taskboard-column-header-font-weightNumber500500
Description
Border color of group rows in table.
+
Description
The font weight of the TaskBoard column header.
$kendo-table-alt-row-bg$kendo-taskboard-column-header-text Colortransparenttransparent$kendo-component-header-textrgba(0, 0, 0, 0.87)
Description
Background color of alternating rows in table.
+
Description
The text color of the TaskBoard column header.
$kendo-table-alt-row-text$kendo-taskboard-column-cards-padding-y Null null null
Description
Text color of alternating rows in table.
+
Description
The vertical padding of the TaskBoard column Card wrapper.
$kendo-table-alt-row-border$kendo-taskboard-column-cards-padding-x Null null null
Description
Border color of alternating rows in table.
-
$kendo-table-hover-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( k-contrast-color( $kendo-table-bg ), .07 ))rgba(0, 0, 0, 0.07)
Description
Background color of hovered rows in table.
+
Description
The horizontal padding of the TaskBoard column Card wrapper.
$kendo-table-hover-textNullnullnull$kendo-taskboard-column-cards-gapNumberk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
Text color of hovered rows in table.
+
Description
The spacing of the TaskBoard column Card wrapper.
$kendo-table-hover-borderColor$kendo-table-borderrgba(0, 0, 0, 0.12)$kendo-taskboard-pane-widthNumber$kendo-taskboard-column-width320px
Description
Border color of hovered rows in table.
+
Description
The default width of the TaskBoard pane.
$kendo-table-focus-bg$kendo-taskboard-pane-padding-y Null null null
Description
Background color of focused rows in table.
+
Description
The vertical padding of the TaskBoard pane.
$kendo-table-focus-text$kendo-taskboard-pane-padding-x Null null null
Description
Text color of focused rows in table.
+
Description
The horizontal padding of the TaskBoard pane.
$kendo-table-focus-borderNullnullnull$kendo-taskboard-pane-border-widthNumber1px1px
Description
Border color of focused rows in table.
+
Description
The border width of the TaskBoard pane.
$kendo-table-focus-shadowNull$kendo-list-item-focus-shadownull$kendo-taskboard-pane-bgColor$kendo-component-bg#ffffff
Description
Box shadow of focused rows in table.
+
Description
The background color of the TaskBoard pane.
$kendo-table-selected-bg$kendo-taskboard-pane-text Colorif($kendo-enable-color-system, rgba( k-color( primary, true ), .12 ), rgba( k-contrast-color( $kendo-table-bg ), .04 ))rgba(0, 0, 0, 0.04)$kendo-component-textrgba(0, 0, 0, 0.87)
Description
Background color of selected rows in table.
+
Description
The text color of the TaskBoard pane.
$kendo-table-selected-textNullnullnull$kendo-taskboard-pane-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
Text color of selected rows in table.
+
Description
The border color of the TaskBoard pane.
$kendo-table-selected-borderNullnullnull$kendo-taskboard-pane-header-padding-yNumber( $kendo-taskboard-spacer * .75 )12px
Description
Border color of selected rows in table.
+
Description
The vertical padding of the TaskBoard pane header.
- -### Tabstrip - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - + + + + + + + + + @@ -17637,6 +20367,126 @@ The following table lists the available variables for customizing the Material t
NameTypeDefault valueComputed value
$kendo-tabstrip-bgNullnullnull
$kendo-taskboard-pane-header-padding-xNumber$kendo-taskboard-spacer16px
Description
Background color of tabstrip component
+
Description
The horizontal padding of the TaskBoard pane header.
$kendo-tabstrip-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)$kendo-taskboard-pane-header-font-weightNumber500500
Description
Text color of tabstrip component
+
Description
The font weight of the TaskBoard pane header.
$kendo-tabstrip-border$kendo-taskboard-pane-header-text Color$kendo-component-borderrgba(0, 0, 0, 0.12)$kendo-component-header-textrgba(0, 0, 0, 0.87)
Description
Border color of tabstrip component
+
Description
The text color of the TaskBoard pane header.
$kendo-tabstrip-item-padding-x$kendo-taskboard-pane-content-padding-y Number24px24px0px0px
Description
Horizontal padding of tabs
+
Description
The vertical padding of the TaskBoard pane content.
$kendo-tabstrip-item-padding-y$kendo-taskboard-pane-content-padding-x Number14px14px$kendo-taskboard-spacer16px
Description
Vertical padding of tabs
+
Description
The horizontal padding of the TaskBoard pane content.
$kendo-tabstrip-item-border-width$kendo-taskboard-pane-actions-padding-y Number0px0px( $kendo-taskboard-spacer * .75 )12px
Description
Width of border around of tabs
+
Description
The vertical padding of the TaskBoard pane actions.
$kendo-tabstrip-item-border-radius$kendo-taskboard-pane-actions-padding-x Number0px0px$kendo-taskboard-spacer16px
Description
Border radius of tabs
+
Description
The horizontal padding of the TaskBoard pane actions.
$kendo-tabstrip-item-gap$kendo-taskboard-card-padding-y Number0px0pxk-math-div( $kendo-taskboard-spacer, 2 )8px
Description
Spacing between tabs
+
Description
The vertical padding of the TaskBoard Card.
$kendo-tabstrip-item-bgNullnullnull$kendo-taskboard-card-padding-xNumber$kendo-taskboard-card-padding-y8px
Description
Background color of tabs
+
Description
The horizontal padding of the TaskBoard Card.
$kendo-tabstrip-item-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)$kendo-taskboard-card-border-widthNumber1px1px
Description
Text color of tabs
+
Description
The border width of the TaskBoard Card.
$kendo-tabstrip-item-borderNullnullnull$kendo-taskboard-card-border-radiusNumber$kendo-card-border-radius4px
Description
Border color of tabs
+
Description
The border radius of the TaskBoard Card.
$kendo-tabstrip-item-gradientNullnullnull$kendo-taskboard-card-bgColor$kendo-card-bg#ffffff
Description
Background gradient of tabs
+
Description
The background color of the TaskBoard Card.
$kendo-tabstrip-item-hover-bg$kendo-taskboard-card-text Color$kendo-hover-bgrgba(0, 0, 0, 0.04)$kendo-card-textrgba(0, 0, 0, 0.87)
Description
Background color of hovered tabs
+
Description
The text color of the TaskBoard Card.
$kendo-tabstrip-item-hover-text$kendo-taskboard-card-border Color$kendo-body-textrgba(0, 0, 0, 0.87)$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
Text color of hovered tabs
+
Description
The border color of the TaskBoard Card.
$kendo-tabstrip-item-hover-borderNullnullnull$kendo-taskboard-card-shadowStringnonenone
Description
Border color of hovered tabs
+
Description
The shadow of the TaskBoard Card.
$kendo-tabstrip-item-hover-gradientNullnullnull$kendo-taskboard-card-category-border-widthNumber4px4px
Description
Background gradient of hovered tabs
+
Description
The border width of the TaskBoard Card category.
$kendo-tabstrip-item-selected-bgNullnullnull$kendo-taskboard-card-hover-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% ))rgba(0, 0, 0, 0.172)
Description
Background color of selected tabs
+
Description
The border color of the hovered TaskBoard Card.
$kendo-tabstrip-item-selected-text$kendo-taskboard-card-focus-border Color$kendo-body-textrgba(0, 0, 0, 0.87)if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 9% ))rgba(0, 0, 0, 0.1628)
Description
Text color of selected tabs
+
Description
The border color of the focused TaskBoard Card.
$kendo-tabstrip-item-selected-borderNullnullnull$kendo-taskboard-card-focus-shadowStringnonenone
Description
Border color of selected tabs
+
Description
The shadow of the focused TaskBoard Card.
$kendo-tabstrip-item-selected-gradientNullnullnull$kendo-taskboard-card-selected-borderColor$kendo-color-primary-lighter#7986cb
Description
Background gradient of selected tabs
+
Description
The border of the selected TaskBoard Card.
$kendo-tabstrip-content-padding-xNumberk-map-get( $kendo-spacing, 4 )16px$kendo-taskboard-card-selected-shadowStringnonenone
Description
Horizontal padding of tabstrip content
+
Description
The shadow of the selected TaskBoard Card.
$kendo-tabstrip-content-padding-yNumberk-map-get( $kendo-spacing, 4 )16px$kendo-taskboard-card-header-textColor$kendo-color-primary#3f51b5
Description
Vertical padding of tabstrip content
+
Description
The text color of the TaskBoard Card header text.
$kendo-tabstrip-content-border-widthNumber0px0px$kendo-taskboard-card-header-focus-textColor$kendo-color-primary-darker#303f9f
Description
Width of border around tabstrip content
+
Description
The text color of the hovered TaskBoard Card header text.
$kendo-tabstrip-content-bg$kendo-taskboard-card-header-hover-text Colortransparenttransparent$kendo-color-primary-darker#303f9f
Description
Background color of tabstrip content
+
Description
The text color of the focused TaskBoard Card header text.
$kendo-tabstrip-content-textNullnullnull$kendo-taskboard-drag-placeholder-border-widthNumber1px1px
Description
Text color of tabstrip content
+
Description
The border width of the TaskBoard Card placeholder.
$kendo-tabstrip-content-borderNullnullnull$kendo-taskboard-drag-placeholder-border-radiusNumber$kendo-taskboard-card-border-radius4px
Description
Border color of tabstrip content
+
Description
The border radius of the TaskBoard Card placeholder.
$kendo-tabstrip-content-focus-border$kendo-taskboard-drag-placeholder-bg Color$kendo-component-textrgba(0, 0, 0, 0.87)rgba( white, .2 )rgba(255, 255, 255, 0.2)
Description
Border color of tabstrip focused content
+
Description
The background color of the TaskBoard Card placeholder.
+
$kendo-taskboard-drag-placeholder-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the TaskBoard Card placeholder.
+### Wizard + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-wizard-padding-xNumber$kendo-padding-md-x * 1.2520px
Description
The horizontal padding of the Wizard.
+
$kendo-wizard-padding-yNumber$kendo-wizard-padding-x20px
Description
The vertical padding of the Wizard.
+
$kendo-wizard-content-padding-xNumber$kendo-padding-md-x * 232px
Description
The horizontal padding of the Wizard content.
+
$kendo-wizard-content-padding-yNumber$kendo-padding-md-y * 832px
Description
The vertical padding of the Wizard content.
+
$kendo-wizard-buttons-margin-xNumber10px10px
Description
The horizontal margin of the Wizard Button container.
+
$kendo-wizard-border-widthNumber0px0px
Description
The border width of the Wizard.
+
$kendo-wizard-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Wizard.
+
$kendo-wizard-line-heightNumber$kendo-line-height-md2
Description
The line height of the Wizard.
+
$kendo-wizard-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the Wizard.
+
$kendo-wizard-step-focus-borderColor#656565#656565
Description
The outline of the focused Wizard step.
+
+