<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 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>
/* No context defined for this component. */
.search-form {
display: flex;
align-items: center;
border-width: 0 0 2px;
border-style: solid;
border-color: $search-field-border-color;
background-color: $search-field-background;
grid-area: center;
}
.search-form__input {
@extend %heading-font-bold;
display: block;
outline: none;
border: 0;
background-color: $search-field-background;
width: 100%;
line-height: 1.5em; // don't cut off descenders Chrome/FF
color: $search-field-color;
caret-color: $search-field-caret-color;
appearance: 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: $search-field-xl-font-size;
}
.search-form__input {
padding: $spacer-sm;
}
}
There are no notes for this item.