<div class="c-searchbox c-searchbox--standalone js-searchbox">
<input type="checkbox" id="searchboxStandaloneTrigger" class="c-searchbox__trigger" />
<label for="searchboxStandaloneTrigger" class="c-searchbox__label">
<span class="o-css-icon o-css-icon--search"></span>
Suche
</label>
<div class="c-searchbox__actor">
<div class="c-searchbox__section">
<span class="c-searchbox__section-title">Suche</span>
<form class="o-form o-form--search">
<div class="grid-x grid-margin-x">
<div class="cell large-8 medium-8 small-8">
<div class="o-form__field">
<div class="o-form__fluid">
<input title="" type="text" class="o-form__input o-form__input--text " placeholder="Bitte ausfüllen" aria-describedby="input-01" required>
</div>
<span class="o-form__status o-form__status--warning">
</span>
<span class="o-form__info" id="input-01"></span>
</div>
</div>
<div class="cell large-4 medium-4 small-4">
<input type="submit" class="o-form__input c-button c-button--full" value="Suchen">
</div>
</div>
<div id="kesearch_filters" class="o-searchfacets">
<div class="grid-x">
<div class="cell small-6">
<fieldset class="o-form__field">
<legend class="u-h5">Facette 1</legend>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_author" id="f1_1">
<label class="o-form__label o-form__label--checkbox" for="f1_1">
Autoren</label>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_nws" id="f1_2">
<label class="o-form__label o-form__label--checkbox" for="f1_2">
News</label>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_pg" id="f1_3">
<label class="o-form__label o-form__label--checkbox" for="f1_3">
Seiten</label>
</fieldset>
</div>
<div class="cell small-6">
<fieldset class="o-form__field">
<legend class="u-h5">Facette 2</legend>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_24h" id="f2_1">
<label class="o-form__label o-form__label--checkbox" for="f2_1">
Letzte 24 Stunden</label>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_7d" id="f2_2">
<label class="o-form__label o-form__label--checkbox" for="f2_2">
Letzte Woche</label>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_30d" id="f2_3">
<label class="o-form__label o-form__label--checkbox" for="f2_3">
Letzter Monat</label>
<input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="idx_old" id="f2_4">
<label class="o-form__label o-form__label--checkbox" for="f2_4">
Älter</label>
</fieldset>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="c-searchbox{% if modifier %} c-searchbox--{{ modifier }}{% endif %} js-searchbox">
<input type="checkbox" id="searchbox{{ modifier|capitalize }}Trigger" class="c-searchbox__trigger"/>
<label for="searchbox{{ modifier|capitalize }}Trigger" class="c-searchbox__label">
<span class="o-css-icon o-css-icon--search"></span>
{{ label }}
</label>
<div class="c-searchbox__actor">
<div class="c-searchbox__section">
<span class="c-searchbox__section-title">{{ label }}</span>
{% render "@template-form-search" %}
</div>
</div>
</div>
{
"modifier": "standalone",
"label": "Suche"
}
class SearchBox {
constructor(element) {
this.element = element;
this.trigger = this.element.getElementsByClassName('c-searchbox__trigger')[0] || undefined;
this.actor = this.element.getElementsByClassName('c-searchbox__actor')[0] || undefined;
this.searchfield = this.actor.getElementsByClassName('o-form__input--search')[0] || undefined;
if (this.trigger && this.actor && this.searchfield) {
this._addEventListeners();
}
}
/**
* Adds handlers to scroll and resizing events to update sticky class and to
* resize the topBarHelper
*
* @todo Check if we can add EventListeners once and extend handlers via API.
*
* @private
*/
_addEventListeners() {
this.trigger.addEventListener('click', () => {
this.searchfield.focus();
});
}
}
export default SearchBox;
.c-searchbox {
&__trigger {
display: none;
}
&__label {
cursor: pointer;
font-size: rem-calc(18);
font-weight: 500;
line-height: 2;
padding-left: 20px;
position: relative;
}
&__actor {
background-color: $color-grey-lightest;
display: none;
left: 120px;
padding: rem-calc(15);
position: absolute;
top: 100%;
width: 50%;
&::before {
border-bottom: 20px solid $color-grey-lightest;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
content: '';
height: 0;
left: 40px;
position: absolute;
top: -20px;
transform: translateX(-50%);
width: 0;
}
}
&__section {
padding: rem-calc(10) 0;
}
&__section-title {
color: inherit;
display: block;
font-size: 1.4em;
font-weight: 500;
line-height: 1;
//border-bottom: rem-calc(2) solid;
margin: 0 0 rem-calc(20) 0;
padding-bottom: rem-calc(8);
position: relative;
// BEN: border-color gets inherited from color BUT you CAN'T do sth. like "border-bottom: rem-calc(2) solid rgba(currentColor, 0.15)"...
// (Short reasoning for the pseudo-element)
&::before {
border-bottom: rem-calc(2) solid;
bottom: 0;
content: '';
left: 0;
opacity: .15;
position: absolute;
right: 0;
top: 0;
}
}
}
// Behaviour
.c-searchbox__trigger:checked ~ .c-searchbox__actor {
display: block;
}
.c-searchbox__trigger:checked ~ .c-searchbox__label {
//text-shadow: 0 0 1px $color-white;
}
// Contexts via modifier
// Standalone (for usage directly in topbar, big screens)
.c-searchbox--standalone {
@include breakpoint(medium down) {
display: none;
}
}
// Integrated (for usage inside of main menu, small screens)
.c-searchbox--integrated {
.c-searchbox__label {
display: none;
}
.c-searchbox__actor {
background-color: $color-grey-lightest;
display: block;
left: auto;
position: relative;
top: 0;
width: auto;
&::before {
display: none;
}
}
.c-searchbox__section {
padding: 0;
}
.c-searchbox__section-title {
display: none;
}
}
There are no notes for this item.