The -searchbarIsFocused 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-searchbar -searchbarClearActive" data-scope-wrapper="box" data-scope="flat">
<div class="sds-searchbar__inner form-control">
<div class="sds-searchbar__inputWrapper">
<span class="sds-searchbar__searchIcon sds-icon sds-icon-search" aria-hidden="true"></span>
<input id="search" type="text" title="Search" placeholder="{Placeholder}" value="{Search Query}" class="sds-searchbar__input form-control" />
</div>
<ul class="list-unstyled sds-searchbar__actions">
<li class="sds-searchbar__clear">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">
<span aria-hidden="true" class="sds-icon sds-icon-cross"></span>
<span class="sr-only">Reset search</span>
</button>
</li>
<li class="sds-searchbar__searchBtn">
<button type="button" class="sds-btn -btnSecondary">
<span class="sds-btn__text">
Rechercher
</span>
</button>
</li>
<li class="sds-searchbar__filters">
<button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="modal" data-target="#suiviTransactionsModalFilters-1">
<span aria-hidden="true" class="sds-icon sds-icon-tablesetup"></span>
<span class="sr-only">Filter</span>
</button>
</li>
</ul>
</div>
</div>
<div class="{{ namespace }}searchbar{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}
data-scope-wrapper="box"
data-scope="{{ scope }}">
<div class="{{ namespace }}searchbar__inner form-control">
<div class="{{ namespace }}searchbar__inputWrapper">
<span class="{{ namespace }}searchbar__searchIcon {{ namespace }}icon {{ namespace }}icon-search" aria-hidden="true"></span>
<input id="{{ id }}" type="text" title="Search" placeholder="{{ placeholder }}" value="{{ value }}" class="{{ namespace }}searchbar__input form-control"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %} />
</div>
<ul class="list-unstyled {{ namespace }}searchbar__actions">
<li class="{{ namespace }}searchbar__clear">
{% render "@icon-btn-secondary--ghost",{
icon: "icon-cross",
disabled: filtersBtnDisabled,
action: "Reset search"
}, true %}
</li>
{% if advancedActions %}
{% if searchBtn %}
<li class="{{ namespace }}searchbar__searchBtn">
{% render "@btn-secondary",searchBtnOptions,true %}
</li>
{% endif %}
{% if tabFilters %}
<li>
{% if inverted %}
{% render "@segmented-buttons--inverted", toggleTabOptions, true %}
{% else %}
{% render "@segmented-buttons", toggleTabOptions, true %}
{% endif %}
</li>
{% endif %}
{% if langSwitcher %}
<li>
{% render "@spk-language-switcher--search-modal",{},true %}
</li>
{% endif %}
{% if filtersActive or filters %}
<li class="{{ namespace }}searchbar__filters">
{% if filtersActive %}
{% render "@icon-btn-secondary--notification-active", {
icon: "icon-tablesetup",
disabled: filtersBtnDisabled,
attrs: filterAttrs,
action: "Filter"
},true %}
{% elseif filters %}
{% render "@icon-btn-secondary", {
icon: "icon-tablesetup",
disabled: filtersBtnDisabled,
attrs: filterAttrs,
action: "Filter"
},true %}
{% endif %}
</li>
{% endif %}
{% endif %}
</ul>
</div>
</div>
export default class SDSSearchbar {
constructor() {
this.searches = document.querySelectorAll(".sds-searchbar");
this.init();
}
init() {
this.searches.forEach((element) => {
this.initSearchControls(element);
});
}
initSearchControls(element) {
const searchInput = element.querySelector('.sds-searchbar__input');
const resetSearchEl = element.querySelector(".sds-searchbar__clear");
const resetSearchBtn = resetSearchEl?.querySelector("button");
const searchSubmitEl = element.querySelector(".sds-searchbar__searchBtn");
if (!searchInput) return;
const toggleButtons = () => {
const hasValue = searchInput.value.trim() !== "";
if (resetSearchEl) {
resetSearchEl.style.display = hasValue ? "inline-flex" : "none";
}
};
toggleButtons();
searchInput.addEventListener("input", toggleButtons);
if (resetSearchBtn) {
resetSearchBtn.addEventListener("click", () => {
searchInput.value = "";
searchInput.focus();
toggleButtons();
});
}
}
}
@use "sass:math";
/* variables specific to current element */
$search-input-height-large: 56px;
.#{$namespace}searchbar {
/* 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($design-tokens, "comp-search-border-radius");
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: map-deep-get($design-tokens, "comp-search-inset-h-l");
padding-right: map-deep-get($design-tokens, "comp-search-inset-h-r");
padding-block: 0;
border-radius: inherit;
border: 0;
@include custom-prop-fallback("height", "comp-search-medium-height");
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");
border-radius: inherit;
}
}
// search__inputWrapper
&__inputWrapper {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: map-deep-get($design-tokens, "comp-search-left-container-inline");
height: 100%;
}
// search__input
&__input {
background-color: transparent !important;
border: none;
@include custom-prop-fallback("color", "comp-search-filled-text-color");
height: inherit;
&::placeholder,
&::-webkit-input-placeholder,
&::-moz-placeholder,
&:-ms-input-placeholder {
@include custom-prop-fallback("color", "comp-search-enabled-text-color");;
}
}
&__actions {
display: flex;
align-items: center;
flex-shrink: 0;
gap: map-deep-get($design-tokens, "comp-search-container-tailing-inline");
}
&__searchIcon {
@include custom-prop-fallback("color", "comp-search-icon-text-color");
width: map-deep-get($design-tokens, "comp-search-icon-size");
height: map-deep-get($design-tokens, "comp-search-icon-size");
}
&__clear,
&__searchBtn {
display: none;
}
/* modifiers */
&.-searchbarSm {
#{$self}__inner {
@include custom-prop-fallback("height", "comp-search-height");
}
}
&.-searchbarIsFocused,
&:has(#{$self}__input:focus-visible) {
#{$self}__inner {
outline-width: map-deep-get($design-tokens, "comp-search-focused-border-width");
outline-color: map-deep-get($design-tokens, "comp-search-focused-border-color");
outline-style: solid;
}
#{$self}__input {
@include custom-prop-fallback-override("comp-search-filled-text-color", "comp-search-focused-typing-text-color");
}
}
&.-searchbarClearActive {
#{$self}__clear,
#{$self}__searchBtn {
display: inline-flex;
}
}
&.-searchbarPerformVisible {
#{$self}__searchBtn {
display: none;
}
}
&[data-scope="sunken"] {
#{$self}__inner {
&::after {
opacity: 0;
}
}
&.-searchbarIsFocused,
&:has(#{$self}__input:focus-visible) {
#{$self}__inner {
&::after {
opacity: 1;
}
}
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}