v4-beta form-validation-state() mixin does not work
Created by: tkrotoff
See demo here: https://codepen.io/tkrotoff/pen/QMMqXZ
I'm re-implementing the equivalent of has-warning
from alpha-6 (and adding has-info
) since it has been removed from beta (in my opinion this is a bad choice).
// See https://github.com/twbs/bootstrap/blob/v4.0.0-beta/scss/_variables.scss#L484
$form-feedback-warning-color: theme-color("warning") !default;
// See https://github.com/twbs/bootstrap/blob/v4.0.0-beta/scss/_forms.scss#L266
.warning-feedback {
//display: none;
margin-top: .25rem;
font-size: .875rem;
color: $form-feedback-warning-color;
}
// See https://github.com/twbs/bootstrap/blob/v4.0.0-beta/scss/_forms.scss#L288
@include form-validation-state("warning", $form-feedback-warning-color);
form-validation-state()
mixin generates:
.was-validated .form-control:warning, .form-control.is-warning, .was-validated
.custom-select:warning,
.custom-select.is-warning {
border-color: #ffc107; }
.was-validated .form-control:warning:focus, .form-control.is-warning:focus, .was-validated
.custom-select:warning:focus,
.custom-select.is-warning:focus {
box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25); }
.was-validated .form-control:warning ~ .invalid-feedback,
.was-validated .form-control:warning ~ .invalid-tooltip, .form-control.is-warning ~ .invalid-feedback,
.form-control.is-warning ~ .invalid-tooltip, .was-validated
.custom-select:warning ~ .invalid-feedback,
.was-validated
.custom-select:warning ~ .invalid-tooltip,
.custom-select.is-warning ~ .invalid-feedback,
.custom-select.is-warning ~ .invalid-tooltip {
display: block; }
This part does not work:
.was-validated .form-control:warning, .form-control.is-warning, .was-validated
.custom-select:warning,
.custom-select.is-warning {
border-color: #ffc107; }
border-color
is not applied.
This works:
/*.was-validated .form-control:warning,*/ .form-control.is-warning/*, .was-validated
.custom-select:warning,
.custom-select.is-warning*/ {
border-color: #ffc107; }
It does not make sense to me.
Tried with Chrome, Firefox and Safari => same problem.
Also what is invalid-tooltip
about? It does not seem to be used anywhere.