From: Mark Otto <markdotto@gmail.com>
Date: Sun, 29 Jul 2018 21:18:09 +0000 (-0700)
Subject: Merge branch 'form-validation-icons' into v4-dev
X-Git-Tag: v4.2.0~389
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=0b5a8d9c981ae70153cdd64b250a3d9e53014422;p=thirdparty%2Fbootstrap.git

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

0b5a8d9c981ae70153cdd64b250a3d9e53014422
diff --cc scss/mixins/_forms.scss
index 3a61878694,a90db20231..2b89390acc
--- a/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} {