From a96014d03173e215b8f73e218b9de732fc936290 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jul 2018 18:00:44 -0700 Subject: [PATCH 1/3] 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 { From acf49596dcb9133436721c233f907bec54c97726 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 18 Sep 2018 18:47:17 -0700 Subject: [PATCH 2/3] move variables --- scss/_variables.scss | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index b93f2a7e6598..7b0d3a2f5a2c 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -604,13 +604,6 @@ $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 // @@ -789,6 +782,14 @@ $tooltip-arrow-width: .8rem !default; $tooltip-arrow-height: .4rem !default; $tooltip-arrow-color: $tooltip-bg !default; +// Form tooltips must come after regular tooltips +$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; + // Popovers From ed7b07bd0948a280fa14d8f424d5a1480163317f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 18 Sep 2018 19:30:11 -0700 Subject: [PATCH 3/3] correct variable name --- scss/mixins/_forms.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index df1b6422780b..fbddd780394b 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -44,7 +44,7 @@ padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x; margin-top: .1rem; font-size: $form-feedback-tooltip-font-size; - line-height: $form-feedback-line-height; + line-height: $form-feedback-tooltip-line-height; color: color-yiq($color); background-color: rgba($color, $form-feedback-tooltip-opacity); @include border-radius($form-feedback-tooltip-border-radius);