<div class="c-searchbar u-shadow-bottom u-z-upside u-size-full u-absolute u-px-base u-py-large " data-search-bar>
<div class="o-container u-px-small@md">
<div class="u-relative">
<input class="u-size-full " type="text" placeholder="Cerca nel sito">
<button class="c-form-action c-btn c-btn--reset u-absolute u-cursor-pointer" type="submit">
<svg class="c-form-icon o-icon o-icon--md">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="c-searchbar u-shadow-bottom u-z-upside u-size-full u-absolute u-px-base u-py-large {% if not open %} is-hidden {% endif %}" data-search-bar>
<div class="o-container u-px-small@md">
{% render "@action--default", {helper: false, label: false, inverse: true, placeholder: 'Cerca nel sito', action: 'search'}, true %}
</div>
</div>
{
"open": true,
"action": "search",
"placeholder": "Ricerca"
}
// Name: searchbar
// Description: searchbar of website
//
// Component: `c-searchbar`
//
// Dependencies: `settings/v7/colors.tokens`
//
// ========================================================================
.c-searchbar {
// Custom properties
// ========================================================================
--searchbar-background: var(--theme-color);
animation: showitem .3s ease-in-out;
// ========================================================================
background-color: var(--searchbar-background);
@include bp(md) {
--searchbar-background: #{$ui-05};
}
[data-color-scheme*="dark"] &{
@include bp(md) {
--searchbar-background: #{$ui-07};
}
}
.c-header--inverse & {
--searchbar-background: var(--background-color);
}
@keyframes showitem {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}
No notes defined.