<!-- Default -->
<div class="field-wrap annotated">
    <label for="myfield">Things here</label>
    <div class="form-entry"><input type="text" id="myfield" required="required" aria-required="true" placeholder="This is a text field" class="input-simple m"></div>
    <p class="inline-help">This is the help text for this field.</p>
</div>

<!-- Help Before -->
<div class="field-wrap">
    <label for="myfield">Things here</label>
    <p class="inline-help">This is the help text for this field.</p>
    <div class="form-entry"><input type="text" id="myfield" required="required" aria-required="true" placeholder="This is a text field" class="input-simple m"></div>
</div>

<!-- Detailed Help -->
<div class="field-wrap annotated with-detailed-help">
    <label for="myfield">Things here</label>

    <div class="input-detailed-help">
        <svg width="14" height="14" class="icon icon-info-alt"><use xlink:href="/assets/svg/core.svg#info-alt" /></svg> Lorem ipsum <strong>dolor sit amet</strong>, consectetur adipisicing elit, sed do <em>eiusmod
	tempor</em> incididunt <code>ut labore et dolore</code> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="https://grabaperch.com/">Read more</a>
    </div>
    <div class="form-entry">
        <input type="text" id="myfield" required="required" aria-required="true" placeholder="This is a text field" class="input-simple m">
    </div>

    <p class="inline-help">This is the help text for this field.</p>

</div>

<!-- Default -->
<div class="field-wrap annotated">{{render "@label--default" }} <div class="form-entry">{{ render "@text-field--input-m" }}</div>{{ render "@inline-help" }}</div>

<!-- Help Before -->
<div class="field-wrap">{{render "@label--default" }} {{ render "@inline-help" }}<div class="form-entry">{{ render "@text-field--input-m" }}</div></div>

<!-- Detailed Help -->
<div class="field-wrap annotated with-detailed-help">
	{{ render "@label--default" }} 
	{{ render "@input-detailed-help" }}
	<div class="form-entry">
		{{ render "@text-field--input-m" }}
	</div>
	
	{{ render "@inline-help" }}
</div>
/* Default */
{
  "label_id": "myfield",
  "field_id": "myfield",
  "label_text": "Things here"
}

/* Help Before */
{
  "label_id": "myfield",
  "field_id": "myfield",
  "label_text": "Things here"
}

/* Detailed Help */
{
  "label_id": "myfield",
  "field_id": "myfield",
  "label_text": "Things here"
}

  • Content:
    .form-simple .fieldset-inner,
    .form-simple .field-wrap {
      margin: 0 0 0.5em 0;
      margin: 0;
      padding: 0.5em 0 0.5em ($main-gutter + $half-gutter);
      padding: 0.5em 0 1em ($main-gutter + $half-gutter);
      @include font-scale(m, helvetica);
    }
    
    .form-simple .field-wrap.annotated {
      padding-bottom: 0;
    }
    
    .form-simple .field-wrap:last-of-type {
      padding-bottom: 1em;
    }
    
    .form-simple label,
    .form-simple .fieldset-inner .legend-wrap,
    .repeater-heading {
      display: block;
      //@include font-scale(sm, helvetica);
      min-width: 140px;
      padding: 0 0 0.2em 0;
      color: palette(type,base);
    }
    
    .form-simple .form-entry {
      width: 95%;
    }
    
    .form-simple .checkbox-single .form-entry {
      width: auto;
    }
    
    .form-simple .checkbox-single label {
      padding: 0;
    }
    
    .form-simple label + .inline-help {
      margin-top: -0.5em;
      padding-bottom: 0;
    }
    
    .with-detailed-help {
      @include clearfix-micro;
    }
    
    .input-detailed-help {
    }
    
    .form-simple .field-wrap.compact-set {
      padding-left: 0;
      padding-bottom: 0;
    }
    
    @include media(">bp-m") {
      .input-detailed-help {
        float: right;
        width: 50%;
      }
    }
    
    
  • URL: /components/raw/input-pair/input-pair.scss
  • Filesystem Path: src/components/12-forms/02-molecules/01-input-pair/input-pair.scss
  • Size: 1.1 KB

There are no notes for this item.