Skip to content

Another pass at fixing floating labels disabled colors#38313

Merged
mdo merged 5 commits intomainfrom
yet-another-ff-label-fix
Mar 29, 2023
Merged

Another pass at fixing floating labels disabled colors#38313
mdo merged 5 commits intomainfrom
yet-another-ff-label-fix

Conversation

@mdo
Copy link
Copy Markdown
Member

@mdo mdo commented Mar 24, 2023

Alternate fix to #38159.

Will need to deprecate the $form-floating-label-height variable with this solution, or use it some other way, but it works without using the :has() selector. Approach here remaps the opacity value to an rgba() alpha channel, so we can just style based on background or a generated element. With this we could probably simplify more, but open to ideas.

@jonnysp
Copy link
Copy Markdown
Contributor

jonnysp commented Mar 24, 2023

unfortunately does not work in textarea without the form-floating-label-height after the height adjustment

grafik

@mdo
Copy link
Copy Markdown
Member Author

mdo commented Mar 25, 2023

Pushed another commit to fix that.

@mdo mdo force-pushed the yet-another-ff-label-fix branch from a55f824 to 840557b Compare March 25, 2023 03:02
@jonnysp
Copy link
Copy Markdown
Contributor

jonnysp commented Mar 25, 2023

the label can be across the entire width and at the very top.
grafik

@mdo
Copy link
Copy Markdown
Member Author

mdo commented Mar 25, 2023

I didn't take the label all the way to the top because it can interfere with the shadow when shadows are enabled. Full width or auto width could be possible, will have to experiment.

@mdo mdo force-pushed the yet-another-ff-label-fix branch from 840557b to 5e14483 Compare March 28, 2023 21:26
@jonnysp
Copy link
Copy Markdown
Contributor

jonnysp commented Mar 29, 2023

this looks😎 good to me 👌

@mdo
Copy link
Copy Markdown
Member Author

mdo commented Mar 29, 2023

This fixes a few things for us, so going to merge as-is and we can ship and iterate.

@mdo mdo merged commit 3aabfc7 into main Mar 29, 2023
@mdo mdo deleted the yet-another-ff-label-fix branch March 29, 2023 17:46
@mahilanmjd mahilanmjd mentioned this pull request Apr 16, 2023
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

No open projects
Status: No status

Development

Successfully merging this pull request may close these issues.

3 participants