@e-fellows/website-2022

Such-Overlay: Standard 

<div id="search-overlay-80537-42830" class="overlay search-overlay" aria-labelledby="search-overlay-80537-42830-headline" data-destroy-after-close="false" data-redirect-after-close="false">
    <div class="overlay__backdrop"></div>

    <div class="overlay__overlay u-inverted" role="document">
        <div class="overlay__bar">

            <button class="overlay__close" type="button" title="Schließen">
                <svg class="icon icon--cross" viewBox="0 0 200 200" aria-hidden="true">
                    <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#cross"></use>
                </svg> </button>
        </div>

        <div class="overlay__content">
            <div class="search-overlay__inner">
                <div class="search-overlay__headline" id="search-overlay-80537-42830-headline">
                    <h2 class="headline headline--2"><span class="headline__text">Suche</span></h2>
                </div>

                <div class="search-overlay__search">
                    <form id="search-overlay-80537-42830-search-form" class="inline-form" method="get">

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

                                <input class="large-input__input" id="search-overlay-80537-42830-search-form-input-input" name="q" type="search" data-autocomplete="https://jsonplaceholder.typicode.com/posts?q=" autocomplete="off" autofocus>
                            </div>
                        </div>

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

                            </button>
                        </div>
                    </form>
                </div>

            </div>

        </div>

    </div>
</div>
 
{% set level = level ??? 2 %}
{% set id = id ??? html_id('search-overlay') -%}

{% embed '@overlay' with {
  id: id,
  open: open ?? false,
  destroyAfterClose: false,
  labelledby: 'headline' | namespaceInputId(id),
  attrs: {
    class: 'search-overlay',
  },
} %}
  {% block content %}
    <div class="search-overlay__inner">
      {% if headline|default %}
        <div class="search-overlay__headline" id="{{ 'headline' | namespaceInputId(id) }}">
          {% include '@headline' with headline | merge({
            level: level,
            size: 2,
          }) only %}
        </div>
      {% endif %}

      <div class="search-overlay__search">
        {% include '@inline-form' with {
          id: 'search-form' | namespaceInputId(id),
          csrf: csrf ?? false,
          actionMethod: actionMethod ?? false,
          redirectUrl: redirectUrl ?? false,
          action: action ?? false,
          method: method ?? false,
          input: {
            label: 'Search Term' | t('site'),
            name: searchTermName,
            type: 'search',
            autocomplete: autocomplete ?? false,
            inputAttrs: {
              autofocus: true,
            },
          },
          button: {
            icon: 'search',
            title: 'Search' | t('site'),
          },
        } only %}
      </div>

      {% if text|default %}
        <div class="search-overlay__text">
          {{ text | componentize }}
        </div>
      {% endif %}
    </div>
  {% endblock %}
{% endembed %}
 
{
  "headline": {
    "text": "Suche"
  },
  "searchTermName": "q",
  "open": true,
  "autocomplete": "https://jsonplaceholder.typicode.com/posts?q="
}
  • Content: 
    .search-overlay {
  --overlay-max-width: 100%;
  --overlay-animation: slide-slightly-from-bottom;
}

.search-overlay__inner {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 3rem;
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: 88rem;

  @include mq($from: l) {
    justify-content: center;
    padding-block-end: 5rem;
  }
}

.search-overlay__headline {
  text-align: center;
}

.search-overlay__text {
  margin-inline: auto;
  max-inline-size: 60rem;
  text-align: center;

  > * + * {
    margin-block-start: 0.5em;
  }
}
  • URL: /components/raw/search-overlay/search-overlay.scss
  • Filesystem Path: src/components/3-organisms/search-overlay/search-overlay.scss
  • Size: 582 Bytes

No notes defined.