The -isFocused class is used to give the shadow to the search. It is toggled through javascript. As long as the focus is on the input or one of the buttons contained within the nav, the class should remain present.
The modifier classes are as follow:
<div class="sds-search -clearActive">
<div class="sds-search__inner form-control">
<span class="sds-search__searchIcon sds-icon sds-icon-search" aria-hidden="true"></span>
<input id="" type="text" placeholder="{Placeholder}" value="{Search Query}" class="sds-search__input form-control" />
<div class="sds-search__actions">
<div class="sds-search__clear">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">
<span class="sds-icon sds-icon-cross"></span>
</button>
</div>
<div class="sds-languageSwitcher dropdown -searchModal -filtersActive">
<button type="button" class="sds-btn -btnSecondary" data-search-modal-search-filter-btn="" data-toggle="dropdown" data-display="static" aria-expanded="false">
<span class="sds-btn__text">Refine search</span>
<div class="sds-badge badge -badgePrimary -badgeTonal">
02
</div>
<span class="sds-icon sds-icon-chevrondown"></span>
</button>
<div class="sds-languageSwitcher__menu sds-actionMenu dropdown-menu dropdown-menu-right">
<div class="sds-stackMd">
<div class="row row-xs col-separator">
<div class="col-sm-6">
<fieldset>
<legend>
<span class="dropdown-header">Langue</span>
</legend>
<ul class="list-unstyled">
<li lang="fr">
<label class="sds-actionMenu__item dropdown-item sds-staticInlineSm" href="#">
<input value="radio-value" type="radio" name="radio-dropdown-search-modal" class="sr-only" id="search-modal-radio-lang-fr" checked><span class="sds-radioDot " aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/fr.png" alt="">
</div>
<span>Français</span>
</label>
</li>
<li lang="de">
<label class="sds-actionMenu__item dropdown-item sds-staticInlineSm" href="#">
<input value="radio-value" type="radio" name="radio-dropdown-search-modal" class="sr-only" id="search-modal-radio-lang-fr"><span class="sds-radioDot " aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/de.png" alt="">
</div>
<span>Deutsch</span>
</label>
</li>
<li lang="en">
<label class="sds-actionMenu__item dropdown-item sds-staticInlineSm" href="#">
<input value="radio-value" type="radio" name="radio-dropdown-search-modal" class="sr-only" id="search-modal-radio-lang-fr"><span class="sds-radioDot " aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/uk.png" alt="">
</div>
<span>English</span>
</label>
</li>
</ul>
</fieldset>
</div>
<div class="col-sm-6">
<fieldset>
<legend>
<span class="dropdown-header">Par type</span>
</legend>
<ul class="list-unstyled">
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-1"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-1">Tous</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-2"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-2">Page</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-3">Article Blog</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-3">Info</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-3">Guide</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-3">Document</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-3">Agence</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-3">Événement</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
<li>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="search-modal-filter-checkbox-3"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="search-modal-filter-checkbox-3">Partenaire</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</li>
</ul>
</fieldset>
</div>
</div>
<button type="button" class="sds-btn -btnSecondary -block">
<span class="sds-btn__text">Appliquer</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="{{ namespace }}search{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}>
<div class="{{ namespace }}search__inner form-control">
<span class="{{ namespace }}search__searchIcon {{ namespace }}icon {{ namespace }}icon-search" aria-hidden="true"></span>
<input id="{{ id }}" type="text" placeholder="{{ placeholder }}" value="{{ value }}" class="{{ namespace }}search__input form-control"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %} />
<div class="{{ namespace }}search__actions">
<div class="{{ namespace }}search__clear">
{% render "@icon-btn-secondary--ghost",{
classes: clearBtnClasses,
icon: "icon-cross",
disabled: filtersBtnDisabled
}, true %}
</div>
{% if advancedActions %}
{% if searchBtn %}
<div class="{{ namespace }}search__searchBtn">
{% render "@btn-secondary",searchbtnOptions,true %}
</div>
{% endif %}
{% if langSwitcher %}
{% render "@spk-language-switcher--search-modal",{
classes: ["-filtersActive"]
},true %}
{% endif %}
{% if filtersActive or filters %}
<div class="{{ namespace }}search__filters">
{% if filtersActive %}
{% render "@icon-btn-secondary--notification-active", {
icon: "icon-tablesetup",
disabled: filtersBtnDisabled,
attrs: filterAttrs
},true %}
{% elseif filters %}
{% render "@icon-btn-secondary", {
classes: filterBtnClasses,
icon: "icon-tablesetup",
disabled: filtersBtnDisabled,
attrs: filterAttrs
},true %}
{% endif %}
</div>
{% endif %}
{% endif %}
</div>
</div>
</div>
export default class SDSSearch {
constructor() {
this.focusToggle();
}
focusToggle() {
let searches = document.querySelectorAll(".sds-search");
searches.forEach((element, index) => {
element.querySelectorAll("button").forEach((btnElt, index) => {
btnElt.addEventListener("focus", (e) => {
if (e.currentTarget === document.activeElement) {
e.currentTarget.closest(".sds-search").classList.add("-isFocused")
}
})
btnElt.addEventListener("blur", (e) => {
e.currentTarget.closest(".sds-search").classList.remove("-isFocused")
})
})
element.querySelector(".sds-search__input").addEventListener("blur", (e) => {
e.currentTarget.closest(".sds-search").classList.remove("-isFocused");
})
element.querySelector(".sds-search__input").addEventListener("focus", (e) => {
e.currentTarget.closest(".sds-search").classList.add("-isFocused")
})
})
}
}
@use "sass:math";
/* variables specific to current element */
$search-input-height-large: map-deep-get($token-sizes-unit-map, "56");
.#{$namespace}search {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
flex-grow: 1;
border-radius: map-deep-get($token-radius-map, "32");
position: relative;
z-index: z("zero");
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
}
/* children - write selector in full in comments in order to facilitate search */
// search__inner
&__inner {
display: flex;
align-items: center;
padding-left: $input-padding-x*2;
padding-right: $input-padding-x;
border-radius: inherit;
@include custom-prop-fallback("background-color","sys-color-elevation-surface-flat");
@include custom-prop-fallback("border-color","sys-color-elevation-surface-flat");
border: 0;
height: $search-input-height-large;
position: relative;
&::after {
content: "";
display: block;
position: absolute;
z-index: z("negative");
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: map-deep-get($token-shadow-map, "active");
opacity: 1;
transition: opacity 0.25s linear;
border-radius: inherit;
}
}
// search__input
&__input {
// follows same logic as parent
background-color: transparent !important;
height: auto;
border: none;
border-radius: inherit;
}
&__actions {
display: flex;
align-items: center;
flex-shrink: 0;
@include spacer-component-inline("sm");
}
&__searchIcon {
@include custom-prop-fallback("color","sys-color-text-primary-muted");
}
&__clear,
&__searchBtn {
display: none;
}
/* modifiers */
&.-isFocused.-isFocused {
#{$self}__inner {
@include custom-prop-fallback("background-color","sys-color-elevation-surface-flat");
@include custom-prop-fallback("border-color","sys-color-elevation-surface-flat");
&::after {
opacity: 1;
}
}
}
&.-clearActive {
#{$self}__clear,
#{$self}__searchBtn {
display: inline-flex;
}
}
&.-performSearchVisible {
#{$self}__searchBtn {
display: none;
}
}
&.-inverted {
#{$self}__inner {
@include custom-prop-fallback("background-color","sys-color-elevation-surface-sunken");
&::after {
opacity: 0;
}
}
}
&.-small {
#{$self}__inner {
height: $input-height;
padding-right: $input-padding-x;
}
#{$self}__actions {
//@include spacer-component-inline("xs");
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}