Skip to content

Commit 8f97ba0

Browse files
moufmoufmoufmouf
committed
fix: user-invalid is not supported by Tailwind.
We use "custom" pseudo-element while waiting for Tailwind support: tailwindlabs/tailwindcss#12370
1 parent d534729 commit 8f97ba0

File tree

5 files changed

+30
-30
lines changed

5 files changed

+30
-30
lines changed

‎example/package-lock.json

+9-9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"devDependencies": {
1111
"autoprefixer": "^10.4.15",
1212
"postcss": "^8.4.29",
13-
"tailwindcss": "^3.3.3",
13+
"tailwindcss": "^3.4.13",
1414
"typescript": "^5.0.2",
1515
"vite": "^4.4.5"
1616
}

‎package-lock.json

+9-9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
},
5353
"dependencies": {
5454
"colord": "^2.9.3",
55-
"tailwindcss": "^3.3.3"
55+
"tailwindcss": "^3.4.13"
5656
},
5757
"files": [
5858
"dist/**/*"

‎src/components/inputs.scss

+10-10
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
}
1616

1717
.input-text {
18-
@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;
18+
@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;
1919

2020
&.success {
2121
@apply border-success text-success hover:border-success-500 focus:border-success-900;
@@ -53,7 +53,7 @@
5353
}
5454
}
5555
&-light {
56-
@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;
56+
@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;
5757
&.success {
5858
@apply border-success-1000 text-success-1100 bg-success-100 hover:border-success-800 focus:border-success-1100;
5959
}
@@ -70,7 +70,7 @@
7070
}
7171

7272
.input-number {
73-
@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;
73+
@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;
7474
&.success {
7575
@apply border-success text-success hover:border-success-500 focus:border-success-900;
7676
}
@@ -89,7 +89,7 @@
8989
@apply h-8 text-base rounded;
9090
}
9191
&-light {
92-
@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;
92+
@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;
9393
&.success {
9494
@apply border-success-1000 text-success-1100 bg-success-100 hover:border-success-800 focus:border-success-1100;
9595
}
@@ -100,7 +100,7 @@
100100
}
101101

102102
.input-search {
103-
@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;
103+
@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;
104104
&-lg {
105105
@apply h-13 text-lg;
106106
}
@@ -111,12 +111,12 @@
111111
@apply h-8 text-sm px-3;
112112
}
113113
&-light {
114-
@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;
114+
@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;
115115
}
116116
}
117117

118118
.input-select {
119-
@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;
119+
@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;
120120
&.success {
121121
@apply border-success text-success hover:border-success-500 focus:border-success-900;
122122
}
@@ -153,7 +153,7 @@
153153
}
154154
}
155155
&-light {
156-
@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;
156+
@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;
157157
&.success {
158158
@apply border-success-1000 text-success-1100 bg-success-100 hover:border-success-800 focus:border-success-1100;
159159
}
@@ -170,7 +170,7 @@
170170
}
171171

172172
.input-tags {
173-
@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;
173+
@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;
174174
&.success {
175175
@apply border-success text-success hover:border-success-500 focus:border-success-900;
176176
}
@@ -207,7 +207,7 @@
207207
}
208208
}
209209
&-light {
210-
@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;
210+
@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;
211211
&.success {
212212
@apply border-success-1000 text-success-1100 bg-success-100 hover:border-success-800 focus:border-success-1100;
213213
}

0 commit comments

Comments
 (0)