fix(inputs): better customization for placeholder color

ionic-team · Jul 28, 2018 · 517104f · 517104f
1 parent f676f98
commit 517104f
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 45 deletions.
diff --git a/core/src/components/alert/alert.ios.scss b/core/src/components/alert/alert.ios.scss
@@ -81,7 +81,6 @@
 // --------------------------------------------------
 
 .alert-input {
-  @include placeholder($alert-ios-input-placeholder-color);
   @include border-radius($alert-ios-input-border-radius);
   @include margin($alert-ios-input-margin-top, null, null, null);
   @include padding($alert-ios-input-padding-top, $alert-ios-input-padding-end, $alert-ios-input-padding-bottom, $alert-ios-input-padding-start);
@@ -90,6 +89,14 @@
 
   background-color: $alert-ios-input-background-color;
   appearance: none;
+
+  &::placeholder {
+    color: $alert-ios-input-placeholder-color;
+
+    font-family: inherit;
+    font-weight: inherit;
+  }
+
 }
 
 

diff --git a/core/src/components/alert/alert.md.scss b/core/src/components/alert/alert.md.scss
@@ -66,12 +66,18 @@
 // --------------------------------------------------
 
 .alert-input {
-  @include placeholder($alert-md-input-placeholder-color);
   @include margin($alert-md-input-margin-top, $alert-md-input-margin-end, $alert-md-input-margin-bottom, $alert-md-input-margin-start);
 
   border-bottom: $alert-md-input-border-width $alert-md-input-border-style $alert-md-input-border-color;
 
   color: $alert-md-input-text-color;
+
+  &::placeholder {
+    color: $alert-md-input-placeholder-color;
+
+    font-family: inherit;
+    font-weight: inherit;
+  }
 }
 
 .alert-input:focus {

diff --git a/core/src/components/input/input.ios.scss b/core/src/components/input/input.ios.scss
@@ -6,7 +6,6 @@
   --padding-end: #{$input-ios-padding-end};
   --padding-bottom: #{$input-ios-padding-bottom};
   --padding-start: #{$input-ios-padding-start};
-  --placeholder-color: #{$input-ios-placeholder-color};
 
   font-family: $input-ios-font-family;
   font-size: $input-ios-font-size;

diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss
@@ -10,7 +10,6 @@
   --padding-end: #{$input-md-padding-end};
   --padding-bottom: #{$input-md-padding-bottom};
   --padding-start: #{$input-md-padding-start};
-  --placeholder-color: #{$input-md-placeholder-color};
 
   font-family: $input-md-font-family;
   font-size: $input-md-font-size;

diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
@@ -4,7 +4,9 @@
 // --------------------------------------------------
 
 :host {
+  --placeholder-color: currentColor;
   --placeholder-weight: inherit;
+  --placeholder-opacity: .5;
   --padding-top: 0;
   --padding-end: 0;
   --padding-bottom: 0;
@@ -57,6 +59,8 @@
 
     font-family: inherit;
     font-weight: var(--placeholder-weight);
+
+    opacity: var(--placeholder-opacity);
   }
 
   &:-webkit-autofill {

diff --git a/core/src/components/searchbar/searchbar.ios.scss b/core/src/components/searchbar/searchbar.ios.scss
@@ -5,10 +5,15 @@
 // --------------------------------------------------
 
 :host {
+  --clear-button-color: #{$searchbar-ios-input-clear-icon-color};
+  --cancel-button-color: #{$searchbar-ios-cancel-button-color};
+
   @include padding($searchbar-ios-padding-top, $searchbar-ios-padding-end, $searchbar-ios-padding-bottom, $searchbar-ios-padding-start);
 
   height: $searchbar-ios-input-height + $searchbar-ios-padding-top + $searchbar-ios-padding-bottom;
 
+  color: $searchbar-ios-input-text-color;
+
   font-family: $searchbar-ios-font-family;
 
   contain: strict;
@@ -43,14 +48,12 @@
 // -----------------------------------------
 
 .searchbar-input {
-  @include placeholder($searchbar-ios-input-placeholder-color);
   @include padding(0, 28px);
   @include border-radius($searchbar-ios-input-border-radius);
 
   height: 100%;
 
   background-color: $searchbar-ios-input-background-color;
-  color: $searchbar-ios-input-text-color;
 
   font-size: 14px;
   font-weight: 400;
@@ -74,7 +77,6 @@
   border: 0;
 
   background-color: transparent;
-  color: $searchbar-ios-input-clear-icon-color;
 }
 
 .searchbar-clear-icon {
@@ -98,7 +100,6 @@
   outline: none;
 
   background-color: $searchbar-ios-cancel-button-background-color;
-  color: $searchbar-ios-cancel-button-color;
 
   font-size: $searchbar-ios-cancel-button-font-size;
 
@@ -173,8 +174,6 @@
 }
 
 :host-context(ion-toolbar.ion-color) .searchbar-input {
-  @include placeholder(currentColor, $opacity: .5);
-
   background: rgba(var(--ion-color-contrast-rgb), $searchbar-ios-input-background-color-alpha);
   color: currentColor;
 }

diff --git a/core/src/components/searchbar/searchbar.md.scss b/core/src/components/searchbar/searchbar.md.scss
@@ -5,10 +5,15 @@
 // --------------------------------------------------
 
 :host {
+  --clear-button-color: currentColor;
+  --cancel-button-color: #{$searchbar-md-cancel-button-color};
+
   @include padding($searchbar-md-padding-top, $searchbar-md-padding-end, $searchbar-md-padding-bottom, $searchbar-md-padding-start);
 
   background: $searchbar-md-background;
 
+  color: $searchbar-md-input-text-color;
+
   font-family: $searchbar-md-font-family;
 }
 
@@ -40,7 +45,6 @@
   border: 0;
 
   background-color: $searchbar-md-cancel-button-background-color;
-  color: $searchbar-md-cancel-button-color;
 
   font-size: $searchbar-md-cancel-button-font-size;
 }
@@ -63,15 +67,13 @@
 // -----------------------------------------
 
 .searchbar-input {
-  @include placeholder($searchbar-md-input-placeholder-color);
   @include padding(6px, 55px);
   @include border-radius($searchbar-md-input-border-radius);
   @include background-position(start, 8px, center);
 
   height: $searchbar-md-input-height;
 
   background-color: $searchbar-md-input-background-color;
-  color: $searchbar-md-input-text-color;
 
   font-size: 16px;
   font-weight: 400;

diff --git a/core/src/components/searchbar/searchbar.scss b/core/src/components/searchbar/searchbar.scss
@@ -4,6 +4,10 @@
 // --------------------------------------------------
 
 :host {
+  --placeholder-color: currentColor;
+  --placeholder-weight: inherit;
+  --placeholder-opacity: .5;
+
   @include font-smoothing();
 
   display: flex;
@@ -30,6 +34,8 @@
 }
 
 .searchbar-input {
+  @include text-inherit();
+
   box-sizing: border-box;
 
   display: block;
@@ -43,11 +49,24 @@
   font-family: inherit;
   appearance: none;
 
+  &::placeholder {
+    color: var(--placeholder-color);
+
+    font-family: inherit;
+    font-weight: var(--placeholder-weight);
+
+    opacity: var(--placeholder-opacity);
+  }
+
   &::-webkit-search-cancel-button {
     display: none;
   }
 }
 
+.searchbar-cancel-button {
+  color: var(--cancel-button-color);
+}
+
 .searchbar-clear-button {
   @include margin(0);
   @include padding(0);
@@ -57,6 +76,8 @@
   min-height: 0;
 
   outline: none;
+
+  color: var(--clear-button-color);
   appearance: none;
 }
 

diff --git a/core/src/components/textarea/textarea.ios.scss b/core/src/components/textarea/textarea.ios.scss
@@ -9,7 +9,6 @@
   --padding-end: #{$textarea-ios-padding-end};
   --padding-bottom: #{$textarea-ios-padding-bottom};
   --padding-start: #{$textarea-ios-padding-start};
-  --placeholder-color: #{$textarea-ios-placeholder-color};
 
   font-family: $textarea-ios-font-family;
   font-size: $textarea-ios-font-size;

diff --git a/core/src/components/textarea/textarea.md.scss b/core/src/components/textarea/textarea.md.scss
@@ -9,7 +9,6 @@
   --padding-end: #{$textarea-md-padding-end};
   --padding-bottom: #{$textarea-md-padding-bottom};
   --padding-start: #{$textarea-md-padding-start};
-  --placeholder-color: #{$textarea-md-placeholder-color};
 
   font-family: $textarea-md-font-family;
   font-size: $textarea-md-font-size;

diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss
@@ -4,6 +4,9 @@
 // --------------------------------------------------
 
 :host {
+  --placeholder-color: currentColor;
+  --placeholder-weight: inherit;
+  --placeholder-opacity: .5;
   --padding-top: 0;
   --padding-end: 0;
   --padding-bottom: 0;
@@ -37,7 +40,6 @@
 .native-textarea {
   @include text-inherit();
   @include border-radius(var(--border-radius));
-  @include placeholder(var(--placeholder-color));
   @include margin(0);
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
 
@@ -55,6 +57,15 @@
   box-sizing: border-box;
   resize: none;
   appearance: none;
+
+  &::placeholder {
+    color: var(--placeholder-color);
+
+    font-family: inherit;
+    font-weight: var(--placeholder-weight);
+
+    opacity: var(--placeholder-opacity);
+  }
 }
 
 .native-textarea[disabled] {

diff --git a/core/src/themes/ionic.mixins.scss b/core/src/themes/ionic.mixins.scss
@@ -35,35 +35,6 @@
   -webkit-font-smoothing: antialiased;
 }
 
-// Input Placeholder
-// --------------------------------------------------
-
-@mixin placeholder($color: #999, $text-indent: 0, $opacity: null) {
-  &::-moz-placeholder { // Firefox 19+
-    color: $color;
-    @if ($opacity) {
-      opacity: $opacity;
-    }
-  }
-
-  &:-ms-input-placeholder {
-    color: $color;
-    @if ($opacity) {
-      opacity: $opacity;
-    }
-  }
-
-  &::-webkit-input-placeholder {
-    // Safari placeholder margin issue
-    text-indent: $text-indent;
-    color: $color;
-    @if ($opacity) {
-      opacity: $opacity;
-    }
-  }
-}
-
-
 // Get the key from a map based on the index
 @function index-to-key($map, $index) {
   $keys: map-keys($map);