@e-fellows/website-2022

Inline-Formular 

<form id="inline-form-62528-89588" class="inline-form" method="get">

    <div class="inline-form__dropdown">
        <div id="inline-form-62528-89588-dropdown" class="dropdown has-overlay-link">
            <fieldset class="dropdown__fieldset">
                <legend class="dropdown__label" id="inline-form-62528-89588-dropdown-label">Du bist gerade</legend>

                <button type="button" class="dropdown__toggle u-overlay-link" aria-labelledby="inline-form-62528-89588-dropdown-legend" tabindex="-1">
                    <div class="dropdown__toggle-inner">
                        <span class="dropdown__toggle-text u-underline">Auswählen</span>

                        <svg class="icon icon--caret-down dropdown__toggle-icon" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-down"></use>
                        </svg>
                    </div>
                </button>

                <ul id="inline-form-62528-89588-dropdown-options" class="dropdown__options" hidden aria-labelledby="inline-form-62528-89588-dropdown-legend">
                    <li class="dropdown__option has-underline" role="presentation">
                        <input type="radio" id="inline-form-62528-89588-dropdown-1" class="dropdown__option-radio" name="targetGroup" value="1" tabindex="-1">

                        <label for="inline-form-62528-89588-dropdown-1" class="dropdown__option-label u-underline" role="option">Vor dem Studium</label>
                    </li>
                    <li class="dropdown__option has-underline" role="presentation">
                        <input type="radio" id="inline-form-62528-89588-dropdown-2" class="dropdown__option-radio" name="targetGroup" value="2" tabindex="-1">

                        <label for="inline-form-62528-89588-dropdown-2" class="dropdown__option-label u-underline" role="option">Im Studium</label>
                    </li>
                    <li class="dropdown__option has-underline" role="presentation">
                        <input type="radio" id="inline-form-62528-89588-dropdown-3" class="dropdown__option-radio" name="targetGroup" value="3" checked tabindex="-1">

                        <label for="inline-form-62528-89588-dropdown-3" class="dropdown__option-label dropdown__option-label--selected u-underline" role="option" aria-selected="true">Kurz vor Berufseinstieg</label>
                    </li>
                    <li class="dropdown__option has-underline" role="presentation">
                        <input type="radio" id="inline-form-62528-89588-dropdown-4" class="dropdown__option-radio" name="targetGroup" value="4" tabindex="-1">

                        <label for="inline-form-62528-89588-dropdown-4" class="dropdown__option-label u-underline" role="option">Im Berufsleben</label>
                    </li>
                </ul>
            </fieldset>
        </div>
    </div>

    <div class="inline-form__submit">
        <button class="icon-button" type="submit" title="Absenden">
            <span class="icon-button__icon">
                <svg class="icon icon--arrow-right" viewBox="0 0 200 200" aria-hidden="true">
                    <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#arrow-right"></use>
                </svg> </span>

        </button>
    </div>
</form>
 
{% set id = id ??? html_id('inline-form') -%}

<form {{ html_attributes({
  id: id,
  class: {
    'inline-form': true,
    'inline-form--small': small ?? false,
  },
  action: action ??? '',
  method: method ??? 'get',
}, attrs ?? {}) }}>
  {{ csrf|default ? csrfInput({ autocomplete: 'false' }) }}
  {{ actionMethod|default ? actionInput(actionMethod) }}
  {{ redirectUrl|default ? redirectInput(redirectUrl) }}

  {% for name, value in hiddenInputs|default %}
    {{ value ? hiddenInput(name, value) }}
  {% endfor %}

  {% if dropdown|default %}
    <div class="inline-form__dropdown">
      {% include '@dropdown' with dropdown | merge({
        id: 'dropdown' | namespaceInputId(id),
        frameless: frameless ?? false,
      }) only %}
    </div>
  {% elseif input|default %}
    <div class="inline-form__large-input">
      {% include '@large-input' with input | merge({
        id: 'input' | namespaceInputId(id),
        frameless: frameless ?? false,
      }) only %}
    </div>
  {% endif %}

  <div class="inline-form__submit">
    {% include '@icon-button' with {
      icon: 'arrow-right',
      type: 'submit',
      title: 'Submit' | t('site'),
    } | merge(button ?? {}) only %}
  </div>
</form>
 
/* No context defined. */
  • Content: 
    .inline-form {
  --dropdown-height: var(--inline-form-height, 8.4rem);
  --icon-button-size: var(--inline-form-button-size, 6.2rem);

  padding-inline-end: calc(var(--icon-button-size) / 2);
  position: relative;
  z-index: #{z-index('default')};
}

.inline-form--small {
  --large-input-padding-block: 1.2rem;
  --large-input-padding-inline: 1.6rem;
  --large-input-font-size: 1.6rem;
  --large-input-height: 6rem;
  --large-input-label-font-size: 1.2rem;
  --icon-button-size: 4.8rem;
}

.inline-form__large-input {
  position: relative;
  z-index: 1;
}

.inline-form__submit {
  inset-block-start: 50%;
  inset-inline-end: 0;
  position: absolute;
  transform: translateY(-50%);
  z-index: 2;
}
  • URL: /components/raw/inline-form/inline-form.scss
  • Filesystem Path: src/components/2-molecules/inline-form/inline-form.scss
  • Size: 698 Bytes

No notes defined.