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

No notes defined.