rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

Prevent form validation mixin from generating invalid CSS (#28447)

Browse Source 
Extrapolates the previously used selector into a new mixin that only generates valid CSS by creating psuedo-classes for `valid` and `invalid`, and nothing else.

Fixes #28380.
This commit is contained in:
Mark Otto 2019-04-25 07:01:50 -07:00 committed by XhmikosR
parent 68932330f0
commit 605704d7f5
1 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
scss/mixins/_forms.scss
View File

@ -26,6 +26,18 @@
@include deprecate("The `form-control-focus()` mixin", "v4.3.2", "v5", $ignore-warning); @include deprecate("The `form-control-focus()` mixin", "v4.3.2", "v5", $ignore-warning);
} }
@mixin form-validation-state-selector($state) {
@if ($state == "valid" or $state == "invalid") {
.was-validated &:#{$state},
&.is-#{$state} {
@content;
}
} @else {
&.is-#{$state} {
@content;
}
}
}
@mixin form-validation-state($state, $color, $icon) { @mixin form-validation-state($state, $color, $icon) {
.#{$state}-feedback { .#{$state}-feedback {
@ -52,8 +64,7 @@
} }
.form-control { .form-control {
.was-validated &:#{$state}, @include form-validation-state-selector($state) {
&.is-#{$state} {
border-color: $color; border-color: $color;
@if $enable-validation-icons { @if $enable-validation-icons {
@ -78,8 +89,7 @@
// stylelint-disable-next-line selector-no-qualifying-type // stylelint-disable-next-line selector-no-qualifying-type
textarea.form-control { textarea.form-control {
.was-validated &:#{$state}, @include form-validation-state-selector($state) {
&.is-#{$state} {
@if $enable-validation-icons { @if $enable-validation-icons {
padding-right: $input-height-inner; padding-right: $input-height-inner;
background-position: top $input-height-inner-quarter right $input-height-inner-quarter; background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
@ -88,8 +98,7 @@
} }
.custom-select { .custom-select {
.was-validated &:#{$state}, @include form-validation-state-selector($state) {
&.is-#{$state} {
border-color: $color; border-color: $color;
@if $enable-validation-icons { @if $enable-validation-icons {
@ -111,8 +120,7 @@
.form-control-file { .form-control-file {
.was-validated &:#{$state}, @include form-validation-state-selector($state) {
&.is-#{$state} {
~ .#{$state}-feedback, ~ .#{$state}-feedback,
~ .#{$state}-tooltip { ~ .#{$state}-tooltip {
display: block; display: block;
@ -121,8 +129,7 @@
} }
.form-check-input { .form-check-input {
.was-validated &:#{$state}, @include form-validation-state-selector($state) {
&.is-#{$state} {
~ .form-check-label { ~ .form-check-label {
color: $color; color: $color;
} }
@ -135,8 +142,7 @@
} }
.custom-control-input { .custom-control-input {
.was-validated &:#{$state}, @include form-validation-state-selector($state) {
&.is-#{$state} {
~ .custom-control-label { ~ .custom-control-label {
color: $color; color: $color;
@ -171,8 +177,7 @@
// custom file // custom file
.custom-file-input { .custom-file-input {
.was-validated &:#{$state}, @include form-validation-state-selector($state) {
&.is-#{$state} {
~ .custom-file-label { ~ .custom-file-label {
border-color: $color; border-color: $color;
} }