<div class="page-layout--grid">
    <form class="search-form">
        <input type="search" class="search-form__input">
        <button type="submit" class="search-form__btn" title="Search"><i class="icon icon-search"></i>
        </button>
    </form>
</div>
<div class="page-layout--grid">
    <form class="search-form">
        <input type="search" class="search-form__input" />
        <button type="submit" class="search-form__btn" title="Search">
            <i class="icon icon-search"></i>
        </button>
    </form>
</div>
/* No context defined for this component. */
  • Content:
    .search-form {
      display: flex;
      align-items: center;
      border-width: 0 0 2px;
      border-style: solid;
      border-color: $search-field-border-color;
      background-color: $search-field-background;
      grid-area: center;
    }
    
    .search-form__input {
      @extend %heading-font-bold;
      display: block;
      outline: none;
      border: 0;
      background-color: $search-field-background;
      width: 100%;
      line-height: 1.5em; // don't cut off descenders Chrome/FF
      color: $search-field-color;
      caret-color: $search-field-caret-color;
      appearance: none;
    }
    
    .search-form__btn {
      border: 0;
      background-color: transparent;
      color: $search-field-color;
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .search-form {
        font-size: $search-field-xl-font-size;
      }
    
      .search-form__input {
        padding: $spacer-sm;
      }
    }
    
  • URL: /components/raw/search-form/_search-form.scss
  • Filesystem Path: components/02-molecules/search/search-form/_search-form.scss
  • Size: 805 Bytes
  • Handle: @search-form
  • Preview:
  • Filesystem Path: components/02-molecules/search/search-form/search-form.html

There are no notes for this item.