<div class="Searchbar js-searchbar">
<div class="row _centeritems">
<div class="col _grow">
<form action="//sproutsocial.com/insights/" class="u-space-margin-top-0">
<label class="_shortwidth icon _before _search u-color-gray-500" for="s">
<span class="u-text-screenreader">Search</span>
</label>
<input id="s" class="Searchbar-searchInput" name="s" type="text" placeholder="Search Sprout Blog" required>
<button id="submit-search" class="button _link _small Searchbar-submit" style="margin-top: 0; margin-bottom: 0;">
Search
</button>
</form>
</div>
<div class="col _shrink u-space-margin-top-0">
<a href="#category-filter" type="button" class="Searchbar-button" aria-controls="category-filter" style="text-decoration: none;">
<svg class="Searchbar-hamburger" xmlns="http://www.w3.org/2000/svg" width="22" height="18" viewBox="0 0 22 18">
<path d="M0 0h22v4H0zM0 7h22v4H0zM0 14h22v4H0z"/>
</svg>
<span class="Searchbar-filter">Filter</span>
</a>
</div>
</div>
</div>
<div class="Searchbar js-searchbar">
<div class="row _centeritems">
<div class="col _grow">
<form action="//sproutsocial.com/insights/" class="u-space-margin-top-0">
<label class="_shortwidth icon _before _search u-color-gray-500" for="s">
<span class="u-text-screenreader">Search</span>
</label>
<input id="s"
class="Searchbar-searchInput"
name="s"
type="text"
placeholder="Search Sprout Blog"
required
>
<button id="submit-search"
class="button _link _small Searchbar-submit"
style="margin-top: 0; margin-bottom: 0;"
>
Search
</button>
</form>
</div>
<div class="col _shrink u-space-margin-top-0">
<a href="#category-filter" type="button" class="Searchbar-button" aria-controls="category-filter" style="text-decoration: none;">
<svg class="Searchbar-hamburger" xmlns="http://www.w3.org/2000/svg" width="22" height="18" viewBox="0 0 22 18">
<path d="M0 0h22v4H0zM0 7h22v4H0zM0 14h22v4H0z"/>
</svg>
<span class="Searchbar-filter">Filter</span>
</a>
</div>
</div>
</div>
/* No context defined for this component. */
.Searchbar {
padding: Space(300) 0;
border-bottom: Space(100) solid theme-color(background, light);
/* đŸ””SHAME: the utility class isn't strong enough to remove this margin */
.col + .col {
margin-top: 0;
}
}
.Searchbar-button {
display: block;
padding: 0;
margin-left: auto;
color: theme-color(text);
}
.Searchbar-hamburger {
display: none;
height: Space(500);
max-width: 100%;
vertical-align: middle;
fill: theme-color(link);
}
.Searchbar-filter {
display: inline-block;
vertical-align: middle;
}
.Searchbar-right {
text-align: right;
}
.Searchbar-searchInput {
@include form-input;
width: auto;
color: get-color(neutral, 700);
}
.Searchbar-searchInput:invalid:not(:focus):not(:hover) {
background: transparent;
border-color: rgba(0,0,0,0);
box-shadow: rgba(0,0,0,0);
}
.Searchbar-searchInput:valid:not(:focus):not(:hover) {
background: transparent;
border-color: rgba(0,0,0,0);
box-shadow: rgba(0,0,0,0);
}
.Searchbar-searchInput::placeholder {
color: get-color(neutral, 700);
}
.Searchbar-searchIcon::before {
fill: get-color(neutral, 500);
}
/* this exists to hide the search button until */
@keyframes Searchbar-validshow {
from {
opacity: 0;
}
}
:invalid .Searchbar-submit {
@include visuallyhidden;
}
:valid .Searchbar-submit {
animation: Searchbar-validshow $transition-time-500;
}
@media screen and (min-width: 910px) {
.Searchbar {
padding: Space(400) 0;
}
.Searchbar-filter {
margin-left: Space(300);
}
.Searchbar-hamburger {
display: inline-block;
}
}
There are no notes for this item.