From a96014d03173e215b8f73e218b9de732fc936290 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 24 Jul 2018 18:00:44 -0700
Subject: [PATCH] Add new variables for form feedback tooltips

Fixes #26886
---
 scss/_variables.scss    |  7 +++++++
 scss/mixins/_forms.scss | 10 +++++-----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 05e0a5b21c46..1edcd7135a6f 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -595,6 +595,13 @@ $form-feedback-icon-valid:          str-replace(url("data:image/svg+xml;charset=
 $form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
 $form-feedback-icon-invalid:        str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E"), "#", "%23") !default;
 
+$form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;
+$form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;
+$form-feedback-tooltip-font-size:     $tooltip-font-size !default;
+$form-feedback-tooltip-line-height:   $line-height-base !default;
+$form-feedback-tooltip-opacity:       $tooltip-opacity !default;
+$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
+
 
 // Dropdowns
 //
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 90ecddee0c69..df1b6422780b 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -41,13 +41,13 @@
     z-index: 5;
     display: none;
     max-width: 100%; // Contain to parent when possible
-    padding: $tooltip-padding-y $tooltip-padding-x;
+    padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
     margin-top: .1rem;
-    font-size: $tooltip-font-size;
-    line-height: $line-height-base;
+    font-size: $form-feedback-tooltip-font-size;
+    line-height: $form-feedback-line-height;
     color: color-yiq($color);
-    background-color: rgba($color, $tooltip-opacity);
-    @include border-radius($tooltip-border-radius);
+    background-color: rgba($color, $form-feedback-tooltip-opacity);
+    @include border-radius($form-feedback-tooltip-border-radius);
   }
 
   .form-control {