<div class="form-group">
    <label class="label" for="form-group-select">Ein Auswahlfeld</label>
    <div class="form-group__inner">
        <select class="select" id="form-group-select" name="form-group-select">
  <option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
  <option value="Option 1 value" id="option1Id">Option 1</option>
  <option value="Option 2 value" id="option2Id">Option 2 wirklich, wirklich extra lang. Also wirklich extra lang.</option>
  <option value="Option 3 value" id="option3Id">Option 3</option>
</select>
    </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 Auswahlfeld",
  "id": "form-group-select",
  "use": "select"
}
  • 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.