From f3fcd8a39b91493aa8968e99fb53e24abbff8bfc Mon Sep 17 00:00:00 2001 From: LuLaValva Date: Mon, 5 Jun 2023 16:22:33 -0700 Subject: [PATCH 1/2] fix(floating-label): override inline transform during autofill --- dist/floating-label/floating-label.css | 6 ++++++ src/less/floating-label/floating-label.less | 10 ++++++++++ 2 files changed, 16 insertions(+) diff --git a/dist/floating-label/floating-label.css b/dist/floating-label/floating-label.css index 92b0d6477..d4e632cf4 100644 --- a/dist/floating-label/floating-label.css +++ b/dist/floating-label/floating-label.css @@ -78,3 +78,9 @@ label.floating-label__label--invalid { right: 16px; transform-origin: right; } +label.floating-label__label:has(+ .textbox :autofill) { + transform: scale(0.75, 0.75) translate(0, 2px); +} +.floating-label--large label.floating-label__label:has(+ .textbox :autofill) { + transform: scale(0.75, 0.75) translate(0, 3px); +} diff --git a/src/less/floating-label/floating-label.less b/src/less/floating-label/floating-label.less index eac57ae2e..46459d844 100644 --- a/src/less/floating-label/floating-label.less +++ b/src/less/floating-label/floating-label.less @@ -106,3 +106,13 @@ label.floating-label__label--invalid { transform-origin: right; } } + +// Autofill + +label.floating-label__label:has(+ .textbox :autofill) { + transform: scale(0.75, 0.75) translate(0, 2px); +} + +.floating-label--large label.floating-label__label:has(+ .textbox :autofill) { + transform: scale(0.75, 0.75) translate(0, 3px); +} From e53bfe05b22611573570b2a234b370dd513440cd Mon Sep 17 00:00:00 2001 From: LuLaValva Date: Tue, 6 Jun 2023 09:30:33 -0700 Subject: [PATCH 2/2] fix(floating-label): make selector more specific --- dist/floating-label/floating-label.css | 8 ++++++-- src/less/floating-label/floating-label.less | 9 +++++++-- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/dist/floating-label/floating-label.css b/dist/floating-label/floating-label.css index d4e632cf4..5ee5a4c34 100644 --- a/dist/floating-label/floating-label.css +++ b/dist/floating-label/floating-label.css @@ -78,9 +78,13 @@ label.floating-label__label--invalid { right: 16px; transform-origin: right; } -label.floating-label__label:has(+ .textbox :autofill) { +label.floating-label__label.floating-label__label--inline:has( + + .textbox > :autofill + ) { transform: scale(0.75, 0.75) translate(0, 2px); } -.floating-label--large label.floating-label__label:has(+ .textbox :autofill) { +.floating-label--large label.floating-label__label.floating-label__label--inline:has( + + .textbox > :autofill + ) { transform: scale(0.75, 0.75) translate(0, 3px); } diff --git a/src/less/floating-label/floating-label.less b/src/less/floating-label/floating-label.less index 46459d844..d67fc3c52 100644 --- a/src/less/floating-label/floating-label.less +++ b/src/less/floating-label/floating-label.less @@ -109,10 +109,15 @@ label.floating-label__label--invalid { // Autofill -label.floating-label__label:has(+ .textbox :autofill) { +label.floating-label__label.floating-label__label--inline:has( + + .textbox > :autofill + ) { transform: scale(0.75, 0.75) translate(0, 2px); } -.floating-label--large label.floating-label__label:has(+ .textbox :autofill) { +.floating-label--large + label.floating-label__label.floating-label__label--inline:has( + + .textbox > :autofill + ) { transform: scale(0.75, 0.75) translate(0, 3px); }