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,'); /* 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,'); /* 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,'); /* 1 */ }