From 0ceef852ab3954fc5b3fe221a316087d4e4a1088 Mon Sep 17 00:00:00 2001 From: Adnan Sait Date: Fri, 30 Sep 2022 22:34:36 +0530 Subject: [PATCH 1/3] Autofill Styling Fixes #137 --- src/Components/Form/TextInput/TextInput.scss | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/Components/Form/TextInput/TextInput.scss b/src/Components/Form/TextInput/TextInput.scss index 52d87d3c..f173e27a 100644 --- a/src/Components/Form/TextInput/TextInput.scss +++ b/src/Components/Form/TextInput/TextInput.scss @@ -24,7 +24,9 @@ background-size: 100% 100%; border: unset; border-bottom: solid 1px $color-alternative; - transition: all 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + + // No transition duration for background and color - Added for autofill styling fix. + transition: all 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), background 0s, color 0s; &:focus { background-position: 0 0; @@ -32,7 +34,19 @@ outline: none; box-shadow: none; } - + + // Overrides the browser autofill styling. + &:-webkit-autofill { + /* + * 'background-clip' to make the background transparent. + * If a solid color is required use 'box-shadow'. + **/ + background-clip: text !important; + -webkit-background-clip: text !important; + -webkit-text-fill-color: $color-main-text; + caret-color: $color-main-text; + } + &::placeholder { transition: all 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } From 53e4fd8afd225d9e984e56b47b52141cf1fa56c5 Mon Sep 17 00:00:00 2001 From: Adnan Sait Date: Sat, 1 Oct 2022 16:25:41 +0530 Subject: [PATCH 2/3] Removed unnecessary comments --- src/Components/Form/TextInput/TextInput.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/Components/Form/TextInput/TextInput.scss b/src/Components/Form/TextInput/TextInput.scss index f173e27a..0c09e489 100644 --- a/src/Components/Form/TextInput/TextInput.scss +++ b/src/Components/Form/TextInput/TextInput.scss @@ -24,8 +24,6 @@ background-size: 100% 100%; border: unset; border-bottom: solid 1px $color-alternative; - - // No transition duration for background and color - Added for autofill styling fix. transition: all 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), background 0s, color 0s; &:focus { @@ -35,7 +33,6 @@ box-shadow: none; } - // Overrides the browser autofill styling. &:-webkit-autofill { /* * 'background-clip' to make the background transparent. From 738f336558b617bd7135e7c60f66ef004bbc479b Mon Sep 17 00:00:00 2001 From: Adnan Sait Date: Sat, 1 Oct 2022 17:47:34 +0530 Subject: [PATCH 3/3] Removed webkit style - lint fixes --- src/Components/Form/TextInput/TextInput.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Components/Form/TextInput/TextInput.scss b/src/Components/Form/TextInput/TextInput.scss index 0c09e489..fe4fbd9d 100644 --- a/src/Components/Form/TextInput/TextInput.scss +++ b/src/Components/Form/TextInput/TextInput.scss @@ -39,7 +39,6 @@ * If a solid color is required use 'box-shadow'. **/ background-clip: text !important; - -webkit-background-clip: text !important; -webkit-text-fill-color: $color-main-text; caret-color: $color-main-text; }