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: 0px Computed: 0px |
Description: The border width of the Map. | |||
kendo-map-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 Map. | |||
kendo-map-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 Map. | |||
kendo-map-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 Map. | |||
kendo-map-bg | k-color(surface-alt) | var(--kendo-color-surface-alt, #ffffff) | Default: k-color(surface-alt) Computed: var(--kendo-color-surface-alt, #ffffff) |
Description: The background color of the Map. | |||
kendo-map-text | k-color(on-app-surface) | var(--kendo-color-on-app-surface, #3d3d3d) | Default: k-color(on-app-surface) Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
Description: The text color of the Map. | |||
kendo-map-border | k-color(border) | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: k-color(border) Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description: The border color of the Map. | |||
kendo-map-navigator-margin | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4) Computed: var(--kendo-spacing-4, 1rem) |
Description: The margin of the Map navigator. | |||
kendo-map-navigator-padding | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) | Default: k-spacing(0.5) Computed: var(--kendo-spacing-0\.5, 0.125rem) |
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, 0.125rem) * 2) | Default: calc( calc( #{$kendo-icon-size} * 3 ) + calc( #{$kendo-map-navigator-padding} * 2 ) ) Computed: calc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2) |
Description: The width of the Map navigator. | |||
kendo-map-navigator-height | $kendo-map-navigator-width | calc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2) | Default: $kendo-map-navigator-width Computed: calc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2) |
Description: The height of the Map navigator. | |||
kendo-map-navigator-border-width | 1px | 1px | Default: 1px Computed: 1px |
Description: The border width of the Map navigator. | |||
kendo-map-zoom-control-margin | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4) Computed: var(--kendo-spacing-4, 1rem) |
Description: The margin of the Map zoom control. | |||
kendo-map-zoom-control-button-padding-x | $kendo-button-padding-y | var(--kendo-spacing-1, 0.25rem) | Default: $kendo-button-padding-y Computed: var(--kendo-spacing-1, 0.25rem) |
Description: The horizontal padding of the Map zoom control. | |||
kendo-map-zoom-control-button-padding-y | $kendo-map-zoom-control-button-padding-x | var(--kendo-spacing-1, 0.25rem) | Default: $kendo-map-zoom-control-button-padding-x Computed: var(--kendo-spacing-1, 0.25rem) |
Description: The vertical padding of the Map zoom control. | |||
kendo-map-attribution-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 Map attribution. | |||
kendo-map-attribution-padding-y | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) | Default: k-spacing(0.5) Computed: var(--kendo-spacing-0\.5, 0.125rem) |
Description: The vertical padding of the Map attribution. | |||
kendo-map-attribution-font-size | calc( #{$kendo-map-font-size} * .75) | calc(var(--kendo-font-size, inherit) * 0.75) | Default: calc( #{$kendo-map-font-size} * .75) Computed: calc(var(--kendo-font-size, inherit) * 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, #ffffff) 80%, transparent) | Default: color-mix(in srgb, k-color(app-surface) 80%, transparent) Computed: color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 80%, transparent) |
Description: The background color of the Map attribution. | |||
kendo-map-marker-fill | k-color(primary) | var(--kendo-color-primary, #ff6358) | Default: k-color(primary) Computed: var(--kendo-color-primary, #ff6358) |
Description: The fill color of the Map marker. |