No notes defined.
<div class="searchBar">
<div class="searchBar-field">
<div class="searchField has-button is-required">
<span class="searchField-field">
<div class="formFieldCombo">
<div class="formFieldCombo-items">
<span class="formFieldCombo-item">
<div class="formField is-required">
<label class="label is-required" for="field-id">Suche</label>
<span class="formField-field">
<input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" required="" aria-required="true" />
</span>
</div>
</span>
<span class="formFieldCombo-item is-supplement">
<button class="button" data-icon-position="right"><svg class="icon is-magnifying-glass">
<use href="../../icons/icons-bold.svg#icon--magnifying-glass" xlink:href="../../icons/icons-bold.svg#icon--magnifying-glass"></use>
</svg>
<span class="button-label">Absenden</span></button>
</span>
</div>
</div>
</span>
</div>
</div>
</div>
<div class="searchBar{{#modifier}} {{.}}{{/modifier}}">
<div class="searchBar-field">
{{#searchfield}}
{{render '@searchfield' (contextData '@searchbar' this) merge=true}}
{{/searchfield}}
</div>
</div>
{
"searchfield": {
"is-required": true,
"formfieldcombo": {
"message": null,
"items": [
{
"fromfield": {
"is-text": true,
"is-required": true,
"label": "Suche",
"message": null
}
},
{
"button": {
"label": "Absenden",
"icon": {
"id": "magnifying-glass",
"position": "right",
"weight": "bold"
}
}
}
]
}
}
}
@import "_searchBar.styles";
%searchBar {
@include stack-spacing(component);
padding-top: var(--sp-large);
padding-bottom: var(--sp-large);
@extend %dark-theme;
@include full-width-backdrop();
.formFieldCombo,
.searchField {
margin-top: -.4rem;
}
.formFieldCombo-item.is-supplement {
margin-left: 0;
}
&:has(label) {
padding-top: calc(var(--sp-large) - .4rem);
.formFieldCombo,
.searchField {
margin-top: 0;
}
}
.formFieldCombo {
@extend %formFieldCombo--on-dark;
}
&-field {
.field {
@extend %searchBar-field-input;
}
}
@include only-on-desktop(){
&-field {
width: get-columns-width(8);
margin-left: auto;
margin-right: auto;
}
}
@include not-on-desktop(){
padding-top: var(--pp);
padding-bottom: var(--pp);
}
}
%searchBar-field-input {
background-color: $_FIELD-BACKGROUND-COLOR;
color: $_FIELD-COLOR;
border-bottom-left-radius: nth($field_border-radius, 1);
border-bottom-right-radius: nth($field_border-radius, 1);
&:not([disabled]) {
border-color: transparent;
}
}
.searchBar {
@extend %searchBar;
&-field {
@extend %searchBar-field;
}
}