diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less index 2e886c2c8..f126a93a4 100755 --- a/src/definitions/collections/form.less +++ b/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 diff --git a/src/themes/default/collections/form.variables b/src/themes/default/collections/form.variables index 5331a49ab..4b597cd64 100644 --- a/src/themes/default/collections/form.variables +++ b/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 --------------------*/