Add flexbox to form groups

src/definitions/collections/form.less

@@ -67,23 +67,6 @@
   font-weight: @labelFontWeight;
   text-transform: @labelTextTransform;
 }
-.ui.form .grouped.fields > label {
-  margin: @groupedLabelMargin;
-  color: @groupedLabelColor;
-  font-size: @groupedLabelFontSize;
-  font-weight: @groupedLabelFontWeight;
-  text-transform: @groupedLabelTextTransform;
-}
-.ui.form .inline.fields > label {
-  display: inline-block;
-  vertical-align: middle;
-
-  margin: @inlineLabelMargin;
-  color: @inlineLabelColor;
-  font-size: @inlineLabelFontSize;
-  font-weight: @inlineLabelFontWeight;
-  text-transform: @inlineLabelTextTransform;
-}
 
 /*--------------------
     Standard Inputs
@@ -676,17 +659,23 @@
 
 /* Grouped Vertically */
 .ui.form .grouped.fields {
+  display: block;
   margin: @groupedMargin;
 }
 .ui.form .grouped.fields:last-child {
   margin-bottom: 0em;
 }
+
 .ui.form .grouped.fields > label {
+  margin: @groupedLabelMargin;
+  color: @groupedLabelColor;
   font-size: @groupedLabelFontSize;
+  font-weight: @groupedLabelFontWeight;
+  text-transform: @groupedLabelTextTransform;
 }
+
 .ui.form .grouped.fields .field {
   display: block;
-  float: none;
   margin: @groupedFieldMargin;
   padding: 0em;
 }
@@ -697,19 +686,11 @@
 
 /* Split fields */
 .ui.form .fields {
-  clear: both;
-}
-.ui.form .fields:after {
-  content: ' ';
-  display: block;
-  clear: both;
-  visibility: hidden;
-  line-height: 0;
-  height: 0;
+  display: flex;
+  flex-direction: row;
 }
 .ui.form .fields > .field {
-  clear: none;
-  float: left;
+  flex: 0 1 auto;
   padding-left: (@gutterWidth / 2);
   padding-right: (@gutterWidth / 2);
 }
@@ -892,20 +873,39 @@
 
 .ui.form .inline.fields {
   margin: @fieldMargin;
+  align-items: center;
 }
 .ui.form .inline.fields .field {
-  display: inline-block;
-  float: none;
-  margin: @inlineFieldsMargin;
-  padding: 0em;
+  margin: 0em;
+  padding: @inlineFieldsMargin;
 }
+
+/* Inline Label */
+.ui.form .inline.fields > label,
 .ui.form .inline.fields .field > label,
 .ui.form .inline.fields .field > p,
+.ui.form .inline.field > label,
+.ui.form .inline.field > p {
+  display: inline-block;
+  width: auto;
+  margin-top: 0em;
+  margin-bottom: 0em;
+  vertical-align: middle;
+  font-size: @inlineLabelFontSize;
+  font-weight: @inlineLabelFontWeight;
+  color: @inlineLabelColor;
+  text-transform: @inlineLabelTextTransform;
+}
+
+/* Grouped Inline Label */
+.ui.form .inline.fields > label {
+  margin: @groupedInlineLabelMargin;
+}
+
+/* Inline Input */
 .ui.form .inline.fields .field > input,
 .ui.form .inline.fields .field > select,
 .ui.form .inline.fields .field > .ui.input,
-.ui.form .inline.field > label,
-.ui.form .inline.field > p,
 .ui.form .inline.field > input,
 .ui.form .inline.field > select,
 .ui.form .inline.field > .ui.input {
@@ -915,29 +915,32 @@
   margin-top: 0em;
   margin-bottom: 0em;
 
-  vertical-align: @inlineLabelVerticalAlign;
-  font-size: @inlineLabelFontSize;
-}
-.ui.form .inline.fields .field > input,
-.ui.form .inline.fields .field > .ui.input,
-.ui.form .inline.field > input,
-.ui.form .inline.field > .ui.input {
-  font-size: @inlineLabelFontSize;
-}
-.ui.form .inline.fields .field > .ui.checkbox label {
-  padding-left: @inlineCheckboxLabelDistance;
+  vertical-align: middle;
+  font-size: @inlineInputSize;
 }
 
+
 /* Label */
 .ui.form .inline.fields .field > :first-child,
 .ui.form .inline.field > :first-child {
-  margin: 0em @labelDistance 0em 0em;
+  margin: 0em @inlineLabelDistance 0em 0em;
 }
 .ui.form .inline.fields .field > :only-child,
 .ui.form .inline.field > :only-child {
   margin: 0em;
 }
 
+/* Wide */
+.ui.form .inline.fields .wide.field {
+  display: flex;
+  align-items: center;
+}
+.ui.form .inline.fields .wide.field > input,
+.ui.form .inline.fields .wide.field > select,
+.ui.form .inline.fields .wide.field > .ui.input {
+  width: 100%;
+}
+
 
 /*--------------------
         Sizes

src/themes/default/collections/form.variables

@@ -178,18 +178,16 @@
 
 
 /* Inline */
-@inlineLabelFontSize: @labelFontSize;
-@inlineLabelVerticalAlign: middle;
-@inlineGroupedFieldLabelDistance: 0.5rem;
-@inlineCheckboxLabelDistance: 1.75em;
+@inlineInputSize: @relativeMedium;
 
-@inlineLabelMargin: 0em 1em 0em 0em;
-@inlineLabelDistance: @labelDistance;
+@inlineLabelDistance: @relativeTiny;
 @inlineLabelColor: @labelColor;
 @inlineLabelFontSize: @labelFontSize;
 @inlineLabelFontWeight: @labelFontWeight;
 @inlineLabelTextTransform: @labelTextTransform;
 
+@groupedInlineLabelMargin: 0.035714em 1em 0em 0em;
+
 /*-------------------
        Groups
 --------------------*/