<div class="form-group form-group--has-info">
    <label class="label" for="form-group-input-info">Ein Eingabefeld</label>
    <div class="form-group__inner">
        <input class="input input--text" type="text" placeholder="Das ist ein Platzhalter" id="form-group-input-info" name="form-group-input-info" />
        <details class="form-group__info">
            <summary class="form-group__info-header">
                <svg class="icon icon--info" id="icon-72d9" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-info"></use>
</svg>
            </summary>
            <div class="form-group__info-desc">
                <h4 class="form-group__info-desc-headline">Lorem ipsum</h4>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            </div>
        </details>
    </div>
</div>
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

  //- Tag
  tag = group ? 'fieldset' : 'div';

  //- Label settings
  labelSettings = labelSettings || {};
  labelSettings.label = label;
  labelSettings.labelFor = id || `form-group-${randomString()}`;

  //- Render label as legend if group
  if (group) labelSettings.legend = true;

  //- Form element settings
  settings = settings || {};

  // Add id if not group
  if (!group) settings.id = labelSettings.labelFor;

  // Set name global for group
  if (group && name) settings.name = name;

  //- Options
  if (disabled) settings.disabled = labelSettings.disabled = true;
  if (invalid) settings.invalid = labelSettings.invalid = true;

  //- Required
  if (required) {
    labelSettings.required = true;
    settings.required = true;
  }

  //- Hideable
  if (hideable) attr['data-hideable'] = true;

  //- Hideable
  if (hidden) attr.class.push('form-group--hidden');

  //- Info element
  if (info) attr.class.push('form-group--has-info');

  //- Fullwide
  if (fullwide) attr.class.push('form-group--fullwide');

  //- Section
  if (section) attr.class.push('form-group-section');

  //- Medium section spacing
  if (sectionMedium) attr.class.push('form-group-section--medium');

  //- Large section spacing
  if (sectionLarge) attr.class.push('form-group-section--large');

  //- Inline
  if (inline) attr.class.push('form-group--inline');

//- Wrap
#{tag}.form-group&attributes(attr)
  if !labelSettings.omitted
    //- Render label
    != include('@label', labelSettings)

  //- Form group inner
  .form-group__inner
    //- Render direct form element (e.g. input, select)
    if !group && use
      != include(`@${use}`, settings)

    //- Render group of form elements (e.g. radio, checkbox)
    if group
      for groupItem in group
        - groupItemSettings = Object.assign({}, settings, groupItem.settings);
        != include(`@${groupItem.use}`, groupItemSettings)

    //- Info text
    if info
      details.form-group__info
        summary.form-group__info-header
          != include('@icon', {icon: 'info'})
        .form-group__info-desc
          h4.form-group__info-desc-headline #{info.headline}
          p #{info.text}

  //- Render hint label
  if hint
    -
      labelSettings.hint = true
      labelSettings.required = false
      labelSettings.label = hint

    != include('@label', labelSettings)
{
  "label": "Ein Eingabefeld",
  "id": "form-group-input-info",
  "use": "input--text",
  "settings": {
    "placeholder": "Das ist ein Platzhalter"
  },
  "info": {
    "headline": "Lorem ipsum",
    "text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."
  }
}
  • Content:
    .form-group {
      border: 0;
      flex-grow: 1;
      margin: 0 0 2rem;
      max-width: 54rem;
      padding: 0;
    
      @include mq($from: m) {
        flex-basis: 20rem;
      }
    }
    
    .form-group--inline {
      @include mq($from: m) {
        .form-group__inner {
          display: flex;
        }
    
        .form-group {
          margin: 0 1rem;
        }
    
        .form-group:first-child {
          margin-left: 0;
        }
    
        .form-group:last-child {
          margin-right: 0;
        }
      }
    }
    
    .form-group--hidden {
      display: none;
    }
    
    .form-group--small {
      @include mq($from: m) {
        max-width: 50%;
      }
    }
    
    .form-group--fullwide {
      max-width: 100%;
    }
    
    .form-group-section {
      border-bottom: 1px solid $color-steelgrey-light;
      padding-bottom: 2rem;
    }
    
    .form-group-section--medium {
      padding-bottom: 1.5rem;
    }
    
    .form-group-section--large {
      padding-bottom: 2rem;
      padding-top: 1rem;
    }
    
    .form--inline .form-group {
      padding-left: 1rem;
      padding-right: 1rem;
    }
    
    .form-group__inner {
      position: relative;
    }
    
    .form-group__info-header {
      color: $color-steelgrey-dark;
      cursor: pointer;
      font-size: 2rem;
      position: absolute;
      right: -3rem;
      top: 50%;
      transform: translate(0, -50%);
      transition-duration: $default-transition-duration;
      transition-property: color;
    
      &:hover,
      &:focus {
        color: $color-steelgrey-xdark;
      }
    
      &::-o-details-marker {
        display: none;
      }
    
      &::-moz-details-marker {
        display: none;
      }
    
      &::-webkit-details-marker {
        display: none;
      }
    
      &::before {
        display: none;
      }
    }
    
    .form-group__info-desc {
      background-color: $color-steelgrey-light;
      box-shadow: 0 5px 10px 0 #fff;
      font-size: 1.3rem;
      line-height: 2rem;
      margin-top: 1rem;
      padding: 1.5rem 2rem;
      position: absolute;
      z-index: z('info-desc');
    
      :last-child {
        margin-bottom: 0;
      }
    
      @include mq($from: m) {
        right: -30rem;
        top: -50%;
        width: 25rem;
    
        @media screen and (-webkit-min-device-pixel-ratio: 0) {
          right: -35rem;
        }
      }
    }
    
    .form-group__info-desc::after {
      @include mq($from: m) {
        border-color: transparent $color-steelgrey-light transparent transparent;
        border-style: solid;
        border-width: 15px 15px 15px 0;
        content: '';
        height: 0;
        left: -15px;
        position: absolute;
        top: 2rem;
        width: 0;
      }
    }
    
    .form-group__info-desc-headline {
      margin-bottom: 0.5rem;
    }
    
  • URL: /components/raw/form-group/form-group.scss
  • Filesystem Path: src/components/molecules/form-group/form-group.scss
  • Size: 2.3 KB

There are no notes for this item.