From c30347282d8fb66b651258a9aa40296639c46089 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Wed, 25 Sep 2024 15:18:05 +0200 Subject: [PATCH 1/2] Switching from "invalid" to "user-invalid" In order not to display a red input when the user did not interact yet with the form, we use user-invalid instead of invalid pseudo-class. --- src/components/inputs.scss | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/inputs.scss b/src/components/inputs.scss index bbbe5fe..2b361d2 100644 --- a/src/components/inputs.scss +++ b/src/components/inputs.scss @@ -15,7 +15,7 @@ } .input-text { - @apply outline-none h-11 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-4 rounded-md text-base placeholder:font-normal placeholder:text-contrast-400 hover:border-secondary-500 focus:border-secondary transition-all disabled:opacity-70 invalid:border-danger invalid:hover:border-danger-500 invalid:focus:border-danger-900 invalid:text-danger disabled:cursor-not-allowed; + @apply outline-none h-11 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-4 rounded-md text-base placeholder:font-normal placeholder:text-contrast-400 hover:border-secondary-500 focus:border-secondary transition-all disabled:opacity-70 user-invalid:border-danger user-invalid:hover:border-danger-500 user-invalid:focus:border-danger-900 user-invalid:text-danger disabled:cursor-not-allowed; &.success { @apply border-success text-success hover:border-success-500 focus:border-success-900; @@ -53,7 +53,7 @@ } } &-light { - @apply bg-white border-neutral-400 text-contrast placeholder:text-contrast/50 focus:border-secondary hover:bg-secondary-400 hover:bg-neutral-100 focus:bg-secondary-100 disabled:bg-neutral-200 invalid:border-danger invalid:text-danger-1000 invalid:bg-danger-100 invalid:hover:bg-danger-200 invalid:focus:bg-danger-100 disabled:opacity-50 disabled:bg-contrast-100; + @apply bg-white border-neutral-400 text-contrast placeholder:text-contrast/50 focus:border-secondary hover:bg-secondary-400 hover:bg-neutral-100 focus:bg-secondary-100 disabled:bg-neutral-200 user-invalid:border-danger user-invalid:text-danger-1000 user-invalid:bg-danger-100 user-invalid:hover:bg-danger-200 user-invalid:focus:bg-danger-100 disabled:opacity-50 disabled:bg-contrast-100; &.success { @apply border-success-1000 text-success-1100 bg-success-100 hover:border-success-800 focus:border-success-1100; } @@ -70,7 +70,7 @@ } .input-number { - @apply appearance-none outline-none text-center h-11 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-4 rounded-md text-lg placeholder:font-normal placeholder:text-contrast-400 hover:border-secondary-500 focus:border-secondary transition-all disabled:opacity-70 invalid:border-danger invalid:hover:border-danger-500 invalid:focus:border-danger-900 invalid:text-danger disabled:cursor-not-allowed; + @apply appearance-none outline-none text-center h-11 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-4 rounded-md text-lg placeholder:font-normal placeholder:text-contrast-400 hover:border-secondary-500 focus:border-secondary transition-all disabled:opacity-70 user-invalid:border-danger user-invalid:hover:border-danger-500 user-invalid:focus:border-danger-900 user-invalid:text-danger disabled:cursor-not-allowed; &.success { @apply border-success text-success hover:border-success-500 focus:border-success-900; } @@ -89,7 +89,7 @@ @apply h-8 text-base rounded; } &-light { - @apply bg-white border-neutral-400 text-contrast placeholder:text-contrast/50 focus:border-secondary hover:bg-secondary-400 hover:bg-neutral-100 focus:bg-secondary-100 disabled:bg-neutral-200 invalid:border-danger invalid:text-danger-1000 invalid:bg-danger-100 invalid:hover:bg-danger-200 invalid:focus:bg-danger-100 disabled:opacity-50 disabled:bg-contrast-100; + @apply bg-white border-neutral-400 text-contrast placeholder:text-contrast/50 focus:border-secondary hover:bg-secondary-400 hover:bg-neutral-100 focus:bg-secondary-100 disabled:bg-neutral-200 user-invalid:border-danger user-invalid:text-danger-1000 user-invalid:bg-danger-100 user-invalid:hover:bg-danger-200 user-invalid:focus:bg-danger-100 disabled:opacity-50 disabled:bg-contrast-100; &.success { @apply border-success-1000 text-success-1100 bg-success-100 hover:border-success-800 focus:border-success-1100; } @@ -100,7 +100,7 @@ } .input-search { - @apply appearance-none outline-none h-13 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-6 rounded-full text-base placeholder:font-normal placeholder:text-contrast-300 hover:border-secondary-500 focus:border-secondary transition-all invalid:border-danger invalid:hover:border-danger-500 invalid:focus:border-danger-900 invalid:text-danger disabled:cursor-not-allowed; + @apply appearance-none outline-none h-13 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-6 rounded-full text-base placeholder:font-normal placeholder:text-contrast-300 hover:border-secondary-500 focus:border-secondary transition-all user-invalid:border-danger user-invalid:hover:border-danger-500 user-invalid:focus:border-danger-900 user-invalid:text-danger disabled:cursor-not-allowed; &-lg { @apply h-13 text-lg; } @@ -111,12 +111,12 @@ @apply h-8 text-sm px-3; } &-light { - @apply bg-white border-neutral-400 text-contrast placeholder:text-contrast/50 focus:border-secondary hover:bg-secondary-400 hover:bg-neutral-100 focus:bg-secondary-100 invalid:border-danger invalid:text-danger-1000 invalid:bg-danger-100 invalid:hover:bg-danger-200 invalid:focus:bg-danger-100; + @apply bg-white border-neutral-400 text-contrast placeholder:text-contrast/50 focus:border-secondary hover:bg-secondary-400 hover:bg-neutral-100 focus:bg-secondary-100 user-invalid:border-danger user-invalid:text-danger-1000 user-invalid:bg-danger-100 user-invalid:hover:bg-danger-200 user-invalid:focus:bg-danger-100; } } .input-select { - @apply appearance-none outline-none h-11 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-4 rounded-md text-base placeholder:font-normal placeholder:text-contrast-400 hover:border-secondary-500 focus:border-secondary transition-all disabled:opacity-70 invalid:border-danger invalid:hover:border-danger-500 invalid:focus:border-danger-900 invalid:text-danger disabled:cursor-not-allowed bg-[url('../icon-dropdown.svg')] bg-no-repeat bg-right; + @apply appearance-none outline-none h-11 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-4 rounded-md text-base placeholder:font-normal placeholder:text-contrast-400 hover:border-secondary-500 focus:border-secondary transition-all disabled:opacity-70 user-invalid:border-danger user-invalid:hover:border-danger-500 user-invalid:focus:border-danger-900 user-invalid:text-danger disabled:cursor-not-allowed bg-[url('../icon-dropdown.svg')] bg-no-repeat bg-right; &.success { @apply border-success text-success hover:border-success-500 focus:border-success-900; } @@ -153,7 +153,7 @@ } } &-light { - @apply bg-white border-neutral-400 text-contrast placeholder:text-contrast/50 focus:border-secondary hover:bg-secondary-400 hover:bg-neutral-100 focus:bg-secondary-100 disabled:bg-neutral-200 invalid:border-danger invalid:text-danger-1000 invalid:bg-danger-100 invalid:hover:bg-danger-200 invalid:focus:bg-danger-100 disabled:opacity-50 disabled:bg-contrast-100; + @apply bg-white border-neutral-400 text-contrast placeholder:text-contrast/50 focus:border-secondary hover:bg-secondary-400 hover:bg-neutral-100 focus:bg-secondary-100 disabled:bg-neutral-200 user-invalid:border-danger user-invalid:text-danger-1000 user-invalid:bg-danger-100 user-invalid:hover:bg-danger-200 user-invalid:focus:bg-danger-100 disabled:opacity-50 disabled:bg-contrast-100; &.success { @apply border-success-1000 text-success-1100 bg-success-100 hover:border-success-800 focus:border-success-1100; } @@ -170,7 +170,7 @@ } .input-tags { - @apply flex items-center space-x-1 outline-none h-11 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-1 rounded-md text-base placeholder:font-normal placeholder:text-contrast-400 hover:border-secondary-500 focus:border-secondary transition-all disabled:opacity-70 invalid:border-danger invalid:hover:border-danger-500 invalid:focus:border-danger-900 invalid:text-danger; + @apply flex items-center space-x-1 outline-none h-11 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-1 rounded-md text-base placeholder:font-normal placeholder:text-contrast-400 hover:border-secondary-500 focus:border-secondary transition-all disabled:opacity-70 user-invalid:border-danger user-invalid:hover:border-danger-500 user-invalid:focus:border-danger-900 user-invalid:text-danger; &.success { @apply border-success text-success hover:border-success-500 focus:border-success-900; } @@ -207,7 +207,7 @@ } } &-light { - @apply bg-white border-neutral-400 text-contrast placeholder:text-contrast/50 focus:border-secondary hover:bg-secondary-400 hover:bg-neutral-100 focus:bg-secondary-100 disabled:bg-neutral-200 invalid:border-danger invalid:text-danger-1000 invalid:bg-danger-100 invalid:hover:bg-danger-200 invalid:focus:bg-danger-100 disabled:opacity-50 disabled:bg-contrast-100; + @apply bg-white border-neutral-400 text-contrast placeholder:text-contrast/50 focus:border-secondary hover:bg-secondary-400 hover:bg-neutral-100 focus:bg-secondary-100 disabled:bg-neutral-200 user-invalid:border-danger user-invalid:text-danger-1000 user-invalid:bg-danger-100 user-invalid:hover:bg-danger-200 user-invalid:focus:bg-danger-100 disabled:opacity-50 disabled:bg-contrast-100; &.success { @apply border-success-1000 text-success-1100 bg-success-100 hover:border-success-800 focus:border-success-1100; } From 9dd15f297f537a702fea5945a1b0e2765bb6a7d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Wed, 25 Sep 2024 15:27:14 +0200 Subject: [PATCH 2/2] fix: user-invalid is not supported by Tailwind. We use "custom" pseudo-element while waiting for Tailwind support: https://github.com/tailwindlabs/tailwindcss/pull/12370 --- example/package-lock.json | 18 +++++++++--------- example/package.json | 2 +- package-lock.json | 18 +++++++++--------- package.json | 2 +- src/components/inputs.scss | 20 ++++++++++---------- 5 files changed, 30 insertions(+), 30 deletions(-) diff --git a/example/package-lock.json b/example/package-lock.json index b05b7b8..bec8524 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -10,7 +10,7 @@ "devDependencies": { "autoprefixer": "^10.4.15", "postcss": "^8.4.29", - "tailwindcss": "^3.3.3", + "tailwindcss": "^3.4.13", "typescript": "^5.0.2", "vite": "^4.4.5" } @@ -955,9 +955,9 @@ } }, "node_modules/jiti": { - "version": "1.19.3", - "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.3.tgz", - "integrity": "sha512-5eEbBDQT/jF1xg6l36P+mWGGoH9Spuy0PCdSr2dtWRDGC6ph/w9ZCL4lmESW8f8F7MwT3XKescfP0wnZWAKL9w==", + "version": "1.21.6", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz", + "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==", "dev": true, "bin": { "jiti": "bin/jiti.js" @@ -1425,9 +1425,9 @@ } }, "node_modules/tailwindcss": { - "version": "3.3.3", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz", - "integrity": "sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==", + "version": "3.4.13", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.13.tgz", + "integrity": "sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==", "dev": true, "dependencies": { "@alloc/quick-lru": "^5.2.0", @@ -1435,10 +1435,10 @@ "chokidar": "^3.5.3", "didyoumean": "^1.2.2", "dlv": "^1.1.3", - "fast-glob": "^3.2.12", + "fast-glob": "^3.3.0", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", - "jiti": "^1.18.2", + "jiti": "^1.21.0", "lilconfig": "^2.1.0", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", diff --git a/example/package.json b/example/package.json index 4f32019..21913a1 100644 --- a/example/package.json +++ b/example/package.json @@ -10,7 +10,7 @@ "devDependencies": { "autoprefixer": "^10.4.15", "postcss": "^8.4.29", - "tailwindcss": "^3.3.3", + "tailwindcss": "^3.4.13", "typescript": "^5.0.2", "vite": "^4.4.5" } diff --git a/package-lock.json b/package-lock.json index 9a51f52..8da7a3d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "MIT", "dependencies": { "colord": "^2.9.3", - "tailwindcss": "^3.3.3" + "tailwindcss": "^3.4.13" }, "devDependencies": { "@csstools/postcss-sass": "^5.0.1", @@ -3336,9 +3336,9 @@ "dev": true }, "node_modules/jiti": { - "version": "1.19.3", - "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.3.tgz", - "integrity": "sha512-5eEbBDQT/jF1xg6l36P+mWGGoH9Spuy0PCdSr2dtWRDGC6ph/w9ZCL4lmESW8f8F7MwT3XKescfP0wnZWAKL9w==", + "version": "1.21.6", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz", + "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==", "bin": { "jiti": "bin/jiti.js" } @@ -6061,19 +6061,19 @@ } }, "node_modules/tailwindcss": { - "version": "3.3.3", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz", - "integrity": "sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==", + "version": "3.4.13", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.13.tgz", + "integrity": "sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==", "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", "chokidar": "^3.5.3", "didyoumean": "^1.2.2", "dlv": "^1.1.3", - "fast-glob": "^3.2.12", + "fast-glob": "^3.3.0", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", - "jiti": "^1.18.2", + "jiti": "^1.21.0", "lilconfig": "^2.1.0", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", diff --git a/package.json b/package.json index d8fc365..d0086c3 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,7 @@ }, "dependencies": { "colord": "^2.9.3", - "tailwindcss": "^3.3.3" + "tailwindcss": "^3.4.13" }, "files": [ "dist/**/*" diff --git a/src/components/inputs.scss b/src/components/inputs.scss index 2b361d2..50a2e6c 100644 --- a/src/components/inputs.scss +++ b/src/components/inputs.scss @@ -15,7 +15,7 @@ } .input-text { - @apply outline-none h-11 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-4 rounded-md text-base placeholder:font-normal placeholder:text-contrast-400 hover:border-secondary-500 focus:border-secondary transition-all disabled:opacity-70 user-invalid:border-danger user-invalid:hover:border-danger-500 user-invalid:focus:border-danger-900 user-invalid:text-danger disabled:cursor-not-allowed; + @apply outline-none h-11 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-4 rounded-md text-base placeholder:font-normal placeholder:text-contrast-400 hover:border-secondary-500 focus:border-secondary transition-all disabled:opacity-70 [&:user-invalid]:border-danger [&:user-invalid]:hover:border-danger-500 [&:user-invalid]:focus:border-danger-900 [&:user-invalid]:text-danger disabled:cursor-not-allowed; &.success { @apply border-success text-success hover:border-success-500 focus:border-success-900; @@ -53,7 +53,7 @@ } } &-light { - @apply bg-white border-neutral-400 text-contrast placeholder:text-contrast/50 focus:border-secondary hover:bg-secondary-400 hover:bg-neutral-100 focus:bg-secondary-100 disabled:bg-neutral-200 user-invalid:border-danger user-invalid:text-danger-1000 user-invalid:bg-danger-100 user-invalid:hover:bg-danger-200 user-invalid:focus:bg-danger-100 disabled:opacity-50 disabled:bg-contrast-100; + @apply bg-white border-neutral-400 text-contrast placeholder:text-contrast/50 focus:border-secondary hover:bg-secondary-400 hover:bg-neutral-100 focus:bg-secondary-100 disabled:bg-neutral-200 [&:user-invalid]:border-danger [&:user-invalid]:text-danger-1000 [&:user-invalid]:bg-danger-100 [&:user-invalid]:hover:bg-danger-200 [&:user-invalid]:focus:bg-danger-100 disabled:opacity-50 disabled:bg-contrast-100; &.success { @apply border-success-1000 text-success-1100 bg-success-100 hover:border-success-800 focus:border-success-1100; } @@ -70,7 +70,7 @@ } .input-number { - @apply appearance-none outline-none text-center h-11 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-4 rounded-md text-lg placeholder:font-normal placeholder:text-contrast-400 hover:border-secondary-500 focus:border-secondary transition-all disabled:opacity-70 user-invalid:border-danger user-invalid:hover:border-danger-500 user-invalid:focus:border-danger-900 user-invalid:text-danger disabled:cursor-not-allowed; + @apply appearance-none outline-none text-center h-11 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-4 rounded-md text-lg placeholder:font-normal placeholder:text-contrast-400 hover:border-secondary-500 focus:border-secondary transition-all disabled:opacity-70 [&:user-invalid]:border-danger [&:user-invalid]:hover:border-danger-500 [&:user-invalid]:focus:border-danger-900 [&:user-invalid]:text-danger disabled:cursor-not-allowed; &.success { @apply border-success text-success hover:border-success-500 focus:border-success-900; } @@ -89,7 +89,7 @@ @apply h-8 text-base rounded; } &-light { - @apply bg-white border-neutral-400 text-contrast placeholder:text-contrast/50 focus:border-secondary hover:bg-secondary-400 hover:bg-neutral-100 focus:bg-secondary-100 disabled:bg-neutral-200 user-invalid:border-danger user-invalid:text-danger-1000 user-invalid:bg-danger-100 user-invalid:hover:bg-danger-200 user-invalid:focus:bg-danger-100 disabled:opacity-50 disabled:bg-contrast-100; + @apply bg-white border-neutral-400 text-contrast placeholder:text-contrast/50 focus:border-secondary hover:bg-secondary-400 hover:bg-neutral-100 focus:bg-secondary-100 disabled:bg-neutral-200 [&:user-invalid]:border-danger [&:user-invalid]:text-danger-1000 [&:user-invalid]:bg-danger-100 [&:user-invalid]:hover:bg-danger-200 [&:user-invalid]:focus:bg-danger-100 disabled:opacity-50 disabled:bg-contrast-100; &.success { @apply border-success-1000 text-success-1100 bg-success-100 hover:border-success-800 focus:border-success-1100; } @@ -100,7 +100,7 @@ } .input-search { - @apply appearance-none outline-none h-13 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-6 rounded-full text-base placeholder:font-normal placeholder:text-contrast-300 hover:border-secondary-500 focus:border-secondary transition-all user-invalid:border-danger user-invalid:hover:border-danger-500 user-invalid:focus:border-danger-900 user-invalid:text-danger disabled:cursor-not-allowed; + @apply appearance-none outline-none h-13 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-6 rounded-full text-base placeholder:font-normal placeholder:text-contrast-300 hover:border-secondary-500 focus:border-secondary transition-all [&:user-invalid]:border-danger [&:user-invalid]:hover:border-danger-500 [&:user-invalid]:focus:border-danger-900 [&:user-invalid]:text-danger disabled:cursor-not-allowed; &-lg { @apply h-13 text-lg; } @@ -111,12 +111,12 @@ @apply h-8 text-sm px-3; } &-light { - @apply bg-white border-neutral-400 text-contrast placeholder:text-contrast/50 focus:border-secondary hover:bg-secondary-400 hover:bg-neutral-100 focus:bg-secondary-100 user-invalid:border-danger user-invalid:text-danger-1000 user-invalid:bg-danger-100 user-invalid:hover:bg-danger-200 user-invalid:focus:bg-danger-100; + @apply bg-white border-neutral-400 text-contrast placeholder:text-contrast/50 focus:border-secondary hover:bg-secondary-400 hover:bg-neutral-100 focus:bg-secondary-100 [&:user-invalid]:border-danger [&:user-invalid]:text-danger-1000 [&:user-invalid]:bg-danger-100 [&:user-invalid]:hover:bg-danger-200 [&:user-invalid]:focus:bg-danger-100; } } .input-select { - @apply appearance-none outline-none h-11 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-4 rounded-md text-base placeholder:font-normal placeholder:text-contrast-400 hover:border-secondary-500 focus:border-secondary transition-all disabled:opacity-70 user-invalid:border-danger user-invalid:hover:border-danger-500 user-invalid:focus:border-danger-900 user-invalid:text-danger disabled:cursor-not-allowed bg-[url('../icon-dropdown.svg')] bg-no-repeat bg-right; + @apply appearance-none outline-none h-11 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-4 rounded-md text-base placeholder:font-normal placeholder:text-contrast-400 hover:border-secondary-500 focus:border-secondary transition-all disabled:opacity-70 [&:user-invalid]:border-danger [&:user-invalid]:hover:border-danger-500 [&:user-invalid]:focus:border-danger-900 [&:user-invalid]:text-danger disabled:cursor-not-allowed bg-[url('../icon-dropdown.svg')] bg-no-repeat bg-right; &.success { @apply border-success text-success hover:border-success-500 focus:border-success-900; } @@ -153,7 +153,7 @@ } } &-light { - @apply bg-white border-neutral-400 text-contrast placeholder:text-contrast/50 focus:border-secondary hover:bg-secondary-400 hover:bg-neutral-100 focus:bg-secondary-100 disabled:bg-neutral-200 user-invalid:border-danger user-invalid:text-danger-1000 user-invalid:bg-danger-100 user-invalid:hover:bg-danger-200 user-invalid:focus:bg-danger-100 disabled:opacity-50 disabled:bg-contrast-100; + @apply bg-white border-neutral-400 text-contrast placeholder:text-contrast/50 focus:border-secondary hover:bg-secondary-400 hover:bg-neutral-100 focus:bg-secondary-100 disabled:bg-neutral-200 [&:user-invalid]:border-danger [&:user-invalid]:text-danger-1000 [&:user-invalid]:bg-danger-100 [&:user-invalid]:hover:bg-danger-200 [&:user-invalid]:focus:bg-danger-100 disabled:opacity-50 disabled:bg-contrast-100; &.success { @apply border-success-1000 text-success-1100 bg-success-100 hover:border-success-800 focus:border-success-1100; } @@ -170,7 +170,7 @@ } .input-tags { - @apply flex items-center space-x-1 outline-none h-11 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-1 rounded-md text-base placeholder:font-normal placeholder:text-contrast-400 hover:border-secondary-500 focus:border-secondary transition-all disabled:opacity-70 user-invalid:border-danger user-invalid:hover:border-danger-500 user-invalid:focus:border-danger-900 user-invalid:text-danger; + @apply flex items-center space-x-1 outline-none h-11 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-1 rounded-md text-base placeholder:font-normal placeholder:text-contrast-400 hover:border-secondary-500 focus:border-secondary transition-all disabled:opacity-70 [&:user-invalid]:border-danger [&:user-invalid]:hover:border-danger-500 [&:user-invalid]:focus:border-danger-900 [&:user-invalid]:text-danger; &.success { @apply border-success text-success hover:border-success-500 focus:border-success-900; } @@ -207,7 +207,7 @@ } } &-light { - @apply bg-white border-neutral-400 text-contrast placeholder:text-contrast/50 focus:border-secondary hover:bg-secondary-400 hover:bg-neutral-100 focus:bg-secondary-100 disabled:bg-neutral-200 user-invalid:border-danger user-invalid:text-danger-1000 user-invalid:bg-danger-100 user-invalid:hover:bg-danger-200 user-invalid:focus:bg-danger-100 disabled:opacity-50 disabled:bg-contrast-100; + @apply bg-white border-neutral-400 text-contrast placeholder:text-contrast/50 focus:border-secondary hover:bg-secondary-400 hover:bg-neutral-100 focus:bg-secondary-100 disabled:bg-neutral-200 [&:user-invalid]:border-danger [&:user-invalid]:text-danger-1000 [&:user-invalid]:bg-danger-100 [&:user-invalid]:hover:bg-danger-200 [&:user-invalid]:focus:bg-danger-100 disabled:opacity-50 disabled:bg-contrast-100; &.success { @apply border-success-1000 text-success-1100 bg-success-100 hover:border-success-800 focus:border-success-1100; }