-
-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Description
- Framework7 version: 9.0.2
- Platform and Target: Chrome Browser, PWA/WebApp in iOS style mode
Describe the bug
On login screens, when using form inputs with floating labels and outline style, the floating labels are displayed with a mismatched background color. BUT: this only applies to iOS style in light mode.
To Reproduce
Steps to reproduce the behavior:
- Create a login screen
- Create form inputs with floating labels (and outline style)
- Turn on iOS style
- See mismatched floating label background colors
Expected behavior
I expect the floating label to have the same background color as the page, which in this case, is the login screen, so white instead of #efeff4.
Actual Behavior
The background color of the floating label is mismatched as described above.
Screenshots
Additional context
I checked the underlying CSS rules and found the cause:
.item-input-outline.item-content .item-floating-label {
background: var(--f7-page-bg-color); /* #efeff4 */
}I checked the variable and --f7-page-bg-color resolves to #efeff4 in light mode while the following rule sets the login screen background color to #fff:
.login-screen-content, .login-screen-page, .login-screen .page {
background: var(--f7-login-screen-content-bg-color); /* #fff */
}That rule defines the login screen background as white (as opposed to a normal page's background color), leading to the mismatch in the floating label CSS rule. This does not happen with MD theme.