Add variables for setting prompt color inside form, update to new style #2593

RELEASE-NOTES.md

@@ -60,6 +60,7 @@
 - **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.
 - **Dropdown** - Dropdown will no longer fire native `onchange` event on hidden input when setting value during initial load (unless `fireOnInit: true`) #2795 **Thanks @lauri-elevant**
 - **Form Validation** - Fixed issue with `get value(s)` where unchecked checkboxes would not correctly retrieve values
+- **Form** - Dropdown in `inline field` now use auto width instead of 100%
 - **Grid / Container ** - `ui relaxed grid container` and `ui very relaxed grid container` will now all render at same container width
 - **Icons** - Fixed issue where `active icon` or `emphasized icon` would not adjust opacity inside menus
 - **Label** - `pointint label` now rounds to exact pixel em value, should align correctly in more cases

src/definitions/collections/form.less

@@ -202,9 +202,11 @@
   float: right;
 }
 
+.ui.form .inline.fields .field > .selection.dropdown,
 .ui.form .inline.field > .selection.dropdown {
   width: auto;
 }
+.ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon,
 .ui.form .inline.field > .selection.dropdown > .dropdown.icon {
   float: none;
 }
@@ -240,14 +242,19 @@
 ---------------------*/
 
 .ui.form .field .prompt.label {
-  white-space: nowrap;
+  white-space: normal;
+  background: @promptBackground !important;
+  border: @promptBorder !important;
+  color: @promptTextColor !important;
 }
+.ui.form .inline.fields .field .prompt,
 .ui.form .inline.field .prompt {
-  margin: @inlineValidationMargin;
+  margin: @inlinePromptMargin;
 }
+.ui.form .inline.fields .field .prompt:before,
 .ui.form .inline.field .prompt:before {
-  margin-top: @inlineValidationArrowOffset;
-  border-width: 0px 0px @inlineValidationBorderWidth @inlineValidationBorderWidth;
+  margin-top: @inlinePromptArrowOffset;
+  border-width: 0px 0px @inlinePromptBorderWidth @inlinePromptBorderWidth;
   bottom: auto;
   right: auto;
   top: 50%;
@@ -665,6 +672,25 @@
   color: @invertedLabelColor;
 }
 
+/* Inverted Field */
+.ui.inverted.form input:not([type]),
+.ui.inverted.form input[type="date"],
+.ui.inverted.form input[type="datetime-local"],
+.ui.inverted.form input[type="email"],
+.ui.inverted.form input[type="number"],
+.ui.inverted.form input[type="password"],
+.ui.inverted.form input[type="search"],
+.ui.inverted.form input[type="tel"],
+.ui.inverted.form input[type="time"],
+.ui.inverted.form input[type="text"],
+.ui.inverted.form input[type="url"] {
+  background: @invertedInputBackground;
+  border-color: @invertedInputBorderColor;
+  color: @invertedInputColor;
+  box-shadow: @invertedInputBoxShadow;
+}
+
+
 /*--------------------
      Field Groups
 ---------------------*/

src/themes/default/collections/form.variables

@@ -68,9 +68,13 @@
 @dividerMargin: @rowDistance 0em;
 
 /* Inline Validation Prompt */
-@inlineValidationMargin: -0.5em 0em -0.5em @rowDistance;
-@inlineValidationBorderWidth: 1px;
-@inlineValidationArrowOffset: ~"calc(-0.3em - "@inlineValidationBorderWidth~")";
+@promptBackground: @white;
+@promptBorderColor: @formErrorBorder;
+@promptBorder: 1px solid @promptBorderColor;
+@promptTextColor: @formErrorColor;
+@inlinePromptMargin: -0.5em 0em -0.5em @rowDistance;
+@inlinePromptBorderWidth: 1px;
+@inlinePromptArrowOffset: ~"calc(-0.3em - "@inlinePromptBorderWidth~")";
 
 /*-------------------
         States
@@ -155,7 +159,12 @@
 @requiredMargin: @requiredVerticalOffset 0em 0em @requiredDistance;
 
 /* Inverted */
+@invertedInputBackground: @inputBackground;
+@invertedInputBorderColor: @whiteBorderColor;
+@invertedInputBoxShadow: @inputBoxShadow;
+@invertedInputColor: @inputColor;
 @invertedLabelColor: @invertedTextColor;
+@invertedInputBoxShadow: none;
 
 /*-------------------
       Variations