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" disabled>
<span class="sds-icon sds-icon-cross"></span>
</button>
</div>
<div class="sds-search__searchBtn">
<button type="button" class="sds-btn -btnSecondary -isLoading" disabled>
<span class="sds-btn__text">Rechercher</span>
</button>
</div>
<div class="sds-search__filters">
<button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="modal" data-target="#suiviTransactionsModalFilters-1" disabled>
<span class="sds-icon sds-icon-tablesetup"></span>
</button>
</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 {
}
}