[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.
elastic · May 4, 2017 · e5e939f · e5e939f
1 parent 14e38cc
commit e5e939f
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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,20 +878,23 @@ 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; }
 
 .kuiTextArea {
   -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 */ }