<div class="repairs-autocomplete-error">
    <div class="search-standalone js-search-standalone u-page-width-max-gutters">

        <form class="search-standalone-form">
            <label for="" class="label">Type in your style number or name</label>

            <input class="search-standalone-form__input js-search-standalone-input" type="text" placeholder="" value="John Doe">
            <button class="search-standalone-form__button js-search-standalone-button" type="reset">
      <span class="u-visually-hidden">Clear</span>
      <svg class="icon icon--search">
  <use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>

      <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

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

    <span class="error">Sorry, the style number or name entered does not exist.</span>

</div>
<div class="repairs-autocomplete-error">
  {{#each components}}
  {{render (dynamicComponent component) this merge=true}}
  {{/each}}
</div>
{
  "components": [
    {
      "component": "search-standalone",
      "title": null,
      "placeholder": null,
      "label": "Type in your style number or name",
      "value": "John Doe"
    },
    {
      "component": "error",
      "value": "Sorry, the style number or name entered does not exist."
    }
  ],
  "products": null
}
  • Content:
    .repairs-autocomplete-error {
      position: relative;
    
      .search-standalone {
        margin: 0 0 20px;
      }
    
      .search-standalone-form {
        width: 100%;
        max-width: 444px;
      }
    
      .search-standalone-form__input {
        min-height: 50px;
        border: 1px solid $color-error;
        line-height: 48px;
    
        &:focus {
          border: 1px solid $color-error;
        }
      }
    
      .search-standalone-form__button {
        width: 50px;
        height: 50px;
      }
    
      @include breakpoint($breakpoint-md) {
        width: 444px;
      }
    }
    
  • URL: /components/raw/repairs-autocomplete-error/repairs-autocomplete-error.scss
  • Filesystem Path: src/components/01-elements/forms/repairs-autocomplete-error/repairs-autocomplete-error.scss
  • Size: 495 Bytes
  • Handle: @repairs-autocomplete-error
  • Preview:
  • Filesystem Path: src/components/01-elements/forms/repairs-autocomplete-error/repairs-autocomplete-error.html

There are no notes for this item.