-
Notifications
You must be signed in to change notification settings - Fork 86
Open
Description
Describe your motivation
Overlay base styles have a CSS reset for text styles, so that styles from a container (e.g. a grid header cell) don't inherit into an overlay component in that container (e.g. items in a select in that grid cell):
/* CSS reset for font styles */ | |
color: initial; | |
font: initial; | |
letter-spacing: initial; | |
text-align: initial; | |
text-decoration: initial; | |
text-indent: initial; | |
text-transform: initial; | |
user-select: text; | |
white-space: initial; | |
word-spacing: initial; |
For Aura that currently results in text in overlays not using the theme's default font family, size, etc., as it doesn't have a custom reset for overlays.
Describe the solution you'd like
Aura should have a custom reset for overlays, similar to the one that is used in Lumo:
web-components/packages/vaadin-lumo-styles/src/mixins/overlay.css
Lines 69 to 86 in 9616d52
/* CSS reset for font styles */ | |
color: var(--lumo-body-text-color); | |
font-family: var(--lumo-font-family); | |
font-size: var(--lumo-font-size-m); | |
font-style: normal; | |
font-weight: 400; | |
font-variant: normal; | |
line-height: var(--lumo-line-height-m); | |
letter-spacing: 0; | |
text-align: initial; | |
text-decoration: none; | |
text-indent: initial; | |
text-transform: none; | |
white-space: initial; | |
word-spacing: initial; | |
-webkit-text-size-adjust: 100%; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; |
Describe alternatives you've considered
No response
Additional context
No response
Metadata
Metadata
Assignees
Labels
No labels