fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

warp phone component & fix background color after auto fit

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-10-23 17:24:12 +03:00
parent 42882069a7
commit 3aeaa0a9f3
9 changed files with 142 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/index.css
View File

@@ -11,7 +11,7 @@
--secondary-background: #ffffff;
--secondary-foreground: #0a0a0a;
--primary-dark: #0a0a0a;
--primary: #FFD633;
--primary: #ffd633;
--primary2: #ffc600;
--secondary: #09237d;
--text-color: #fff;
@@ -330,3 +330,51 @@ label {
padding: 16px 16px 8px 16px !important;
box-shadow: none !important;
}
/* Override PhoneInput autofill background styles */
.pro-phone-input :where(.react-tel-input input) {
transition: background-color 5000s ease-in-out 0s !important;
}
.pro-phone-input :where(.react-tel-input input:-webkit-autofill),
.pro-phone-input :where(.react-tel-input input:-webkit-autofill:hover),
.pro-phone-input :where(.react-tel-input input:-webkit-autofill:focus),
.pro-phone-input :where(.react-tel-input input:-webkit-autofill:active) {
-webkit-box-shadow: 0 0 0 30px var(--secondary-background) inset !important;
-webkit-text-fill-color: var(--secondary-foreground) !important;
background-color: transparent !important;
background-image: none !important;
transition: background-color 5000s ease-in-out 0s !important;
}
/* Dark theme PhoneInput autofill overrides */
:where(.darkApp)
.pro-phone-input
:where(.react-tel-input input:-webkit-autofill),
:where(.darkApp)
.pro-phone-input
:where(.react-tel-input input:-webkit-autofill:hover),
:where(.darkApp)
.pro-phone-input
:where(.react-tel-input input:-webkit-autofill:focus),
:where(.darkApp)
.pro-phone-input
:where(.react-tel-input input:-webkit-autofill:active),
:where([data-theme="dark"])
.pro-phone-input
:where(.react-tel-input input:-webkit-autofill),
:where([data-theme="dark"])
.pro-phone-input
:where(.react-tel-input input:-webkit-autofill:hover),
:where([data-theme="dark"])
.pro-phone-input
:where(.react-tel-input input:-webkit-autofill:focus),
:where([data-theme="dark"])
.pro-phone-input
:where(.react-tel-input input:-webkit-autofill:active) {
-webkit-box-shadow: 0 0 0 30px var(--background) inset !important;
-webkit-text-fill-color: var(--secondary-foreground) !important;
background-color: transparent !important;
background-image: none !important;
transition: background-color 5000s ease-in-out 0s !important;
}