Content-Length: 576795 | pFad | http://www.telerik.com/design-system/docs/components/map/styles/

0 Configuring the Appearance of the Map Component | Design System Kit

Map

The Map UI component provides a visual representation of geospatial information.

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.

VariableDefault ValueComputed ValueValue
kendo-map-border-width0px0pxDefault: 0pxComputed: 0px
Description: The border width of the Map.
kendo-map-font-sizevar( --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-heightvar( --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-familyvar( --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-bgk-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-textk-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-borderk-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-margink-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-paddingk-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-widthcalc( 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-widthcalc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2)Default: $kendo-map-navigator-widthComputed: calc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2)
Description: The height of the Map navigator.
kendo-map-navigator-border-width1px1pxDefault: 1pxComputed: 1px
Description: The border width of the Map navigator.
kendo-map-zoom-control-margink-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-yvar(--kendo-spacing-1, 0.25rem)Default: $kendo-button-padding-yComputed: 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-xvar(--kendo-spacing-1, 0.25rem)Default: $kendo-map-zoom-control-button-padding-xComputed: var(--kendo-spacing-1, 0.25rem)
Description: The vertical padding of the Map zoom control.
kendo-map-attribution-padding-xk-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-yk-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-sizecalc( #{$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-bgcolor-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-fillk-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.
Feedback








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://www.telerik.com/design-system/docs/components/map/styles/

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy