No notes defined.
<!-- Default -->
<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>
<!-- Without Button -->
<div class="searchField is-required">
<label class="label is-required">Suche</label>
<span class="searchField-field">
<input class="field" type="text" spellcheck="false" required="" aria-required="true" />
</span>
</div>
<!-- Doc Only -->
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">With Button (Default)</h2>
<div class="doc-variant-configuration">
</div>
<div class="doc-variant-configuration">
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" style="display: block;" data-theme="">
<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>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Without Button (e.g. for Live Search)</h2>
<div class="doc-variant-configuration">
</div>
<div class="doc-variant-configuration">
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" style="display: block;" data-theme="">
<div class="searchField is-required">
<label class="label is-required">Suche</label>
<span class="searchField-field">
<input class="field" type="text" spellcheck="false" required="" aria-required="true" />
</span>
</div>
</div>
</section>
<!-- Default -->
<div class="searchField {{#modifier}} {{{.}}}{{/modifier}}{{#if formfieldcombo}} has-button{{/if}}{{#if is-required}} is-required{{/if}}{{#if is-disabled}} is-disabled{{/if}}">
{{> @label}}
<span class="searchField-field">
{{#field}}
{{render '@field' (contextData '@searchfield' this) merge=true}}
{{/field}}
{{#formfieldcombo}}
{{render '@formfieldcombo' (contextData '@searchfield' this) merge=true}}
{{/formfieldcombo}}
</span>
</div>
<!-- Without Button -->
<div class="searchField {{#modifier}} {{{.}}}{{/modifier}}{{#if formfieldcombo}} has-button{{/if}}{{#if is-required}} is-required{{/if}}{{#if is-disabled}} is-disabled{{/if}}">
{{> @label}}
<span class="searchField-field">
{{#field}}
{{render '@field' (contextData '@searchfield' this) merge=true}}
{{/field}}
{{#formfieldcombo}}
{{render '@formfieldcombo' (contextData '@searchfield' this) merge=true}}
{{/formfieldcombo}}
</span>
</div>
<!-- Doc Only -->
{{#variants}}
<section class="doc-variant"{{#id}} id="{{.}}"{{/id}}>
<header class="doc-variant-header">
{{#title}}
<h2 class="doc-variant-title">{{{.}}}</h2>
{{/title}}
<div class="doc-variant-configuration">
{{#if modifiers}}
<ul data-label="Modifier">
{{#modifiers}}
<li>{{{.}}}</li>
{{/modifiers}}
</ul>
{{/if}}
</div>
<div class="doc-variant-configuration">
{{#if themes}}
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
{{#themes}}
<option value="{{{.}}}">{{{.}}}</option>
{{/themes}}
</select>
</label>
{{/if}}
</div>
</header>
<div class="doc-variant-samples" style="display: block;" data-theme="{{theme}}">
{{#samples}}
{{render '@searchfield' (contextData '@searchfield' this) merge=true}}
{{/samples}}
</div>
</section>
{{/variants}}
/* Default */
{
"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"
}
}
}
]
}
}
/* Without Button */
{
"is-required": true,
"formfieldcombo": null,
"label": "Suche",
"field": {
"id": null,
"name": null,
"placeholder": null
}
}
/* Doc Only */
{
"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"
}
}
}
]
},
"variants": [
{
"title": "With Button (Default)",
"themes": [
"default",
"dark"
],
"samples": {
"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"
}
}
}
]
}
}
},
{
"title": "Without Button (e.g. for Live Search)",
"themes": [
"default",
"dark"
],
"samples": {
"is-required": true,
"formfieldcombo": null,
"label": "Suche",
"field": {
"id": null,
"name": null,
"placeholder": null
}
}
}
]
}
@import "_searchField.settings";
@import "_searchField.styles";
[data-theme="dark"] %searchField {
&-field {
&::after {
height: 100%;
}
&:has(.field[disabled]) {
&::before {
border-right-color: $_disabled-color;
}
&::after {
background-image: svg-url($searchField_icon, invert($_ACTION-COLOR--DISABLED));
}
}
}
}
$searchField_icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="{{color}}" stroke-width="2" stroke-linecap="round" xmlns="http://www.w3.org/2000/svg"><circle cx="10.5" cy="10.5" r="7.5"/><path d="M16 16L21 21"/></svg>' !default;
$searchField_icon_size: 24px !default;
%searchField {
@include stack-spacing();
@include field-stacking();
position: relative;
.field,
.label {
@include stack-spacing(0);
}
&-field {
position: relative;
> .field {
padding-left: calc(#{$searchField_icon_size} + #{3 * nth($field_padding, 2)});
}
&::before,
&::after {
content: "";
box-sizing: content-box;
display: block;
width: $searchField_icon_size;
height: calc(100% - #{map.get($field_border-width_map, top)} - #{map.get($field_border-width_map, bottom)});
padding-left: nth($field_padding, 2);
padding-right: nth($field_padding, 2);
position: absolute;
top: 0;
}
&::before {
height: calc(100% - #{2 * nth($field_padding, 1)});
top: 50%;
transform: translateY(-50%);
border-right: var(--bw) solid $_border-color;
}
&::after {
@include tinted-svg($searchField_icon, $size: 50%);
}
}
&.has-button &-field {
&::before,
&::after {
display: none;
}
}
}
.searchField {
@extend %searchField;
&-field {
@extend %searchField-field;
}
}