assets/stylesheets/bootstrap/mixins/_forms.scss in bootstrap-4.0.0.beta vs assets/stylesheets/bootstrap/mixins/_forms.scss in bootstrap-4.0.0.beta2

@@ -1,9 +1,9 @@
 // Form control focus state
 //
 // Generate a customized focus state and for any input with the specified color,
-// which defaults to the `@input-border-color-focus` variable.
+// which defaults to the `$input-focus-border-color` variable.
 //
 // We highly encourage you to not customize the default value, but instead use
 // this to tweak colors on an as-needed basis. This aesthetic change is based on
 // WebKit's default styles, but applicable to a wider range of browsers. Its
 // usability and accessibility should be taken into account with any change.
@@ -14,28 +14,55 @@
   &:focus {
     color: $input-focus-color;
     background-color: $input-focus-bg;
     border-color: $input-focus-border-color;
     outline: none;
-    @include box-shadow($input-focus-box-shadow);
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if $enable-shadows {
+      box-shadow: $input-box-shadow, $input-btn-focus-box-shadow;
+    } @else {
+      box-shadow: $input-btn-focus-box-shadow;
+    }
   }
 }
 
 
 @mixin form-validation-state($state, $color) {
 
+  .#{$state}-feedback {
+    display: none;
+    margin-top: .25rem;
+    font-size: .875rem;
+    color: $color;
+  }
+
+  .#{$state}-tooltip {
+    position: absolute;
+    top: 100%;
+    z-index: 5;
+    display: none;
+    width: 250px;
+    padding: .5rem;
+    margin-top: .1rem;
+    font-size: .875rem;
+    line-height: 1;
+    color: #fff;
+    background-color: rgba($color,.8);
+    border-radius: .2rem;
+  }
+
   .form-control,
   .custom-select {
     .was-validated &:#{$state},
     &.is-#{$state} {
       border-color: $color;
 
       &:focus {
         box-shadow: 0 0 0 .2rem rgba($color,.25);
       }
 
-      ~ .invalid-feedback,
-      ~ .invalid-tooltip {
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
         display: block;
       }
     }
   }