Sass Variables
The Telerik and Kendo UI Avatar enables you to configure and customize its appearance through the available Sass variables.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-avatar-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The border width of the Avatar. | |||
kendo-avatar-font-family | $kendo-font-family | inherit | Default: $kendo-font-familyComputed: inherit |
| Description: The font family of the Avatar. | |||
kendo-avatar-font-size | $kendo-font-size-md | 14px | Default: $kendo-font-size-mdComputed: 14px |
| Description: The font size of the Avatar. | |||
kendo-avatar-line-height | $kendo-line-height-md | 1.4285714286 | Default: $kendo-line-height-mdComputed: 1.4285714286 |
| Description: The line height of the Avatar. | |||
kendo-avatar-sizes | (
sm: k-map-get( $kendo-spacing, 4 ),
md: k-map-get( $kendo-spacing, 8 ),
lg: k-map-get( $kendo-spacing, 16 )
) | (sm: 16px, md: 32px, lg: 64px) | Default: (
sm: k-map-get( $kendo-spacing, 4 ),
md: k-map-get( $kendo-spacing, 8 ),
lg: k-map-get( $kendo-spacing, 16 )
)Computed: (sm: 16px, md: 32px, lg: 64px) |
| Description: The sizes map of the Avatar. | |||
kendo-avatar-theme-colors | $kendo-theme-colors | ("primary": #ff6358, "secondary": #666666, "tertiary": #03a9f4, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #ebebeb, "inverse": #424242) | Default: $kendo-theme-colorsComputed: ("primary": #ff6358, "secondary": #666666, "tertiary": #03a9f4, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #ebebeb, "inverse": #424242) |
| Description: The theme colors map of the Avatar. | |||
