-
Notifications
You must be signed in to change notification settings - Fork 45
Vaadin 14 | Styling
appreciated edited this page Oct 1, 2019
·
6 revisions
To use the following css variables checkout the following example project
The important parts:
| Css Variable | Default value | Description |
|---|---|---|
| --app-layout-primary-color | var(--lumo-primary-color) | primary color used as the accent color by many components |
| --app-layout-background | var(--lumo-base-color) | background color of the content view |
| --app-layout-font-size-header | var(--lumo-font-size-m) | |
| --app-layout-font-size-menu | var(--lumo-font-size-m) | |
| --app-layout-font-size-notifications | var(--lumo-font-size-m) | |
| --app-layout-bar-height | calc(var(--lumo-size-s) * 2.1) | |
| --app-layout-bar-background-base-color | var(--lumo-base-color) | |
| --app-layout-bar-background-color | var(--lumo-base-color) | |
| --app-layout-bar-font-color | var(--lumo-contrast-70pct) | |
| --app-layout-bar-shadow | var(--lumo-box-shadow-s) | |
| --app-layout-bar-z-index | 10 | |
| --app-layout-drawer-shadow | var(--lumo-box-shadow-s) | |
| --app-layout-drawer-background-base-color | var(--lumo-base-color) | |
| --app-layout-drawer-background-color | var(--lumo-base-color) | |
| --app-layout-drawer-submenu-background-color | var(--lumo-contrast-10pct) | |
| --app-layout-drawer-font-color | var(--lumo-contrast-90pct) | |
| --app-layout-drawer-width | calc(var(--lumo-size-xl) * 4.6) | |
| --app-layout-drawer-small-width | calc(var(--app-layout-bar-height) - 1px) | |
| --app-layout-menu-button-height | calc(var(--lumo-size-s) * 1.6) | |
| --app-layout-menu-button-padding | 0 14px | |
| --app-layout-menu-button-margin | 0 | |
| --app-layout-menu-padding | 5px | |
| --app-layout-menu-button-border-radius | var(--lumo-border-radius) | |
| --app-layout-menu-submenu-max-height | 999px | |
| --app-bar-height | var(--app-layout-bar-height) | |
| --app-menu-background-color | var(--lumo-base-color) | |
| --app-menu-selected-bg-color | var(--lumo-primary-color-10pct) | |
| --app-menu-color | var(--lumo-secondary-text-color) | |
| --app-layout-badge-width | calc(var(--lumo-size-s) * 0.8) | |
| --app-layout-badge-height | calc(var(--lumo-size-s) * 0.8) | |
| --app-layout-badge-top | 0px | |
| --app-layout-badge-right | 0px | |
| --app-layout-badge-color | var(--app-layout-bar-font-color) | |
| --app-layout-badge-small-width | 5px | |
| --app-layout-badge-small-height | 5px | |
| --app-layout-badge-small-top | -12px | |
| --app-layout-badge-small-right | -4px | |
| --app-layout-badge-background | var(--lumo-primary-color) | |
| --app-layout-badge-font-color | var(--lumo-primary-contrast-color) | |
| --app-layout-notification-highlight-color | var(--app-layout-primary-color) | |
| --app-layout-notification-font-color | var(--lumo-body-text-color) | |
| --app-layout-notification-background-base-color | var(--lumo-base-color) | |
| --app-layout-notification-background-color | var(--lumo-base-color) | |
| --app-layout-notification-shadow | var(--lumo-box-shadow-s) |