bug #5338 Improve the styles of form fields with errors (javiereguiluz)

This PR was merged into the 4.x branch.

Discussion
----------

Improve the styles of form fields with errors

Some colors in error messages were a bit off ... so this PR fixes that and does other tweaks to error messages (mostly to checkboxes/radiobuttons with errors, which now look much better).

Commits
-------

814ed24 Improve the styles of form fields with errors

assets/css/easyadmin-theme/forms.scss

@@ -89,6 +89,21 @@ label.form-check-label {
     word-break: keep-all;
     transition: box-shadow .08s ease-in, color .08s ease-in;
 }
+.form-widget input.form-control.is-invalid,
+.form-widget textarea.form-control.is-invalid,
+.form-widget .form-select.is-invalid,
+.form-widget input.form-control.is-invalid:focus,
+.form-widget textarea.form-control.is-invalid:focus,
+.form-widget .form-select.is-invalid:focus {
+    background-image: none;
+    border: 1px solid var(--form-input-error-border-color);
+    box-shadow: var(--form-input-error-shadow);
+}
+.form-widget input.form-check-input.is-invalid {
+    border: 1px solid var(--form-input-error-border-color);
+    box-shadow: var(--form-input-error-shadow);
+}
+
 .form-widget .form-control:disabled, .form-control[readonly] {
     background-color: var(--form-control-disabled-bg);
     color: var(--form-control-disabled-color);
@@ -476,9 +491,15 @@ fieldset .legend-help {
 }
 form .invalid-feedback {
     color: var(--color-danger);
+    font-size: 1em;
     font-weight: 500;
     padding-top: 6px;
 }
+.form-check-input.is-invalid ~ .form-check-label,
+.was-validated .form-check-input:not([type="checkbox"]):invalid ~ .form-check-label {
+    color: inherit;
+}
+
 form .invalid-feedback .badge-danger {
     font-size: 0.6875rem;
     margin-right: 2px;

assets/css/easyadmin-theme/variables-theme.scss

@@ -133,10 +133,11 @@
     --form-control-disabled-bg: var(--gray-200);
     --form-control-disabled-color: var(--gray-600);
     --form-input-border-color: var(--gray-300);
+    --form-input-error-border-color: var(--red-600);
     --form-input-hover-border-color: var(--gray-400);
     --form-input-shadow: 0 1px 2px 0 var(--gray-50);
-    --form-input-error-shadow: 0 0 0 1px rgba(43, 45, 80, 0), 0 0 0 1px rgba(183, 6, 32, .2), 0 0 0 2px rgba(183, 6, 32, .25), 0 1px 1px rgba(0, 0, 0, .08);
     --form-input-hover-shadow: 0 0 0 4px var(--gray-100);
+    --form-input-error-shadow: 0 0 0 3px var(--red-100);
     --form-input-text-color: var(--gray-700);
     --form-input-group-text-bg: var(--form-control-bg);
     --form-input-group-text-border-color: var(--form-input-border-color);
@@ -418,10 +419,11 @@
     --form-control-disabled-bg: var(--true-gray-700);
     --form-control-disabled-color: #939393;
     --form-input-border-color: var(--true-gray-600);
+    --form-input-error-border-color: var(--red-500);
     --form-input-hover-border-color: var(--true-gray-400);
     --form-input-shadow: 0 1px 2px 0 var(--true-gray-800);
     --form-input-hover-shadow: 0 0 0 4px var(--true-gray-800);
-    --form-input-error-shadow: 0 0 0 1px rgba(43,45,80,0),0 0 0 1px var(--red-700),0 0 0 2px var(--red-900),0 1px 1px rgba(0,0,0,0.08);
+    --form-input-error-shadow: 0 0 0 3px var(--red-900);
     --form-input-text-color: var(--true-gray-200);
     --form-input-group-text-bg: var(--true-gray-800);
     --form-input-group-text-border-color: var(--true-gray-600);

src/Resources/public/entrypoints.json

@@ -2,8 +2,8 @@
   "entrypoints": {
     "app": {
       "css": [
-        "/app.6c138caf.css",
-        "/app.6c138caf.rtl.css"
+        "/app.c823e94e.css",
+        "/app.c823e94e.rtl.css"
       ],
       "js": [
         "/app.1e1ba55d.js"
@@ -69,7 +69,7 @@
         "/field-text-editor.7348fb97.rtl.css"
       ],
       "js": [
-        "/field-text-editor.5036ae44.js"
+        "/field-text-editor.5848d9aa.js"
       ]
     },
     "login": {

src/Resources/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "app.css": "app.6c138caf.css",
-  "app.rtl.css": "app.6c138caf.rtl.css",
+  "app.css": "app.c823e94e.css",
+  "app.rtl.css": "app.c823e94e.rtl.css",
   "app.js": "app.1e1ba55d.js",
   "form.js": "form.f254eea2.js",
   "page-layout.js": "page-layout.3347892e.js",
@@ -16,7 +16,7 @@
   "field-textarea.js": "field-textarea.f496dd73.js",
   "field-text-editor.css": "field-text-editor.7348fb97.css",
   "field-text-editor.rtl.css": "field-text-editor.7348fb97.rtl.css",
-  "field-text-editor.js": "field-text-editor.5036ae44.js",
+  "field-text-editor.js": "field-text-editor.5848d9aa.js",
   "login.js": "login.7259f5de.js",
   "fonts/fa-solid-900.ttf": "fonts/fa-solid-900.e615bbcb258550973c165dfc0d871c96.ttf",
   "fonts/fa-brands-400.ttf": "fonts/fa-brands-400.b823fc0dbb5a5f0c21bbcc2a268f92aa.ttf",