City of Ghent Style Guide

No notes defined.

<div class='form-row'>
    {% for item in items %}
        {% include '@form-item' with item|merge({'stacked': true}) %}
    {% endfor %}
</div>
<div class='form-row'>
</div>
{
  "first": {
    "label": "Postal code",
    "id": "postal-code_id",
    "input_component": "input",
    "type": "text",
    "modifier": "error",
    "field_message": "Almost there!",
    "field_description": "Wrap form items in a .form-row element.",
    "name": "postal-code_name"
  },
  "second": {
    "label": "Municipality",
    "id": "municipality_id",
    "input_component": "input",
    "type": "text",
    "modifier": "success",
    "field_message": "Very good!",
    "field_description": "Place modifier .stacked on the form-items.",
    "name": "municipality_name"
  }
}
  • Content:
    .form-row {
      display: flex;
      flex-wrap: wrap;
      width: calc(100% + .8rem);
      max-width: 21.3rem;
      margin-right: -.4rem;
      margin-left: -.4rem;
    
      @include desktop {
        width: calc(50% + .8rem);
      }
    
      > * {
        flex-grow: 1;
        margin-right: .4rem;
        margin-left: .4rem;
    
        //@include desktop() {
        //  flex-basis: calc((21.3rem - 100%) * 999);
        //}
      }
    }
    
  • URL: /components/raw/form-row/_form-row.scss
  • Filesystem Path: components/31-molecules/form-row/_form-row.scss
  • Size: 370 Bytes