<div class="quick-search">
<form role="search" method="get" id="quick-search-small-form" class="quick-search__form" action="">
<input id="quick-search-small-input" placeholder="Search" name="s" type="text" class="quick-search__input">
<label for="quick-search-small-input" class="quick-search__input-label">
Search the website
</label>
<div class="quick-search__icon">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.1259 15.2325C17.6239 15.7638 17.6239 16.5939 17.1259 17.1251C16.5946 17.6232 15.7645 17.6232 15.2333 17.1251L11.2821 13.1408C9.92078 14.0372 8.26063 14.5021 6.46766 14.2697C3.41297 13.838 0.955938 11.3478 0.557501 8.3263C-0.00695259 3.81067 3.81141 -0.00768501 8.32703 0.556768C11.3485 0.955206 13.8388 3.41224 14.2704 6.46692C14.5028 8.25989 14.038 9.92005 13.1415 11.2482L17.1259 15.2325ZM3.14734 7.39661C3.14734 9.75403 5.03992 11.6466 7.39734 11.6466C9.72156 11.6466 11.6473 9.75403 11.6473 7.39661C11.6473 5.07239 9.72156 3.14661 7.39734 3.14661C5.03992 3.14661 3.14734 5.07239 3.14734 7.39661Z" />
<path d="M17.1259 15.2325C17.6239 15.7638 17.6239 16.5939 17.1259 17.1251C16.5946 17.6232 15.7645 17.6232 15.2333 17.1251L11.2821 13.1408C9.92078 14.0372 8.26063 14.5021 6.46766 14.2697C3.41297 13.838 0.955938 11.3478 0.557501 8.3263C-0.00695259 3.81067 3.81141 -0.00768501 8.32703 0.556768C11.3485 0.955206 13.8388 3.41224 14.2704 6.46692C14.5028 8.25989 14.038 9.92005 13.1415 11.2482L17.1259 15.2325ZM3.14734 7.39661C3.14734 9.75403 5.03992 11.6466 7.39734 11.6466C9.72156 11.6466 11.6473 9.75403 11.6473 7.39661C11.6473 5.07239 9.72156 3.14661 7.39734 3.14661C5.03992 3.14661 3.14734 5.07239 3.14734 7.39661Z" fill-opacity="0.2" />
</svg>
</div>
<input aria-label="submit search query" class="quick-search__submit" type="submit" id="quick-search-small-submit" value="Search" />
</form>
</div>
<div class="quick-search">
<form role="search" method="get" id="quick-search-small-form" class="quick-search__form" action="{{site.link}}">
<input id="quick-search-small-input" placeholder="Search" name="s" type="text" class="quick-search__input">
<label for="quick-search-small-input" class="quick-search__input-label">
Search the website
</label>
<div class="quick-search__icon">
{% include 'bits/icons/search.twig' %}
</div>
<input aria-label="submit search query" class="quick-search__submit" type="submit" id="quick-search-small-submit" value="Search" />
</form>
</div>
{
"site": {
"name": "E3 Alliance"
}
}
.quick-search
--iconColor white
--iconColorActive white
--iconBackgroundColor lightGrey
--iconBackgroundColorActive sapphire
--itemTextColor e3Green
--borderColor rgba(white, 0.5)
--placeholderColor rgba(white, 0.5)
&__form
align-items center
display inline-flex
justify-content space-between
width 100%
&__icon
background transparent
display flex
cursor pointer
position relative
left -16px
margin-left -34px
svg
fill var(--iconColor)
&__input-label
@extends $visually-hidden
&__input
@extends $body
border 1px solid var(--borderColor)
border-radius 4px
color white
width 100%
transition all 0.3s
padding 10px 50px 10px 20px
&::placeholder
color var(--placeholderColor)
&__submit
@extends $invisible
No notes defined.