<form class="c-form c-form--inline js-form-search" action="/">
<div class="o-input o-form__item">
<label for="search" class="is-visually-hidden">
Search
</label>
<input id="search" name="search" type="search" placeholder="Search..." />
</div>
<div class="c-form__button-group">
<button class="o-button o-button--clear o-button--icon" aria-label="Clear">
<span class="o-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M13.2373 12L19 6.23734L17.7627 5L12 10.7627L6.23751 5L5 6.23734L10.7627 12L5 17.7627L6.23751 19L12 13.2373L17.7627 19L19 17.7627L13.2373 12Z" />
</svg>
</span>
</button>
<button class="o-button o-button--search" type="submit" aria-label="Search">
<span class="o-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.63636 10.3636C4.63636 7.20054 7.20055 4.63636 10.3636 4.63636C13.5267 4.63636 16.0909 7.20054 16.0909 10.3636C16.0909 11.9315 15.4609 13.3523 14.4402 14.3865C14.4309 14.395 14.4217 14.4037 14.4127 14.4127C14.4037 14.4217 14.395 14.4308 14.3865 14.4401C13.3523 15.4609 11.9315 16.0909 10.3636 16.0909C7.20055 16.0909 4.63636 13.5267 4.63636 10.3636ZM14.9599 16.117C13.7002 17.1247 12.1023 17.7272 10.3636 17.7272C6.29681 17.7272 3 14.4304 3 10.3636C3 6.29681 6.29681 3 10.3636 3C14.4305 3 17.7273 6.29681 17.7273 10.3636C17.7273 12.1023 17.1247 13.7002 16.117 14.9599L20.7604 19.6032C21.0799 19.9228 21.0799 20.4408 20.7604 20.7603C20.4408 21.0798 19.9228 21.0798 19.6033 20.7603L14.9599 16.117Z" />
</svg>
</span>
</button>
</div>
</form>
{% set base_class = form.base_class|default('c-form') %}
{% if form.fields or form.buttons %}
<form class="{{ bem(base_class, form.element, form.modifiers, form.extra) }}"{{ attributes(form.attributes) }}>
{% for item in form.fields %}
{% include "@" ~ item.type with item.value %}
{% endfor %}
{% if form.buttons %}
<div class="{{ bem(base_class, 'button-group') }}">
{% for item in form.buttons %}
{% include "@" ~ item.type with item.value %}
{% endfor %}
</div>
{% endif %}
</form>
{% endif %}
{
"form": {
"extra": "js-form-search",
"attributes": {
"action": "/"
},
"fields": [
{
"type": "input",
"value": {
"input": {
"type": "search",
"name": "search",
"label": "Search",
"label_hidden": true,
"attributes": {
"placeholder": "Search..."
}
}
}
}
],
"buttons": [
{
"type": "button",
"value": {
"button": {
"attributes": {
"aria-label": "Clear"
},
"icon": {
"name": "close",
"size": "md"
},
"modifiers": [
"clear",
"icon"
]
}
}
},
{
"type": "button",
"value": {
"button": {
"attributes": {
"type": "submit",
"aria-label": "Search"
},
"icon": {
"name": "search",
"size": "md"
},
"modifiers": [
"search"
]
}
}
}
],
"modifiers": "inline"
}
}
/* ------------------------------------*\
$FORMS
\*------------------------------------ */
.c-form {
&__button-group {
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--dotd-space);
}
}
.c-form--inline {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
position: relative;
& > * + * {
margin-top: 0;
}
.o-input {
width: 100%;
}
.o-button {
width: var(--dotd-layout-height-input);
height: var(--dotd-layout-height-input);
&--clear {
display: none;
}
}
input[type="search"]::-webkit-search-cancel-button {
display: none;
}
.c-form__button-group {
border: 0;
border-top-right-radius: var(--dotd-border-radius-input);
border-bottom-right-radius: var(--dotd-border-radius-input);
position: absolute;
top: 0;
right: 0;
gap: 0;
overflow: hidden;
}
}
.c-form--newsletter {
display: flex;
align-items: center;
justify-content: center;
position: relative;
max-width: 320px;
input[type="email"] {
padding-right: calc(#{var(--dotd-icon-xl)});
border-radius: var(--dotd-border-radius-input);
}
button {
position: absolute;
top: 8px;
right: 8px;
text-indent: 9999px;
overflow: hidden;
width: var(--dotd-icon-lg);
height: var(--dotd-icon-lg);
padding: 0;
background-color: var(--dotd-color-background-primary-default);
border-radius: var(--dotd-border-radius-input);
&:hover,
&:focus {
transform: none;
}
&::after {
content: '';
position: absolute;
inset: 0;
margin: auto;
display: block;
width: 100%;
height: 100%;
pointer-events: none;
mask-repeat: no-repeat;
mask-position: center center;
mask-size: var(--dotd-icon) auto;
mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDE1IDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjU5MDk0IDAuMjY1MjA3QzkuOTk2NzYgLTAuMTA5Mzk5IDEwLjYyOTQgLTAuMDg0MDk2MiAxMS4wMDQgMC4zMjE3MjJMMTQuMjM0OCAzLjgyMTY4QzE0LjU4ODQgNC4yMDQ3NCAxNC41ODg0IDQuNzk1MTggMTQuMjM0OCA1LjE3ODI0TDExLjAwNCA4LjY3ODI4QzEwLjYyOTQgOS4wODQxMSA5Ljk5Njc3IDkuMTA5NDEgOS41OTA5NSA4LjczNDgxQzkuMTg1MTMgOC4zNjAyMSA5LjE1OTgyIDcuNzI3NTUgOS41MzQ0MiA3LjMyMTczTDExLjIxNiA1LjQ5OTk3TDEuNSA1LjQ5OTk3QzAuOTQ3NzE0IDUuNDk5OTcgMC40OTk5OTkgNS4wNTIyNSAwLjQ5OTk5OSA0LjQ5OTk3QzAuNDk5OTk5IDMuOTQ3NjggMC45NDc3MTQgMy40OTk5NyAxLjUgMy40OTk5N0wxMS4yMTYgMy40OTk5N0w5LjUzNDQzIDEuNjc4MjlDOS4xNTk4MiAxLjI3MjQ3IDkuMTg1MTMgMC42Mzk4MTMgOS41OTA5NCAwLjI2NTIwN1oiIGZpbGw9IndoaXRlIi8+PC9zdmc+Cg==");
background-color: var(--dotd-color-content-primary-strong);
}
}
br {
display: none;
}
}
No notes defined.