@e-fellows/website-2022

Inline-Formular: Input-Feld 

<form id="inline-form-93459-66985" class="inline-form" method="get">

    <div class="inline-form__large-input">
        <div id="inline-form-93459-66985-input" class="large-input has-overlay-link">
            <label for="inline-form-93459-66985-input-input" class="large-input__label">Suchbegriff</label>

            <input class="large-input__input" id="inline-form-93459-66985-input-input" name="search" type="text">
        </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>
 
{
  "input": {
    "name": "search",
    "label": "Suchbegriff"
  },
  "icon": "search"
}
  • 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.