Element UI Flexbox forms

element_ui_flexbox_forms.sass

/**
 * Override element ui styles to make their forms use flexbox for:
 * - positioning form labels and input fields next to each other without fixed widths
 * - grouping fields like zip / city
 *
 * The former is done automatically. For the latter, just apply .el-form-item--grouped
 * to the <el-form-item> element. Then you can add multiple <el-input> elements to it.
 * Add .el-input--expanded to the <el-input> you want to expand (use up the remaining space).
 *
 * Example:
 * ```
 * <el-form-item label="Street, Nr" class="el-form-item--grouped">
 *   <el-input placeholder="Street" class="el-input--expanded"></el-input>
 *   <el-input placeholder="Nr"></el-input>
 * </el-form-item>
 * ```
 *
 * Note: do not use the label-width prop on <el-form> if you use these styles
 */

// you might want to import this from your settings module
$spacing-unit-default: 1em

.el-input
  width: 100%

// flexbox parents
.el-form-item--grouped .el-form-item__content,
.el-form-item
  display: flex
  justify-content: flex-start

// add some margin to the first child of a group
.el-form-item--grouped .el-form-item__content > .el-input:first-of-type
  margin-right: $spacing-unit-default

// expanded elements
.el-input--expanded,
.el-form-item__content
  flex-grow: 1
  flex-shrink: 1

// non-expanding elements
.el-form-item--grouped .el-input,
.el-form-item__label
  flex-shrink: 0
  width: auto

// give form labels a min-width
.el-form-item__label
  min-width: 120px