Переопределение миксина в bootstrap
Нужна помощь с миксинами в бутстрапе 5. Для валидации формы поставлен на форму класс .was-validated, соответсвенно изменения стилей происходят на инпутах с помощью двух миксинов и карты валидации. Где и на каком этапе правильно написать свой миксин? Бутстрап подключен как npm-пакеты, лезть в node-modules не рискну, все стили пишу в styles.scss. Пока написала так, но не помогает:
$form-validation-states: (
"valid": ("color": green,
"icon": none,
"focus-box-shadow": 0 0 0 0,
"border-color": $textcolor,
),
"invalid": ("color": blue,
// "icon": $form-feedback-icon-invalid,
"icon": none,
"focus-box-shadow": 0 0 0 0,
"border-color": $error,
)
);
@mixin form-validation-state($state,
$color,
$icon,
$focus-box-shadow: focus-box-shadow,
$border-color: $color) {
.form-control.form-input {
@include form-validation-state-selector($state) {
border-color: $border-color;
}
}
} <form class="modal-content was-validated" id="authForm" >
<div class="modal-header">...</div>
<div class="modal-body">
<div class="form-floating">
<input
type="email"
class="form-control form-input"
name="authEmail"
id="authEmail"
placeholder="e-mail"
/>
<label for="authEmail">e-mail</label>
</div>
<div class="modal-footer">...</div>
</form>