Davidson Styleguide

Site Search 

<div class="site-search" id="site-search" hidden>
    <form method="get" action="">
        <label for="site-search__keywords" class="show-for-sr">Site search keywords</label>
        <div class="site-search__inputs">
            <input type="text" name="keys" id="site-search__keywords" placeholder="Search davidson.edu"><button>Search</button>
        </div>
    </form>
</div>
 
{% if site_search %}
<div class="site-search" id="site-search" hidden>
  <form method="{{ site_search.method }}" action="{{ site_search.action }}">
    <label for="site-search__keywords" class="show-for-sr">Site search keywords</label>
    <div class="site-search__inputs">
      <input type="text" name="{{ site_search.input_name }}" id="site-search__keywords" placeholder="Search davidson.edu"><button>Search</button>
    </div>
  </form>
</div>
{% endif %}
 
{
  "site_search": {
    "input_name": "keys",
    "method": "get",
    "action": null
  }
}
  • Content: 
    .site-search {
  transition: width $transition-time $transition-easing;
  width: 0;
  overflow: hidden;
  margin-top: rr-gridbase(2);
  @include rr-break-directive(l) {
    margin-top: 0;
    margin-right: rem(18px);
  }

  input, button {
    padding-top: rr-gridbase(2);
    padding-bottom: rr-gridbase(2);
    font-family: $font-nunito;
  }
  input {
    color: color(gray-darker);
    border: none;
    border-bottom: 2px solid color(gray-light);
    padding-left: rr-gridbase(6);
    padding-top: rem(13px);
    padding-bottom: rem(13px);
    flex: 1 0 auto;
    @include rr-font-compute(l, tight);
  }
  button {
    @include rr-font-compute(r, tight);
    padding-left: rem(14px);
    padding-right: rem(14px);
    border: none;
    border-bottom: 2px solid color(davidson-red);
    color: color(davidson-red);
    font-weight: bold;
    text-transform: uppercase;
    background: transparent;
    cursor: pointer;
    transition: background-color $transition-time $transition-easing;
    &:hover,
    &:active {
      background-color: color(davidson-red);
      color: color(davidson-white);
    }
  }

  .site-search__inputs {
    position: relative;
    display: flex;
    &::before {
      color: color(gray-darker);
      position: absolute;
      left: rem(18px);
      top: 50%;
      transform: translateY(-50%);
      font-family: 'iconfont';
      content: $icon-magnify;
    }
  }

  &.site-search--expanded {
    width: 100%;
  }
}
  • URL: /components/raw/site-search/site-search.scss
  • Filesystem Path: patterns/organisms/clamp/site-search/site-search.scss
  • Size: 1.5 KB

There are no notes for this item.