Merge branch 'form-validation-icons' into v4-dev

diff --cc scss/_custom-forms.scss
Simple merge

diff --cc scss/_variables.scss
Simple merge

diff --cc scss/mixins/_forms.scss
index 3a61878694b6a593bed20ec3c0e2e02bda12eb43,a90db202311c8070c5c80176ed14d0775b399f42..2b89390acc75445d900798de5bbd5c06d268e5bd
--- 1/scss/mixins/_forms.scss
--- 2/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@@ -41,16 -41,57 +41,57 @@@
      z-index: 5;
      display: none;
      max-width: 100%; // Contain to parent when possible
 -    padding: .5rem;
 +    padding: $tooltip-padding-y $tooltip-padding-x;
      margin-top: .1rem;
 -    font-size: .875rem;
 -    line-height: 1;
 -    color: $white;
 -    background-color: rgba($color, .8);
 -    border-radius: .2rem;
 +    font-size: $tooltip-font-size;
 +    line-height: $line-height-base;
 +    color: color-yiq($color);
 +    background-color: rgba($color, $tooltip-opacity);
 +    @include border-radius($tooltip-border-radius);
    }
  
-   .form-control,
+   .form-control {
+     .was-validated &:#{$state},
+     &.is-#{$state} {
+       border-color: $color;
+ 
+       @if $enable-validation-icons {
+         padding-right: $input-height-inner;
+         background-repeat: no-repeat;
+         background-position: center right calc(#{$input-height-inner} / 4);
+         background-size: calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2);
+ 
+         @if $state == "valid" {
+           background-image: $form-feedback-icon-valid;
+         } @else {
+           background-image: $form-feedback-icon-invalid;
+         }
+       }
+ 
+       &:focus {
+         border-color: $color;
+         box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+       }
+ 
+       ~ .#{$state}-feedback,
+       ~ .#{$state}-tooltip {
+         display: block;
+       }
+     }
+   }
+ 
+   // stylelint-disable selector-no-qualifying-type
+   textarea.form-control {
+     .was-validated &:#{$state},
+     &.is-#{$state} {
+       @if $enable-validation-icons {
+         padding-right: $input-height-inner;
+         background-position: top calc(#{$input-height-inner} / 4) right calc(#{$input-height-inner} / 4);
+       }
+     }
+   }
+   // stylelint-enable selector-no-qualifying-type
+ 
    .custom-select {
      .was-validated &:#{$state},
      &.is-#{$state} {

diff --cc site/docs/4.1/components/forms.md
Simple merge

diff --cc site/docs/4.1/getting-started/theming.md
Simple merge