diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 7b62b9cf3..3305a6e91 100644 --- a/RELEASE-NOTES.md +++ b/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 diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less index b9ffd2b96..e1eb6f9b4 100755 --- a/src/definitions/collections/form.less +++ b/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 ---------------------*/ diff --git a/src/themes/default/collections/form.variables b/src/themes/default/collections/form.variables index bad28a11c..a54f59833 100644 --- a/src/themes/default/collections/form.variables +++ b/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