Variables
The Telerik and Kendo UI Bootstrap theme employs multiple variables that you can use to customize the theme.
Variables by Scope
When it comes to the effect that a specific change in a variable's value causes, variables are not equal. Changing some values will have a much wider impact on the theme than changing others.
Depending on the extent of the styles that each variable controls, the variables fall into three main groups:
- Global variables—They control globally used theme colors and metrics like
$kendo-colors,$kendo-spacing,$kendo-border-radii,$kendo-elevation. - Variables affecting individual UI components—For example,
$kendo-grid-bg,$kendo-tabstrip-font-size.
Most component-level variables link to generic variables that are higher in the hierarchy. For instance, you can customize the background of the Grid component both through the $kendo-colors map and the $kendo-grid-bg variables. In this case, consider that the $kendo-grid-bg variable references a value from the $kendo-colors map.
List of Variables
The following tables represent the variables in the Telerik and Kendo UI Bootstrap theme by the type of styles that they control.
Color Variables
The $kendo-colors Sass map of the Telerik and Kendo UI Bootstrap theme is represented in the following table:
| Key | Value |
|---|---|
| Variable: kendo-colors | |
app-surface |
|
on-app-surface |
|
subtle |
|
surface |
|
surface-alt |
|
border |
|
border-alt |
|
base-subtle |
|
base-subtle-hover |
|
base-subtle-active |
|
base |
|
base-hover |
|
base-active |
|
base-emphasis |
|
base-on-subtle |
|
on-base |
|
base-on-surface |
|
primary-subtle |
|
primary-subtle-hover |
|
primary-subtle-active |
|
primary |
|
primary-hover |
|
primary-active |
|
primary-emphasis |
|
primary-on-subtle |
|
on-primary |
|
primary-on-surface |
|
secondary-subtle |
|
secondary-subtle-hover |
|
secondary-subtle-active |
|
secondary |
|
secondary-hover |
|
secondary-active |
|
secondary-emphasis |
|
secondary-on-subtle |
|
on-secondary |
|
secondary-on-surface |
|
tertiary-subtle |
|
tertiary-subtle-hover |
|
tertiary-subtle-active |
|
tertiary |
|
tertiary-hover |
|
tertiary-active |
|
tertiary-emphasis |
|
tertiary-on-subtle |
|
on-tertiary |
|
tertiary-on-surface |
|
info-subtle |
|
info-subtle-hover |
|
info-subtle-active |
|
info |
|
info-hover |
|
info-active |
|
info-emphasis |
|
info-on-subtle |
|
on-info |
|
info-on-surface |
|
success-subtle |
|
success-subtle-hover |
|
success-subtle-active |
|
success |
|
success-hover |
|
success-active |
|
success-emphasis |
|
success-on-subtle |
|
on-success |
|
success-on-surface |
|
warning-subtle |
|
warning-subtle-hover |
|
warning-subtle-active |
|
warning |
|
warning-hover |
|
warning-active |
|
warning-emphasis |
|
warning-on-subtle |
|
on-warning |
|
warning-on-surface |
|
error-subtle |
|
error-subtle-hover |
|
error-subtle-active |
|
error |
|
error-hover |
|
error-active |
|
error-emphasis |
|
error-on-subtle |
|
on-error |
|
error-on-surface |
|
light-subtle |
|
light-subtle-hover |
|
light-subtle-active |
|
light |
|
light-hover |
|
light-active |
|
light-emphasis |
|
light-on-subtle |
|
on-light |
|
light-on-surface |
|
dark-subtle |
|
dark-subtle-hover |
|
dark-subtle-active |
|
dark |
|
dark-hover |
|
dark-active |
|
dark-emphasis |
|
dark-on-subtle |
|
on-dark |
|
dark-on-surface |
|
inverse-subtle |
|
inverse-subtle-hover |
|
inverse-subtle-active |
|
inverse |
|
inverse-hover |
|
inverse-active |
|
inverse-emphasis |
|
inverse-on-subtle |
|
on-inverse |
|
inverse-on-surface |
|
series-a |
|
series-a-bold |
|
series-a-bolder |
|
series-a-subtle |
|
series-a-subtler |
|
series-b |
|
series-b-bold |
|
series-b-bolder |
|
series-b-subtle |
|
series-b-subtler |
|
series-c |
|
series-c-bold |
|
series-c-bolder |
|
series-c-subtle |
|
series-c-subtler |
|
series-d |
|
series-d-bold |
|
series-d-bolder |
|
series-d-subtle |
|
series-d-subtler |
|
series-e |
|
series-e-bold |
|
series-e-bolder |
|
series-e-subtle |
|
series-e-subtler |
|
series-f |
|
series-f-bold |
|
series-f-bolder |
|
series-f-subtle |
|
series-f-subtler |
|
| Description: The global default Colors map. | |
Spacing Variables
The $kendo-spacing Sass map of the Telerik and Kendo UI Bootstrap theme is represented in the following table:
| Step | Value | Example |
|---|---|---|
| 0 | 0px | |
| 1px | 1px | |
| 0.5 | 0.125rem | |
| 1 | 0.25rem | |
| 1.5 | 0.375rem | |
| 2 | 0.5rem | |
| 2.5 | 0.625rem | |
| 3 | 0.75rem | |
| 3.5 | 0.875rem | |
| 4 | 1rem | |
| 4.5 | 1.125rem | |
| 5 | 1.25rem | |
| 5.5 | 1.375rem | |
| 6 | 1.5rem | |
| 6.5 | 1.625rem | |
| 7 | 1.75rem | |
| 7.5 | 1.875rem | |
| 8 | 2rem | |
| 9 | 2.25rem | |
| 10 | 2.5rem | |
| 11 | 2.75rem | |
| 12 | 3rem | |
| 13 | 3.25rem | |
| 14 | 3.5rem | |
| 15 | 3.75rem | |
| 16 | 4rem | |
| 17 | 4.25rem | |
| 18 | 4.5rem | |
| 19 | 4.75rem | |
| 20 | 5rem | |
| 21 | 5.25rem | |
| 22 | 5.5rem | |
| 23 | 5.75rem | |
| 24 | 6rem | |
| 25 | 7rem | |
| 26 | 8rem | |
| 27 | 9rem | |
| 28 | 10rem | |
| 29 | 11rem | |
| 30 | 12rem |
Typography Variables
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-font-size | $font-size-base | 1rem | Default: $font-size-baseComputed: 1rem |
| Description: The base font size across all components. | |||
kendo-font-size-xs | ( $kendo-font-size * .75 ) | 0.75rem | Default: ( $kendo-font-size * .75 )Computed: 0.75rem |
| Description: The extra small font size across all components. | |||
kendo-font-size-sm | $font-size-sm | 0.875rem | Default: $font-size-smComputed: 0.875rem |
| Description: The small font size across all components. | |||
kendo-font-size-md | $kendo-font-size | 1rem | Default: $kendo-font-sizeComputed: 1rem |
| Description: The medium font size across all components. | |||
kendo-font-size-lg | $font-size-lg | 1.25rem | Default: $font-size-lgComputed: 1.25rem |
| Description: The large font size across all components. | |||
kendo-font-size-xl | ( $kendo-font-size-md * 1.5 ) | 1.5rem | Default: ( $kendo-font-size-md * 1.5 )Computed: 1.5rem |
| Description: The extra large font size across all components. | |||
kendo-line-height | $line-height-base | 1.5 | Default: $line-height-baseComputed: 1.5 |
| Description: The base line height across all components. | |||
kendo-line-height-xs | 1 | 1 | Default: 1Computed: 1 |
| Description: The extra small line height across all components. | |||
kendo-line-height-sm | $line-height-sm | 1.25 | Default: $line-height-smComputed: 1.25 |
| Description: The small line height across all components. | |||
kendo-line-height-md | $kendo-line-height | 1.5 | Default: $kendo-line-heightComputed: 1.5 |
| Description: The medium line height across all components. | |||
kendo-line-height-lg | $line-height-lg | 2 | Default: $line-height-lgComputed: 2 |
| Description: The large line height across all components. | |||
kendo-line-height-em | calc( #{$kendo-line-height} * 1em ) | calc(1.5 * 1em) | Default: calc( #{$kendo-line-height} * 1em )Computed: calc(1.5 * 1em) |
| Description: The base line height in ems across all components. | |||
kendo-font-weight-light | $font-weight-light | 300 | Default: $font-weight-lightComputed: 300 |
| Description: The light font weight across all components. | |||
kendo-font-weight-normal | $font-weight-normal | 400 | Default: $font-weight-normalComputed: 400 |
| Description: The base font weight across all components. | |||
kendo-font-weight-medium | 500 | 500 | Default: 500Computed: 500 |
| Description: The medium font weight across all components. | |||
kendo-font-weight-semibold | 600 | 600 | Default: 600Computed: 600 |
| Description: The semibold font weight across all components. | |||
kendo-font-weight-bold | $font-weight-bold | 700 | Default: $font-weight-boldComputed: 700 |
| Description: The bold font weight across all components. | |||
kendo-font-family-sans-serif | $font-family-sans-serif | 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" | Default: $font-family-sans-serifComputed: 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 sans-serif font family across all components. | |||
kendo-font-family-monospace | $font-family-monospace | SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace | Default: $font-family-monospaceComputed: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace |
| Description: The monospace font family across all components. | |||
kendo-font-family | $kendo-font-family-sans-serif | 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" | Default: $kendo-font-family-sans-serifComputed: 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 base font family across all components. | |||
kendo-font-sizes | $_default-font-sizes | (xs: 0.75rem, sm: 0.875rem, md: 1rem, lg: 1.25rem, xl: 1.5rem) | Default: $_default-font-sizesComputed: (xs: 0.75rem, sm: 0.875rem, md: 1rem, lg: 1.25rem, xl: 1.5rem) |
| Description: The font sizes map | |||
kendo-line-heights | $_default-line-heights | (xs: 1, sm: 1.25, md: 1.5, lg: 2) | Default: $_default-line-heightsComputed: (xs: 1, sm: 1.25, md: 1.5, lg: 2) |
| Description: The line heights map | |||
kendo-font-weights | $_default-font-weights | (light: 300, normal: 400, medium: 500, semibold: 600, bold: 700) | Default: $_default-font-weightsComputed: (light: 300, normal: 400, medium: 500, semibold: 600, bold: 700) |
| Description: The font weights map | |||
kendo-font-families | $_default-font-families | (sans-serif: (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"), monospace: (SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace)) | Default: $_default-font-familiesComputed: (sans-serif: (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"), monospace: (SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace)) |
| Description: The font families map | |||
kendo-h1-font-size | $h1-font-size | 2.5rem | Default: $h1-font-sizeComputed: 2.5rem |
| Description: The font size of the highest level heading. | |||
kendo-h2-font-size | $h2-font-size | 2rem | Default: $h2-font-sizeComputed: 2rem |
| Description: The font size of the second highest level heading. | |||
kendo-h3-font-size | $h3-font-size | 1.75rem | Default: $h3-font-sizeComputed: 1.75rem |
| Description: The font size of the third highest level heading. | |||
kendo-h4-font-size | $h4-font-size | 1.5rem | Default: $h4-font-sizeComputed: 1.5rem |
| Description: The font size of the fourth highest level heading. | |||
kendo-h5-font-size | $h5-font-size | 1.25rem | Default: $h5-font-sizeComputed: 1.25rem |
| Description: The font size of the fifth highest level heading. | |||
kendo-h6-font-size | $h6-font-size | 1rem | Default: $h6-font-sizeComputed: 1rem |
| Description: The font size of the sixth highest level heading. | |||
kendo-h1-font-family | $headings-font-family | null | Default: $headings-font-familyComputed: null |
| Description: The font family of the highest level heading. | |||
kendo-h2-font-family | $headings-font-family | null | Default: $headings-font-familyComputed: null |
| Description: The font family of the second highest level heading. | |||
kendo-h3-font-family | $headings-font-family | null | Default: $headings-font-familyComputed: null |
| Description: The font family of the third highest level heading. | |||
kendo-h4-font-family | $headings-font-family | null | Default: $headings-font-familyComputed: null |
| Description: The font family of the fourth highest level heading. | |||
kendo-h5-font-family | $headings-font-family | null | Default: $headings-font-familyComputed: null |
| Description: The font family of the fifth highest level heading. | |||
kendo-h6-font-family | $headings-font-family | null | Default: $headings-font-familyComputed: null |
| Description: The font family of the sixth highest level heading. | |||
kendo-h1-line-height | $headings-line-height | 1.2 | Default: $headings-line-heightComputed: 1.2 |
| Description: The line height of the highest level heading. | |||
kendo-h2-line-height | $headings-line-height | 1.2 | Default: $headings-line-heightComputed: 1.2 |
| Description: The line height of the second highest level heading. | |||
kendo-h3-line-height | $headings-line-height | 1.2 | Default: $headings-line-heightComputed: 1.2 |
| Description: The line height of the third highest level heading. | |||
kendo-h4-line-height | $headings-line-height | 1.2 | Default: $headings-line-heightComputed: 1.2 |
| Description: The line height of the fourth highest level heading. | |||
kendo-h5-line-height | $headings-line-height | 1.2 | Default: $headings-line-heightComputed: 1.2 |
| Description: The line height of the fifth highest level heading. | |||
kendo-h6-line-height | $headings-line-height | 1.2 | Default: $headings-line-heightComputed: 1.2 |
| Description: The line height of the sixth highest level heading. | |||
kendo-h1-font-weight | $headings-font-weight | 500 | Default: $headings-font-weightComputed: 500 |
| Description: The font weight of the highest level heading. | |||
kendo-h2-font-weight | $headings-font-weight | 500 | Default: $headings-font-weightComputed: 500 |
| Description: The font weight of the second highest level heading. | |||
kendo-h3-font-weight | $headings-font-weight | 500 | Default: $headings-font-weightComputed: 500 |
| Description: The font weight of the third highest level heading. | |||
kendo-h4-font-weight | $headings-font-weight | 500 | Default: $headings-font-weightComputed: 500 |
| Description: The font weight of the fourth highest level heading. | |||
kendo-h5-font-weight | $headings-font-weight | 500 | Default: $headings-font-weightComputed: 500 |
| Description: The font weight of the fifth highest level heading. | |||
kendo-h6-font-weight | $headings-font-weight | 500 | Default: $headings-font-weightComputed: 500 |
| Description: The font weight of the sixth highest level heading. | |||
kendo-h1-letter-spacing | null | null | Default: nullComputed: null |
| Description: The letter spacing of the highest level heading. | |||
kendo-h2-letter-spacing | null | null | Default: nullComputed: null |
| Description: The letter spacing of the second highest level heading. | |||
kendo-h3-letter-spacing | null | null | Default: nullComputed: null |
| Description: The letter spacing of the third highest level heading. | |||
kendo-h4-letter-spacing | null | null | Default: nullComputed: null |
| Description: The letter spacing of the fourth highest level heading. | |||
kendo-h5-letter-spacing | null | null | Default: nullComputed: null |
| Description: The letter spacing of the fifth highest level heading. | |||
kendo-h6-letter-spacing | null | null | Default: nullComputed: null |
| Description: The letter spacing of the sixth highest level heading. | |||
kendo-h1-margin | 0 0 $headings-margin-bottom | 0 0 0.5rem | Default: 0 0 $headings-margin-bottomComputed: 0 0 0.5rem |
| Description: The margin of the highest level heading. | |||
kendo-h2-margin | 0 0 $headings-margin-bottom | 0 0 0.5rem | Default: 0 0 $headings-margin-bottomComputed: 0 0 0.5rem |
| Description: The margin of the second highest level heading. | |||
kendo-h3-margin | 0 0 $headings-margin-bottom | 0 0 0.5rem | Default: 0 0 $headings-margin-bottomComputed: 0 0 0.5rem |
| Description: The margin of the third highest level heading. | |||
kendo-h4-margin | 0 0 $headings-margin-bottom | 0 0 0.5rem | Default: 0 0 $headings-margin-bottomComputed: 0 0 0.5rem |
| Description: The margin of the fourth highest level heading. | |||
kendo-h5-margin | 0 0 $headings-margin-bottom | 0 0 0.5rem | Default: 0 0 $headings-margin-bottomComputed: 0 0 0.5rem |
| Description: The margin of the fifth highest level heading. | |||
kendo-h6-margin | 0 0 $headings-margin-bottom | 0 0 0.5rem | Default: 0 0 $headings-margin-bottomComputed: 0 0 0.5rem |
| Description: The margin of the sixth highest level heading. | |||
kendo-headings | (
h1: (
font-size: $kendo-h1-font-size,
font-family: $kendo-h1-font-family,
line-height: $kendo-h1-line-height,
font-weight: $kendo-h1-font-weight,
letter-spacing: $kendo-h1-letter-spacing,
margin: $kendo-h1-margin
),
h2: (
font-size: $kendo-h2-font-size,
font-family: $kendo-h2-font-family,
line-height: $kendo-h2-line-height,
font-weight: $kendo-h2-font-weight,
letter-spacing: $kendo-h2-letter-spacing,
margin: $kendo-h2-margin
),
h3: (
font-size: $kendo-h3-font-size,
font-family: $kendo-h3-font-family,
line-height: $kendo-h3-line-height,
font-weight: $kendo-h3-font-weight,
letter-spacing: $kendo-h3-letter-spacing,
margin: $kendo-h3-margin
),
h4: (
font-size: $kendo-h4-font-size,
font-family: $kendo-h4-font-family,
line-height: $kendo-h4-line-height,
font-weight: $kendo-h4-font-weight,
letter-spacing: $kendo-h4-letter-spacing,
margin: $kendo-h4-margin
),
h5: (
font-size: $kendo-h5-font-size,
font-family: $kendo-h5-font-family,
line-height: $kendo-h5-line-height,
font-weight: $kendo-h5-font-weight,
letter-spacing: $kendo-h5-letter-spacing,
margin: $kendo-h5-margin
),
h6: (
font-size: $kendo-h6-font-size,
font-family: $kendo-h6-font-family,
line-height: $kendo-h6-line-height,
font-weight: $kendo-h6-font-weight,
letter-spacing: $kendo-h6-letter-spacing,
margin: $kendo-h6-margin
),
) | (h1: (font-size: 2.5rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h2: (font-size: 2rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h3: (font-size: 1.75rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h4: (font-size: 1.5rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h5: (font-size: 1.25rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h6: (font-size: 1rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem)) | Default: (
h1: (
font-size: $kendo-h1-font-size,
font-family: $kendo-h1-font-family,
line-height: $kendo-h1-line-height,
font-weight: $kendo-h1-font-weight,
letter-spacing: $kendo-h1-letter-spacing,
margin: $kendo-h1-margin
),
h2: (
font-size: $kendo-h2-font-size,
font-family: $kendo-h2-font-family,
line-height: $kendo-h2-line-height,
font-weight: $kendo-h2-font-weight,
letter-spacing: $kendo-h2-letter-spacing,
margin: $kendo-h2-margin
),
h3: (
font-size: $kendo-h3-font-size,
font-family: $kendo-h3-font-family,
line-height: $kendo-h3-line-height,
font-weight: $kendo-h3-font-weight,
letter-spacing: $kendo-h3-letter-spacing,
margin: $kendo-h3-margin
),
h4: (
font-size: $kendo-h4-font-size,
font-family: $kendo-h4-font-family,
line-height: $kendo-h4-line-height,
font-weight: $kendo-h4-font-weight,
letter-spacing: $kendo-h4-letter-spacing,
margin: $kendo-h4-margin
),
h5: (
font-size: $kendo-h5-font-size,
font-family: $kendo-h5-font-family,
line-height: $kendo-h5-line-height,
font-weight: $kendo-h5-font-weight,
letter-spacing: $kendo-h5-letter-spacing,
margin: $kendo-h5-margin
),
h6: (
font-size: $kendo-h6-font-size,
font-family: $kendo-h6-font-family,
line-height: $kendo-h6-line-height,
font-weight: $kendo-h6-font-weight,
letter-spacing: $kendo-h6-letter-spacing,
margin: $kendo-h6-margin
),
)Computed: (h1: (font-size: 2.5rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h2: (font-size: 2rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h3: (font-size: 1.75rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h4: (font-size: 1.5rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h5: (font-size: 1.25rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h6: (font-size: 1rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem)) |
| Description: The headings Map. | |||
kendo-paragraph-margin | 0 0 $paragraph-margin-bottom | 0 0 1rem | Default: 0 0 $paragraph-margin-bottomComputed: 0 0 1rem |
| Description: The margin of the paragraph. | |||
kendo-paragraph-font-size | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) | Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit) |
| Description: The font size of the paragraph. | |||
kendo-paragraph-font-family | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit) |
| Description: The font family of the paragraph. | |||
kendo-paragraph-line-height | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) | Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal) |
| Description: The line height of the paragraph. | |||
kendo-paragraph-font-weight | var( --kendo-font-weight-normal, normal ) | var(--kendo-font-weight-normal, normal) | Default: var( --kendo-font-weight-normal, normal )Computed: var(--kendo-font-weight-normal, normal) |
| Description: The font weight of the paragraph. | |||
kendo-paragraph-letter-spacing | null | null | Default: nullComputed: null |
| Description: The letter spacing of the paragraph. | |||
kendo-code-font-size | var( --kendo-font-size-sm, inherit )!default | var(--kendo-font-size-sm, inherit) | Default: var( --kendo-font-size-sm, inherit )!defaultComputed: var(--kendo-font-size-sm, inherit) |
| Description: The font size of the code tag. | |||
kendo-code-font-family | var( --kendo-font-family-monospace, normal ) | var(--kendo-font-family-monospace, normal) | Default: var( --kendo-font-family-monospace, normal )Computed: var(--kendo-font-family-monospace, normal) |
| Description: The font family of the code tag. | |||
kendo-code-line-height | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) | Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal) |
| Description: The line height of the code tag. | |||
kendo-code-font-weight | var( --kendo-font-weight-normal, normal ) | var(--kendo-font-weight-normal, normal) | Default: var( --kendo-font-weight-normal, normal )Computed: var(--kendo-font-weight-normal, normal) |
| Description: The font weight of the code tag. | |||
kendo-code-letter-spacing | null | null | Default: nullComputed: null |
| Description: The letter spacing of the code tag. | |||
kendo-code-padding-x | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) |
| Description: The horizontal padding of the code tag. | |||
kendo-code-padding-y | k-spacing(0) | var(--kendo-spacing-0, 0px) | Default: k-spacing(0)Computed: var(--kendo-spacing-0, 0px) |
| Description: The vertical padding of the code tag. | |||
kendo-pre-padding-x | k-spacing(6) | var(--kendo-spacing-6, 1.5rem) | Default: k-spacing(6)Computed: var(--kendo-spacing-6, 1.5rem) |
| Description: The horizontal padding of the preformatted text. | |||
kendo-pre-padding-y | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem) |
| Description: The vertical padding of the preformatted text. | |||
kendo-code-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The width of the border of the code tag. | |||
kendo-code-bg | $kendo-base-bg | var(--kendo-color-surface, #f8f9fa) | Default: $kendo-base-bgComputed: var(--kendo-color-surface, #f8f9fa) |
| Description: The background color of the code tag. | |||
kendo-code-text | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) | Default: $kendo-component-textComputed: var(--kendo-color-on-app-surface, #212529) |
| Description: The text color of the code tag. | |||
kendo-code-border | $kendo-component-border | var(--kendo-color-border, rgba(33, 37, 41, 0.13)) | Default: $kendo-component-borderComputed: var(--kendo-color-border, rgba(33, 37, 41, 0.13)) |
| Description: The border color of the code tag. | |||
kendo-display1-font-size | k-map-get( $display-font-sizes, 1) | 5rem | Default: k-map-get( $display-font-sizes, 1)Computed: 5rem |
| Description: The font size of the largest display text. | |||
kendo-display2-font-size | k-map-get( $display-font-sizes, 2) | 4.5rem | Default: k-map-get( $display-font-sizes, 2)Computed: 4.5rem |
| Description: The font size of the second largest display text. | |||
kendo-display3-font-size | k-map-get( $display-font-sizes, 3) | 4rem | Default: k-map-get( $display-font-sizes, 3)Computed: 4rem |
| Description: The font size of the third largest display text. | |||
kendo-display4-font-size | k-map-get( $display-font-sizes, 4) | 3.5rem | Default: k-map-get( $display-font-sizes, 4)Computed: 3.5rem |
| Description: The font size of the fourth largest display text. | |||
kendo-display1-font-family | null | null | Default: nullComputed: null |
| Description: The font family of the largest display text. | |||
kendo-display2-font-family | null | null | Default: nullComputed: null |
| Description: The font family of the second largest display text. | |||
kendo-display3-font-family | null | null | Default: nullComputed: null |
| Description: The font family of the third largest display text. | |||
kendo-display4-font-family | null | null | Default: nullComputed: null |
| Description: The font family of the fourth largest display text. | |||
kendo-display1-line-height | $display-line-height | 1.2 | Default: $display-line-heightComputed: 1.2 |
| Description: The line height of the largest display text. | |||
kendo-display2-line-height | $display-line-height | 1.2 | Default: $display-line-heightComputed: 1.2 |
| Description: The line height of the second largest display text. | |||
kendo-display3-line-height | $display-line-height | 1.2 | Default: $display-line-heightComputed: 1.2 |
| Description: The line height of the third largest display text. | |||
kendo-display4-line-height | $display-line-height | 1.2 | Default: $display-line-heightComputed: 1.2 |
| Description: The line height of the fourth largest display text. | |||
kendo-display1-font-weight | $display-font-weight | 300 | Default: $display-font-weightComputed: 300 |
| Description: The font weight of the largest display text. | |||
kendo-display2-font-weight | $display-font-weight | 300 | Default: $display-font-weightComputed: 300 |
| Description: The font weight of the second largest display text. | |||
kendo-display3-font-weight | $display-font-weight | 300 | Default: $display-font-weightComputed: 300 |
| Description: The font weight of the third largest display text. | |||
kendo-display4-font-weight | $display-font-weight | 300 | Default: $display-font-weightComputed: 300 |
| Description: The font weight of the fourth largest display text. | |||
kendo-display1-letter-spacing | null | null | Default: nullComputed: null |
| Description: The letter spacing of the largest display text. | |||
kendo-display2-letter-spacing | null | null | Default: nullComputed: null |
| Description: The letter spacing of the second largest display text. | |||
kendo-display3-letter-spacing | null | null | Default: nullComputed: null |
| Description: The letter spacing of the third largest display text. | |||
kendo-display4-letter-spacing | null | null | Default: nullComputed: null |
| Description: The letter spacing of the fourth largest display text. | |||
kendo-font-size-xxs | 0.5rem | 0.5rem | Default: 0.5remComputed: 0.5rem |
| Description: The extra extra small font size across all components. | |||
kendo-font-weight | 400 | 400 | Default: 400Computed: 400 |
| Description: The base font weight across all components. | |||
kendo-font-weight-thin | 100 | 100 | Default: 100Computed: 100 |
| Description: The thin font weight across all components. | |||
kendo-font-weight-extra-light | 200 | 200 | Default: 200Computed: 200 |
| Description: The extra light font weight across all components. | |||
kendo-font-weight-extra-bold | 800 | 800 | Default: 800Computed: 800 |
| Description: The extra bold font weight across all components. | |||
kendo-font-weight-black | 900 | 900 | Default: 900Computed: 900 |
| Description: The most pronounced font weight across all components. | |||
kendo-letter-spacing | null | null | Default: nullComputed: null |
| Description: The base letter spacing across all components. | |||
kendo-letter-spacing-tightest | -.15px | -0.15px | Default: -.15pxComputed: -0.15px |
| Description: The tightest letter spacing across all components. | |||
kendo-letter-spacing-tighter | -.10px | -0.1px | Default: -.10pxComputed: -0.1px |
| Description: Slightly looser than the tighter letter spacing across all components. | |||
kendo-letter-spacing-tight | -.5px | -0.5px | Default: -.5pxComputed: -0.5px |
| Description: Moderately tight letter spacing across all components. | |||
kendo-letter-spacing-normal | 0px | 0px | Default: 0pxComputed: 0px |
| Description: The normal letter spacing across all components. | |||
kendo-letter-spacing-wide | .5px | 0.5px | Default: .5pxComputed: 0.5px |
| Description: Wide letter spacing across all components. | |||
kendo-letter-spacing-wider | .10px | 0.1px | Default: .10pxComputed: 0.1px |
| Description: Slightly wider than the wide letter spacing across all components. | |||
kendo-letter-spacing-widest | .15px | 0.15px | Default: .15pxComputed: 0.15px |
| Description: The widest letter spacing across all components. | |||
kendo-font-family-sans | Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans | Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans | Default: Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill SansComputed: Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans |
| Description: The sans font family across all components. | |||
kendo-font-family-serif | "Times New Roman", Georgia, Garamond, Palatino, Baskerville | "Times New Roman", Georgia, Garamond, Palatino, Baskerville | Default: "Times New Roman", Georgia, Garamond, Palatino, BaskervilleComputed: "Times New Roman", Georgia, Garamond, Palatino, Baskerville |
| Description: The serif font family across all components. | |||
kendo-letter-spacings | k-map-merge( $_default-letter-spacings, $kendo-letter-spacings ) | (tightest: -0.15px, tighter: -0.1px, tight: -0.5px, normal: 0px, wide: 0.5px, wider: 0.1px, widest: 0.15px) | Default: k-map-merge( $_default-letter-spacings, $kendo-letter-spacings )Computed: (tightest: -0.15px, tighter: -0.1px, tight: -0.5px, normal: 0px, wide: 0.5px, wider: 0.1px, widest: 0.15px) |
| Description: The letter spacings map | |||
Border Radii Variables
The $kendo-border-radii Sass map of the Telerik and Kendo UI Bootstrap theme is represented in the following table:
| Step | Value | Example |
|---|---|---|
| none | 0px | |
| xs | 0.125rem | |
| sm | 0.25rem | |
| md | 0.375rem | |
| lg | 0.5rem | |
| xl | 0.75rem | |
| xxl | 1rem | |
| xxxl | 2rem | |
| full | 50rem |
Elevation Variables
The $kendo-elevation Sass map of the Telerik and Kendo UI Bootstrap theme is represented in the following table:
| Key | Value |
|---|---|
| Variable: kendo-elevation | |
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
| Description: The global default Elevation map. | |
