Customization
The following table lists the available variables for customizing the Bootstrap theme.
Variables
Common
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-border-radius | Number |
|
|
Description Border radius for all components. | |||
$base-bg | Color |
|
|
Description The background of the components' chrome area. | |||
$base-text | Color |
|
|
Description The text color of the components' chrome area. | |||
$base-border | Color |
|
|
Description The border color of the components' chrome area. | |||
$base-gradient | Null |
|
|
Description The gradient background of the components' chrome area. | |||
$hovered-bg | Color |
|
|
Description The background of hovered items. | |||
$hovered-text | Color |
|
|
Description The text color of hovered items. | |||
$hovered-border | Color |
|
|
Description The border color of hovered items. | |||
$hovered-gradient | Null |
|
|
Description The gradient background of hovered items. | |||
$selected-bg | Color |
|
|
Description The background of selected items. | |||
$selected-text | Color |
|
|
Description The text color of selected items. | |||
$selected-border | Color |
|
|
Description The border color of selected items. | |||
$selected-gradient | Null |
|
|
Description The gradient background of selected items. |
Avatar
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-avatar-border-width | Number |
|
|
Description Border width of the avatar. | |||
$kendo-avatar-font-family | List |
|
|
Description Font family of the avatar. | |||
$kendo-avatar-font-size | Number |
|
|
Description Font size of the avatar. | |||
$kendo-avatar-line-height | Number |
|
|
Description Line height of the avatar. | |||
$kendo-avatar-sizes | Map |
|
|
Description The sizes of the avatar. | |||
$kendo-avatar-theme-colors | Map |
|
|
Description Theme colors map of the avatar. |
Button
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-button-border-width | Number |
|
|
Description Width of the border around the button. | |||
$kendo-button-border-radius | Null |
|
|
Description Border radius of the button. | |||
$kendo-button-padding-x | Number |
|
|
Description Horizontal padding of the button. | |||
$kendo-button-padding-y | Number |
|
|
Description Vertical padding of the button. | |||
$kendo-button-font-family | List |
|
|
Description Font family of the button. | |||
$kendo-button-font-size | Number |
|
|
Description Font sizes of the button. | |||
$kendo-button-line-height | Number |
|
|
Description Line heights used along with $font-size. | |||
$kendo-button-calc-size | Calculation |
|
|
Description Calculated height of the button. | |||
$kendo-button-inner-calc-size | Calculation |
|
|
Description Calculated inner height of the button. Without the border width. | |||
$kendo-button-theme-colors | Map |
|
|
Description Theme colors map for the button. | |||
$kendo-button-bg | Color |
|
|
Description The base background of the button. | |||
$kendo-button-text | Color |
|
|
Description The base text color of the button. | |||
$kendo-button-border | Color |
|
|
Description The base border color of the button. | |||
$kendo-button-gradient | Null |
|
|
Description The base background gradient of the button. | |||
$kendo-button-shadow | Null |
|
|
Description The base shadow of the button. | |||
$kendo-button-hover-bg | Color |
|
|
Description The base background of hovered button. | |||
$kendo-button-hover-text | Null |
|
|
Description The base text color of hovered button. | |||
$kendo-button-hover-border | Color |
|
|
Description The base border color of hovered button. | |||
$kendo-button-hover-gradient | Null |
|
|
Description The base background gradient of hovered button. | |||
$kendo-button-hover-shadow | Null |
|
|
Description The base shadow of hovered button. | |||
$kendo-button-active-bg | Color |
|
|
Description The base background color of active button. | |||
$kendo-button-active-text | Null |
|
|
Description The base text color of active button. | |||
$kendo-button-active-border | Color |
|
|
Description The base border color of active button. | |||
$kendo-button-active-gradient | Null |
|
|
Description The base background gradient of active button. | |||
$kendo-button-active-shadow | Null |
|
|
Description The base shadow of active button. | |||
$kendo-button-selected-bg | Color |
|
|
Description The base background color of selected button. | |||
$kendo-button-selected-text | Color |
|
|
Description The text color of selected buttons. | |||
$kendo-button-selected-border | Color |
|
|
Description The border color of selected buttons. | |||
$kendo-button-selected-gradient | Null |
|
|
Description The background gradient of selected buttons. | |||
$kendo-button-selected-shadow | Null |
|
|
Description The base shadow of selected button. | |||
$kendo-button-focus-bg | Color |
|
|
Description The base background of focused button. | |||
$kendo-button-focus-text | Null |
|
|
Description The base text color of focused button. | |||
$kendo-button-focus-border | Color |
|
|
Description The base border color of focused button. | |||
$kendo-button-focus-gradient | Null |
|
|
Description The base background gradient of focused button. | |||
$kendo-button-focus-shadow | List |
|
|
Description The base shadow of focused button. | |||
$kendo-button-disabled-bg | Null |
|
|
Description The base background of disabled button. | |||
$kendo-button-disabled-text | Null |
|
|
Description The base text color of disabled button. | |||
$kendo-button-disabled-border | Null |
|
|
Description The base border color of disabled buttons. | |||
$kendo-button-disabled-gradient | Null |
|
|
Description The base background gradient of disabled button. | |||
$kendo-button-disabled-shadow | Null |
|
|
Description The base shadow of disabled button. | |||
$kendo-flat-button-hover-opacity | Number |
|
|
Description The overlay opacity of hovered flat button. Used to create background for the flat button. | |||
$kendo-flat-button-focus-opacity | Null |
|
|
Description The overlay opacity of focused flat button. Used to create background for the flat button. | |||
$kendo-flat-button-active-opacity | Number |
|
|
Description The overlay opacity of active flat button. Used to create background for the flat button. | |||
$kendo-flat-button-selected-opacity | Number |
|
|
Description The overlay opacity of selected flat button. Used to create background for the flat button. | |||
$kendo-button-transition | List |
|
|
Description The color transition of the button. |
Charts
Name | Type | Default value | Computed value |
---|---|---|---|
$series-a | Color |
|
|
Description The first base series color and its light and dark shades. | |||
$series-b | Color |
|
|
Description The second base series color and its light and dark shades. | |||
$series-c | Color |
|
|
Description The third base series color and its light and dark shades. | |||
$series-d | Color |
|
|
Description The fourth base series color and its light and dark shades. | |||
$series-e | Color |
|
|
Description The fifth base series color and its light and dark shades. | |||
$series-f | Color |
|
|
Description The sixth base series color and its light and dark shades. | |||
$series-1 | Color |
|
|
Description The series colors in order: base, light, dark, lighter, darker | |||
$chart-major-lines | Color |
|
|
Description The color of the Chart grid lines (major). | |||
$chart-minor-lines | Color |
|
|
Description The color of the Chart grid lines (minor). |
Checkbox
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-checkbox-border-width | Number |
|
|
Description Border width of checkbox. | |||
$kendo-checkbox-bg | Color |
|
|
Description Background color of checkbox. | |||
$kendo-checkbox-text | Null |
|
|
Description Color of checkbox. | |||
$kendo-checkbox-border | Color |
|
|
Description Border color of checkbox. | |||
$kendo-checkbox-hover-bg | Null |
|
|
Description Background color of hovered checkbox. | |||
$kendo-checkbox-hover-text | Null |
|
|
Description Color of hovered checkbox. | |||
$kendo-checkbox-hover-border | Null |
|
|
Description Border color of hovered checkbox. | |||
$kendo-checkbox-checked-bg | Color |
|
|
Description Background color of checked checkbox. | |||
$kendo-checkbox-checked-text | Color |
|
|
Description Color of checked checkbox. | |||
$kendo-checkbox-checked-border | Color |
|
|
Description Border color of checked checkbox. | |||
$kendo-checkbox-indeterminate-bg | Color |
|
|
Description Background color of indeterminate checkbox. | |||
$kendo-checkbox-indeterminate-text | Color |
|
|
Description Color of indeterminate checkbox. | |||
$kendo-checkbox-indeterminate-border | Color |
|
|
Description Border color of indeterminate checkbox. | |||
$kendo-checkbox-focus-border | Color |
|
|
Description Border color of focused checkbox. | |||
$kendo-checkbox-focus-shadow | List |
|
|
Description Box shadow of focused checkbox. | |||
$kendo-checkbox-focus-checked-border | Color |
|
|
Description Border color of focused and checked checkbox. | |||
$kendo-checkbox-focus-checked-shadow | List |
|
|
Description Box shadow of focused and checked checkbox. | |||
$kendo-checkbox-disabled-bg | Null |
|
|
Description Background color of disabled checkbox. | |||
$kendo-checkbox-disabled-text | Null |
|
|
Description Color of disabled checkbox. | |||
$kendo-checkbox-disabled-border | Null |
|
|
Description Border color of disabled checkbox. | |||
$kendo-checkbox-disabled-checked-bg | Null |
|
|
Description Background color of disabled and checked checkbox. | |||
$kendo-checkbox-disabled-checked-text | Null |
|
|
Description Color of disabled and checked checkbox. | |||
$kendo-checkbox-disabled-checked-border | Null |
|
|
Description Color of disabled and checked checkbox. | |||
$kendo-checkbox-invalid-bg | Null |
|
|
Description Background color of invalid checkbox. | |||
$kendo-checkbox-invalid-text | Color |
|
|
Description Color of invalid checkbox. | |||
$kendo-checkbox-invalid-border | Color |
|
|
Description Border color of invalid checkbox. | |||
$kendo-checkbox-indicator-type | String |
|
|
Description Type of checkbox indicator. | |||
$kendo-checkbox-glyph-font-family | List |
|
|
Description Glyph font family of checkbox indicator. | |||
$kendo-checkbox-checked-glyph | String |
|
|
Description Glyph of checkbox indicator. | |||
$kendo-checkbox-indeterminate-glyph | String |
|
|
Description Glyph of indeterminate checkbox indicator. | |||
$kendo-checkbox-checked-image | String |
|
|
Description Image of checked checkbox indicator. | |||
$kendo-checkbox-indeterminate-image | String |
|
|
Description Image of checked checkbox indicator. | |||
$kendo-checkbox-label-margin-x | Number |
|
|
Description The horizontal margin of the checkbox inside a label. | |||
$kendo-checkbox-list-spacing | Number |
|
|
Description Spacing between items of horizontal checkbox list. | |||
$kendo-checkbox-list-item-padding-x | Number |
|
|
Description Horizontal padding of checkbox list items. | |||
$kendo-checkbox-list-item-padding-y | Number |
|
|
Description Vertical padding of checkbox list items. | |||
$kendo-checkbox-ripple-bg | Color |
|
|
Description Background color of checkbox ripple. | |||
$kendo-checkbox-ripple-opacity | Number |
|
|
Description Opacity of checkbox ripple. |
Chip
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-chip-border-width | Number |
|
|
Description Width of the border around the button. | |||
$kendo-chip-spacing | Number |
|
|
Description The spacing between the text and the icons of the chip. | |||
$kendo-chip-padding-x | Number |
|
|
Description Horizontal padding of the chip. | |||
$kendo-chip-padding-y | Number |
|
|
Description Vertical padding of the chip. | |||
$kendo-chip-font-size | Number |
|
|
Description Font sizes of the chip. | |||
$kendo-chip-line-height | Number |
|
|
Description Line heights of the chip that are connected to the $font-size. | |||
$kendo-chip-sizes | Map |
|
|
Description Sizes map for the chip. | |||
$kendo-chip-base-bg | Color |
|
|
Description The base background color of the chip. | |||
$kendo-chip-theme-colors | Map |
|
|
Description Theme colors map for the chip. | |||
$kendo-chip-solid-bg | Color |
|
|
Description The base background color of solid chip. | |||
$kendo-chip-solid-text | Color |
|
|
Description The base text color of solid chip. | |||
$kendo-chip-solid-border | Color |
|
|
Description The base border color of solid chip. | |||
$kendo-chip-solid-shadow | List |
|
|
Description The base shadow of solid chip. | |||
$kendo-chip-solid-focus-bg | Color |
|
|
Description The base background color of focused solid chip. | |||
$kendo-chip-solid-focus-text | Null |
|
|
Description The base text color of focused solid chip. | |||
$kendo-chip-solid-hover-bg | Color |
|
|
Description The base background color of hovered solid chip. | |||
$kendo-chip-solid-hover-text | Null |
|
|
Description The base text color of hovered solid chip. | |||
$kendo-chip-solid-selected-bg | Color |
|
|
Description The base background color of selected solid chip. | |||
$kendo-chip-solid-selected-text | Null |
|
|
Description The base text color of selected solid chip. | |||
$kendo-chip-outline-bg | Color |
|
|
Description The base background color of outline chip. | |||
$kendo-chip-outline-text | Color |
|
|
Description The base text color of outline chip. | |||
$kendo-chip-outline-border | Color |
|
|
Description The base border color of outline chip. | |||
$kendo-chip-outline-shadow | List |
|
|
Description The base shadow of outline chip. | |||
$kendo-chip-outline-hover-bg | Color |
|
|
Description The base background color of hovered outline chip. | |||
$kendo-chip-outline-hover-text | Color |
|
|
Description The base text color of hovered outline chip. | |||
$kendo-chip-outline-selected-bg | Color |
|
|
Description The base background color of selected outline chip. | |||
$kendo-chip-outline-selected-text | Color |
|
|
Description The base text color of selected outline chip. | |||
$kendo-chip-list-sizes | Map |
|
|
Description The sizes of the chip list. |
Color System
Name | Type | Default value | Computed value |
---|---|---|---|
$accent | Color |
|
|
Deprecated Will be removed in v5. Use `$primary` variable instead. Description The color that focuses the user attention. | |||
$accent-contrast | Color |
|
|
Deprecated Will be removed in v5. Use `$primary-contrast` variable instead. Description The color used along with the primary color denoted by $primary. | |||
$primary | Color |
|
|
Description The color that focuses the user attention. Used for primary buttons and for elements of primary importance across the theme. | |||
$primary-contrast | Color |
|
|
Description The color used along with the primary color denoted by $primary. Used to provide contrast between the background and foreground colors. | |||
$secondary | Color |
|
|
Description The secondary color of the theme. | |||
$secondary-contrast | Color |
|
|
Description The color used along with the secondary color denoted by $secondary. Used to provide contrast between the background and foreground colors. | |||
$tertiary | Color |
|
|
Description The tertiary color of the theme. | |||
$tertiary-contrast | Color |
|
|
Description The color used along with the tertiary color denoted by $tertiary. Used to provide contrast between the background and foreground colors. | |||
$info | Color |
|
|
Description The color for informational messages and states. | |||
$success | Color |
|
|
Description The color for success messages and states. | |||
$warning | Color |
|
|
Description The color for warning messages and states. | |||
$error | Color |
|
|
Description The color for error messages and states. | |||
$dark | Color |
|
|
Description The dark color of the theme. | |||
$light | Color |
|
|
Description The light color of the theme. | |||
$inverse | Color |
|
|
Description Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark |
Component
Name | Type | Default value | Computed value |
---|---|---|---|
$component-bg | Color |
|
|
Description Background color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !default;`. | |||
$component-text | Color |
|
|
Description Text color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$grid-text: component-text !default;`. | |||
$component-border | Color |
|
|
Description Border color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$grid-border: component-border !default;`. |
Floating-action-button
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-fab-border-width | Number |
|
|
Description Width of the border around the FAB. | |||
$kendo-fab-border-radius | Number |
|
|
Description Border radius of the FAB. | |||
$kendo-fab-font-family | List |
|
|
Description Font family of the FAB. | |||
$kendo-fab-font-size | Number |
|
|
Description Font size of the FAB. | |||
$kendo-fab-line-height | Number |
|
|
Description Line height of the FAB. | |||
$kendo-fab-padding-x | Number |
|
|
Description Horizontal padding of the FAB. | |||
$kendo-fab-padding-y | Number |
|
|
Description Vertical padding of the FAB. | |||
$kendo-fab-icon-width | Number |
|
|
Description FAB icon width. | |||
$kendo-fab-icon-height | Number |
|
|
Description FAB icon height. | |||
$kendo-fab-icon-spacing | Number |
|
|
Description FAB icon spacing. | |||
$kendo-fab-items-padding-x | Number |
|
|
Description FAB items horizontal padding. | |||
$kendo-fab-items-padding-y | Number |
|
|
Description FAB items vertical padding. | |||
$kendo-fab-item-text-padding-x | Number |
|
|
Description FAB item text horizontal padding. | |||
$kendo-fab-item-text-padding-y | Number |
|
|
Description FAB item text vertical padding. | |||
$kendo-fab-item-text-border-width | Number |
|
|
Description Width of the FAB item text border. | |||
$kendo-fab-item-text-border-radius | Number |
|
|
Description Border radius of the FAB item text. | |||
$kendo-fab-item-text-font-size | Number |
|
|
Description Font size of the FAB item text. | |||
$kendo-fab-item-text-line-height | Number |
|
|
Description Line height of the FAB item text. | |||
$kendo-fab-item-icon-padding-x | Number |
|
|
Description FAB item icon horizontal padding. | |||
$kendo-fab-item-icon-padding-y | Number |
|
|
Description FAB item icon vertical padding. | |||
$kendo-fab-item-icon-border-width | Number |
|
|
Description Width of the FAB item icon border. | |||
$kendo-fab-item-icon-border-radius | Number |
|
|
Description Border radius of the FAB item icon. | |||
$kendo-fab-item-icon-width | Number |
|
|
Description Width of the FAB item icon. | |||
$kendo-fab-item-icon-height | Number |
|
|
Description height of the FAB item icon. | |||
$kendo-fab-theme-colors | Map |
|
|
Description Theme colors map for the FAB. | |||
$kendo-fab-shadow | List |
|
|
Description The base shadow of the FAB. | |||
$kendo-fab-disabled-shadow | List |
|
|
Description The disabled shadow of the FAB. | |||
$kendo-fab-active-shadow | Null |
|
|
Description The active shadow of the FAB. | |||
$kendo-fab-item-text | Color |
|
|
Description The base text color of the FAB item. | |||
$kendo-fab-item-bg | Color |
|
|
Description The base background color of the FAB item. | |||
$kendo-fab-item-border | Color |
|
|
Description The base border color of the FAB item. | |||
$kendo-fab-item-icon-text | Color |
|
|
Description The base text color of the FAB item icon. | |||
$kendo-fab-item-icon-bg | Color |
|
|
Description The base background color of the FAB item icon. | |||
$kendo-fab-item-icon-border | Color |
|
|
Description The base border color of the FAB item icon. | |||
$kendo-fab-item-shadow | List |
|
|
Description The base shadow of the FAB item. | |||
$kendo-fab-item-disabled-shadow | List |
|
|
Description The disabled shadow of the FAB item. | |||
$kendo-fab-item-active-shadow | Null |
|
|
Description The active shadow of the FAB item. |
Grid
Name | Type | Default value | Computed value |
---|---|---|---|
$grid-bg | Color |
|
|
Description Background color of the grid component | |||
$grid-text | Color |
|
|
Description Text color of the grid component | |||
$grid-border | Color |
|
|
Description Border color of the grid component | |||
$grid-header-bg | Color |
|
|
Description Background color of grid header | |||
$grid-header-text | Color |
|
|
Description Text color of grid header | |||
$grid-header-border | Color |
|
|
Description Border color of grid header | |||
$grid-header-gradient | Null |
|
|
Description Background gradient of grid header | |||
$grid-footer-bg | Color |
|
|
Description Background color of grid footer | |||
$grid-footer-text | Color |
|
|
Description Text color of grid footer | |||
$grid-footer-border | Color |
|
|
Description Border color of grid footer | |||
$grid-alt-bg | Color |
|
|
Description Background color of alternating rows in grid | |||
$grid-alt-text | Null |
|
|
Description Text color of alternating rows in grid | |||
$grid-alt-border | Null |
|
|
Description Border color of alternating rows in grid | |||
$grid-hovered-bg | Color |
|
|
Description Background color of hovered rows in grid | |||
$grid-hovered-text | Null |
|
|
Description Text color of hovered rows in grid | |||
$grid-hovered-border | Null |
|
|
Description Border color of hovered rows in grid | |||
$grid-selected-bg | Color |
|
|
Description Background color of selected rows in grid | |||
$grid-selected-text | Color |
|
|
Description Text color of selected rows in grid | |||
$grid-selected-border | Color |
|
|
Description Border color of selected rows in grid |
Icons
Name | Type | Default value | Computed value |
---|---|---|---|
$icon-font-url | Null |
|
|
Description The URL to the icon font that will be used by the theme The default value of `null` embeds the package font with a `data:` URL |
List
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-list-font-size | Null |
|
|
Description Font size of the list component, if no size is set. | |||
$kendo-list-line-height | Null |
|
|
Description Line height of the list component, if no size is set. | |||
$kendo-list-header-padding-x | Null |
|
|
Description Horizontal padding of list header, if no size is set. | |||
$kendo-list-header-padding-y | Null |
|
|
Description Vertical padding of list header, if no size is set. | |||
$kendo-list-header-border-width | List |
|
|
Description Border width of list header. | |||
$kendo-list-header-font-size | Null |
|
|
Description Font size of list header, if no size is set. | |||
$kendo-list-header-line-height | Null |
|
|
Description Line height of list header, if no size is set. | |||
$kendo-list-header-font-weight | String |
|
|
Description Font weight of list header. | |||
$kendo-list-item-padding-x | Null |
|
|
Description Horizontal padding of list items, when no size is set. | |||
$kendo-list-item-padding-y | Null |
|
|
Description Vertical padding of list items, when no size is set. | |||
$kendo-list-item-font-size | Null |
|
|
Description Font size of list items, if no size is set. | |||
$kendo-list-item-line-height | Null |
|
|
Description Line height of list items, if no size is set. | |||
$kendo-list-group-item-padding-x | Null |
|
|
Description Horizontal padding of list group items, when no size is set. | |||
$kendo-list-group-item-padding-y | Null |
|
|
Description Vertical padding of list group items, when no size is set. | |||
$kendo-list-group-item-border-width | List |
|
|
Description Border width of list group items. | |||
$kendo-list-group-item-font-size | Null |
|
|
Description Font size of list group items, if no size is set. | |||
$kendo-list-group-item-line-height | Null |
|
|
Description Line height of list group items, if no size is set. | |||
$kendo-list-group-item-font-weight | String |
|
|
Description Font weight of list group item. | |||
$kendo-list-bg | Color |
|
|
Description Background color of the list component. | |||
$kendo-list-text | Color |
|
|
Description Text color of the list component. | |||
$kendo-list-border | Color |
|
|
Description Border color of the list component. | |||
$kendo-list-header-bg | Null |
|
|
Description Background color of list header. | |||
$kendo-list-header-text | Null |
|
|
Description Text color of list header. | |||
$kendo-list-header-border | String |
|
|
Description Border color of list header. | |||
$kendo-list-header-shadow | Null |
|
|
Description Box shadow of list header. | |||
$kendo-list-item-bg | Null |
|
|
Description Background color of list items. | |||
$kendo-list-item-text | Null |
|
|
Description Text color of list items. | |||
$kendo-list-item-hover-bg | Color |
|
|
Description Background color of hovered list items. | |||
$kendo-list-item-hover-text | Color |
|
|
Description Text color of hovered list items. | |||
$kendo-list-item-focus-bg | Null |
|
|
Description Background color of focused list items. | |||
$kendo-list-item-focus-text | Null |
|
|
Description Text color of focused list items. | |||
$kendo-list-item-focus-shadow | List |
|
|
Description Box shadow of focused list items. | |||
$kendo-list-item-selected-bg | Color |
|
|
Description Background color of selected list items. | |||
$kendo-list-item-selected-text | Color |
|
|
Description Text color of selected list items. | |||
$kendo-list-group-item-bg | Null |
|
|
Description Background color of list group items. | |||
$kendo-list-group-item-text | Null |
|
|
Description Text color of list group items. | |||
$kendo-list-group-item-border | String |
|
|
Description The border color of list group items. | |||
$kendo-list-group-item-shadow | Null |
|
|
Description The base shadow of list group items. | |||
$kendo-list-no-data-text | Color |
|
|
Description Text color of the 'No Data' text. |
Menu
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-menu-popup-padding-x | Null |
|
|
Description Horizontal padding of the menu popup. | |||
$kendo-menu-popup-padding-y | Null |
|
|
Description Vertical padding of the menu popup. | |||
$kendo-menu-popup-border-width | Number |
|
|
Description Width of the border around the menu popup. | |||
$kendo-menu-popup-font-size | Number |
|
|
Description Font sizes of the menu popup. | |||
$kendo-menu-popup-line-height | Number |
|
|
Description Line heights used along with $font-size. | |||
$kendo-menu-popup-bg | Color |
|
|
Description The background of the menu popup. | |||
$kendo-menu-popup-text | Color |
|
|
Description The text color of the menu popup. | |||
$kendo-menu-popup-border | Color |
|
|
Description The border color of the menu popup. | |||
$kendo-menu-popup-gradient | Null |
|
|
Description The background gradient of the menu popup. | |||
$kendo-menu-popup-item-padding-x | Number |
|
|
Description Horizontal padding of the menu item in popup. | |||
$kendo-menu-popup-item-padding-y | Number |
|
|
Description Vertical padding of the menu item in popup. | |||
$kendo-menu-popup-item-padding-end | Calculation |
|
|
Description The end padding of the menu item in popup. | |||
$kendo-menu-popup-item-icon-margin-start-sm | Number |
|
|
Description The start margin of the menu item expand icon. | |||
$kendo-menu-popup-item-icon-margin-end-sm | Calculation |
|
|
Description The end margin of the menu item expand icon. | |||
$kendo-menu-popup-item-spacing | Number |
|
|
Description The spacing between the menu items in popup. | |||
$kendo-menu-popup-item-bg | Null |
|
|
Description The background of the menu item in popup. | |||
$kendo-menu-popup-item-text | Null |
|
|
Description The text color of the menu item in popup. | |||
$kendo-menu-popup-item-border | Null |
|
|
Description The border color of the menu item in popup. | |||
$kendo-menu-popup-item-gradient | Null |
|
|
Description The background gradient of the menu item in popup. | |||
$kendo-menu-popup-item-hover-bg | Color |
|
|
Description The background of hovered menu item in popup. | |||
$kendo-menu-popup-item-hover-text | Color |
|
|
Description The text color of hovered menu item in popup. | |||
$kendo-menu-popup-item-hover-border | Null |
|
|
Description The border color of hovered menu item in popup. | |||
$kendo-menu-popup-item-hover-gradient | Null |
|
|
Description The background gradient of hovered menu item in popup. | |||
$kendo-menu-popup-item-expanded-bg | Color |
|
|
Description The background of expanded menu item in popup. | |||
$kendo-menu-popup-item-expanded-text | Color |
|
|
Description The text color of expanded menu item in popup. | |||
$kendo-menu-popup-item-expanded-border | Null |
|
|
Description The border color of expanded menu item in popup. | |||
$kendo-menu-popup-item-expanded-gradient | Null |
|
|
Description The background gradient of expanded menu item in popup. | |||
$kendo-menu-popup-item-focus-shadow | List |
|
|
Description The base shadow of focused menu item in popup. |
Menu-button
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-menu-button-arrow-padding-x | Number |
|
|
Description Horizontal padding of the arrow button. |
Radio
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-radio-radius | Number |
|
|
Description Border radius of radio button. | |||
$kendo-radio-border-width | Number |
|
|
Description Border width of radio button. | |||
$kendo-radio-bg | Color |
|
|
Description Background color of radio button. | |||
$kendo-radio-text | Null |
|
|
Description Color of radio button. | |||
$kendo-radio-border | Color |
|
|
Description Border color of radio button. | |||
$kendo-radio-hover-bg | Null |
|
|
Description Background color of hovered radio button. | |||
$kendo-radio-hover-text | Null |
|
|
Description Color of hovered radio button. | |||
$kendo-radio-hover-border | Null |
|
|
Description Border color of hovered radio button. | |||
$kendo-radio-checked-bg | Color |
|
|
Description Background color of checked radio button. | |||
$kendo-radio-checked-text | Color |
|
|
Description Color of checked radio button. | |||
$kendo-radio-checked-border | Color |
|
|
Description Border color of checked radio button. | |||
$kendo-radio-focus-border | Color |
|
|
Description Border color of focused radio button. | |||
$kendo-radio-focus-shadow | List |
|
|
Description Box shadow of focused radio button. | |||
$kendo-radio-focus-checked-border | Color |
|
|
Description Border color of focused and checked radio button. | |||
$kendo-radio-focus-checked-shadow | List |
|
|
Description Box shadow of focused and checked radio button. | |||
$kendo-radio-disabled-bg | Null |
|
|
Description Background color of disabled radio button. | |||
$kendo-radio-disabled-text | Null |
|
|
Description Color of disabled radio button. | |||
$kendo-radio-disabled-border | Null |
|
|
Description Border color of disabled radio button. | |||
$kendo-radio-disabled-checked-bg | Null |
|
|
Description Background color of disabled and checked radio button. | |||
$kendo-radio-disabled-checked-text | Null |
|
|
Description Color of disabled and checked radio button. | |||
$kendo-radio-disabled-checked-border | Null |
|
|
Description Border color of disabled and checked radio button. | |||
$kendo-radio-invalid-bg | Null |
|
|
Description Background color of invalid radio button. | |||
$kendo-radio-invalid-text | Color |
|
|
Description Color of invalid radio button. | |||
$kendo-radio-invalid-border | Color |
|
|
Description Border color of invalid radio button. | |||
$kendo-radio-indicator-type | String |
|
|
Description Type of radio button indicator. | |||
$kendo-radio-glyph-font-family | List |
|
|
Description Glyph font family of radio button indicator. | |||
$kendo-radio-checked-glyph | String |
|
|
Description Glyph of radio button indicator. | |||
$kendo-radio-checked-image | String |
|
|
Description Image of checked radio button indicator. | |||
$kendo-radio-disabled-checked-image | Null |
|
|
Description Image of disabled and checked radio button indicator. | |||
$kendo-radio-label-margin-x | Number |
|
|
Description The horizontal margin of the radio button inside of a label. | |||
$kendo-radio-list-spacing | Number |
|
|
Description Spacing between items of horizontal radio button list. | |||
$kendo-radio-list-item-padding-x | Number |
|
|
Description Horizontal padding of radio button list items. | |||
$kendo-radio-list-item-padding-y | Number |
|
|
Description Vertical padding of radio button list items. | |||
$kendo-radio-ripple-bg | Color |
|
|
Description Background color of radio button ripple. | |||
$kendo-radio-ripple-opacity | Number |
|
|
Description Opacity of radio button ripple. |
Split-button
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-split-button-focus-shadow | List |
|
|
Description Focus shadow of the split button. | |||
$kendo-split-button-arrow-padding-x | Number |
|
|
Description Horizontal padding of the arrow button. | |||
$kendo-split-button-arrow-padding-y | Number |
|
|
Description Vertical padding of the arrow button. |
Switch
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-switch-font-family | Null |
|
|
Description Font family of the switch. | |||
$kendo-switch-track-border-width | Number |
|
|
Description Border width of the switch track. | |||
$kendo-switch-thumb-border-width | Null |
|
|
Description Border width of the switch thumb. | |||
$kendo-switch-label-text-transform | Null |
|
|
Description Text transform of the switch label. | |||
$kendo-switch-label-display | String |
|
|
Description Display of the switch label. | |||
$kendo-switch-sizes | Map |
|
|
Description Map with the different switch sizes. | |||
$kendo-switch-off-track-bg | Color |
|
|
Description The background of the track when the switch is not checked. | |||
$kendo-switch-off-track-text | Null |
|
|
Description The text color of the track when the switch is not checked. | |||
$kendo-switch-off-track-border | Color |
|
|
Description The border color of the track when the switch is not checked. | |||
$kendo-switch-off-track-gradient | Null |
|
|
Description The background gradient of the track when the switch is not checked. | |||
$kendo-switch-off-track-hover-bg | Null |
|
|
Description The background of the track when the hovered switch is not checked. | |||
$kendo-switch-off-track-hover-text | Null |
|
|
Description The text color of the track when the hovered switch is not checked. | |||
$kendo-switch-off-track-hover-border | Null |
|
|
Description The border color of the track when the hovered switch is not checked. | |||
$kendo-switch-off-track-hover-gradient | Null |
|
|
Description The background gradient of the track when the hovered switch is not checked. | |||
$kendo-switch-off-track-focus-bg | Null |
|
|
Description The background of the track when the focused switch is not checked. | |||
$kendo-switch-off-track-focus-text | Null |
|
|
Description The text color of the track when the focused switch is not checked. | |||
$kendo-switch-off-track-focus-border | Color |
|
|
Description The border color of the track when the focused switch is not checked. | |||
$kendo-switch-off-track-focus-gradient | Null |
|
|
Description The background gradient of the track when the focused switch is not checked. | |||
$kendo-switch-off-track-focus-ring | List |
|
|
Description The ring around the track when the focused switch is not checked. | |||
$kendo-switch-off-track-disabled-bg | Color |
|
|
Description The background of the track when the disabled switch is not checked. | |||
$kendo-switch-off-track-disabled-text | Null |
|
|
Description The text color of the track when the disabled switch is not checked. | |||
$kendo-switch-off-track-disabled-border | Null |
|
|
Description The border color of the track when the disabled switch is not checked. | |||
$kendo-switch-off-track-disabled-gradient | Null |
|
|
Description The background gradient of the track when the disabled switch is not checked. | |||
$kendo-switch-off-thumb-bg | Color |
|
|
Description The background of the thumb when the switch is not checked. | |||
$kendo-switch-off-thumb-text | Null |
|
|
Description The text color of the thumb when the switch is not checked. | |||
$kendo-switch-off-thumb-border | Null |
|
|
Description The border color of the thumb when the switch is not checked. | |||
$kendo-switch-off-thumb-gradient | Null |
|
|
Description The background gradient of the thumb when the switch is not checked. | |||
$kendo-switch-off-thumb-hover-bg | Null |
|
|
Description The background of the thumb when the hovered switch is not checked. | |||
$kendo-switch-off-thumb-hover-text | Null |
|
|
Description The text color of the thumb when the hovered switch is not checked. | |||
$kendo-switch-off-thumb-hover-border | Null |
|
|
Description The border color of the thumb when the hovered switch is not checked. | |||
$kendo-switch-off-thumb-hover-gradient | Null |
|
|
Description The background gradient of the thumb when the hovered switch is not checked. | |||
$kendo-switch-on-track-bg | Color |
|
|
Description The background of the track when the switch is checked. | |||
$kendo-switch-on-track-text | Null |
|
|
Description The text color of the track when the switch is checked. | |||
$kendo-switch-on-track-border | Color |
|
|
Description The border color of the track when the switch is checked. | |||
$kendo-switch-on-track-gradient | Null |
|
|
Description The background gradient of the track when the switch is checked. | |||
$kendo-switch-on-track-hover-bg | Null |
|
|
Description The background of the track when the hovered switch is checked. | |||
$kendo-switch-on-track-hover-text | Null |
|
|
Description The text color of the track when the hovered switch is checked. | |||
$kendo-switch-on-track-hover-border | Null |
|
|
Description The border color of the track when the hovered switch is checked. | |||
$kendo-switch-on-track-hover-gradient | Null |
|
|
Description The background gradient of the track when the hovered switch is checked. | |||
$kendo-switch-on-track-focus-bg | Null |
|
|
Description The background of the track when the focused switch is checked. | |||
$kendo-switch-on-track-focus-text | Null |
|
|
Description The text color of the track when the focused switch is checked. | |||
$kendo-switch-on-track-focus-border | Null |
|
|
Description The border color of the track when the focused switch is checked. | |||
$kendo-switch-on-track-focus-gradient | Null |
|
|
Description The background gradient of the track when the focused switch is checked. | |||
$kendo-switch-on-track-focus-ring | List |
|
|
Description The ring around the track when the focused switch is checked. | |||
$kendo-switch-on-track-disabled-bg | Color |
|
|
Description The background of the track when the disabled switch is checked. | |||
$kendo-switch-on-track-disabled-text | Null |
|
|
Description The text color of the track when the disabled switch is checked. | |||
$kendo-switch-on-track-disabled-border | Null |
|
|
Description The border color of the track when the disabled switch is checked. | |||
$kendo-switch-on-track-disabled-gradient | Null |
|
|
Description The background gradient of the track when the disabled switch is checked. | |||
$kendo-switch-on-thumb-bg | Color |
|
|
Description The background of the thumb when the switch is checked. | |||
$kendo-switch-on-thumb-text | Null |
|
|
Description The text color of the thumb when the switch is checked. | |||
$kendo-switch-on-thumb-border | Null |
|
|
Description The border color of the thumb when the switch is checked. | |||
$kendo-switch-on-thumb-gradient | Null |
|
|
Description The background gradient of the thumb when the switch is checked. | |||
$kendo-switch-on-thumb-hover-bg | Null |
|
|
Description The background of the thumb when the hovered switch is checked. | |||
$kendo-switch-on-thumb-hover-text | Null |
|
|
Description The text color of the thumb when the hovered switch is checked. | |||
$kendo-switch-on-thumb-hover-border | Null |
|
|
Description The border color of the thumb when the hovered switch is checked. | |||
$kendo-switch-on-thumb-hover-gradient | Null |
|
|
Description The background gradient of the thumb when the hovered switch is checked. |
Table
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-table-border-width | Number |
|
|
Description The width of the table border. | |||
$kendo-table-cell-vertical-border-width | Number |
|
|
Description The width of vertical border of table cells. | |||
$kendo-table-cell-horizontal-border-width | Number |
|
|
Description The width of horizontal border of table cells. | |||
$kendo-table-font-size | Null |
|
|
Description The font size of the table if no size is specified. | |||
$kendo-table-line-height | Null |
|
|
Description The line-height of the table if no size is specified. | |||
$kendo-table-cell-padding-x | Null |
|
|
Description The horizontal padding of the cells in the table if no size is specified. | |||
$kendo-table-cell-padding-y | Null |
|
|
Description The vertical padding of the cells in the table if no size is specified. | |||
$kendo-table-sizes | Map |
|
|
Description The sizes of the table. | |||
$kendo-table-bg | Color |
|
|
Description Background color of tables. | |||
$kendo-table-text | Color |
|
|
Description Text color of tables. | |||
$kendo-table-border | Color |
|
|
Description Border color of tables. | |||
$kendo-table-header-bg | Color |
|
|
Description Background color of table headers. | |||
$kendo-table-header-text | Color |
|
|
Description Text color of table headers. | |||
$kendo-table-header-border | Color |
|
|
Description Border color of table headers. | |||
$kendo-table-footer-bg | Color |
|
|
Description Background color of table footers. | |||
$kendo-table-footer-text | Color |
|
|
Description Text color of table footers. | |||
$kendo-table-footer-border | Color |
|
|
Description Border color of table footers. | |||
$kendo-table-group-row-bg | Color |
|
|
Description Background color of group rows in table. | |||
$kendo-table-group-row-text | Color |
|
|
Description Text color of group rows in table. | |||
$kendo-table-group-row-border | Color |
|
|
Description Border color of group rows in table. | |||
$kendo-table-alt-row-bg | Color |
|
|
Description Background color of alternating rows in table. | |||
$kendo-table-alt-row-text | Null |
|
|
Description Text color of alternating rows in table. | |||
$kendo-table-alt-row-border | Null |
|
|
Description Border color of alternating rows in table. | |||
$kendo-table-hover-bg | Color |
|
|
Description Background color of hovered rows in table. | |||
$kendo-table-hover-text | Null |
|
|
Description Text color of hovered rows in table. | |||
$kendo-table-hover-border | Null |
|
|
Description Border color of hovered rows in table. | |||
$kendo-table-focus-bg | Null |
|
|
Description Background color of focused rows in table. | |||
$kendo-table-focus-text | Null |
|
|
Description Text color of focused rows in table. | |||
$kendo-table-focus-border | Null |
|
|
Description Border color of focused rows in table. | |||
$kendo-table-focus-shadow | List |
|
|
Description Box shadow of focused rows in table. | |||
$kendo-table-selected-bg | Color |
|
|
Description Background color of selected rows in table. | |||
$kendo-table-selected-text | Color |
|
|
Description Text color of selected rows in table. | |||
$kendo-table-selected-border | Color |
|
|
Description Border color of selected rows in table. |
Tabstrip
Name | Type | Default value | Computed value |
---|---|---|---|
$tabstrip-bg | Null |
|
|
Description Background color of tabstrip component | |||
$tabstrip-text | Color |
|
|
Description Text color of tabstrip component | |||
$tabstrip-border | Color |
|
|
Description Border color of tabstrip component | |||
$tabstrip-item-padding-x | Number |
|
|
Description Horizontal padding of tabs | |||
$tabstrip-item-padding-y | Number |
|
|
Description Vertical padding of tabs | |||
$tabstrip-item-border-width | Number |
|
|
Description Width of border around tabs | |||
$tabstrip-item-border-radius | Number |
|
|
Description Border radius of tabs | |||
$tabstrip-item-gap | Number |
|
|
Description Spacing between tabs | |||
$tabstrip-item-bg | Null |
|
|
Description Background color of tabs | |||
$tabstrip-item-text | Color |
|
|
Description Text color of tabs | |||
$tabstrip-item-border | Null |
|
|
Description Border color of tabs | |||
$tabstrip-item-gradient | Null |
|
|
Description Background gradient of tabs | |||
$tabstrip-item-hovered-bg | Null |
|
|
Description Background color of hovered tabs | |||
$tabstrip-item-hovered-text | Color |
|
|
Description Text color of hovered tabs | |||
$tabstrip-item-hovered-border | Color |
|
|
Description Border color of hovered tabs | |||
$tabstrip-item-hovered-gradient | Null |
|
|
Description Background gradient of hovered tabs | |||
$tabstrip-item-selected-bg | Color |
|
|
Description Background color of selected tabs | |||
$tabstrip-item-selected-text | Color |
|
|
Description Text color of selected tabs | |||
$tabstrip-item-selected-border | Color |
|
|
Description Border color of selected tabs | |||
$tabstrip-item-selected-gradient | Null |
|
|
Description Background gradient of selected tabs | |||
$tabstrip-content-padding-x | Number |
|
|
Description Horizontal padding of tabstrip content | |||
$tabstrip-content-padding-y | Number |
|
|
Description Vertical padding of tabstrip content | |||
$tabstrip-content-border-width | Number |
|
|
Description Width of border around tabstrip content | |||
$tabstrip-content-bg | Color |
|
|
Description Background color of tabstrip content | |||
$tabstrip-content-text | Color |
|
|
Description Text color of tabstrip content | |||
$tabstrip-content-border | Color |
|
|
Description Border color of tabstrip content | |||
$tabstrip-content-border-focused | Color |
|
|
Description Border color of tabstrip focused content |
Toolbar
Name | Type | Default value | Computed value |
---|---|---|---|
$toolbar-padding-x | Number |
|
|
Description The horizontal padding of the container. | |||
$toolbar-padding-y | Number |
|
|
Description The vertical padding of the container. |
Treeview
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-treeview-font-family | List |
|
|
Description Font family of the treeview component. | |||
$kendo-treeview-font-size | Number |
|
|
Description Font size of the treeview component. | |||
$kendo-treeview-line-height | Number |
|
|
Description Line height of the treeview component. | |||
$kendo-treeview-indent | Number |
|
|
Description Indentation of child groups in treeview component. | |||
$kendo-treeview-item-padding-x | Number |
|
|
Description Horizontal padding of treeview items. | |||
$kendo-treeview-item-padding-y | Number |
|
|
Description Vertical padding of treeview items. | |||
$kendo-treeview-item-border-width | Number |
|
|
Description Border width of treeview items. | |||
$kendo-treeview-item-border-radius | Number |
|
|
Description Border radius of treeview items. | |||
$kendo-treeview-sizes | Map |
|
|
Description The sizes of the treeview. | |||
$kendo-treeview-bg | Null |
|
|
Description Background color of the treeview component. | |||
$kendo-treeview-text | Color |
|
|
Description Text color of the treeview component. | |||
$kendo-treeview-border | Null |
|
|
Description Border color of the treeview component. | |||
$kendo-treeview-item-hover-bg | Color |
|
|
Description Background color of hovered treeview items. | |||
$kendo-treeview-item-hover-text | Color |
|
|
Description Text color of hovered treeview items. | |||
$kendo-treeview-item-hover-border | Color |
|
|
Description Border color of hovered treeview items. | |||
$kendo-treeview-item-hover-gradient | Null |
|
|
Description Background gradient of hovered treeview items. | |||
$kendo-treeview-item-selected-bg | Color |
|
|
Description Background color of selected treeview items. | |||
$kendo-treeview-item-selected-text | Color |
|
|
Description Text color of selected treeview items. | |||
$kendo-treeview-item-selected-border | Color |
|
|
Description Border color of selected treeview items. | |||
$kendo-treeview-item-selected-gradient | Null |
|
|
Description Background gradient of selected treeview items. | |||
$kendo-treeview-item-focus-shadow | List |
|
|
Description Box shadow of focused treeview items. | |||
$kendo-treeview-loadmore-bg | Color |
|
|
Description Background color of load more. | |||
$kendo-treeview-loadmore-text | Color |
|
|
Description Text color of load more. | |||
$kendo-treeview-loadmore-border | Null |
|
|
Description Border color of load more. | |||
$kendo-treeview-loadmore-hover-bg | Color |
|
|
Description Background color of a hovered load more. | |||
$kendo-treeview-loadmore-hover-text | Color |
|
|
Description Text color of a hovered load more. | |||
$kendo-treeview-loadmore-hover-border | Null |
|
|
Description Border color of a hovered load more. | |||
$kendo-treeview-loadmore-focus-bg | Color |
|
|
Description Background color of a focused load more. | |||
$kendo-treeview-loadmore-focus-text | Color |
|
|
Description Text color of a focused load more. | |||
$kendo-treeview-loadmore-focus-border | Null |
|
|
Description Border color of a focused load more. | |||
$kendo-treeview-loadmore-focus-shadow | List |
|
|
Description Box shadow of a focused load more. |
Typography
Name | Type | Default value | Computed value |
---|---|---|---|
$enable-typography | Bool |
|
|
Description Global typography styles for the Kendo Bootstrap theme. | |||
$font-size | Number |
|
|
Description Base font size across all components. | |||
$font-family | List |
|
|
Description Font family across all components. | |||
$font-family-monospace | List |
|
|
Description Font family for monospaced text. Used for styling the code. | |||
$line-height | Number |
|
|
Description Line height used along with $font-size. |
Mixins
exports
Outputs a module once, no matter how many times it is included.
Parameters
- name :
String
- The name of the exported module.