Add global form highlight color #1508

RELEASE-NOTES.md

@@ -8,6 +8,7 @@
 
 **Enhancements**
 - **Grid** - Grid's ``equal height row` now uses a combination of `flexbox` and ``display: table-cell`` for older browsers
+- **Site** - Form input highlighting color added (helps differentiate form colors with autocompleted fields). Default text highlighting color moved from highlighter yellow to a mellow blue.
 - **Dropdown** - Dropdown can now be disabled by adding ``disabled` class without requiring `destroy`. **Thanks Psyton**
 - **Sidebar** - Having a sidebar visible on page load is now much simpler. You can include ``ui visible sidebar`` on page load to have a sidebar element appear on page load. To close call `$('.ui.sidebar').sidebar('hide')`
 - **Progress* - Progress bars can now display percent or amount left using `{value}` in text templates

src/definitions/globals/site.less

@@ -110,6 +110,7 @@ a:hover {
           Highlighting
 *******************************/
 
+/* Site */
 ::-webkit-selection {
   background-color: @highlightBackground;
   color: @highlightColor;
@@ -123,4 +124,22 @@ a:hover {
   color: @highlightColor;
 }
 
+/* Form */
+textarea::-webkit-selection,
+input::-webkit-selection {
+  background-color: @inputHighlightBackground;
+  color: @inputHighlightColor;
+}
+textarea::-moz-selection,
+input::-moz-selection {
+  background-color: @inputHighlightBackground;
+  color: @inputHighlightColor;
+}
+textarea::selection,
+input::selection {
+  background-color: @inputHighlightBackground;
+  color: @inputHighlightColor;
+}
+
+
 .loadUIOverrides();

src/themes/default/globals/site.variables

@@ -131,8 +131,11 @@
   Highlighted Text
 --------------------*/
 
-@highlightBackground : rgba(255, 255, 160, 0.4);
-@highlightColor      : @textColor;
+@highlightBackground      : #CCE2FF;
+@highlightColor           : @textColor;
+
+@inputHighlightBackground : rgba(100, 100, 100, 0.4);
+@inputHighlightColor      : @textColor;
 
 /*-------------------
        Loader