Sass Variables
To configure and customize the Telerik and Kendo UI Map, use not only its dedicated Sass variables but also the Sass variables provided by the Button component.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-map-border-width | 0px | 0px | Default: 0pxComputed: 0px |
| Description: The border width of the Map. | |||
kendo-map-font-size | var(--kendo-font-size) | var(--kendo-font-size) | Default: var(--kendo-font-size)Computed: var(--kendo-font-size) |
| Description: The font size of the Map. | |||
kendo-map-line-height | var(--kendo-line-height) | var(--kendo-line-height) | Default: var(--kendo-line-height)Computed: var(--kendo-line-height) |
| Description: The line height of the Map. | |||
kendo-map-font-family | var(--kendo-font-family) | var(--kendo-font-family) | Default: var(--kendo-font-family)Computed: var(--kendo-font-family) |
| Description: The font family of the Map. | |||
kendo-map-bg | k-color(surface-alt) | var(--kendo-color-surface-alt) | Default: k-color(surface-alt)Computed: var(--kendo-color-surface-alt) |
| Description: The background color of the Map. | |||
kendo-map-text | k-color(on-app-surface) | var(--kendo-color-on-app-surface) | Default: k-color(on-app-surface)Computed: var(--kendo-color-on-app-surface) |
| Description: The text color of the Map. | |||
kendo-map-border | k-color(border) | var(--kendo-color-border) | Default: k-color(border)Computed: var(--kendo-color-border) |
| Description: The border color of the Map. | |||
kendo-map-navigator-margin | k-spacing(4) | var(--kendo-spacing-4) | Default: k-spacing(4)Computed: var(--kendo-spacing-4) |
| Description: The margin of the Map navigator. | |||
kendo-map-navigator-padding | k-spacing(0.5) | var(--kendo-spacing-0\.5) | Default: k-spacing(0.5)Computed: var(--kendo-spacing-0\.5) |
| Description: The padding of the Map navigator. | |||
kendo-map-navigator-width | calc( calc( #{$kendo-icon-size} * 3 ) + calc( #{$kendo-map-navigator-padding} * 2 ) ) | calc(16px * 3 + var(--kendo-spacing-0\.5) * 2) | Default: calc( calc( #{$kendo-icon-size} * 3 ) + calc( #{$kendo-map-navigator-padding} * 2 ) )Computed: calc(16px * 3 + var(--kendo-spacing-0\.5) * 2) |
| Description: The width of the Map navigator. | |||
kendo-map-navigator-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The border width of the Map navigator. | |||
kendo-map-attribution-padding-x | k-spacing(1) | var(--kendo-spacing-1) | Default: k-spacing(1)Computed: var(--kendo-spacing-1) |
| Description: The horizontal padding of the Map attribution. | |||
kendo-map-attribution-padding-y | k-spacing(0.5) | var(--kendo-spacing-0\.5) | Default: k-spacing(0.5)Computed: var(--kendo-spacing-0\.5) |
| Description: The vertical padding of the Map attribution. | |||
kendo-map-attribution-font-size | calc( #{$kendo-map-font-size} * .75) | calc(var(--kendo-font-size) * 0.75) | Default: calc( #{$kendo-map-font-size} * .75)Computed: calc(var(--kendo-font-size) * 0.75) |
| Description: The font size of the Map attribution. | |||
kendo-map-attribution-bg | color-mix(in srgb, k-color(app-surface) 80%, transparent) | color-mix(in srgb, var(--kendo-color-app-surface) 80%, transparent) | Default: color-mix(in srgb, k-color(app-surface) 80%, transparent)Computed: color-mix(in srgb, var(--kendo-color-app-surface) 80%, transparent) |
| Description: The background color of the Map attribution. | |||
kendo-map-marker-fill | k-color(primary) | var(--kendo-color-primary) | Default: k-color(primary)Computed: var(--kendo-color-primary) |
| Description: The fill color of the Map marker. | |||
