diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 3d095fdb0..a7a9eb982 100644 --- 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 index 6fbf1ac7d..55735e9c3 100755 --- 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 index 05f562784..2fbf0f5b6 100644 --- 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 index b20b737e4..01bb43ba5 100644 --- 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);