From e5e939f536c21fc1d9a89201722b8c3d6966791b Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Thu, 4 May 2017 11:33:15 -0700
Subject: [PATCH] [UI Framework] Fix appearance of some form components in
 Firefox (#11589)

* Hide dotted line around focused select component in Firefox.

* Use correct font-family for TextArea component in Firefox.

* Fix gray background of StaticInput in Firefox.
---
 ui_framework/components/_mixins.scss            |  6 ++++++
 ui_framework/components/form/_static_input.scss |  1 +
 ui_framework/dist/ui_framework.css              | 17 ++++++++++++++++-
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/ui_framework/components/_mixins.scss b/ui_framework/components/_mixins.scss
index 5e555a7aadc0c..f84f976d3676d 100644
--- a/ui_framework/components/_mixins.scss
+++ b/ui_framework/components/_mixins.scss
@@ -109,6 +109,7 @@
  */
 @mixin formControlBase {
   appearance: none;
+  font-family: $globalFontFamily;
   padding: $globalFormControlPadding;
   font-size: $globalFontSize;
   font-weight: 400;
@@ -160,6 +161,7 @@
 /**
  * 1. Embedded SVG of fa-caret-down (https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/caret-down.svg).
  * 2. Make room on right side for the caret.
+ * 3. Prevent Firefox from showing dotted line around text on focus.
  */
 @mixin select($borderRadius: $globalBorderRadius) {
   @include formControl($borderRadius);
@@ -169,6 +171,10 @@
   background-repeat: no-repeat;
   background-position: calc(100% - 8px); /* 2 */
 
+  &:-moz-focusring {
+    text-shadow: 0 0 0; /* 3 */
+  }
+
   @include darkTheme {
     background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z" fill="#CECECE"/></svg>'); /* 1 */
   }
diff --git a/ui_framework/components/form/_static_input.scss b/ui_framework/components/form/_static_input.scss
index 036c45966c230..fa676759014de 100644
--- a/ui_framework/components/form/_static_input.scss
+++ b/ui_framework/components/form/_static_input.scss
@@ -4,4 +4,5 @@
 .kuiStaticInput {
   @include formControlBase;
   border: 1px solid transparent; /* 1 */
+  background-color: transparent;
 }
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index ff8ff8a6dc8e2..571cc3fa1b207 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -24,6 +24,7 @@
 /**
  * 1. Embedded SVG of fa-caret-down (https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/caret-down.svg).
  * 2. Make room on right side for the caret.
+ * 3. Prevent Firefox from showing dotted line around text on focus.
  */
 /**
  * 1. Setting to inline-block guarantees the same height when applied to both
@@ -779,6 +780,7 @@ body {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: "Open Sans", Helvetica, Arial, sans-serif;
   padding: 3px 12px 4px;
   font-size: 14px;
   font-weight: 400;
@@ -819,6 +821,7 @@ body {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: "Open Sans", Helvetica, Arial, sans-serif;
   padding: 3px 12px 4px;
   font-size: 14px;
   font-weight: 400;
@@ -858,6 +861,9 @@ body {
     .theme-dark .kuiSelect:focus {
       outline: none;
       border-color: #6EADC1; }
+  .kuiSelect:-moz-focusring {
+    text-shadow: 0 0 0;
+    /* 3 */ }
   .theme-dark .kuiSelect {
     background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z" fill="#CECECE"/></svg>');
     /* 1 */ }
@@ -872,13 +878,15 @@ body {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: "Open Sans", Helvetica, Arial, sans-serif;
   padding: 3px 12px 4px;
   font-size: 14px;
   font-weight: 400;
   line-height: 1.5;
   color: #191E23;
   border: 1px solid transparent;
-  /* 1 */ }
+  /* 1 */
+  background-color: transparent; }
   .theme-dark .kuiStaticInput {
     color: #cecece; }
 
@@ -886,6 +894,7 @@ body {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: "Open Sans", Helvetica, Arial, sans-serif;
   padding: 3px 12px 4px;
   font-size: 14px;
   font-weight: 400;
@@ -925,6 +934,7 @@ body {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: "Open Sans", Helvetica, Arial, sans-serif;
   padding: 3px 12px 4px;
   font-size: 14px;
   font-weight: 400;
@@ -1725,6 +1735,7 @@ body {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: "Open Sans", Helvetica, Arial, sans-serif;
   padding: 3px 12px 4px;
   font-size: 14px;
   font-weight: 400;
@@ -1806,6 +1817,7 @@ body {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: "Open Sans", Helvetica, Arial, sans-serif;
   padding: 3px 12px 4px;
   font-size: 14px;
   font-weight: 400;
@@ -1848,6 +1860,9 @@ body {
     .theme-dark .kuiLocalSearchSelect:focus {
       outline: none;
       border-color: #6EADC1; }
+  .kuiLocalSearchSelect:-moz-focusring {
+    text-shadow: 0 0 0;
+    /* 3 */ }
   .theme-dark .kuiLocalSearchSelect {
     background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z" fill="#CECECE"/></svg>');
     /* 1 */ }