Make placeholder error color more consistent, fix input placeholder c…

…olor #2786
Semantic-Org · Aug 10, 2015 · b42aac8 · b42aac8
1 parent 0d23f97
commit b42aac8
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 12 deletions.
diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
@@ -24,6 +24,7 @@
 - **Icon** - Fixed typo in cube icon alias caused by bad grep #2765
 - **Embed** - Remove accidental `console.log` statements in js #2760
 - **Transition** - Transition callbacks now all have the correct `this` set. #2758
+- **Form / Input** - Fixes `::placeholder` text color for `ui error input`, modifies form error placeholder color to distinguish from form value error color #2786
 
 **Additional Bugs**
 - **Build Tools** - Fixes issue on `win` platform where packaged theme would not correctly update when using watch due to regExp not matching windows path separators.

diff --git a/src/definitions/elements/input.less b/src/definitions/elements/input.less
@@ -168,24 +168,24 @@
 }
 
 /* Error Placeholder */
-.ui.input.error input ::-webkit-input-placeholder {
+.ui.input.error input::-webkit-input-placeholder {
   color: @placeholderErrorColor;
 }
-.ui.input.error input ::-moz-placeholder {
+.ui.input.error input::-moz-placeholder {
   color: @placeholderErrorColor;
 }
-.ui.input.error input ::-ms-input-placeholder {
+.ui.input.error input::-ms-input-placeholder {
   color: @placeholderErrorColor;
 }
 
 /* Focused Error Placeholder */
-.ui.input.error input :focus::-webkit-input-placeholder {
+.ui.input.error input:focus::-webkit-input-placeholder {
   color: @placeholderErrorFocusColor;
 }
-.ui.input.error input :focus::-moz-placeholder {
+.ui.input.error input:focus::-moz-placeholder {
   color: @placeholderErrorFocusColor;
 }
-.ui.input.error input :focus::-ms-input-placeholder {
+.ui.input.error input:focus::-ms-input-placeholder {
   color: @placeholderErrorFocusColor;
 }
 

diff --git a/src/themes/default/collections/form.variables b/src/themes/default/collections/form.variables
@@ -129,9 +129,10 @@
 /* Placeholder */
 @inputPlaceholderColor: lighten(@inputColor, 55);
 @inputPlaceholderFocusColor: lighten(@inputColor, 35);
-@inputErrorPlaceholderColor: lighten(@formErrorColor, 10);
-@inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 5);
 
+/* Placeholder Error */
+@inputErrorPlaceholderColor: lighten(@formErrorColor, 40);
+@inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 30);
 
 /* Loading Dimmer */
 @loaderDimmerColor: rgba(255, 255, 255, 0.8);

diff --git a/src/themes/default/elements/input.variables b/src/themes/default/elements/input.variables
@@ -70,9 +70,6 @@
 @placeholderColor: @unselectedTextColor;
 @placeholderFocusColor: @textColor;
 
-@placeholderErrorColor: rgba(255, 80, 80, 0.4);
-@placeholderErrorFocusColor: rgba(255, 80, 80, 0.7);
-
 /* Down */
 @downBorderColor: rgba(0, 0, 0, 0.3);
 @downBackground: #FAFAFA;
@@ -87,10 +84,13 @@
 
 /* Error */
 @errorBackground: @negativeBackgroundColor;
+@errorColor: @negativeTextColor;
 @errorBorder: @negativeBorderColor;
-@errorColor: @negativeColor;
 @errorBoxShadow: none;
 
+@placeholderErrorColor: lighten(@errorColor, 40);
+@placeholderErrorFocusColor: lighten(@errorColor, 30);
+
 /* Loader */
 @invertedLoaderFillColor: rgba(0, 0, 0, 0.15);