hkk Frontend 2017

Eingabegruppe: Radio-Button-Gruppe 

<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-8188" 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-a541" 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.