<div class="adjInputButton adjInputButton--wrap">
<input type="search" size="6" class="input input--text adjInputButton__input" />
<button type="submit" class="button button--primary adjInputButton__button">
<i class="prependedIcon fas fa-search"></i>Search </button>
</div>
<link media="all" rel="stylesheet" href="/adjacent-input-button/adjacent-input-button.css" />
<script src="/adjacent-input-button/adjacent-input-button.js"></script>
<div class="adjInputButton adjInputButton--wrap">
<input type="search" size="6" class="input input--text adjInputButton__input" />
<button type="submit" class="button button--primary adjInputButton__button">
{% include "@icon--prepended" with {iconClass: 'fas fa-search', text: "Search"} %}
</button>
</div>
{% import "_macros.twig" as h %}
{{ h.componentAssets('adjacent-input-button') }}
/* No context defined. */
import "./adjacent-input-button.scss";
.adjInputButton {
display: flex;
}
.adjInputButton__input {
flex: var(--input-flex, 1 0 auto);
--inputPaddingBlock: 0.6em; //matches padding from _layout/mixins:button()
}
.adjInputButton__button {
justify-self: var(--button-anchor, flex-end);
--button-padding: 0.78em 2em;
}
.adjInputButton--wrap {
flex-wrap: wrap;
.adjInputButton__input {
--input-flex: 9999 1 var(--minWidth, 150px); //hyper-inflated flex-grow so the input grow but not the button
}
.adjInputButton__button {
flex: 1 0 auto;
}
}
No notes defined.