Form generator

specific style for Vue-Form-Generator

Error message

Only use by vue-form-generator

<div class="vue-form-generator">
  <div class="error">My error message</div>
</div>

.vue-form-generator
  .error My error message

Fieldset

Only use by vue-form-generator

<div class="vue-form-generator">
  <fieldset>
    <legend>My legend</legend>
  </fieldset>
</div>

.vue-form-generator
  fieldset
    legend My legend

Hint

Only use by vue-form-generator

<div class="vue-form-generator">
  <div class="hint">My hint</div>
</div>

.vue-form-generator
  .hint My hint

Inputs

All inputs use by vue-form-generator

Input check

Only use by vue-form-generator

<div class="vue-form-generator">
  <div class="field-checkbox">
    <label>My label</label>
    <div>
      <input type="checkbox"/>
    </div>
  </div>
</div>

.vue-form-generator
  .field-checkbox
    label My label
    div
      input(type='checkbox')

Input radio

Only use by vue-form-generator

<div class="vue-form-generator">
  <div class="field-radios">
    <label>My label</label>
    <div class="field-wrap">
      <div class="radio-list">
        <label>
          <input type="radio"/>First
        </label>
        <label>
          <input type="radio"/>Second
        </label>
      </div>
    </div>
  </div>
</div>
<div class="vue-form-generator">
  <div class="field-radios required">
    <label>My label required</label>
    <div class="field-wrap">
      <div class="radio-list">
        <label>
          <input type="radio"/>First
        </label>
        <label>
          <input type="radio"/>Second
        </label>
      </div>
    </div>
  </div>
</div>

.vue-form-generator
  .field-radios
    label My label
    .field-wrap
      .radio-list
        label
          input(type='radio')
          | First

        label
          input(type='radio')
          | Second

.vue-form-generator
  .field-radios.required
    label My label required
    .field-wrap
      .radio-list
        label
          input(type='radio')
          | First

        label
          input(type='radio')
          | Second

Input select

Only use by vue-form-generator

<div class="vue-form-generator">
  <div class="field-select">
    <label>My label</label>
    <div class="field-wrap">
      <select>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
      </select>
    </div>
  </div>
</div>

.vue-form-generator
  .field-select
    label My label
    .field-wrap
      select
        option Option 1
        option Option 2
        option Option 3

Input text

Only use by vue-form-generator

<div class="vue-form-generator">
  <div class="field-input">
    <label>My label</label>
    <div>
      <input/>
    </div>
  </div>
</div>

.vue-form-generator
  .field-input
    label My label
    div
      input

Label

Only use by vue-form-generator

<div class="vue-form-generator">
  <div class="tls-vue-form-generator--field">
    <label>My label</label>
  </div>
  <div class="tls-vue-form-generator--field required">
    <label>My required label</label>
  </div>
</div>

.vue-form-generator
  .tls-vue-form-generator--field
    label My label
  .tls-vue-form-generator--field.required
    label My required label