Correct message input placeholder and typing indicator colors (fixes #75

)
laCour · Aug 25, 2016 · 1f74de4 · 1f74de4
1 parent 740445f
commit 1f74de4
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 17 deletions.
diff --git a/scss/helpers/_mixins.scss b/scss/helpers/_mixins.scss
@@ -6,3 +6,24 @@
     background: $background;
   }
 }
+
+@mixin placeholder {
+  &::-webkit-input-placeholder {
+    color: $base-font-color;
+    -webkit-filter: none;
+    filter: none;
+    opacity: 0.5;
+  }
+
+  &::-moz-placeholder {
+    color: $base-font-color;
+    filter: none;
+    opacity: 0.5;
+  }
+
+  &::placeholder {
+    color: $base-font-color;
+    filter: none;
+    opacity: 0.5;
+  }
+}
diff --git a/scss/modules/inputs/_base.scss b/scss/modules/inputs/_base.scss
@@ -98,26 +98,12 @@ textarea:focus {
   box-shadow: inset 0 1px 1px rgba($black, 0.075), 0 0 8px rgba($color-shade-lightest, 0.6);
 }
 
-::-webkit-input-placeholder {
-  color: $base-font-color;
-}
-
-::-moz-placeholder {
-  color: $base-font-color;
-}
-
-input::-moz-placeholder,
-textarea::-moz-placeholder {
-  color: $base-font-color;
-}
-
-input::-webkit-input-placeholder,
-textarea::-webkit-input-placeholder {
-  color: $base-font-color;
-}
+@include placeholder;
 
 input,
 textarea {
+  @include placeholder;
+
   &[disabled],
   &[readonly] {
     background-color: $color-shade-light !important;

diff --git a/scss/modules/inputs/_messaging.scss b/scss/modules/inputs/_messaging.scss
@@ -13,6 +13,12 @@
   }
 }
 
+#messages-input-container #message-input {
+  &.msg_input_placeholder {
+    @include placeholder;
+  }
+}
+
 #message_edit_form,
 #messages-input-container {
   #message-input {
@@ -92,6 +98,11 @@
   color: $color-highlight;
 }
 
+#notification_bar.wide #typing_text.msg_input_placeholder {
+  -webkit-filter: none;
+  filter: none;
+}
+
 #special_formatting_text {
   color: $color-highlight;
 }