<fieldset class="form-group">
    <legend class="label">Eine Gruppe von Radio-Buttons</legend>
    <div class="form-group__inner">
        <label class="radio">
  <input class="radio__input" type="radio" value="1" id="radio-4594" name="radio-group"/><span class="radio__indicator"></span><span class="radio__label">Option 1</span>
</label>
        <label class="radio">
  <input class="radio__input" type="radio" value="1" id="radio-ab58" name="radio-group"/><span class="radio__indicator"></span><span class="radio__label">Option 2</span>
</label>
    </div>
</fieldset>
-
  //- 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": "Eine Gruppe von Radio-Buttons",
  "name": "radio-group",
  "group": [
    {
      "use": "radio",
      "settings": {
        "text": "Option 1"
      }
    },
    {
      "use": "radio",
      "settings": {
        "text": "Option 2"
      }
    }
  ]
}
  • 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.