hkk Frontend 2017

Search Field 

<div class="search-field">
    <div class="search-field__inner">
        <div class="search-field__headline">
            <h2 class="headline headline--display-2">Was suchen Sie?
            </h2>
        </div>
        <div class="search-field__form">
            <form class="form-micro">
                <div class="form-micro-group">
                    <input class="input input--text" type="text" placeholder="Ihr Suchbegriff" id="input-25d3" name="input-25d3" />
                    <button class="button button--blue button--icon" id="button-4e0e" type="submit">
<svg class="icon button__icon icon--search" id="icon-1c35" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-search"></use>
</svg>
</button>
                </div>
            </form>
        </div>
        <div class="search-field__links-wrap">
            <div class="search-field__label">
                <label class="label" for="dummy-id">Beliebt:</label>
            </div>
            <div class="search-field__links">
                <a class="button button--blue" id="button-8b43" href="#">Corona
</a>
                <a class="button button--blue" id="button-a641" href="#">Zahnersatz
</a>
                <a class="button button--blue" id="button-acc6" href="#">Bonusprogramm
</a>
            </div>
        </div>
    </div>
</div>
 
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

//- Wrap
.search-field&attributes(attr): .search-field__inner
  if headline
    .search-field__headline
      != include('@headline', headline)

  if form
    .search-field__form
      != include('@form-micro', form)

  if label || links
    .search-field__links-wrap
      if label
        .search-field__label
          != include('@label', label)

      if links
        .search-field__links
          each link in links
            != include('@button', link)
 
{
  "headline": {
    "level": 2,
    "modifier": "display-2",
    "text": "Was suchen Sie?"
  },
  "form": {
    "id": "form-search",
    "group": [
      {
        "use": "input--text",
        "settings": {
          "placeholder": "Ihr Suchbegriff"
        }
      },
      {
        "use": "button--blue-icon",
        "settings": {
          "link": null,
          "submit": true,
          "icon": "search"
        }
      }
    ]
  },
  "label": {
    "label": "Beliebt:"
  },
  "links": [
    {
      "link": "#",
      "text": "Corona",
      "modifier": "blue"
    },
    {
      "link": "#",
      "text": "Zahnersatz",
      "modifier": "blue"
    },
    {
      "link": "#",
      "text": "Bonusprogramm",
      "modifier": "blue"
    }
  ]
}
  • Content: 
    .search-field__headline {
  margin-bottom: 3rem;

  .headline {
    margin-bottom: 0;
  }
}

.search-field__inner {
  margin: 0 auto;
  max-width: 85rem;
  text-align: center;
  width: 100%;
}

.search-field__form {
  width: 100%;

  .form-micro-group {
    position: relative;
  }

  .form-micro .input {
    background-color: $color-steelgrey-light;
    border-radius: 0.3rem;
    font-size: 1.9rem;
    height: 6rem;
    padding-left: 2.5rem;
    padding-right: 6rem;
  }

  .form-micro .button {
    align-items: center;
    background-color: transparent;
    color: $color-blue;
    display: inline-flex;
    font-size: 2.7rem;
    height: 6rem;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 6rem;
  }

  .form-micro .button:focus,
  .form-micro .button:hover {
    background-color: $color-blue;
    color: #fff;
  }
}

.search-field__label {
  .label {
    margin-top: 0.5rem;

    @include mq($from: m) {
      margin-top: 0;
    }
  }
}

.search-field__links-wrap,
.search-field__links {
  @include mq($from: m) {
    align-items: center;
    display: inline-flex;
    justify-content: center;
  }
}

.search-field__links-wrap {
  margin-top: 2rem;
  text-align: center;
}

.search-field__links {
  flex-wrap: wrap;
  margin-left: 1rem;

  .button {
    margin: 0 1rem 1rem 0;
    padding: calc(2rem / 2 - 2px) calc(1.5rem - 2px);
  }
}

.overview-page__search-field {
  padding: 5rem 2rem;

  @include mq($from: m) {
    padding-left: 0;
    padding-right: 0;
  }

  @include mq($from: l) {
    padding-bottom: 5rem;
    padding-top: 5rem;
  }

  @include mq($from: xl) {
    padding-bottom: 7rem;
    padding-top: 7rem;
  }
}
  • URL: /components/raw/search-field/search-field.scss
  • Filesystem Path: src/components/organisms/search-field/search-field.scss
  • Size: 1.7 KB

There are no notes for this item.