<form id="inline-form" class="inline-form" method="post" enctype="multipart/form-data" accept-charset="utf-8">
<label for="inline-form-input" class="u-hidden-visually">Search term</label>
<div class="inline-form__input">
<div id="inline-form-input-container" class="input">
<div class="input__line"> <input class="input__input" id="inline-form-input" data-input-type="text" type="text" placeholder="Enter search term..." /></div>
</div>
</div>
<div class="inline-form__button">
<button id="inline-form" class="button" type="submit">
<span class="button__icon">
<svg class="icon icon--magnifying-glass" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#magnifying-glass"></use>
</svg> </span>
<span class="button__text u-underline">Search</span>
</button>
</div>
</form>
{% set id = id ??? html_id('inline-form') %}
{% set inputId = input.id ??? ('input' | namespaceInputId(id)) %}
<form {{ html_attributes({
id: id,
class: 'inline-form',
action: action ??? '',
method: method ??? 'post',
enctype: 'multipart/form-data',
'accept-charset': 'utf-8',
}, attrs ?? {}) }}>
{{ csrf|default ? csrfInput({ autocomplete: 'false' }) }}
{{ actionUrl|default ? actionInput(actionUrl) }}
{{ redirectUrl|default ? redirectInput(redirectUrl) }}
{% for name, value in hiddenInputs|default %}
{{ value ? hiddenInput(name, value) }}
{% endfor %}
<label for="{{ inputId }}" class="u-hidden-visually">
{{- label -}}
</label>
<div class="inline-form__input">
{% include '@input' with input | merge({
id: input.id ??? ('input' | namespaceInputId(id)),
}) only %}
</div>
<div class="inline-form__button">
{% include '@button' with button | merge({
text: button.text ??? ('Submit' | t('site')),
type: button.type ??? 'submit',
}) %}
</div>
</form>
{
"id": "inline-form",
"label": "Search term",
"input": {
"type": "text",
"placeholder": "Enter search term..."
},
"button": {
"text": "Search",
"icon": "magnifying-glass"
}
}
@use 'a11y';
.inline-form {
--_inline-form-padding-inline: var(--inline-form-padding-inline, 2.4rem);
--_inline-form-block-size: var(--inline-form-block-size, 7.2rem);
--_inline-form-border-width: var(--inline-form-border-width, 3px);
--_inline-form-button-margin: calc((var(--_inline-form-block-size) - var(--button-min-block-size)) / 2 - var(--_inline-form-border-width));
--a11y-outline-offset: calc(var(--_inline-form-border-width) * -1);
--a11y-outline-color: var(--color-gray-800);
background-color: var(--color-white);
border-color: var(--_inline-form-border-color);
border-radius: var(--inline-form-border-radius, calc(var(--_inline-form-block-size) / 2));
border-style: var(--inline-form-border-style, solid);
border-width: var(--_inline-form-border-width);
box-shadow: var(--box-shadow-xxl);
color: var(--inline-form-color, var(--color-steel-700));
container-name: inline-form;
container-type: inline-size;
display: flex;
flex-wrap: wrap;
min-block-size: var(--_inline-form-block-size);
&:has(.inline-form__input :focus-visible) {
@include a11y.outline();
}
}
.inline-form__input {
--a11y-outline-width: 0;
--input-min-block-size: calc(var(--_inline-form-block-size) - var(--_inline-form-border-width) * 2);
--input-border-width: 0;
--input-padding-inline: var(--_inline-form-padding-inline);
flex-grow: 1;
@container inline-form (inline-size < 40rem) {
--input-padding-inline: calc(var(--_inline-form-padding-inline) * 0.6);
}
}
.inline-form__button {
--button-min-block-size: calc(var(--_inline-form-block-size) - 1rem);
--button-border-radius: calc(var(--_inline-form-block-size) / 2);
align-self: center;
flex-shrink: 0;
margin: calc((var(--_inline-form-block-size) - var(--button-min-block-size)) / 2 - var(--_inline-form-border-width));
@container inline-form (inline-size < 40rem) {
--button-inline-size: 100%;
flex-basis: 70%;
flex-grow: 1;
margin-block-start: 0;
}
@container inline-form (inline-size >= 40rem) {
margin-inline-start: 0;
}
}
No notes defined.