Sass Variables
The Telerik and Kendo UI AppBar enables you to configure and customize its appearance through the available Sass variables.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-appbar-default-theme-color | "base" | "base" | Default: "base"Computed: "base" |
| Description: The default theme color of the AppBar. | |||
kendo-appbar-margin-x | null | null | Default: nullComputed: null |
| Description: The horizontal margin of the AppBar. | |||
kendo-appbar-margin-y | null | null | Default: nullComputed: null |
| Description: The vertical margin of the AppBar. | |||
kendo-appbar-padding-x | k-spacing(2) | var(--kendo-spacing-2) | Default: k-spacing(2)Computed: var(--kendo-spacing-2) |
| Description: The horizontal padding of the AppBar. | |||
kendo-appbar-padding-y | k-spacing(2) | var(--kendo-spacing-2) | Default: k-spacing(2)Computed: var(--kendo-spacing-2) |
| Description: The vertical padding of the AppBar. | |||
kendo-appbar-border-width | 0px | 0px | Default: 0pxComputed: 0px |
| Description: The width of the border around the AppBar. | |||
kendo-appbar-border-radius | null | null | Default: nullComputed: null |
| Description: The border radius of the AppBar. | |||
kendo-appbar-zindex | k-z-index("banner") | 1000 | Default: k-z-index("banner")Computed: 1000 |
| Description: The z-index of the AppBar. | |||
kendo-appbar-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 AppBar. | |||
kendo-appbar-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 AppBar. | |||
kendo-appbar-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 AppBar. | |||
kendo-appbar-gap | k-spacing(2) | var(--kendo-spacing-2) | Default: k-spacing(2)Computed: var(--kendo-spacing-2) |
| Description: The spacing between the AppBar sections. | |||
kendo-appbar-box-shadow | k-elevation(4) | var(--kendo-elevation-4) | Default: k-elevation(4)Computed: var(--kendo-elevation-4) |
| Description: The box shadow of the AppBar. | |||
kendo-appbar-bottom-box-shadow | $kendo-appbar-box-shadow | var(--kendo-elevation-4) | Default: $kendo-appbar-box-shadowComputed: var(--kendo-elevation-4) |
| Description: The box shadow of the AppBar with bottom position. | |||
kendo-appbar-theme-colors | ("base", "primary", "secondary", "tertiary", "inverse") | ("base", "primary", "secondary", "tertiary", "inverse") | Default: ("base", "primary", "secondary", "tertiary", "inverse")Computed: ("base", "primary", "secondary", "tertiary", "inverse") |
| Description: The theme colors map of the AppBar. | |||
