<div class="search-hero">
    <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>
<div class="search-hero">
    <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>
/* No context defined. */
  • Content:
    .search-hero {
      overflow: hidden;
      background-color: $search-field-background;
    }
    
    .search-form {
      display: flex;
      align-items: center;
      border-bottom: 4px solid$search-field-border-color;
      background-color: $search-field-background;
      grid-area: center;
    }
    
    .search-form__input {
      @extend %heading-font-bold;
    
      display: block;
      width: 100%;
      border: 0;
      appearance: none;
      background-color: $search-field-background;
      caret-color: $search-field-caret-color;
      color: $search-field-color;
      line-height: 1.5em; // don't cut off descenders Chrome/FF
      outline: 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: $font-size-xl;
      }
    
      .search-form__input {
        padding: $spacer-sm;
      }
    }
    
  • URL: /components/raw/search-form/_search-form.scss
  • Filesystem Path: components/04-molecules/search/search-form/_search-form.scss
  • Size: 839 Bytes
  • Handle: @search-form
  • Preview:
  • Filesystem Path: components/04-molecules/search/search-form/search-form.html

No notes defined.