add invalid style for select2 elements
All checks were successful
Build and Push Docker Image / build (push) Successful in 14s

This commit is contained in:
Corban-Lee Jones 2024-10-15 11:55:26 +01:00
parent 1593c3b370
commit 87a84e248b
2 changed files with 14 additions and 2 deletions

View File

@ -471,7 +471,7 @@ function renderErrorMessages($modal, errorObj) {
const value = errorObj[key];
const $input = $modal.find(`[data-field="${key}"]`);
$input.addClass("is-invalid");
$input.next(".form-text").after(
$input.nextAll(".form-text").last().after(
`<div class="invalid-feedback">${value}</div>`
)
}

View File

@ -91,4 +91,16 @@
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: var(--bs-border-radius-sm);
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
}
/* Invalid Select2 */
select.select-2.is-invalid + .select2 .select2-selection {
color: var(--bs-form-invalid-color);
padding: calc(1.5em + 0.75rem);
border-color: var(--bs-form-invalid-border-color) !important;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}