Fixed placeholder text color for more browsers (#2113)

* Make mixin for placeholder and use in disabled
elastic · Jul 12, 2019 · a5d1823 · a5d1823
1 parent 9813867
commit a5d1823
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,7 @@
 - Removed time from default `dateFormat` of `EuiDatePicker` ([#1820](https://github.com/elastic/eui/pull/1820))
 - Fixed `EuiPopover` from catching and preventing propagation of keydown events when closed ([#2089](https://github.com/elastic/eui/pull/2089))
 - Fixed padding sizes between `EuiModal` header, body, and footer ([#2088](https://github.com/elastic/eui/pull/2088))
+- Fixed placeholder text color for more browsers ([#2113](https://github.com/elastic/eui/pull/2113))
 
 **Deprecations**
 

diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss
@@ -1,3 +1,12 @@
+@mixin euiPlaceholderPerBrowser {
+  // sass-lint:disable-block no-vendor-prefixes
+  // Each prefix must be it's own content block
+  &::-webkit-input-placeholder { @content; }
+  &::-moz-placeholder { @content; }
+  &:-ms-input-placeholder { @content; }
+  &:-moz-placeholder { @content; }
+  &::placeholder { @content; }
+}
 
 @function euiFormControlGradient($color: $euiColorPrimary) {
   @return linear-gradient(to top,
@@ -19,7 +28,8 @@
   line-height: 1em; // fixes text alignment in IE
   color: $euiTextColor;
 
-  &::placeholder {
+  // sass-lint:disable-block mixins-before-declarations
+  @include euiPlaceholderPerBrowser {
     color: $euiColorDarkShade;
   }
 }
@@ -132,7 +142,8 @@
   background: $euiFormBackgroundDisabledColor;
   box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;
 
-  &::placeholder {
+  // sass-lint:disable-block mixins-before-declarations
+  @include euiPlaceholderPerBrowser {
     color: $euiFormControlDisabledColor;
   }
 }